@charset "utf-8";

/* ========================================================================

  anniversary-ceremony.css

======================================================================== */

/************************************************************************
  main
************************************************************************/
#header { margin-top:70px; padding:120px 0 120px; text-align:center; display:flex; flex-direction:column; }
#header h2 { order:2; margin-bottom:0.5em; color:#000000; border:0; font-size:32px; font-size:3.2rem; }
#header p.txt { order:3; color:#333333; font-size:16px; font-size:1.6rem; }
#header p.logo { order:1; margin-bottom:40px; }
/* ============ smart phone ============ */
@media (max-width:750px){
#header { margin-top:calc(50/750*100vw); padding:calc(100/750*100vw) 0 calc(80/750*100vw); }
#header h2 { font-size:calc(48/750*100vw); }
#header p.txt { font-size:calc(32/750*100vw); }
}
/************************************************************************
  #contents
************************************************************************/
.anniversary-ceremony #contents { overflow:hidden; }
/************************************************************************
  nav.tab
************************************************************************/
nav.tab { margin-bottom:70px; border-bottom:1px solid #eeeeee; line-height:1; }
nav.tab ul { margin:auto; max-width:1000px; display:flex; justify-content:center; }
nav.tab ul li { width:25%; text-align:center; }
nav.tab ul li span { padding:0 0 0.8em; border-bottom:4px solid #fdfcf8; letter-spacing:0.05em; display:inline-block; transition:0.5s; }
nav.tab ul li a { display:block; cursor:pointer; }

nav.tab ul li.active span { border-bottom-color:#000000; }
/* ============ smart phone ============ */
@media (max-width:750px){
nav.tab ul li { margin:0 0.5em; width:auto; }
nav.tab ul li span { font-size:calc(20/750*100vw); white-space:nowrap; }

}
/************************************************************************
  article.photo-list
************************************************************************/
article.photo-list { height:0; transition:0.5s; opacity:0; pointer-events:none; }
article.photo-list h3 { display:none; }
article.photo-list ul { padding:0 0 80px; display:flex; flex-wrap:wrap; font-size:0; }
article.photo-list ul li { margin-bottom:20px; margin-right:20px; width:320px; aspect-ratio:1/0.669; }
article.photo-list ul li img { width:100%; height:auto; aspect-ratio:1/0.669; object-fit:cover; }

article.photo-list ul li:nth-child(3n) { margin-right:0; } 
article.photo-list.active { height:auto; opacity:1; pointer-events:auto; }

/* ============ smart phone ============ */
@media (max-width:750px){
article.photo-list ul li { margin-right:4%; width:48%; }
article.photo-list ul li:nth-child(3n) { margin-right:4%; }
article.photo-list ul li:nth-child(2n) { margin-right:0; }
}