@charset "UTF-8"; 

/* next.cssの記述を一部流用・上書き変更 */

#life.index .aboutArea {padding-bottom:3em;}
#life.index .iconsArea {margin-block:5em 1em; padding-block:0;}
#life.index .iconsArea .lifeIcons {justify-content:flex-end;}
#life.index .js-modal-button::before,
#life.index .js-modal-button::after {all:unset;}

.p-annual-events__slider {overflow:hidden;}
.p-annual-events__slider img {max-height:45vw;}
.p-annual-events__slider-preview {display:flex; flex-wrap:wrap; gap:20px 5px;}
.p-annual-events__slider-preview img {height:200px;}

.p-annual-events__quarter.-spring {--quarter-bg: linear-gradient(90deg, #E8F6EE 0%, #E6F4F3 100%); --label-color: #7CCDBD;} 
.p-annual-events__quarter.-summer {--quarter-bg: linear-gradient(90deg, #EAF0F8 0%, #EDEDF7 100%); --label-color: #A1A2D3;} 
.p-annual-events__quarter.-autumn {--quarter-bg: linear-gradient(90deg, #F8EDF7 0%, #F9EDF7 100%); --label-color: #E09DDA;} 
.p-annual-events__quarter.-winter {--quarter-bg: linear-gradient(90deg, #FBEAE6 0%, #FCE8ED 100%); --label-color: #ED7C7C; margin-bottom: 80px;} 
.-spring .p-annual-events__inner::before {content: "SPRING";}
.-summer .p-annual-events__inner::before {content: "SUMMER";}
.-autumn .p-annual-events__inner::before {content: "AUTUMN";}
.-winter .p-annual-events__inner::before {content: "WINTER";}
.p-annual-events__month.-april {--month-bg: #8ED3AB;}
.p-annual-events__month.-may {--month-bg: #7CCDBD;}
.p-annual-events__month.-june {--month-bg: #7CC1CD;}
.p-annual-events__month.-july {--month-bg: #95B3D9;} 
.p-annual-events__month.-august {--month-bg: #A1A2D3;} 
.p-annual-events__month.-september {--month-bg: #AE96D8;} 
.p-annual-events__month.-october {--month-bg: #D5A7E0;}
.p-annual-events__month.-november {--month-bg: #E09DDA;}
.p-annual-events__month.-december {--month-bg: #EE9ECA;}
.p-annual-events__month.-january {--month-bg: #F28BA5;}
.p-annual-events__month.-february {--month-bg: #ED7C7C;}
.p-annual-events__month.-march {--month-bg: #EA987B;}

.p-annual-events__quarter {
  position: relative;
  margin-top: 4rem;
  padding-top: 2rem;
}

.p-annual-events__quarter + .p-annual-events__quarter {
  margin-top: 8rem;
}

.p-annual-events__quarter:before {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 60%;
  height: min(490px, 100%);
  background: var(--quarter-bg);
}

.p-annual-events__quarter:is(.-spring, .-autumn):before {right: 0;}
.p-annual-events__quarter:is(.-summer, .-winter):before {left: 0;}

.p-annual-events__inner {
  position: relative;
  display: grid;
  gap: 2rem;
  max-width: 1000px; 
  margin-inline: auto;
  container-type: inline-size;
}

@media screen and (max-width: 1023px) {
  .p-annual-events__inner {
    width: auto; 
    margin-inline: auto;
    padding-inline: 27px;
  }
}

.p-annual-events__inner:before {
  position: absolute;
  top: 0;
  display: block;
  translate: 0 -60%;
  line-height: .8;
  font-size: clamp(6.2rem,16cqw,12rem);
  font-weight: 800;
  color: #fff;
  -webkit-text-stroke: 3px var(--label-color);
  text-stroke: 3px var(--label-color);
  paint-order: stroke fill;
  mix-blend-mode: multiply;
  opacity: .3;
}

.p-annual-events__body {
  display: flex;
  gap: 2rem;
  container-type: inline-size;
}

.p-annual-events__month {
  --month-badge-width: 100px;
  position: relative;
  flex-grow: 1;
  max-width: 36%;
}

.p-annual-events__month:not(:last-child):before {
  content: "";
  position: absolute;
  border: #6A8396 dotted;
  opacity: .5;
}

#life.index .p-annual-events__month .month {
  justify-content: center;
  width: var(--month-badge-width);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--month-bg);
  line-height: 1;
  font-size: min(5.5rem, 12cqw);
  font-weight: 700;
  color: #fff;
}

#life.index .p-annual-events__month .month span {
  padding-block: .2em 1em;
  line-height: 1.5;
  font-size: 1rem;
  letter-spacing: .04em;
}

#life.index .p-annual-events__month .month:after {
  content: unset;
}

.p-annual-events__month li {
  padding-left: 1em;
}

.p-annual-events__month li > :first-child:is(.all,.bridal,.hotel,.airline,.english,.multiple) {
  margin-left: -1em;
}
.p-annual-events__month li .multiple {
  display: inline;
  margin: 0 .4em 0 0;
}

[class*="p-annual-events__pics"] {
  position: relative; 
}

@media (min-width: 1000px) {
  .p-annual-events__inner {
    align-items: start;
  }
  
  :is(.-spring, .-autumn) .p-annual-events__inner {
    grid-template-columns: 66% 1fr;
    grid-template-rows: auto 1fr;
  }

  :is(.-summer, .-winter) .p-annual-events__inner {
    grid-template-columns: 1fr 66%;
    grid-template-rows: auto 1fr;
  }
  
  :is(.-spring, .-autumn) .p-annual-events__inner::before {right: 0;}
  :is(.-summer, .-winter) .p-annual-events__inner::before {left: 0;}

  :is(.-spring, .-autumn) .p-annual-events__picsA {grid-column: 2/3; grid-row: 1/3;} 
  :is(.-spring, .-autumn) .p-annual-events__picsB {grid-column: 1/2; grid-row: 2/3;} 
  :is(.-summer, .-winter) .p-annual-events__picsA {grid-column: 1/2; grid-row: 1/3;} 
  :is(.-summer, .-winter) .p-annual-events__picsB {grid-column: 2/3; grid-row: 2/3;} 
  :is(.-summer, .-winter) .p-annual-events__body {grid-column: 2/3;}
}

@media not (min-width: 1000px) {
  .p-annual-events__inner {
    max-width: 700px;
  }

  :is(.-spring, .-autumn) .p-annual-events__inner::before {right: 2rem;}
  :is(.-summer, .-winter) .p-annual-events__inner::before {left: 2rem;}
  
  [class*="p-annual-events__pics"] {margin-top:4cqw;}
}


@media (min-width: 660px) {
  .p-annual-events__month:not(:last-child):before {
    left: 110px;
    top: 50px;
    width: calc(100% - 110px);
    border-width: 6px 0 0;
  }

  .p-annual-events__month .month {
    margin-right: 0!important;
  }

  .p-annual-events__month dd {
    margin-top: 1rem;
  }
}
@media not (min-width: 660px) {

  .p-annual-events__inner {
    max-width: 500px;
  }

  .p-annual-events__body {
    display: block;
  }

  .p-annual-events__month {
    --month-badge-width: min(100px, 20vw);
    display: grid;
    grid-template-columns: auto 1fr;
    max-width: 100%;
  }

  .p-annual-events__month:not(:last-child) {
    padding-bottom: 3.5rem;
  }

  .p-annual-events__month:not(:last-child):before {
    left: calc(var(--month-badge-width) / 2 - 1.2rem);
    top: calc(var(--month-badge-width) + 5px);
    height: calc(100% - var(--month-badge-width) - 10px);
    border-width: 0 0 0 6px;
  }

  .p-annual-events__month .month {
    margin-right: 1rem!important;
    translate: -1rem 0;
  }
} 


[class*="p-annual-events__pics"] > * {
  position: absolute; 
  translate: -50% -50%; 
  width: 0;
}

[class*="p-annual-events__pics"] [class^="_pic"] {
  display: block; 
  box-shadow: .8cqw .8cqw 0 #0003;
}

[class*="p-annual-events__pics"] a[class^="_pic"] img {
  width: 100%;
}

:where([class*="p-annual-events__pics"]) a[class^="_pic"]::after,
#life.index .js-modal-button::after {
  content: ""; 
  display: block; 
  width: min(40px,7vw); 
  aspect-ratio: 1; 
  position: absolute; 
  right: 0; 
  bottom: 0; 
  translate: -30% -30%; 
  background: url('data:image/svg+xml;charset=UTF-8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="39" height="39" rx="19.5" fill="white" fill-opacity="0.85" stroke="%23094067"/><path d="M15.8457 13L25.8457 20L15.8457 27V13Z" fill="%23094067"/></svg>') no-repeat 50% 50% / contain;
}

.js-modal-button[data-video-id] {
  cursor: pointer;
}

/* 位置調整用ガイド、公開時はコメントアウト 
[class*="p-annual-events__pics"] {background:#f001;}
[class*="p-annual-events__pics"]::before {content:""; position:absolute; left:33.3%; top:0; width:33.3%; height:100%; border:#f004 solid; border-width:0 1px; z-index:5;}
[class*="p-annual-events__pics"]::after {content:""; position:absolute; left:0; top:33.3%; width:100%; height:33.3%; border:#f004 solid; border-width:1px 0; z-index:5;}
*/

.-spring .p-annual-events__picsB ._pic1 {width:83%; left:51%; top:48%;}
.-spring .p-annual-events__picsB ._deco1 {width:9%; left:8%; top:6%;}
.-spring .p-annual-events__picsB ._sub1 {width:16%; left:2%; top:80%;}

.-summer .p-annual-events__picsB ._pic1 {width:36%; left:23%; top:30%; rotate:-1.08deg;}
.-summer .p-annual-events__picsB ._pic1::after {rotate:1.08deg;}
.-summer .p-annual-events__picsB ._pic2 {width:38%; left:32%; top:80%; rotate:2.38deg;}
.-summer .p-annual-events__picsB ._pic2::after {rotate:-2.38deg;}
.-summer .p-annual-events__picsB ._pic3 {width:42%; left:75%; top:60%; rotate:-1.94deg;}
.-summer .p-annual-events__picsB ._pic3::after {rotate:1.94deg;}
.-summer .p-annual-events__picsB ._deco1 {width:3%; left:51%; top:33%;}
.-summer .p-annual-events__picsB ._sub1 {width:20%; left:85%; top:11%;}

.-autumn .p-annual-events__picsB ._pic1 {width:33%; left:15%; top:18%; rotate:-2.7deg;}
.-autumn .p-annual-events__picsB ._pic1::after {rotate:1.08deg;}
.-autumn .p-annual-events__picsB ._pic2 {width:48%; left:60%; top:30%; rotate:2deg;}
.-autumn .p-annual-events__picsB ._pic3 {width:30%; left:15%; top:65%; rotate:-2.48deg; z-index:2;}
.-autumn .p-annual-events__picsB ._pic4 {width:28%; left:40%; top:85%; rotate:-1.89deg;}
.-autumn .p-annual-events__picsB ._pic5 {width:35%; left:76%; top:75%; rotate:.54deg;}
.-autumn .p-annual-events__picsB ._deco1 {width:8%; left:86%; top:9%;}
.-autumn .p-annual-events__picsB ._deco2 {width:5%; left:29%; top:41%;}
.-autumn .p-annual-events__picsB ._deco3 {width:4.5%; left:90%; top:50%;}
.-autumn .p-annual-events__picsB ._deco4 {width:3.5%; left:18%; top:87%;}

.-winter .p-annual-events__picsB ._pic1 {width:43%; left:35%; top:30%; rotate:2.27deg;}
.-winter .p-annual-events__picsB ._pic1::after {rotate:-2.27deg;}
.-winter .p-annual-events__picsB ._pic2 {width:25%; left:17%; top:75%; rotate:-2.98deg;}
.-winter .p-annual-events__picsB ._pic3 {width:30%; left:80%; top:20%; rotate:-1.3deg;}
.-winter .p-annual-events__picsB ._pic4 {width:30%; left:85%; top:66%; rotate:2.7deg;}
.-winter .p-annual-events__picsB ._pic4::after {rotate:-2.7deg;}
.-winter .p-annual-events__picsB ._deco1 {width:8%; left:55%; top:-5%;}
.-winter .p-annual-events__picsB ._deco2 {width:4%; left:3%; top:43%;}
.-winter .p-annual-events__picsB ._sub1 {width:18%; left:60%; top:85%;}

@media (min-width: 1000px) {
  .-spring .p-annual-events__picsA {height:60cqw;}
  .-spring .p-annual-events__picsB {height:32cqw;}
  .-spring .p-annual-events__picsA ._pic1 {width:55%; left:24%; top:14%; rotate:-2.64deg;}
  .-spring .p-annual-events__picsA ._pic2 {width:55%; left:73%; top:30%; rotate:2.35deg;}
  .-spring .p-annual-events__picsA ._pic3 {width:82%; left:36%; top:63%; rotate:2deg; z-index:2;}
  .-spring .p-annual-events__picsA ._pic4 {width:63%; left:70%; top:90%; rotate:-3.3deg;}
  .-spring .p-annual-events__picsA ._deco1 {width:10%; right:5%; top:12%;}
  .-spring .p-annual-events__picsA ._deco2 {width:5%; left:30%; top:35%;}
  .-spring .p-annual-events__picsA ._deco3 {width:15%; left:9%; top:43%;}
  .-spring .p-annual-events__picsA ._deco4 {width:9%; right:-2%; top:73%;}
  .-spring .p-annual-events__picsA ._sub1 {width:37%; left:15%; top:90%;}

  .-summer .p-annual-events__picsA {height:68cqw;}
  .-summer .p-annual-events__picsB {height:40cqw;}
  .-summer .p-annual-events__picsA ._pic1 {width:52%; left:28%; top:17%; rotate:2.24deg;}
  .-summer .p-annual-events__picsA ._pic2 {width:74%; left:63%; top:45%; rotate:-1.56deg; z-index:2;}
  .-summer .p-annual-events__picsA ._pic2::after {rotate:1.56deg;}
  .-summer .p-annual-events__picsA ._pic3 {width:58%; left:28%; top:66%; rotate:-.94deg;}
  .-summer .p-annual-events__picsA ._pic4 {width:75%; left:58%; top:88%; rotate:1.68deg;}
  .-summer .p-annual-events__picsA ._deco1 {width:16%; left:68%; top:26%;}
  .-summer .p-annual-events__picsA ._deco2 {width:5%; left:5%; top:34%;}
  .-summer .p-annual-events__picsA ._deco3 {width:8%; left:5%; top:79%;}
  .-summer .p-annual-events__picsA ._deco4 {width:7%; left:14%; top:91%;}
  .-summer .p-annual-events__picsA ._sub1 {width:24%; left:88%; top:12%;}
  
  .-autumn .p-annual-events__picsA {height:73cqw;}
  .-autumn .p-annual-events__picsB {height:45cqw;}
  .-autumn .p-annual-events__picsA ._pic1 {width:63%; left:34%; top:17%; rotate:-2.93deg; z-index:2;}
  .-autumn .p-annual-events__picsA ._pic1::after {rotate:2.93deg;}
  .-autumn .p-annual-events__picsA ._pic2 {width:42%; left:16%; top:50%; rotate:-3.72deg;}
  .-autumn .p-annual-events__picsA ._pic3 {width:55%; left:73%; top:45%; rotate:3.56deg;}
  .-autumn .p-annual-events__picsA ._pic4 {width:93%; left:53%; top:80%; rotate:-.03deg;}
  .-autumn .p-annual-events__picsA ._pic4::after {rotate:.03deg;}
  .-autumn .p-annual-events__picsA ._pic5 {width:93%; left:53%; top:80%; rotate:-.03deg;}
  .-autumn .p-annual-events__picsA ._deco1 {width:4%; left:75%; top:12%;}
  .-autumn .p-annual-events__picsA ._deco2 {width:6%; left:86%; top:23%;}
  .-autumn .p-annual-events__picsA ._deco3 {width:9%; left:40%; top:37%;}
  .-autumn .p-annual-events__picsA ._sub1 {width:26%; left:0%; top:96%;}

  .-winter .p-annual-events__picsA {height:70cqw;}
  .-winter .p-annual-events__picsB {height:32cqw;}
  .-winter .p-annual-events__picsA ._pic1 {width:63%; left:50%; top:14%; rotate:-1.93deg;}
  .-winter .p-annual-events__picsA ._pic1::after {rotate:1.93deg;}
  .-winter .p-annual-events__picsA ._pic2 {width:60%; left:28%; top:38%; rotate:3.17deg;}
  .-winter .p-annual-events__picsA ._pic2::after {rotate:-3.17deg;}
  .-winter .p-annual-events__picsA ._pic3 {width:60%; left:60%; top:65%; rotate:-3.39deg;}
  .-winter .p-annual-events__picsA ._pic4 {width:70%; left:33%; top:86%; rotate:-.03deg;}
  .-winter .p-annual-events__picsA ._pic5 {width:93%; left:53%; top:80%; rotate:-.03deg;}
  .-winter .p-annual-events__picsA ._deco1 {width:10%; left:70%; top:33%;}
  .-winter .p-annual-events__picsA ._deco2 {width:10%; left:86%; top:50%;}
  .-winter .p-annual-events__picsA ._deco3 {width:5%; left:10%; top:70%;}
  .-winter .p-annual-events__picsA ._sub1 {width:38%; left:90%; top:94%;}
}
@media not (min-width: 1000px) {
  /* AブロックのSP対応：
        1) 1000px以上の位置・サイズをコピー
        2) 要素の幅を約半分（よりほんの少し大きめ）に
        3) 重なりや均等具合を個別調整、.picsAの高さを微調整（大きく）
     Bブロックは heightを1.5倍に */
  .-spring .p-annual-events__picsA {height:65cqw;}
  .-spring .p-annual-events__picsB {height:48cqw;}
  .-spring .p-annual-events__picsA ._pic1 {width:29%; left:24%; top:14%; rotate:-2.64deg;}
  .-spring .p-annual-events__picsA ._pic2 {width:29%; left:73%; top:30%; rotate:2.35deg;}
  .-spring .p-annual-events__picsA ._pic3 {width:44%; left:36%; top:63%; rotate:2deg; z-index:2;}
  .-spring .p-annual-events__picsA ._pic4 {width:33%; left:70%; top:90%; rotate:-3.3deg;}
  .-spring .p-annual-events__picsA ._deco1 {width:5%; right:2%; top:7%;}
  .-spring .p-annual-events__picsA ._deco2 {width:2.5%; left:46%; top:30%;}
  .-spring .p-annual-events__picsA ._deco3 {width:7.5%; left:9%; top:43%;}
  .-spring .p-annual-events__picsA ._deco4 {width:4.5%; right:-2%; top:73%;}
  .-spring .p-annual-events__picsA ._sub1 {width:18.5%; left:15%; top:90%; z-index:2;}

  .-summer .p-annual-events__picsA {height:68cqw;}
  .-summer .p-annual-events__picsB {height:60cqw;}
  .-summer .p-annual-events__picsA ._pic1 {width:26%; left:28%; top:17%; rotate:2.24deg;}
  .-summer .p-annual-events__picsA ._pic2 {width:37%; left:63%; top:43%; rotate:-1.56deg;}
  .-summer .p-annual-events__picsA ._pic2::after {rotate:1.56deg;}
  .-summer .p-annual-events__picsA ._pic3 {width:29%; left:32%; top:68%; rotate:-.94deg; z-index:2;}
  .-summer .p-annual-events__picsA ._pic4 {width:37.5%; left:68%; top:88%; rotate:1.68deg;}
  .-summer .p-annual-events__picsA ._deco1 {width:8%; left:68%; top:12%;}
  .-summer .p-annual-events__picsA ._deco2 {width:2.5%; left:10%; top:37%;}
  .-summer .p-annual-events__picsA ._deco3 {width:4%; left:15%; top:88%;}
  .-summer .p-annual-events__picsA ._deco4 {width:3.5%; left:44%; top:94%;}
  .-summer .p-annual-events__picsA ._sub1 {width:12%; left:88%; top:12%;}
  .-summer .p-annual-events__picsB ._sub1 {left:65%; top:13%;}
  
  .-autumn .p-annual-events__picsA {height:73cqw;}
  .-autumn .p-annual-events__picsB {height:67.5cqw;}
  .-autumn .p-annual-events__picsA ._pic1 {width:31.5%; left:34%; top:24%; rotate:-2.93deg; z-index:2;}
  .-autumn .p-annual-events__picsA ._pic1::after {rotate:2.93deg;}
  .-autumn .p-annual-events__picsA ._pic2 {width:21%; left:12%; top:60%; rotate:-3.72deg;}
  .-autumn .p-annual-events__picsA ._pic3 {width:27.5%; left:73%; top:45%; rotate:3.56deg;}
  .-autumn .p-annual-events__picsA ._pic4 {width:46.5%; left:53%; top:80%; rotate:-.03deg;}
  .-autumn .p-annual-events__picsA ._pic4::after {rotate:.03deg;}
  .-autumn .p-annual-events__picsA ._pic5 {width:46.5%; left:53%; top:80%; rotate:-.03deg;}
  .-autumn .p-annual-events__picsA ._deco1 {width:2%; left:55%; top:8%;}
  .-autumn .p-annual-events__picsA ._deco2 {width:3%; left:86%; top:13%;}
  .-autumn .p-annual-events__picsA ._deco3 {width:4.5%; left:10%; top:37%;}
  .-autumn .p-annual-events__picsA ._sub1 {width:13%; left:20%; top:96%;}

  .-winter .p-annual-events__picsA {height:60cqw;}
  .-winter .p-annual-events__picsB {height:48cqw;}
  .-winter .p-annual-events__picsA ._pic1 {width:31.5%; left:40%; top:14%; rotate:-1.93deg;}
  .-winter .p-annual-events__picsA ._pic1::after {rotate:1.93deg;}
  .-winter .p-annual-events__picsA ._pic2 {width:30%; left:18%; top:42%; rotate:3.17deg;}
  .-winter .p-annual-events__picsA ._pic2::after {rotate:-3.17deg;}
  .-winter .p-annual-events__picsA ._pic3 {width:30%; left:80%; top:45%; rotate:-3.39deg;}
  .-winter .p-annual-events__picsA ._pic4 {width:35%; left:53%; top:80%; rotate:-.03deg;}
  .-winter .p-annual-events__picsA ._pic5 {width:46.5%; left:53%; top:80%; rotate:-.03deg;}
  .-winter .p-annual-events__picsA ._deco1 {width:5%; left:70%; top:13%;}
  .-winter .p-annual-events__picsA ._deco2 {width:5%; left:86%; top:50%;}
  .-winter .p-annual-events__picsA ._deco3 {width:2.5%; left:10%; top:70%;}
  .-winter .p-annual-events__picsA ._sub1 {width:19%; left:90%; top:94%;}
  .-winter .p-annual-events__picsB ._deco1 {left:20%; top:-13%;}
}