@charset "utf-8";

/* ===========================
common
=============================*/

.reason__wrapper {
    line-height: 1.5!important;
    font-family: "Noto Serif JP", serif!important;
    font-style: normal;
    color: #1F1E1C;
}

.article {
    margin: 0 auto;
}

.numberImg {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 60px;
}

.content__title {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 34px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 2.4px;
    margin-bottom: 70px;
}

.content__txt {
    padding: 0 31%;
    color: #000;
    font-family: "Noto Serif JP";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 2.6; /* 227.273% */
    letter-spacing: 1.32px;
    margin-bottom: 112px;
}

.reason__btn {
    width: 30%;
    margin: 0 auto;
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 160%;
    font-weight: 600;
    letter-spacing: 1.68px;
    padding: 35px 0;
    border: 1px solid #1F1E1C;
}

.spBr {
    display: none;
}
.sp_space_reason {
}
.content--04__item01__sp {
    display: none;
}
.content--04__item01__pc {
    display: block;
}


/* ===========================
mainVisual
=============================*/
.reason__wrapper {
    width: 100%;
}
.mainVisual {
    margin-bottom: 180px;
}
/* sp none */
.mainVisual__sp {
    display: none;
}/* sp */


/* ===========================
article main menu
=============================*/

.article .mainTxt .mainTxt01{
    padding: 0 17%;
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    line-height: 3; /* 269.231% */
    letter-spacing: 1.56px;
    margin-bottom: 30px;
}
.article .mainTxt .mainTxt01:last-of-type {
    margin-bottom: 0;
}

.main .main__memu {
    margin-top: 292px;
    background-color: #FBFBFB;
    padding-top: 150px;
}

.main__menu__logo {
    width: 16%;
    display: block;
    margin: 0 auto;
    margin-bottom: 73px
}

.main .article .main__memu .main__title p {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 50px; /* 125% */
    letter-spacing: 2.4px;
}
.main .article .main__memu .main__title .main__title__sub {
    display: block;
    font-family: "Bona Nova";
    font-size: 1.5rem;
    letter-spacing: 1.56px;
    line-height: 3;
    font-weight: 400;
    margin-bottom: 115px;
}

.main__memu__icon {
    padding: 0 24% 250px;
}
.memu__icon__container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 70px 4%;
}

.memu__icon__item01 {
    transition: 0.4s;
}

/* ===========================
main menu hover::
=============================*/
.memu__icon__item01 {
  position: relative;
  display: block;
}
.memu__icon__item01 a {
    transition: all 0.3s ease;
}
.memu__icon__item01 img {
  display: block;
  transition: opacity 0.3s ease;
}

.memu__icon__item01:hover img {
  opacity: 0;
}

/* 共通の疑似要素 */
.memu__icon__item01:hover::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 個別のhover画像 */
.item01--01::before {
  background-image: url(https://www.okamotogarden.co.jp/wp-content/themes/okamoto_temp/img/reason9/menu01_hover.png);
}
.item01--02::before {
  background-image: url(https://www.okamotogarden.co.jp/wp-content/themes/okamoto_temp/img/reason9/menu02_hover.png);
}
.item01--03::before {
  background-image: url(https://www.okamotogarden.co.jp/wp-content/themes/okamoto_temp/img/reason9/menu03_hover.png);
}
.item01--04::before {
  background-image: url(https://www.okamotogarden.co.jp/wp-content/themes/okamoto_temp/img/reason9/menu04_hover.png);
}
.item01--05::before {
  background-image: url(https://www.okamotogarden.co.jp/wp-content/themes/okamoto_temp/img/reason9/menu05_hover.png);
}
.item01--06::before {
  background-image: url(https://www.okamotogarden.co.jp/wp-content/themes/okamoto_temp/img/reason9/menu06_hover.png);
}
.item01--07::before {
  background-image: url(https://www.okamotogarden.co.jp/wp-content/themes/okamoto_temp/img/reason9/menu07_hover.png);
}
.item01--08::before {
  background-image: url(https://www.okamotogarden.co.jp/wp-content/themes/okamoto_temp/img/reason9/menu08_hover.png);
}
.item01--09::before {
  background-image: url(https://www.okamotogarden.co.jp/wp-content/themes/okamoto_temp/img/reason9/menu09_hover.png);
}




/* ===========================
content
=============================*/
.content--01 {
    margin-top: 240px;
}
.content__container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7%;
    margin-bottom: 160px;
    justify-content: center;
}
.content__container .container__item {

}
.content__catch {
    margin-bottom: 140px;
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 180%;
    font-weight: 500;
    letter-spacing: 1.8px;
    margin-bottom: 104px;
}

.reason__btn--01 {
    margin-bottom: 280px;
}
.reason__btn--02 {
    margin-bottom: 236px;
}

/* content--03 */
.content--03 {
    background: #1F1E1C;
    padding-top: 326px ;
    margin-bottom: 163px;
    padding-bottom: 338px;
}
.content--03 .content__title,
.content--03 .content__txt,
.content--03 .reason__btn--03 {
    color: #fff;
}
.content--03 .content__txt {
    margin-bottom: 200px;
}
.content--03 .reason__btn--03 {
    border: 1px solid #fff;
}

/* ===========================
reanson_slider
=============================*/

/* ドットの背景色・アクティブ色カスタマイズ例 */
.slick-dots {
    bottom: -50px; /* ドットの位置調整（お好みで） */
}

.slick-dots li button:before {
    font-size: 14px;      /* ドットのサイズ */
    color: #f3f3f3;          /* 通常時の色 */
    opacity: 1;           /* 不透明に */
}

.slick-dots li.slick-active button:before {
    color: #adadad;       /* アクティブ時の色（お好きな色に変更） */
    opacity: 1;
    font-size: 16px;      /* アクティブ時だけ大きくもできる */
}

/* ドットのボタン背景をカスタムしたい場合（例：丸背景にする場合） */
.slick-dots li button {
    background: transparent;
    border: none;
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 180px;
}

.award {
    margin-bottom: 54px;
}

.award_list {
    padding: 0 26%; 
    margin: 0 auto;
    margin-bottom: 132px;
}
.award_list__item {
    color: #fff;
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1.32px;
    margin-bottom: 22px;
}


.reason__btn--03 {
}

 /* ===========================
content--04以降
=============================*/
.movie__subtitle {
    margin-bottom: 6px;
}
.movie__subtitle::after {
    display: block;
    content: '';
    border-bottom: 1px solid #1F1E1C;
    width: 8%;
    margin: 0 auto;
    padding-bottom: 6px;
}
.movie__subtitle__sub {
    text-align: center;
    font-family: "Bona Nova";
    font-size: 20px;
    line-height: 50px; /* 250% */
    letter-spacing: 1.2px;
    margin-bottom: 52px;
}
.movie video {
    display: block;
    width: 60%;
    margin: 0 auto;
    margin-bottom: 300px;
}

/* content--04__box */
.content--04__box {
    max-width: 1440px;
    padding: 0 10%;
    margin: 0 auto;
    margin-bottom: 177px;
}
.content--04__container {
    display: flex;
    justify-content: center;
    gap: 130px;
    margin-bottom: 180px;
}
.content--04__container .content--04__item01 {
    width: 50%;
}
.content--04__container .content--04__item02 {
    width: 50%;
}
.content--04__container .content--04__item02 .numberImg__b {
    margin-bottom: 70px;
    margin: 0 0 70px;
}

.content--04__item02 .item02__txtBox .item02__txtBox--title {
    font-family: "BIZ UDMincho";
    font-size: 26px;
    line-height: 60px; /* 200% */
    letter-spacing: 1.8px;
}

.content--04__item02 .item02__txtBox .item02__txtBox--title::after {
    display: block;
    content: '';
    border-bottom: 1px solid #1F1E1C;
    width: 155px;
    padding-top: 20px;

}
.content--04__item02 .item02__txtBox .item02__txtBox--txt {
    margin-top: 48px;
    font-family: "Noto Serif JP";
    font-size: 16px;
    line-height: 40px; /* 222.222% */
    letter-spacing: 1.08px;
}

/* お問い合わせ */
.okamoto__logo {
    width: 16%;
    display: block;
    margin: 0 auto 70px;

}
.toiawase__txt {
    padding: 0 26%;
    font-family: "Noto Serif JP";
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: 1.56px;
    margin: 0 auto 112px;

}



 /* ===========================
content--04以降
=============================*/
.content--service {
    margin-top: 301px;
    background-color: #FBFBFB;
    padding: 150px 0 206px;
}

.content__title .main__title__sub {
    display: block;
    font-family: "Bona Nova";
    font-size: 1.5rem;
    letter-spacing: 1.56px;
    line-height: 3;
    font-weight: 400;
    margin-bottom: 115px;
}

.service__container {
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.service__container .service__container--item01 {
    width: 48%;
    margin-bottom: 86px;
}
.item01_sp {
    display: none;
}

.item01_pc {
    display: block;
    margin: 0 auto;
    width: 60%;
}
.item01_pc img {
    margin-bottom: 27px;

}

.item01_pc--txt {
    text-align: center;
    font-family: "BIZ UDMincho";
    font-size: 20px;
    line-height: 50px; /* 250% */
    letter-spacing: 1.2px;
}

 /* ===========================
content--sns
=============================*/


.reason__btn--sns {
    margin-top: 186px;
    margin-bottom: 150px;
}
.snsBox {

}
.sns__insta {
    width: 8%;
    display: block;
    margin: 0 auto;
    margin-bottom: 36px;
}
.sns__txt {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 22px;
    line-height: 50px; /* 227.273% */
    letter-spacing: 1.32px;
    margin-bottom: 88px;
}

.sns__container {
    display: flex;
    justify-content: center;
    gap: 0 80px;
    margin-bottom: 178px;
}


 /* ===========================
black-btn
=============================*/
/* お客様の声 */
.reason__btn--01,

/* ガーデンスタッフの紹介 */
.reason__btn--01,
.reason__btn--02 {
    transition: 0.4s;
}
.reason__btn--01 a,
.reason__btn--02 a {
    font-family: "Noto Serif JP"!important;
}
.reason__btn--01:hover,
.reason__btn--02:hover {
    background-color: #d9e9df;
    opacity: 0.8;
}

/* 受賞歴を見る */
.reason__btn--03 {
    transition: 0.4s;
}
.reason__btn--03 a {
    color: #fff;
    font-family: "Noto Serif JP";
}
.reason__btn--03:hover {
    background-color: #5e5e5e;
    opacity: 0.5;
}

/* お問い合わせ２つ */
.reason__btn--blk {
    background-color: #1F1E1C;
    transition: 0.4s;
}

.reason__btn--blk a {
    font-family: "Noto Serif JP";
    text-decoration: none;
    display: inline-block;
    transition: color 0.4s ease;
}

.reason__btn--blk:hover {
    background-color: #5e5e5e;
    opacity: 0.5;

}
.reason__btn--blk a {
    color: #fff;
}
.l-offer {
    margin-bottom: 0;
}