@charset "UTF-8";
@font-face {
  font-family: 'font01';
  src: url("../font/NotoSansJP-Regular.ttf"); }
@font-face {
  font-family: 'font02';
  src: url("../font/SangBleuOGSans-Regular.ttf"); }
@font-face {
  font-family: 'font03';
  src: url("../font/SangBleuOGSans-RegularItalic.ttf"); }
/* all↓ */
* {
  font-family: "font01";
  font-size: 15px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0.5px; }
  @media (max-width: 1200px) {
    * {
      font-size: 14px;
      line-height: 28px; } }

body {
  background-color: #322b29;
  color: #ffffff; }
  @media (max-width: 630px) {
    body {
      font-sixe: 14px;
      line-height: 28px; } }

a {
  position: relative;
  text-decoration: none; }

a:before, a:after {
  position: absolute;
  z-index: -1;
  display: block;
  content: ""; }

a, a:before, a:after {
  -webkit-transition: all 0.3s;
  transition: all 0.3s; }

.display-pc {
  display: block; }
  @media (max-width: 630px) {
    .display-pc {
      display: none; } }

.display-pc2 {
  display: inline-block; }
  @media (max-width: 630px) {
    .display-pc2 {
      display: none; } }

.display-sp {
  display: none; }
  @media (max-width: 630px) {
    .display-sp {
      display: block; } }

/* ふわっその場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeInAnime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* ふわっ下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/* ふわっ左から */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
/* ふわっ右から */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
.div00 {
  margin-bottom: 100px; }
  @media (max-width: 630px) {
    .div00 {
      margin-bottom: 50px; } }

.div01, .div02 {
  width: 1220px;
  margin: 0 auto; }
  @media (max-width: 1200px) {
    .div01, .div02 {
      width: 90%; } }

.div01 {
  margin-bottom: 100px; }
  @media (max-width: 630px) {
    .div01 {
      margin-bottom: 50px; } }

.div03 {
  display: flex; }
  @media (max-width: 800px) {
    .div03 {
      display: block; } }
  .div03 h3, .div03 p {
    width: 610px; }
    @media (max-width: 630px) {
      .div03 h3, .div03 p {
        width: 100%; } }
  .div03 .div03-con {
    width: 50vw;
    height: 500px;
    overflow: hidden;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%); }
    @media (max-width: 800px) {
      .div03 .div03-con {
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding: 0; } }
    .div03 .div03-con.div03-con2 {
      height: auto; }

.div04 {
  width: 1220px;
  height: 550px;
  margin: 100px auto 0 auto;
  background-color: #c9b59d; }
  @media (max-width: 800px) {
    .div04 {
      width: 90%;
      height: auto;
      margin: auto; } }
  .div04 .div04-inner {
    display: flex;
    padding: 50px; }
    @media (max-width: 800px) {
      .div04 .div04-inner {
        display: block;
        padding: 25px; } }
    .div04 .div04-inner div {
      width: 50%; }
      @media (max-width: 800px) {
        .div04 .div04-inner div {
          width: 100%; } }

.div05 {
  display: flex;
  width: 1220px;
  margin: 0 auto;
  text-align: center;
  justify-content: center; }
  @media (max-width: 800px) {
    .div05 {
      display: block;
      width: 100%; } }
  .div05 .div05-inner {
    width: 510px;
    height: auto;
    padding: 50px; }
    @media (max-width: 800px) {
      .div05 .div05-inner {
        width: 90%;
        margin: 0 auto 50px auto;
        padding: 0; } }
    .div05 .div05-inner:first-of-type {
      border-right: solid 1px #ffffff; }
      @media (max-width: 800px) {
        .div05 .div05-inner:first-of-type {
          border-right: none; } }
    .div05 .div05-inner img {
      margin: 40px 0 30px 0; }
      @media (max-width: 800px) {
        .div05 .div05-inner img {
          margin: 25px 0 15px 0; } }
    .div05 .div05-inner .div05-w {
      background-color: #ffffff;
      border-radius: 10px;
      padding: 40px;
      text-align: left !important; }
      @media (max-width: 800px) {
        .div05 .div05-inner .div05-w {
          padding: 25px; } }
      .div05 .div05-inner .div05-w p {
        color: #322b29; }
        .div05 .div05-inner .div05-w p span {
          display: block;
          font-weight: 600;
          margin-bottom: 10px; }
      .div05 .div05-inner .div05-w.div05-w2 p:first-of-type {
        margin-bottom: 30px;
        border-bottom: solid 1px #322b29;
        padding-bottom: 30px; }
        @media (max-width: 800px) {
          .div05 .div05-inner .div05-w.div05-w2 p:first-of-type {
            margin-bottom: 15px;
            padding-bottom: 15px; } }

.div06 {
  display: flex;
  width: 1220px;
  margin: 100px auto 6px auto; }
  @media (max-width: 800px) {
    .div06 {
      display: block;
      width: 90%;
      margin: 30px auto 20px auto; } }
  .div06 div:first-of-type {
    margin-right: 50px; }
    @media (max-width: 800px) {
      .div06 div:first-of-type {
        margin: 0 0 30px 0; } }
  .div06 .div06-img {
    width: 30%; }
    @media (max-width: 800px) {
      .div06 .div06-img {
        width: 100%; } }
    .div06 .div06-img img {
      margin: -5px 0; }
  .div06 .div06-text {
    width: 60%; }
    @media (max-width: 800px) {
      .div06 .div06-text {
        width: 100%;
        margin-bottom: 50px; } }
    .div06 .div06-text p {
      vertical-align: text-top; }
  .div06 .link01 {
    margin: 0 auto; }

.text01 {
  text-align: center; }

.text02 {
  width: 550px !important;
  margin: 0 0 0 50px; }
  @media (max-width: 800px) {
    .text02 {
      width: 90% !important;
      margin: 20px auto; } }

.text03 {
  margin-top: 60px;
  font-size: 25px;
  line-height: 42px;
  font-weight: 600; }
  @media (max-width: 800px) {
    .text03 {
      margin-top: 0; } }
  .text03:after {
    content: '';
    display: block;
    width: 100px;
    height: 1px;
    margin: 30px 0;
    background-color: #322b29; }
    @media (max-width: 800px) {
      .text03:after {
        margin: 15px 0; } }
  @media (max-width: 800px) {
    .text03 {
      font-size: 20px;
      line-height: 35px; } }

.text04 {
  font-size: 21px;
  line-height: 45px; }
  @media (max-width: 800px) {
    .text04 {
      font-size: 16px;
      line-height: 30px;
      margin-bottom: 20px; } }
  .text04.text04-b {
    font-weight: 600;
    margin-bottom: 40px; }

.text05 {
  font-size: 30px;
  line-height: 60px;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 40px;
  border-bottom: solid 1px #ffffff;
  padding-bottom: 40px; }
  @media (max-width: 800px) {
    .text05 {
      font-size: 25px;
      line-height: 40px;
      margin-bottom: 25px;
      padding-bottom: 25px; } }
  .text05.text05-b {
    margin-bottom: 40px;
    border-bottom: none;
    padding-bottom: 0; }
    @media (max-width: 800px) {
      .text05.text05-b {
        margin-bottom: 25px; } }
  .text05 span {
    font-size: 45px;
    font-family: "font03"; }
    @media (max-width: 800px) {
      .text05 span {
        font-size: 32px; } }

.text06 {
  font-size: 20px;
  line-height: 35px; }
  @media (max-width: 800px) {
    .text06 {
      font-size: 16px;
      line-height: 30px; } }

.text07 {
  font-size: 18px;
  line-height: 30px;
  font-family: "font03"; }
  @media (max-width: 630px) {
    .text07 {
      font-size: 16px;
      line-height: 28px; } }

.h2 {
  display: block;
  margin-bottom: 100px;
  font-size: 45px;
  font-family: "font02"; }
  @media (max-width: 800px) {
    .h2 {
      font-size: 28px;
      margin-bottom: 30px; } }
  .h2 span {
    font-size: 45px;
    font-family: "font02"; }
    @media (max-width: 800px) {
      .h2 span {
        font-size: 28px;
        margin-bottom: 30px; } }
  .h2:after {
    content: '';
    display: block;
    width: auto;
    height: 1px;
    margin: 60px -500% 0 auto;
    background-color: #ffffff; }
    @media (max-width: 800px) {
      .h2:after {
        margin: 20px -500% 0 auto; } }
  .h2.h2-02 {
    text-align: center; }
    .h2.h2-02:after {
      margin: 60px -500% 0 -500px;
      background-color: #322b29; }
      @media (max-width: 800px) {
        .h2.h2-02:after {
          margin: 20px -500% 0 -500px; } }
  .h2.h2-03:after {
    background-color: #322b29; }
  .h2.h2-04 {
    text-align: center; }
    .h2.h2-04:after {
      margin: 60px -500% 0 -500px;
      background-color: #ffffff; }
      @media (max-width: 800px) {
        .h2.h2-04:after {
          margin: 20px -500% 0 -500px; } }

.h3-01 {
  font-family: "font03";
  font-size: 45px;
  line-height: 65px; }
  @media (max-width: 800px) {
    .h3-01 {
      font-size: 22px;
      line-height: 38px; } }
  .h3-01.h3-02 {
    margin: 0 0 50px auto; }
    @media (max-width: 800px) {
      .h3-01.h3-02 {
        margin: 0 0 30px auto; } }
  .h3-01.h3-03 {
    font-family: "font01";
    font-size: 35px;
    margin-top: -50px; }
    @media (max-width: 800px) {
      .h3-01.h3-03 {
        font-size: 20px;
        margin-top: 10px; } }
  .h3-01.h3-04 {
    font-family: "font02";
    margin: 0 0 20px auto; }

.img01 {
  width: 100%;
  height: auto;
  object-fit: cover;
  overflow: hidden; }
  .img01.img01-2 {
    width: 100%;
    max-height: 500px;
    object-position: top;
    object-fit: cover;
    overflow: hidden; }

.img02 {
  display: block;
  width: 450px;
  height: 450px;
  margin: 0 auto; }
  @media (max-width: 1200px) {
    .img02 {
      width: 90%;
      height: auto;
      margin-top: 20px; } }

.logo02 {
  display: block;
  width: 300px;
  height: auto;
  margin: 60px auto 0 50px; }
  @media (max-width: 1200px) {
    .logo02 {
      width: 250px; } }

.link01 {
  display: block;
  width: 325px;
  margin: 60px 0 0 auto; }
  @media (max-width: 800px) {
    .link01 {
      width: 280px;
      margin: 30px 0 0 5%; } }
  .link01:hover {
    opacity: 0.6; }
  .link01.link01-b p:after {
    background-image: url("../img/icon/icon_link_b.png"); }
  .link01 p {
    width: auto;
    font-size: 16px;
    letter-spacing: 1px;
    vertical-align: text-bottom; }
    @media (max-width: 800px) {
      .link01 p {
        font-size: 14px; } }
    .link01 p:after {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background-size: contain;
      margin: 5px 20px 0 0;
      float: right;
      vertical-align: text-bottom;
      background-image: url("../img/icon/icon_link_w.png"); }
  .link01 img {
    width: 325px;
    height: auto;
    object-fit: contain; }
    @media (max-width: 800px) {
      .link01 img {
        width: 280px; } }
  .link01.link01-c {
    width: 425px;
    margin: auto; }
    @media (max-width: 800px) {
      .link01.link01-c {
        width: 300px; } }
    .link01.link01-c p:after {
      background-image: url("../img/icon/icon_link_w.png"); }
    .link01.link01-c img {
      width: 425px; }
      @media (max-width: 800px) {
        .link01.link01-c img {
          width: 300px; } }

.link02 {
  display: block;
  width: 250px;
  padding: 20px 0 0 0;
  margin-left: auto; }
  @media (max-width: 800px) {
    .link02 {
      width: 200px;
      padding: 10px 0 0 0; } }
  .link02:hover {
    opacity: 0.6; }
  .link02 p {
    width: auto;
    font-size: 13px;
    letter-spacing: 1px;
    vertical-align: text-bottom; }
    @media (max-width: 800px) {
      .link02 p {
        font-size: 11px;
        letter-spacing: 0; } }
    .link02 p:after {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background-size: contain;
      margin: 5px 20px 0 0;
      float: right;
      vertical-align: text-bottom;
      background-image: url("../img/icon/icon_link_w.png");
      background-image: url("../img/icon/icon_link_b.png"); }
  .link02 img {
    width: 135px !important;
    height: auto;
    margin-left: auto;
    object-fit: contain; }

.link03 {
  display: block;
  width: 1220px;
  margin: 0 auto;
  border: solid 1px #ffffff;
  padding: 100px 0;
  text-align: center; }
  @media (max-width: 800px) {
    .link03 {
      width: 100%;
      padding: 50px 0; } }
  .link03:hover {
    background-color: rgba(255, 255, 255, 0.2); }

/* all↑ */
/* header↓ */
header .header-all {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("../img/pic/img_main.jpg");
  background-size: cover; }
  @media (max-width: 1200px) {
    header .header-all {
      height: 90vh;
      background-position: 70% 0; } }
  header .header-all .logo01 {
    position: absolute;
    display: block;
    top: 35%;
    right: 0;
    left: 0;
    width: 330px;
    height: auto;
    margin: 0 auto; }
    @media (max-width: 1200px) {
      header .header-all .logo01 {
        top: 42%;
        width: 260px; } }

/* header↑ */
/* article↓ */
article secction {
  display: block;
  padding: 200px 0;
  overflow: hidden; }
  @media (max-width: 1200px) {
    article secction {
      padding: 100px 0; } }
  @media (max-width: 630px) {
    article secction {
      padding: 80px 0; } }
  article secction.secction01 h2, article secction.secction01 h3, article secction.secction01 p {
    color: #ffffff; }
  article secction.secction02 {
    background-color: #ffffff; }
    article secction.secction02 h2, article secction.secction02 h3, article secction.secction02 p {
      color: #322b29; }
  article secction.secction03 {
    background-color: #c9b59d; }
    article secction.secction03 h2, article secction.secction03 h3, article secction.secction03 p {
      color: #322b29; }
  article secction.secction04 {
    width: 100%;
    height: auto;
    padding: 100px 0;
    background-image: url("../img/pic/img_alc.jpg");
    background-size: cover; }
    article secction.secction04 h2, article secction.secction04 h3, article secction.secction04 p {
      color: #322b29; }
    article secction.secction04 .secction04-inner {
      width: 1000px;
      margin: 0 auto;
      padding: 40px 0;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.7); }
      @media (max-width: 1200px) {
        article secction.secction04 .secction04-inner {
          width: 90%; } }
      article secction.secction04 .secction04-inner h3 {
        border-bottom: solid 1px #322b29; }
      article secction.secction04 .secction04-inner > p {
        font-weight: 600;
        margin-bottom: 30px; }
        @media (max-width: 1200px) {
          article secction.secction04 .secction04-inner > p {
            width: 90%;
            margin: 0 auto 30px auto; } }
      article secction.secction04 .secction04-inner a {
        text-align: left;
        margin: auto; }
  article secction .swiper {
    width: 100%;
    height: 100%; }
    article secction .swiper .swiper-slide {
      width: 500px !important; }
      @media (max-width: 800px) {
        article secction .swiper .swiper-slide {
          width: 275px !important; } }
      article secction .swiper .swiper-slide .slider-img {
        width: calc(475px + 25px);
        height: 355px;
        margin: 0 12.5px;
        border-top: solid 1px #322b29;
        border-bottom: solid 1px #322b29; }
        @media (max-width: 800px) {
          article secction .swiper .swiper-slide .slider-img {
            width: calc(250px + 25px);
            height: 180px; } }
        article secction .swiper .swiper-slide .slider-img img {
          width: 475px;
          height: 355px;
          margin: 0 auto;
          border-right: solid 1px #322b29;
          border-left: solid 1px #322b29;
          object-fit: cover; }
          @media (max-width: 800px) {
            article secction .swiper .swiper-slide .slider-img img {
              width: 250px;
              height: 180px; } }
      article secction .swiper .swiper-slide .slider-text {
        width: auto;
        margin: 0 -12.5px 15px -12.5px;
        border-bottom: solid 1px #322b29; }
        article secction .swiper .swiper-slide .slider-text .slider-text-inner {
          display: inline-block;
          width: 440px;
          height: 100px;
          margin: 0 25px -25px 25px;
          border-right: solid 1px #322b29;
          border-left: solid 1px #322b29;
          padding: 20px 15px 35px 20px;
          overflow: hidden;
          text-align: left !important; }
          @media (max-width: 800px) {
            article secction .swiper .swiper-slide .slider-text .slider-text-inner {
              width: 215px;
              height: 80px; } }
    article secction .swiper .link02 {
      verflow: hidden; }
      article secction .swiper .link02 img {
        width: 135px !important;
        height: auto;
        margin-left: auto;
        object-fit: contain;
        float: right; }
        @media (max-width: 800px) {
          article secction .swiper .link02 img {
            width: 120px !important; } }
  article secction .slider2 {
    border-bottom: solid 1px #322b29; }

.swiper-wrapper {
  transition-timing-function: linear !important; }

.slider1, .slider2 {
  width: 100%;
  height: auto;
  overflow: hidden; }

/* article↑ */
/* footer↓ */
footer {
  background-color: #c9b59d; }
  footer h2, footer h3, footer p, footer a {
    color: #322b29; }
  footer a:hover {
    opacity: 0.6; }
  footer .foot-inner {
    width: 1220px;
    margin: 0 auto;
    padding: 100px 0; }
    @media (max-width: 1200px) {
      footer .foot-inner {
        width: 90%;
        padding: 50px 0; } }
    footer .foot-inner .foot01 {
      margin-bottom: 60px; }
      @media (max-width: 1200px) {
        footer .foot-inner .foot01 {
          margin-bottom: 30px; } }
      footer .foot-inner .foot01 img {
        width: 70%;
        height: auto; }
        @media (max-width: 1200px) {
          footer .foot-inner .foot01 img {
            width: 200px; } }
    footer .foot-inner .foot02 ul li {
      display: inline-block;
      margin: 0 100px 10px 0; }
      @media (max-width: 800px) {
        footer .foot-inner .foot02 ul li {
          width: 175px;
          margin: 0 20px 10px 0; } }
      @media (max-width: 800px) {
        footer .foot-inner .foot02 ul li {
          width: 45%;
          margin: 0 10px 0 0; } }
      footer .foot-inner .foot02 ul li a {
        font-family: "font03";
        font-size: 22px; }
        @media (max-width: 800px) {
          footer .foot-inner .foot02 ul li a {
            font-size: 16px; } }
        @media (max-width: 630px) {
          footer .foot-inner .foot02 ul li a {
            font-size: 13px;
            line-height: 15px; } }
    footer .foot-inner .foot03 {
      margin: 60px 0 30px 0; }
      @media (max-width: 800px) {
        footer .foot-inner .foot03 {
          margin: 45px 0 20px 0; } }
    footer .foot-inner .foot04 .foot04-1 {
      display: inline-block;
      vertical-align: middle; }
      footer .foot-inner .foot04 .foot04-1 a {
        display: inline-block; }
        footer .foot-inner .foot04 .foot04-1 a .img-sns {
          width: 30px;
          margin-right: 20px; }
    footer .foot-inner .foot04 .foot04-2 {
      display: inline-block;
      vertical-align: middle; }
      footer .foot-inner .foot04 .foot04-2 a {
        display: inline-block; }
        footer .foot-inner .foot04 .foot04-2 a p {
          color: #888888;
          font-family: "font03";
          font-size: 22px;
          line-height: 18px;
          margin: 0 20px; }
          @media (max-width: 630px) {
            footer .foot-inner .foot04 .foot04-2 a p {
              margin: 0 10px;
              font-size: 18px; } }
          footer .foot-inner .foot04 .foot04-2 a p span {
            display: block;
            color: #888888;
            font-family: "font01"; }
            footer .foot-inner .foot04 .foot04-2 a p span.span2 {
              font-family: "font03"; }
    footer .foot-inner .foot04 .foot04-3 {
      float: right;
      margin-top: -15px; }
      @media (max-width: 630px) {
        footer .foot-inner .foot04 .foot04-3 {
          float: none;
          margin-top: 20px; } }
      footer .foot-inner .foot04 .foot04-3 p {
        font-size: 30px;
        font-family: "font02"; }
        @media (max-width: 630px) {
          footer .foot-inner .foot04 .foot04-3 p {
            font-size: 22px; } }
      footer .foot-inner .foot04 .foot04-3 small {
        color: #322b29; }

/* footer↑ */