@charset "utf-8";

/* ===============================================
ローディング画面
=============================================== */


/* Loading背景画面設定　*/
#splash {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 9000;
  background: #333;
  text-align: center;
  color: #fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


#splash_logo img {
  width: 260px;
}

.splash_active {
  display: none;
}

.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);
  }
}


/* ===============================================
常駐アイコン
=============================================== */

.resident_icon {
  opacity: 0;
  width: 65px;
  height: 200px;
  background: var(--cl_main);
  position: fixed;
  bottom: 125px;
  right: 0;
  z-index: 20;
  border-radius: 10px 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
  transition: all .5s;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}

.resident_icon a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.resident_icon p {
  color: var(--cl_wh);
  writing-mode: vertical-rl;
  position: relative;
  font-size: clamp(14px, 2vw, 16px);
}

.resident_icon img {
  width: clamp(14px, 2vw, 17px);
  height: auto;
  aspect-ratio: 1/1;
}


@media screen and (max-width: 750px) {
  .is_active {
    opacity: 1;
  }
}

/* ===============================================
  見出し
=============================================== */

.p-hdline,
.p-hdlineS {
  line-height: var(--line-height-s);
}

.p-hdline .jp,
.p-hdline .en {
  display: block;
}

.p-hdline .jp {
  font-size: var(--fs-s);
  margin-bottom: 0.5em;
  font-weight: 300;
  color: #828DA0;
}

.p-hdline .en {
  font-family: var(--ff-en);
  font-weight: 300;
}

@media print, screen and (min-width:641px) {
  .p-hdline .en {
    font-size: calc(var(--fs-max) + 0.25rem);
  }
}

@media screen and (max-width:640px) {
  .p-hdline .en {
    font-size: var(--fs-max);
  }
}

.p-hdlineS {
  background-color: #E3E4E6;
  border-left: 1px solid #2A303F;
  padding: 1.5rem 2rem;
  font-weight: 400;
  font-size: var(--fs-2l);
  text-align: left;
}

/* ===============================================
代表あいさつ
=============================================== */
.ms_ttl {
  text-align: left;
}

.ms_ttl h2 {
  display: inline-block;
  font-family: var(--ff_min);
  font-size: clamp(30px, 3.5vw, 40px);
  font-weight: 500;
  margin: 60px 0;
}

.ms_ttl h2::after {
  content: "MESSAGE";
  font-size: clamp(16px, 1.8vw, 20px);
  color: #3b2f1486;
  padding-left: 15px;
}

.ms_ttl h2 span {
  position: relative;
}

.ms_ttl h2 span::after {
  content: "";
  display: inline-block;
  width: 200px;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 6px solid #ddce9e30;
  position: absolute;
  bottom: -20%;
  left: -30%;
  z-index: -1;
}


.ms_ttl h2 span::before {
  content: "";
  display: inline-block;
  width: 100px;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 6px solid #00a6cb30;
  position: absolute;
  bottom: -60%;
  left: -50%;
  z-index: -1;
}


/* ===============================================
ブログ系タイトル
=============================================== */

.info_ttl {
  text-align: left;
}

.info_ttl h2 {
  font-family: var(--ff_en);
  font-size: clamp(50px, 4.8vw, 62px);
  line-height: 1.2;
}

.info_ttl p {
  font-family: var(--ff_min);
}

.view_all a {
  font-size: 20px;
  font-family: var(--ff_en);
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 65px;
}

.view_all a::after {
  content: "";
  display: inline-block;
  background-image: url(../image/top/view_all.svg);
  width: 54px;
  height: 5px;
  background-size: contain;
  background-position: center;
  transition: all .3s;
}

.view_all a:hover::after {
  transform: translateX(15px);
}

@media screen and (max-width: 1200px) {
  .view_all a:hover::after {
    transform: none;
  }
}


@media screen and (max-width: 530px) {
  #info .info_ttl h2 {
    font-size: clamp(35px, 8vw, 45px);
  }
}

/* ===============================================
タイトル　点あしらい
=============================================== */

.pro_ttl h2 {
  display: inline-block;
  position: relative;
  font-family: var(--ff_min);
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: 0.1em;
}

.pro_ttl h2::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--cl_main);
  border-radius: 50%;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

/* ===============================================
タイトル　線あしらい
=============================================== */
.plan_ttl {
  text-align: center;
  margin-top: min(22%, 150px);
}

.plan_ttl h2 {
  display: inline-block;
  position: relative;
  font-family: var(--ff_min);
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 0.1em;
  margin-bottom: 50px;
}

.plan_ttl h2::after {
  content: "";
  display: inline-block;
  width: 55px;
  height: 2px;
  background-color: var(--cl_main);
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

/* ===============================================
犬の十戒
=============================================== */

.ten_ttl h2 {
  position: relative;
  font-family: var(--ff_min);
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: 0.1em;
}

.ten_ttl h2::after {
  content: "";
  display: inline-block;
  width: clamp(120px, 40vw, 150px);
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 6px solid #ddce9e30;
  position: absolute;
  bottom: -30%;
  left: 0;
  z-index: -1;
}

.ten_ttl h2::before {
  content: "";
  display: inline-block;
  width: 75px;
  height: 75px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 6px solid #00a6cb30;
  position: absolute;
  bottom: -20px;
  left: -28px;
  z-index: -1;
}

/* ===============================================
jQueryの動き
=============================================== */


@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUpAnime_mv {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.message_txt_wrap, .beige_bg div, .pro_text, .plan_ttl, .ten_bg img, .mv_txt01, .mv_txt02, .mv_txt03, .mv_txt04, .column_2_wrap, .column_1_wrap, .sp_ttl, .main_flow, .flow_mes_bottom, .sub_box {
  opacity: 0;
}

/* メインビジュアルのテキスト */
.active .mv_txt01 {
  animation: fadeUpAnime_mv 1s forwards 0.5s;
}

.active .mv_txt02 {
  animation: fadeUpAnime_mv 1s forwards 2s;
}

.active .mv_txt03 {
  animation: fadeUpAnime_mv 1s forwards 3.5s;
}

.active .mv_txt04 {
  animation: fadeUpAnime_mv 1s forwards 5s;
}

/* ここまで */

.message_txt_wrap.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards;
}

.beige_bg div.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards 0.3s;
}

.pro_text.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards 0.4s;
}

.plan_ttl.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards 0.4s;
}

.ten_bg img.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards;
}

.column_2_wrap.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards;
}

.sp_ttl.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards;
}

.column_1_wrap.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards;
}

.main_flow.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards;
}

.flow_mes_bottom.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards;
}

.sub_box.fadeUpTrigger {
  animation: fadeUpAnime 1s forwards;
}


/* 順番に現れる */

.list_item li, .plan_list li, .price_list li, #blog .right ul li, .ten_wrap ul li {
  opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/* ===============================================
サブページ　メインビジュアル
=============================================== */

.sub_mv {
  width: 100%;
  height: 370px;
  background-image: url(../image/sub_mv/flow.jpg);
  background-position: 80% 40%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.sub_mv::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: brightness(80%);
}

.sub_mv_ttl {
  width: min(90%, 1200px);
  margin: 0 auto;
}

.sub_mv h1 {
  font-size: clamp(30px, 2.9vw, 40px);
  font-family: var(--ff_min);
  color: var(--cl_wh);
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.sub_mv h2 {
  opacity: 0;
}

/* 遅らせて表示 */

@keyframes delay {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.sub_mv h2.active {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-size: clamp(65px, 8vw, 80px);
  color: #ffffff30;
  font-family: var(--ff_min);
  font-weight: normal;
  display: block;
  animation: delay 3s ease-in forwards;
}

@media screen and (max-width: 1000px) {
  .sub_mv h2.active {
    top: 53%;
  }
}

/* アニメーション */

.wave {
  display: flex;
  overflow: hidden;
  display: none;
}

.wave.active {
  display: block;
}

.wave.active span {
  display: inline-block;
  transform: translateY(105%);
}

.wave.active span:nth-child(1) {
  animation: fadeInText 1s ease 0.1s forwards;
}

.wave.active span:nth-child(2) {
  animation: fadeInText 1s ease 0.2s forwards;
}

.wave.active span:nth-child(3) {
  animation: fadeInText 1s ease 0.3s forwards;
}

.wave.active span:nth-child(4) {
  animation: fadeInText 1s ease 0.4s forwards;
}

.wave.active span:nth-child(5) {
  animation: fadeInText 1s ease 0.5s forwards;
}

.wave.active span:nth-child(6) {
  animation: fadeInText 1s ease 0.6s forwards;
}

.wave.active span:nth-child(7) {
  animation: fadeInText 1s ease 0.7s forwards;
}

.wave.active span:nth-child(8) {
  animation: fadeInText 1s ease 0.8s forwards;
}

.wave.active span:nth-child(9) {
  animation: fadeInText 1s ease 0.9s forwards;
}

@keyframes fadeInText {
  100% {
    transform: translateY(0);
  }
}

/* パンくずリスト */
.pan_list {
  width: min(90%, 1200px);
  margin: 0 auto;
  font-size: 13px;
  color: var(--cl_wh);
  padding: 10px 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.pan_list ul {
  display: flex;
}


.pan_list li:nth-child(1) a {
  display: inline-block;

  color: var(--cl_wh);
  text-decoration: underline;
}

.pan_list li:nth-child(2)::before {
  content: ">";
  padding: 0 8px;
}

/* ===============================================
下層ページリンクボタン
=============================================== */

.subpage_button {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.subpage_button .btn1, .subpage_button .btn2 {
  text-align: center;
  position: relative;
  overflow: hidden;
  height: 250px;
}


.subpage_button .btn1 a, .subpage_button .btn2 a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.subpage_button h3 {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--cl_wh);
  font-size: clamp(23px, 2.3vw, 28px);
  letter-spacing: .1em;
  z-index: 3;
  font-family: var(--ff_min);
}


.subpage_button .btn1::after, .subpage_button .btn2::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  transition: all 1.5s ease;
  filter: brightness(70%);
}

.subpage_button .btn1::after {
  background: url(../image/btn_01.jpg) no-repeat center center;
  background-size: cover;
}

.subpage_button .btn2::after {
  background: url(../image/btn_02.jpg) no-repeat center center;
  background-size: cover;
}

.subpage_button .btn1:hover::after, .subpage_button .btn2:hover::after {
  transform: scale(1.2);
  filter: brightness(70%) blur(2px);
}

@media screen and (max-width: 590px) {
  .subpage_button {
    grid-template-columns: 1fr;
  }
}

/* ===============================================
投稿機能　共通部分
=============================================== */

.pan_list {
  width: min(90%, 1400px);
  margin: 0 auto;
}

#contents-primary {
  width: min(90%, 1400px);
  margin: 0 auto;
}

#contents article {
  display: flex;
  justify-content: space-between;
  gap: 35px;
}

.content {
  width: 75%;
}

.content h3 {
  font-family: var(--ff_min);
  font-size: clamp(27px, 2.8vw, 30px);
}

.post {
  position: relative;
  border-bottom: 1px solid #00000025;
  transition: all .3s;
  display: flex;
  align-items: center;
  padding: 25px 60px 25px 10px;
}

.post a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.detail_wrap .category {
  font-size: clamp(12px, 1.8vw, 14px);
  padding: 0px 10px;
}

/* ページネーション */
.wp-pagenavi {
  margin: 65px 0;
  text-align: center;
}

.wp-pagenavi a {
  margin: 0 10px;
  color: #3b2f1450;
}

.current {
  display: inline-block;
  padding: 10px;
  color: #fff;
  background: var(--cl_main);
  border-radius: 10px;
}

/*------------------------------------------------------------------------------------------------------------------
　img align for wordpress
-------------------------------------------------------------------------------------------------------------------*/

.aligncenter {
  display: block;
  margin: 0 auto;
  padding-bottom: 15px;
  max-width: 100%;
  height: auto;
}

.alignright {
  float: right;
  margin-left: 30px;
  margin-bottom: 15px;
  max-width: 575px !important;
  height: auto;
}

.alignleft {
  float: left;
  margin-right: 30px;
  margin-bottom: 15px;
  max-width: 575px !important;
  height: auto;
}

.aligncenter img, .alignright img, .alignleft img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 1150px) {
  .aligncenter {
    display: block;
    margin: 0 auto;
    padding-bottom: 15px;
    max-width: 100%;
    text-align: center;
  }

  .alignright {
    float: none;
    margin: 0 auto;
    margin-bottom: 0;
    padding-bottom: 15px;
    max-width: 800px !important;
    text-align: center;
    display: block;
  }

  .alignleft {
    float: none;
    margin: 0 auto;
    margin-bottom: 0;
    padding-bottom: 15px;
    max-width: 800px !important;
    text-align: center;
    display: block;
  }
}

.clear .caption {
  text-align: center;
}



/* フロート解除 */
.clear {
  clear: both;
  margin-bottom: 30px;
}

.content .clear:nth-of-type(3) {
  margin-bottom: 0;
}


/* 管理画面　一覧に戻る */
#contents .content .pmove {
  margin-top: 65px;
  text-align: center;
  position: relative;
  transition: all .3s;
}

#contents .content .pmove a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#contents .content .pmove:hover {
  color: var(--cl_main);
}

.sp{
  display: none;
}

@media screen and (max-width: 800px) {
  .sp{
    display: block;
  }
}