@charset "UTF-8";
/**
 * common.css 1.1.1
 * Released on: 10,2025
 */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ページ全体に適用 */
body {
  font-family: 'Noto Sans JP';
  font-weight: 400; /* デフォルトは標準 */
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, main {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

img{
    margin: 0px;
    padding: 0px;
}
div{
    margin: 0px;
    padding: 0px;
}
/*--------------------------------
flex
---------------------------------*/
.flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	flex-wrap: wrap; /* 折返し指定 */
}
.flex_list{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	flex-wrap: wrap; /* 折返し指定 */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main {
  display: block;
}

body, html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  font-size: 1em;
}

blockquote, q {
  quotes: none;
}

blockquote:after, blockquote:before {
  content: "";
  content: none;
}

q:after, q:before {
  content: "";
  content: none;
}

a img {
  border: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* iOSでのデフォルトスタイルをリセット */
input[type=button], input[type=text], input[type=tel], input[type=email], input[type=submit], input[type=image], textarea {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
}

input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}

input[type=submit]::focus,
input[type=button]::focus {
  outline-offset: -2px;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
}

button,
input[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked + label {
  background: #5f5f5f;
}

select::-ms-expand {
  display: none;
}

figure img {
  vertical-align: bottom;
}

video {
  -webkit-filter: drop-shadow(0px 0px #000);
          filter: drop-shadow(0px 0px #000);
  outline: none;
  border: none;
}

em {
  font-style: normal;
}

img {
  max-width: 100%;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

a {
  text-decoration: none;
  color: #000;
}

p {
  word-wrap: break-word;
}

p img {
  vertical-align: bottom;
  max-width: 100%;
}

/* MEDIA QUERY */
@media screen and (min-width: 1025px) {
  .lt-tbltNone {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .st-tbltNone {
    display: none !important;
  }
}
@media screen and (min-width: 641px) {
  .lt-spNone {
    display: none !important;
  }
}
@media screen and (max-width: 640px) {
  .st-spNone {
    display: none !important;
  }
}
/***********************************
* HOVER
***********************************/
/*--------------------------
* General
*--------------------------*/
html {
  color: #333333;
}

body {
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

body.fixed {
  width: 100%;
  height: 100%;
  position: fixed;
}

:root {
  font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Noto Sans JP", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 1025px) {
  :root {
    font-size: 0.9375vw;
  }
}
@media screen and (max-width: 1024px) {
  :root {
    font-size: 0.9765625vw;
  }
}
@media screen and (max-width: 768px) {
  :root {
    font-size: 1.3020833333vw;
  }
}
@media screen and (max-width: 640px) {
  :root {
    font-size: 2.6666666667vw;
  }
}

.cmn__inner {
  max-width: calc(144rem);
  width: calc(100% - (10rem * 2));
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1024px) {
  .cmn__inner {
    width: calc(100% - (5rem * 2));
  }
}
@media screen and (max-width: 640px) {
  .cmn__inner {
    width: calc(100% - (3.5rem * 2));
  }
}
/*==============================
  margin-bottom 系
==============================*/
.mb_20 { margin-bottom: 20px; }
.mb_30 { margin-bottom: 30px; }
.mb_40 { margin-bottom: 40px; }
.mb_50 { margin-bottom: 50px; }
.mb_60 { margin-bottom: 60px; }
.mb_70 { margin-bottom: 70px; }
.mb_80 { margin-bottom: 80px; }

/*==============================
  margin-top 系
==============================*/
.mt_20 { margin-top: 20px; }
.mt_30 { margin-top: 30px; }
.mt_40 { margin-top: 40px; }
.mt_50 { margin-top: 50px; }
.mt_60 { margin-top: 60px; }
.mt_70 { margin-top: 70px; }
.mt_80 { margin-top: 80px; }


/*==============================
  wrap
==============================*/
#wrap {
  position: relative;
  max-width: 580px;
  min-width: 320px;
  width: 100%;
  margin: 0 auto; /* ←ここを修正 */
  min-height: 100vh;
  background: #f8e3e7;
  overflow: hidden;
  z-index: 10; /* ←追加（背景より前に出す） */
}



/* スマホは全幅表示に切り替え */
@media screen and (max-width: 640px) {
  #wrap {
    max-width: 100%;
    margin: 0 auto;
  }
}
#wrap.is-top {
  max-width: 100%;
}

@media screen and (min-width: 641px) {
  #wrap:not(.is-top) {
    -webkit-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.25);
  }
}

.igBtn .img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.igBtn .img img {
  width: 2.664rem;
}
@media screen and (max-width: 1024px) {
  .igBtn .img img {
    width: 4rem;
  }
}
@media screen and (max-width: 640px) {
  .igBtn .img img {
    width: 3rem;
  }
}
.igBtn .txt {
  font-family: "futura-pt-condensed", "游ゴシック Medium", YuGothic, YuGothicM, "Noto Sans JP", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 2.1312rem;
  margin-left: 1.332rem;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 640px) {
  .igBtn .txt {
    font-size: 1.6rem;
  }
}

/*--------------------------
* PC SideArea
*--------------------------*/
@media (any-hover: hover) {
  .parco {
    -webkit-transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .parco:hover {
    opacity: 0.65;
  }
}

@media screen and (min-width: 641px) {
  .pcSideArea .parco {
    width: 8.658rem;
    z-index: 1;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .pcSideArea .parco {
    width: 13rem;
  }
}
@media screen and (min-width: 641px) and (max-width: 640px) {
  .pcSideArea .parco {
    width: 8rem;
  }
}
@media screen and (min-width: 641px) {
  .pcSideArea .parco img {
    width: 100%;
  }
  .pcSideArea .igBtn {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 1;
    -webkit-transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .pcSideArea .igBtn:hover {
    opacity: 0.65;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .pcSideArea__top {
    display: none;
    height: 0;
  }
}
@media screen and (min-width: 641px) {
  .pcSideArea__top .parco {
    position: absolute;
    top: min(12vh, 5.994rem);
    left: 3.996rem;
  }
  .pcSideArea__top .igBtn {
    top: min(11.5vh, 5.328rem);
    right: 2.664rem;
  }
  .pcSideArea__main {
	position: fixed;
	top: 0;
	left: 0;
  width: calc(100vw - max(23.75vw, 23.75rem)); /* ← -37.5rem を削除 */
	height: 100%;
	z-index: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	background-image: url(../images/common/bg_image_pc_01.jpg);
	background-size: cover;
  }
  .pcSideArea__main__inner {
    height: 100%;
    padding-top: min(12vh, 6.66rem);
    padding-bottom: min(6vh, 3.33rem);
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .pcSideArea__main {
    width: calc(100vw - min(500px, 50rem));
  }
}
@media screen and (min-width: 641px) and (max-width: 768px) {
  .pcSideArea__main {
    width: calc(100% - min(500px, 50rem));
    left: 0;
  }
}
@media screen and (min-width: 641px) {
  .pcSideArea__main .parco {
    position: absolute;
    top: min(6vh, 2.997rem);
    left: 3.33rem;
  }
  .pcSideArea__main .copy {
    position: absolute;
    right: 3.33rem;
    top: min(4.5vh, 1.998rem);
  }
  .pcSideArea__main .copy img {
    width: 15.318rem;
  }
  .pcSideArea__main .kv {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    position: relative;
  }
  .pcSideArea__main .kv img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    position: absolute;
    left: 0;
    top: 0;
  }
  .pcSideArea__aside {
	position: fixed;
	top: 0;
	right: 0;
	width: max(23.75vw, 23.75rem);
	height: 100%;
	background-color: #f5e8e8;
	background-image: url(../images/common/bg_image_pc_03.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .pcSideArea__aside {
    display: block;
  }
}
@media screen and (min-width: 641px) {
  .pcSideArea__aside__inner {
    height: 100%;
    padding-bottom: min(6vh, 3.33rem);
  }
  .pcSideArea__aside .igBtn {
    left: 2.664rem;
    top: min(6vh, 2.997rem);
    z-index: 99;
  }
  .pcSideArea__aside__menu {
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
  }
  .pcSideArea__aside__menu .guestcity {
    position: relative;
    width: calc(100% - 5.328rem);
    margin: 0 auto min(7vh, 4.662rem);
  }
  .pcSideArea__aside__menu .guestcity__inner {
    position: relative;
    z-index: 1;
    padding-bottom: 2.331rem;
  }
  .pcSideArea__aside__menu .guestcity::before {
    content: "";
    display: block;
    background: #fff;
    border-radius: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - 2.331rem);
  }
}
@media screen and (min-width: 641px) and (max-width: 640px) {
  .pcSideArea__aside__menu .guestcity::before {
    border-radius: 10px;
  }
}
@media screen and (min-width: 641px) {
  .pcSideArea__aside__menu .guestcity .contbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    margin-left: -1.332rem
  }
  .pcSideArea__aside__menu .guestcity .contbox .img {
    width: 9.324rem;
    margin-right: 0.333rem;
  }
  .pcSideArea__aside__menu .guestcity .contbox .ttl {
    margin-bottom: 1.332rem;
  }
  .pcSideArea__aside__menu .guestcity .contbox .ttl img {
    display: block;
    margin-bottom: 0.5em;
  }
  .pcSideArea__aside__menu .guestcity .contbox .ttl span {
    font-family: "zen-kaku-gothic-new", "游ゴシック Medium", YuGothic, YuGothicM, "Noto Sans JP", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    font-weight: 900;
    font-style: normal;
    color: #008A69;
    font-weight: 700;
  }
  .pcSideArea__aside__menu .guestcity .date {
    margin: 0.999rem 0;
    display: block;
  }
  .pcSideArea__aside__menu .guestcity .date img {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .pcSideArea__aside__menu .guestcity .cmn__btn01 {
    position: absolute;
    bottom: -1.998rem;
    right: -1.332rem;
  }
  .pcSideArea__aside__menu .guestcity.item01 .contbox .img {
    margin-right: 0.666rem;
  }
  .pcSideArea__aside__menu .guestcity.item01 .contbox .ttl img {
    width: 6.5268rem;
  }
  .pcSideArea__aside__menu .guestcity.item01 .date img {
    max-width: 14.5188rem;
  }
  .pcSideArea__aside__menu .guestcity.item02 .contbox .ttl img {
    width: 4.8618rem;
  }
  .pcSideArea__aside__menu .guestcity.item02 .date img {
    max-width: 17.4492rem;
  }
  .pcSideArea__aside__menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: min(2vh, 1.332rem);
    padding: 0 3.996rem;
  }
  .pcSideArea__aside__menu ul a {
    font-family: "futura-pt-condensed", "游ゴシック Medium", YuGothic, YuGothicM, "Noto Sans JP", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    font-weight: 500;
    font-style: normal;
    width: 100%;
    color: #E84D15;
	font-size: 20px;
	line-height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .pcSideArea__aside__menu ul a::before {
    content: "";
    width: 0.7992rem;
    height: 0.7992rem;
    background: #E84D15;
    display: block;
    border-radius: 50%;
    margin-right: 0.75em;
    -webkit-transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
}
@media screen and (min-width: 641px) and (any-hover: hover) {
  .pcSideArea__aside__menu ul li:nth-of-type(odd) a:hover {
    color: #008A69;
  }
  .pcSideArea__aside__menu ul li:nth-of-type(odd) a:hover::before {
    background: #008A69;
  }
  .pcSideArea__aside__menu ul li:nth-of-type(even) a:hover {
    color: #694632;
  }
  .pcSideArea__aside__menu ul li:nth-of-type(even) a:hover::before {
    background: #694632;
  }
}
@media screen and (max-width: 640px) {
  .pcSideArea {
    display: none !important;
  }
}
/*--------------------------------------------------------------
# アニメーション
--------------------------------------------------------------*/
/* 初期状態 */
.fade-in-left,
.fade-in-right,
.fade-in-up{
  opacity: 0;
  transform: translateY(50px); /* 下からの場合 */
  transition: transform 1.2s ease-out, opacity 1.2s ease-out; /* 位置と透過を同じ速度でゆっくり */
}

/* 左右 */
.fade-in-left { transform: translateX(-50px); }
.fade-in-right { transform: translateX(50px); }

/* 表示時 */
.fade-in-left.show,
.fade-in-right.show,
.fade-in-up.show {
  transform: translate(0,0); /* 位置を元に戻す */
  opacity: 1;                /* 透過もゆっくり上がる */
}

.hover-img img {
  display: block;
  transition: opacity 0.3s ease; /* スムーズに変化 */
}
.hover-img:hover img {
  opacity: 0.5; /* 透明度50% */
}