@charset "UTF-8";
/* 
swiper
↓↓↓↓↓↓↓↓ ================== */
.swiper {
 overflow: hidden;
 margin-bottom: 80px;
}
.swiper-slide {
 width: 300px;
 max-width: 300px; /* 幅調整 */
 height: auto; /* width: 100%;
    height: 100vh;*/
}
.swiper-slide img {
 width: 100%;
 max-width: 300px; /* 幅調整 */
 height: auto; /* width: 100%;
    height: 100vh;*/
 object-fit: contain;
}
/* 
Button Effect
↓↓↓↓↓↓↓↓ ================== */
a.btn_01 {
 position: relative;
 display: block;
 text-align: center;
 vertical-align: middle;
 text-decoration: none;
 width: 280px;
 margin: 0 auto 180px;
 padding: 1.2rem 0;
 border-radius: 100vh;
 font-family: "Noto Sans JP", sans-serif;
 font-size: 19px;
 font-weight: 500;
 color: #fff;
 border: 2px solid #fff;
 box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
 overflow: hidden;
 z-index: 0;
}
/* 背景レイヤー（通常時） */
a.btn_01::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: linear-gradient(to right, #E3CB2C 0%, #D9572B 100%);
 transition: opacity 0.5s ease;
 z-index: -1;
 opacity: 1;
}
/* 背景レイヤー（ホバー時） */
a.btn_01::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: linear-gradient(to left, #E3CB2C 0%, #D9572B 100%);
 transition: opacity 0.5s ease;
 z-index: -1;
 opacity: 0;
}
a.btn_01:hover::before {
 opacity: 0;
}
a.btn_01:hover::after {
 opacity: 1;
}
/* 
Layout
↓↓↓↓↓↓↓↓ ================== */
.in_SP {
 margin-top: 180px;
 margin-bottom: 180px;
}
.in_txt_sp {
 margin-top: 80px;
 margin-bottom: 80px;
}
@media (max-width: 1480px) {
 .in_SP {
  margin-top: 120px;
  margin-bottom: 120px;
 }
 .in_txt_sp {
  margin-top: 40px;
  margin-bottom: 40px;
 }
}
@media (max-width: 680px) {
 .in_SP {
  margin-top: 80px;
  margin-bottom: 120px;
 }
}
.in_txt_bottom {
 margin-top: -1rem;
 padding-bottom: 2rem;
}
/* ================== */
.in_sp1 {
 margin-top: 180px;
 margin-bottom: 80px;
}
@media (max-width: 1480px) {
 .in_sp1 {
  margin-top: 120px;
 }
}
@media (max-width: 680px) {
 .in_sp1 {
  margin-top: 80px;
  margin-bottom: 60px;
 }
}
/* ================== */
.in_sp2 {
 padding-top: 180px;
 padding-bottom: 180px;
}
@media (max-width: 1480px) {
 .in_sp2 {
  padding-top: 120px;
  padding-bottom: 120px;
 }
}
@media (max-width: 680px) {
 .in_sp2 {
  padding-top: 80px;
  padding-bottom: 120px;
 }
}
/* 
Layout Title
↓↓↓↓↓↓↓↓ ================== */
/*
#top_ttl ↓↓↓↓↓↓↓↓ */
#top_ttl {
 /*img*/ filter: drop-shadow(2px 2px 2px #333);
 color: #ffffff;
 font-family: "Noto Sans JP", sans-serif;
 font-size: calc(30px + 24 * (100vw - 320px) / 600);
 font-weight: 700;
 line-height: 70%;
 text-shadow: 1px 2px 4px #333;
}
#top_ttl .sp {
 margin-bottom: 5%;
}
#top_ttl span {
 font-size: calc(18px + 16 * (100vw - 320px) / 600);
 font-weight: 600;
}
/*
.in_ttl ↓↓↓↓↓↓↓↓ */
.in_ttl {
 font-size: calc(24px + 20 * (100vw - 320px) / 600);
 line-height: 120%;
 font-family: "Noto Sans JP", sans-serif;
 padding-bottom: 3rem;
 text-align: center;
}
.in_ttl span {
 font-size: calc(20px + 18 * (100vw - 320px) / 600);
}
.in_ttl .br {
 display: none;
}
@media (max-width: 680px) {
 .in_ttl {
  padding-bottom: 1.5rem;
  text-align: left;
 }
 .in_ttl .br {
  display: block;
 }
}
/*
.in_ttl_sub ↓↓↓↓↓↓↓↓ */
.in_ttl_sub {
 font-family: "Noto Sans JP", sans-serif;
 font-weight: 600;
 font-size: 24px;
}
.in_ttl_sub .br {
 display: none;
}
@media (max-width: 680px) {
 .in_ttl_sub .br {
  display: block;
 }
}
@media (max-width : 418px) {
 .in_ttl_sub {
  font-size: 22px;
  letter-spacing: 0rem;
 }
}
/* 
Layout Text
↓↓↓↓↓↓↓↓ ================== */
.layout_txt1 {
 margin-top: 30px;
 margin-bottom: 80px;
}
.layout_txt1 p {
 padding: 0.2rem 0;
}
/* 
Layout BOX(right)
↓↓↓↓↓↓↓↓ ================== */
.in_parent_R {
 display: flex;
 justify-content: space-between;
}
.in_child_R {
 width: 48%;
}
.in_child_R p {
 padding-bottom: 0.5rem;
}
@media (max-width: 980px) {
 .in_parent_R {
  flex-direction: column;
 }
 .in_child_R {
  width: 100%;
 }
 .in_child_R:nth-child(2) {
  margin: 80px 0;
 }
}
@media (max-width: 680px) {
 .in_child_R:nth-child(2) {
  margin: 30px 0;
 }
}
/* 
Layout BOX(left)
↓↓↓↓↓↓↓↓ ================== */
.in_parent_L {
 display: flex;
 justify-content: space-between;
}
.in_child_L {
 width: 48%;
}
.in_child_L p {
 padding-bottom: 0.5rem;
}
@media (max-width: 980px) {
 .in_parent_L {
  flex-direction: column-reverse;
 }
 .in_child_L {
  width: 100%;
 }
 .in_child_L:nth-child(1) {
  margin: 80px 0;
 }
}
@media (max-width: 680px) {
 .in_child_L:nth-child(1) {
  margin: 30px 0;
 }
}
/*
inner 2BOX
↓↓↓↓↓↓↓↓ ================== */
.in_parent02 {
 margin-left: auto;
 margin-right: auto;
 width: 780px;
 display: flex;
 justify-content: space-between;
}
.in_child02:nth-child(1) {
 width: 70%;
 padding-right: 50px;
}
.in_child02:nth-child(2) {
 width: 30%;
}
.in_child02 p {
 padding-bottom: 0.5rem;
}
@media (max-width: 980px) {
 .in_parent02 {
  width: 100%;
 }
}
@media (max-width: 680px) {
 .in_parent02 {
  flex-direction: column;
 }
 .in_child02:nth-child(1) {
  width: 100%;
  padding-right: 0px;
 }
 .in_child02:nth-child(2) {
  width: 100%;
 }
}
/*
in_contact
↓↓↓↓↓↓↓↓ ================== */
#in_contact {
 position: relative;
 background-image: url('../img_index/E-01.png');
 background-size: cover;
 background-position: center;
 padding: 40px 0;
 color: white;
 overflow: hidden;
}
#in_contact .overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(73, 42, 17, 0.90);
 z-index: 0;
 pointer-events: none;
}
#in_contact .content {
 width: 680px;
 margin-left: auto;
 margin-right: auto;
 position: relative;
 z-index: 1;
}
#in_contact .content h2 {
 font-size: 1.6rem;
 margin-bottom: 1rem;
}
#in_contact .content p {
 margin-bottom: 1.5rem;
}
@media (max-width: 980px) {
 #in_contact .content {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
 }
}
#in_contact .content .btn {
 width: 60%;
 margin: 0 auto;
 padding: 20px 0px;
 background-color: #ffffff;
 border: 2px solid #ffffff;
 border-radius: 8px;
 text-align: center;
 font-weight: 600;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
}
#in_contact .content .btn a {
 color: #522f12;
}
#in_contact .content .btn:hover {
 background-color: transparent;
 border: 2px solid #fff;
 color: #fff;
 border-radius: 30px;
}
#in_contact .content .btn:hover a {
 color: #fff;
}
@media (max-width: 480px) {
 #in_contact .content .btn {
  width: 74%;
 }
}
/*
inner 4BOX
↓↓↓↓↓↓↓↓ ================== */
.in_parent04 {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.in_child04:nth-child(n+4) {
 margin-top: 24px;
}
.in_child04 {
 width: 32%;
 position: relative;
 overflow: hidden;
}
/* オーバーレイ */
.in_child04::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0);
 transition: background-color 0.3s ease;
 z-index: 1;
 pointer-events: none;
}
/* ホバー時にオーバーレイ表示 */
.in_child04:hover::before {
 background-color: rgba(0, 0, 0, 0.8);
}
/* 画像リンク */
.img-link {
 width: 100%;
 height: auto;
 display: block;
 position: relative;
 z-index: 0;
 overflow: hidden; /* 画像サイズに合わせてオーバーレイを切り取る */
}
/* オーバーレイ */
.img-link::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0);
 transition: background-color 0.3s ease;
 z-index: 1;
 pointer-events: none;
}
/* ホバー時にオーバーレイ表示 */
.img-link:hover::before {
 background-color: rgba(0, 0, 0, 0.8);
}
/* テキスト */
.in_child04 p {
 position: absolute;
 left: -100%;
 top: 50%;
 transform: translateY(-50%);
 transition: left 0.4s ease;
 z-index: 2; /* オーバーレイより上に */
 color: #fff;
 padding-left: 10px;
 white-space: nowrap;
}
/* ホバー時にテキスト表示 */
.in_child04:hover p {
 left: 10px;
}
.in_child04 .br {
 display: none;
}
@media (max-width: 1280px) {
 .in_child04 {
  width: 48%;
 }
 .in_child04:nth-child(n+3) {
  margin-top: 28px;
 }
}
@media (max-width: 680px) {
 .in_child04 {
  font-size: 13px;
 }
 .in_child04 .br {
  display: block;
 }
}
@media (max-width: 480px) {
 .in_child04 {
  width: 100%;
  font-size: 16px;
 }
 .in_child04:nth-child(n+2) {
  margin-top: 28px;
 }
}
/*
inner 8BOX
↓↓↓↓↓↓↓↓ ================== */
.in_parent08 {
 font-family: "Noto Sans JP", sans-serif;
 font-size: 1.1rem;
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-top: 60px;
 margin-bottom: 120px;
}
.in_child08 {
 width: calc((100% - 30px) / 4);
 height: auto;
 display: flex;
 flex-direction: column;
 position: relative;
 overflow: hidden;
 padding: 20px 0px;
 background-color: #ece8df;
 border: 2px solid #ece8df;
 border-radius: 8px;
 text-align: center;
 font-weight: 600;
 color: #333;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
}
.in_child08:nth-child(n+5) {
 margin-top: 24px;
}
.in_child08:hover {
 background-color: transparent;
 border: 2px solid #333;
 color: #333;
 border-radius: 30px;
}
.in_child08_space {
 display: none;
}
@media (max-width: 980px) {
 .in_parent08 {}
 .in_child08 {
  width: calc((100% - 30px) / 3);
 }
 .in_child08:nth-child(n+4) {
  margin-top: 24px;
 }
}
.in_child08_space {
 display: block !important;
 width: calc((100% - 30px) / 3);
 content: "";
}
@media (max-width: 680px) {
 .in_child08 {
  width: calc((100% - 30px) / 2);
 }
 .in_child08:nth-child(n+3) {
  margin-top: 24px;
 }
}
.in_child08_space {
 display: none;
}
@media (max-width: 420px) {
 .in_child08 {
  width: 100%;
 }
 .in_child08:nth-child(n+2) {
  margin-top: 24px;
 }
}
/*
inner BOX
↓↓↓↓↓↓↓↓ ================== */
.in_inner_box_spc {
 padding: 100px 0 150px;
}
.in_BOX_spc {
 margin: 5.5% 0 0;
}
.inner_w_box {
 border-radius: 20px;
 background-color: white;
 opacity: 0.9;
 padding: 50px;
}
@media (max-width : 418px) {
 .inner_w_box {
  padding: 30px;
 }
}
/* 
backgrand（A）
↓↓↓↓↓↓↓↓ ================== */
#bg_A1 {
 background-color: #ffefd9;
 background-image: url("../img_index/bg_A1.png");
 background-position: left top;
 background-repeat: no-repeat;
 padding-top: 100px;
 padding-bottom: 70px;
}
#bg_A2 {
 background-color: #ffefd9;
 background-image: url("../img_index/bg_A2.png");
 background-position: right bottom;
 background-repeat: no-repeat;
 padding-top: 70px;
 padding-bottom: 200px;
 margin-top: 0;
}
@media (max-width: 680px) {
 #bg_A1 {
  padding-bottom: 50px;
 }
 #bg_A2 {
  padding-top: 50px;
  padding-bottom: 120px;
 }
}
/* 
backgrand（color）
↓↓↓↓↓↓↓↓ ================== */
.bg_brown {
 background: #74512D;
}