@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,700;1,700&display=swap');


/**
 * uaplus.css version 0.0.1
 */

/**
 * Different box model
 * 
 * We use the traditional box model, where the padding and border 
 * of the element is drawn inside and not outside the specified 
 * width and height. That makes combining relative and absolute 
 * units in properties like <code>inline-size</code> and 
 * <code>block-size</code> easier.
 * 
 * See https://en.wikipedia.org/wiki/CSS_box_model
 */
*,
*::after,
*::before {
  box-sizing: border-box;
}

/**
 * Improve focus styles
 *
 * Add spacing between content and its focus outline.
 */
:focus-visible {
  outline-offset: 3px;
}

/**
 * Disable text size adjustment
 * 
 * To improve readability on non-mobile optimized websites, browsers
 * like mobile Safari increase the default font size when you switch
 * a website from portrait to landscape. We don't want that for our 
 * optimized sites.
 *
 * See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
 */
:where(html) {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/**
 * Increase line height
 *
 * Long paragraphs are easier to read if the line height is higher.
 */
:where(html) {
  line-height: 1.5;
}

/**
 * Add scrollbar gutter
 *
 * Prevent the page from “jumping” when switching from a long to a short page.
 *
 */
:where(html) {
  scrollbar-gutter: stable;
}

/**
 * Remove UA styles for h1s nested in sectioning content
 *
 * Nesting h1s in section, articles, etc., shouldn't influence the 
 * styling of the heading since nesting doesn't influence 
 * semantics either.
 * 
 * See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
 * See https://github.com/whatwg/html/pull/11102
 * See https://html.spec.whatwg.org/#sections-and-headings
 */
:where(h1) {
  font-size: 2em;
  margin-block: 0.67em;
}

/**
 * Improve abbreviations with titles
 * 
 * The abbr element with the title isn't helpful regarding 
 * accessibility because support is inconsistent, and it's only 
 * accessible to some users. Still, it's commonly used. 
 * This rule shows a dotted underline on abbreviations in all 
 * browsers (there's a bug in Safari) and changes the cursor.
 * 
 * See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
 */
:where(abbr[title]) {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

/**
 * Optimize mark element in Forced Colors Mode
 *
 * The colors of the mark element don't change in Forced Colors Mode,
 * which can be problematic. Use system colors instead.
 * 
 * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
 */
@media (forced-colors: active) {
  mark {
    color: HighlightText;
    background-color: Highlight;
  }
}

/**
 * Announce del, ins, and s to screen readers
 * 
 * With the exception of NVDA (2024.4.2), which announces "deletion",
 * none of the common screen readers announces the <s> element.
 * Voice Over on macOS and iOS and Narrator don't announce 
 * <ins> and <del>. Usually, screen readers not announcing text-level
 * semantics is something we just accept, but devs using elements 
 * like <s> without knowing that they may not convey semantics is a 
 * common issue. We announce the start and end of stricken, inserted,
 * and deleted content with pseudo-elements. For languages other 
 * than English, you should provide translations, e.g. :lang(de) 
 * :where(s::before) { content: "Durchgestrichener Text Beginn "; }
 * 
 * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html
 */
 :where(del, ins, s)::before, 
 :where(del, ins, s)::after 
 {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   width: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   content: "test"
 }
 
 :where(s)::before {
   content: "stricken text start ";
 }
 
 :where(s)::after {
   content: " stricken text end";
 }
 
 :where(del)::before {
   content: "deletion start ";
 }
 
 :where(del)::after {
   content: " deletion end";
 }
 
 :where(ins)::before {
   content: "insertion start ";
  }
 
 :where(ins)::after {
   content: " insertion end";
 }

/**
 * Avoid overflow caused by embedded content
 * 
 * Ensure that embedded content (audio, video, images, etc.) 
 * doesn't overflow its container.
 */
:where(audio, iframe, img, svg, video) {
  max-block-size: 100%;
  max-inline-size: 100%;
  vertical-align: middle;
}

/**
 * Prevent fieldsets from causing overflow
 *
 * Reset the default `min-inline-size: min-content` to prevent
 * children from stretching fieldsets
 *
 * See https://github.com/twbs/bootstrap/issues/12359
 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
 */
:where(fieldset) {
  min-inline-size: 0;
}

/**
 * Turn labels into block elements
 * 
 * Labels for inputs, selects, and textarea should be block 
 * elements.
 */
:where(label):has(+ :where(textarea, input, select)) {
  display: block;
}

/**
 * Increase the block-size of textareas
 *
 * The default height of textareas is small. We increase it a bit.
 */
:where(textarea:not([rows])) {
  min-block-size: 6em;
}

/**
 * Inherit font styling in form elements
 * 
 * buttons, inputs, selects, and textarea should have the same font
 * family and size as the rest of the page.
 */
:where(button, input, select, textarea) {
  font-family: inherit;
  font-size: inherit;
}

/**
 * Normalize search input styles
 *  
 * Remove the rounded corners of search inputs on macOS and IOS 
 * and normalize the background color
 */
:where([type="search"]) {
  -webkit-appearance: textfield;
}

/* iOS only */
@supports (-webkit-touch-callout: none) {
  :where([type="search"]) {
    border: 1px solid -apple-system-secondary-label;
    background-color: canvas;
  }
}

/**
 * Maintain direction in some input types
 * 
 * Some input types should remain left-aligned in right-to-left
 * languages,but only if the value isn't empty because the 
 * placeholder should be right-aligned.
 *
 * See https://rtlstyling.com/posts/rtl-styling#form-inputs
 */
:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(
    :placeholder-shown
  ) {
  direction: ltr;
}

/**
 * Improve table styling
 *  
 * With the default styling, tables are hard to scan. These rules 
 * add padding and collapsed borders.
 */
:where(table) {
  border-collapse: collapse;
  border: 1px solid;
}

:where(th, td) {
  border: 1px solid;
  padding: 0.25em 0.5em;
}

/**
 * Fading dialogs
 *  
 * Add fade in and fade out transitions for the dialog element
 * and backdrops
 */
:where(dialog)::backdrop {
  background: oklch(0% 0 0 / 0.3);
}

:where(dialog),
:where(dialog)::backdrop {
  opacity: 0;
  transition: opacity 300ms ease-out, display 300ms allow-discrete,
    overlay 300ms allow-discrete;
}

:where(dialog[open]),
:where(dialog[open])::backdrop {
  opacity: 1;
}

@starting-style {
  :where(dialog[open]),
  :where(dialog[open])::backdrop {
    opacity: 0;
  }
}

/**
 * Increase specificity of [hidden]
 *  
 * Make it harder to accidentally unhide elements with the 
 * [hidden] attribute while still maintaining the until-found 
 * functionality.
 */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}


/* ベース
------------------------------------------------------------*/
:where(html) {
	font-size: 62.5%;
}

:where(body) {
	margin: 0;
	block-size: 100%; /* サファリ以外のブラウザのフォールバック */
	block-size: 100dvb; /* 1dvbは動的ビューポートの長さの1%、100dvbで高さいっぱいに */
	line-height: 1.5; /* アクセシブルな行の高さ */
	-webkit-font-smoothing: antialiased; /* テキストのレンダリングを改善 */
  font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #08131a;
	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
	line-break: strict; /* 禁則処理を厳格に適用 */
}

:where(textarea) {
	resize: vertical; /* テキストエリアの水平リサイズを無効に */
	resize: block;
}

:where(a) {
	text-underline-offset: 0.3em; /* 下線の上にスペースを追加する */
}

:focus-visible {
	border-radius: .25rem;
  outline-offset: .125rem !important;
	outline: 4px solid #000000 !important;
	background-color: #FFF100 !important;
	color: #000000 !important;
	font-weight: 500 !important;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

p, a, ul, ol, time, table, dl, button, .event-details {
  line-height: 1.7;
	font-size: 1.8rem;
}

p {
  margin: 3.2rem 0;
}

h1 + p, h2 + p, h3 + p, h4 + p {
  margin-top: 2.4rem;
}

ul:not(.menu, .stack, .breadcrumbs, .splide__pagination ),
ol:not(.menu, .stack, .breadcrumbs, .splide__pagination ) {
  margin: 3.2rem 0;
}

ul:not(.menu, .stack, .breadcrumbs) ul,
ol:not(.menu, .stack, .breadcrumbs) ol {
  margin: 0.8rem 0;
}

ul:not(.menu, .stack, .breadcrumbs, .splide__list) li,
ol:not(.menu, .stack, .breadcrumbs, .splide__list) li {
  margin: 0.8rem 0;
}

ul li::marker,
ol li::marker {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  color: #007F57;
}

li > p, dd > p {
  margin: 0.8rem 0 3.2rem;
}

small {
  font-size: 1.4rem;
}

button {
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
}

/* リンク設定
------------------------------------------------------------*/
a {
  text-decoration-color: #03AF7A;
  font-weight: 500;
	color:#007F57;
}

a:hover {
  text-decoration-thickness: 3px;
}

a:active{
	outline:0;
}

a[target="_blank"]::after {
  content: "";
  width: 1em;
  height: 1em;
  margin: 0 0.25em -0.25em;
  display: inline-block;
  background-image: url('./images/icon/link-blank.svg');
  background-size: cover;
}

/* スクリーンリーダー専用の非表示クラス */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

a[target="_blank"].noSrText::after {
  content: none;
}

.linkDif {
  display: inline-flex;
  column-gap: 0.8rem;
  align-items: flex-end;
  font-size: 1.8rem;
  font-weight: 600;
}

.linkDif .icon {
  width: 1.5em;
  height: 1.5em;
}

.btnLink {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 4.8rem 1.6rem;
  display: block;
  border: 1px solid #C8C8CB;
  border-radius: 100px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.btnLink:hover {
  border-color: #03AF7A;
  outline: solid 2px #03AF7A;
  outline-offset: -1px;
}


/* 全体
------------------------------------------------------------*/
/**************************
/* タイトル
**************************/
h1, h2, h3, h4, h5 {
  font-family: "Zen Maru Gothic", sans-serif;
}

main:not(.home) h1, h2, h3, h4 {
  margin-bottom: 0;
  letter-spacing: 0.05em;
}

main:not(.home) h2 {
  margin-top: 10rem;
  padding-left: 1em;
  font-size: 3.6rem;
}

main:not(.home) h2::before {
  content: "▍";
  display: inline-block;
  text-indent: -1em;
  color: #03AF7A;
}

main:not(.home) section:not(:first-of-type) h2 {
  margin-top: 13rem;
}

main:not(.home) h3 {
  margin-top: 6.4rem;
  font-size: 3rem;
}

main:not(.home) h4 {
  margin-top: 6.4rem;
  font-size: 2.4rem;
}

.subtitle {
  letter-spacing: 0.05em;
	font-family: "Jost", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #03AF7A;
}

.title02 {
  max-width: 1024px;
	margin-top: 8px;
	display: block;
  letter-spacing: 0.05em;
	font-size: 3.6rem;
}

/**************************
/* ページヘッダー
**************************/
.pageHeader {
  margin: 0 0 2.4rem;
  padding: 3.2rem 2.4px 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #F7FCF7;
}

.pageHeader__title {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 24px;
}

.pageHeader__link {
  margin-top: 5.4rem;
  display: inline-flex;
  column-gap: 0.8rem;
  align-items: flex-end;
  font-size: 1.4rem;
}

.pageHeader__link .icon {
  width: 1.5em;
  height: 1.5em;
}

.pageHeader__img {
  aspect-ratio: 287 / 192;
  max-width: 287px;
  margin: 3.2rem auto 0;
}

.pageHeader__time {
  margin-top: 0.8rem;
}

/**************************
/* 装飾
**************************/
.hr {
  width: 6.4rem;
  margin: 0 auto;
  border: 2px solid #03AF7A;
  border-radius: 4px;
}

.text-right {
  text-align: right;
}

/**************************
/* ヘッダー
**************************/
#header{
	padding: 0 24px;
}

#mainNav {
	max-width: 327px;
  margin: 0 auto;
	padding-bottom: 24px;
}

.menu {
  margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
  font-family: "Zen Maru Gothic", sans-serif;
	font-size: 1.6rem;
	color: #000000;
}

.menu li {
	width: calc(50% - 5px);
}

.menu li a {
	padding: 0.5em 1em;
	display: block;
	border: solid 2px transparent;
	border-radius: 100px;
	text-decoration: none;
  font-family: inherit;
	font-weight: bold;
  font-size: 1.6rem;
	color: inherit;
}

.menu li a:hover {
	border-color: #03AF7A;
}

/**************************
/* ロゴ
**************************/
.logoWrapper {
  flex: 1;
  max-width: 216px;
	padding: 20px 0;
}

.logo {
  margin: 0;
	color: #000000;
}

.logo > a {
  display: block;
  text-decoration: none;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 2rem;
  font-weight: bold;
	color: inherit;
}

.logo__sub {
	display: block;
	font-size: 1.2rem;
  font-weight: 500;
}

/**************************
/* パンクズリスト
**************************/
.breadcrumbsWrapper {
  width: 100%;
	padding: 0 24px 24px;
	font-size: 1.6rem;
}

.breadcrumbs {
	padding: 0;
	margin: 0;
  display: block;
  align-items: center;
  column-gap: 0.8rem;
  font-size: 1.6rem;
}

.breadcrumbs li {
  display: inline;
}

.breadcrumbs li:not(:first-child) {
  margin-left: 0.8rem;
}

/* ホーム */
body:has(.home) .breadcrumbsWrapper {
  display: none;
}

/**************************
/* フッター
**************************/
.footer {
  background-color: #F7FCF7;
}

.footer__inner {
  padding: 80px 44px 0;
  background-color: #fff;
}

.footerLogo {
  max-width: 240px;
  display: block;
  text-decoration: none;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 2.4rem;
  font-weight: bold;
  color: #000000;
}

.footerNav{
  margin-top: 8rem;
  display: inline-flex;
  flex-direction: column;
  row-gap: 1em;
  letter-spacing: normal;
}

.footerNav a {
  width: fit-content;
  display: inline-block;
}

.footerCopyright {
  padding: 3.2rem 0 2.4rem;
  background-color: #fff;
  letter-spacing: normal;
  text-align: center;
}

/**************************
/* コンテナ
**************************/
.container-default {
	padding: 0 24px;
}

.container-md {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 24px;
}

main:not(.home) {
  padding-bottom: 8rem;
}

.home {
  background: #F7FCF7;
}

/**************************
/* 画像
**************************/
.imgWrapper {
  margin: 2.4rem 0;
}

/**************************
/* データリスト
**************************/
dl {
  margin: 4rem 0;
}

dt {
  font-family: "Zen Maru Gothic", sans-serif;
  letter-spacing: 0.05em;
  font-weight: bold;
}

dd {
  margin: 0.8rem 0 0 1em;
}

.dlItem {
  padding: 1.6rem 0;
  border-top: 1px dotted #84919E;
}

/**************************
/* メインビジュアル
**************************/
.homeMv__inner {
  padding-top: 4rem;
}

.homeMvBody {
  max-width: 540px;
  margin: 0 auto;
  padding: 6.4rem 2.4rem 8rem 3.2rem;
  display: grid;
  row-gap: 4rem;
  background-color: #fff;
  border-radius: 270px 270px 64px 64px; 
}

.homeMvTitle {
  margin: 0;
	text-align: center;
}

.homeMvImg {
  max-width: 327px;
  margin: 0 auto;
}

.homeMvImg.mobile {
  aspect-ratio: 319 / 343;
}

.homeMvImg.pc {
  aspect-ratio: 1269 / 899;
  display: none;
}

.homeMvlead__body {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.889;
}

.homeMvLink {
  text-align: center;
}

/**************************
/* ホームセクションヘッダー
**************************/
.homeSectionHeader {
  margin: 0 0 2.4rem;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.homeSectionHeader__link {
  margin-top: 5.4rem;
  display: inline-flex;
  column-gap: 0.8rem;
  align-items: flex-end;
  font-size: 1.4rem;
}

.homeSectionHeader__link .icon {
  width: 1.5em;
  height: 1.5em;
}

/**************************
/* 新着情報
**************************/
.homeNews {
  padding: 8rem 24px;
}

.homeNews__body {
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.bgNews {
  width: 40vw;
  position: absolute;
  top: -1.6rem;
  left: 0;
}

/**************************
/* リスト
**************************/
.stack {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.4rem;
}

.card {
  padding: 19px 16px 24px 24px;
  display: grid;
  column-gap: 0.8rem;
  grid-template-columns: 1fr 24px;
  grid-template-rows: min-content 1fr;
  align-items: flex-end;
  border: 1px solid #8ADFC4;
  border-radius: 1rem;
  background-color: #FFFFFF;
  text-decoration: none;
  color: #000000;
}

.card:hover {
  outline: solid 2px #03AF7A;
  outline-offset: -1px;
}

.card__time {
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 500;
}

.card__title {
  margin: 0.5em 0 0 0;
  font-size: 1.8rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #03AF7A;
}

.card:hover .card__title {
  text-decoration-thickness: 3px;
}

/**************************
/* ギャラリー
**************************/
.galleryTitle {
  padding: 0 24px;
}

.galleryTitle > img {
  width: 100%;
}

.galleryLead {
  background-color: #fff;
}

.galleryLead__inner {
  max-width: 540px;
  margin: 0 auto;
  padding: 0 24px 3.2rem;
}

.galleryLead__title {
  margin: 0;
  font-size: 3.6rem;
  color: #007F57;
}

.galleryLead__text {
  margin-bottom: 0;
  line-height: 2;
}

.galleryLead__img {
  max-width: 80%;
  margin: 2.4rem auto 0;
}

/* .galleryLead__img.pc {
  display: none;
} */

/* スライド */
.gallerySlide {
  background-image: url('./images/home/gallery/bg-gradient002.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.slideControls {
  margin: 2.4rem 3.2rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 1.6rem;
}

.splide__slide {
  aspect-ratio: 320 / 240;
  clip-path: inset(0 0 round 24px);
}

.splide__slide > img {
  width: 100%;
}

.splide__arrows {
  display: flex;
  justify-content: flex-end;
  column-gap: 0.8rem;
  position: relative;
}

.splide__arrow {
  width: 1.6rem;
  height: 1.6rem;
  position: relative;
  top: auto;
  transform: none;
  background: none;
}

.splide__arrow--prev {
  left: auto;
}

.splide__arrow--next {
  right: auto;
}

.splide__pagination {
  position: relative;
  bottom: auto;
}

.splide__pagination__page {
  width: 1.1rem;
  height: 1.1rem;
  background: #C8C8CB;
}

.splide__pagination__page.is-active {
  background: #84919E;
  transform: scale(1);
}

/* ピックアップ */
.pickup {
  background-image: url('./images/home/gallery/bg-gradient003.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.pickup__inner {
    padding: 8rem 24px 0;
}

.pickup__item {
    display: flex;
    position: relative;
}

.pickupImg {
  position: relative;
  z-index: 1;
}

.pickup__item.n1 {
  justify-content: center;
}

.pickup__item.n1 > .pickupImg {
  width: clamp(330px, 50vw, 540px);
}

.pickup__item.n2 {
  margin-top: 2.4rem;
  justify-content: center;
}

.pickup__item.n2 > .pickupImg {
  width: clamp(330px, 50vw, 540px);
}

.pickup__item.n3 {
  margin-top: 4rem;
  justify-content: center;
}

.pickup__item.n3 > .pickupImg {
  width: clamp(330px, 50vw, 540px);
}

.footprint {
  display: none;
  position: absolute;
  left: 0;
  z-index: 0;
}

.footprint__img {
  width: 200px;
  position: relative;
  z-index: 1;
}

.footprint.n1 {
  margin-right: 127px;
}

.footprint.n2 {
  position: absolute;
  right: 0;
  left: auto;
}

.footprint.n3 {
  position: absolute;
  left: 0;
}

/* 背景 */
.bgLead {
  width: 100%;
}

.bgLead  > img {
  width: 100%;
  vertical-align: bottom;
}

/**************************
/* ブロック
**************************/
.block {
  max-width: 540px;
  margin: 0 auto;
  padding: 6.4rem 24px;
  background-color: #fff;
}

.block__body {
  margin-top: 4rem;
}

.block .hr {
  margin-top: 4rem;
}

/**************************
/* SNS
**************************/
.social {
  padding: 8rem 0 4rem;
  background-image: url('./images/footer/bg-sns.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.sns {
  padding: 0.8rem 1.6rem;
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  column-gap: 1.6rem;
  align-items: center;
  background-color: #fff;
  border-radius: 100px;
  font-family: "Zen Maru Gothic", sans-serif;
  text-decoration: none;
  color: #000000;
}

.sns a[target="_blank"]::after {
  content: none;
}

.sns__name {
  font-size: 1.6rem;
  font-weight: 400;
}

.sns__type {
  margin: 0;
  font-family: inherit;
  font-size: 2.4rem;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #03AF7A;
}

.sns:hover {
  outline: solid 2px #03AF7A;
  outline-offset: -1px;
}

.sns:hover .sns__type {
  text-decoration-thickness: 3px;
}

/* ホーム */
.home .social__inner {
  padding: 0 24px;
  background-color: #fff;
}

/**************************
/* アイコン
**************************/
.icon {
  aspect-ratio: 1 / 1;
  display: inline-block;
  position: relative;
}

.icon img {
  vertical-align: bottom;
}

.icon__default,
.icon__hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.icon__default {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.3s;
}

.icon__hover {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;
}

a:hover .icon__hover {
  opacity: 1;
}

/**************************
/* 下層ページ
**************************/
/* イベント情報 */
.events {
  margin-top: 2.4rem;
}

.event-details {
  margin-top: 6.4rem;
}

/* タブレット
------------------------------------------------------------*/
@media only screen and (min-width: 540px){	
  /**************************
  /* ヘッダー
  **************************/
  #header {
    display: flex;
    flex-direction: column;
  }
  
  #mainNav {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .menu li {
    width: auto;
  }

  /**************************
  /* ブロック
  **************************/
  .block {
    padding-left: 10rem;
    padding-right: 10rem;
    border-radius: 64px;
  }

  /**************************
  /* ギャラリー
  **************************/
  .footprint {
    display: block;
  }
}

/* PC
------------------------------------------------------------*/
@media only screen and (min-width: 1024px){	
  /**************************
  /* ヘッダー
  **************************/
  #header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /**************************
  /* パンクズリスト
  **************************/
  .breadcrumbsWrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .breadcrumbs li:first-child {
    margin-left: 0.8rem;
  }

  /**************************
  /* タイトル
  **************************/
  .home .pageHeader__title {
    margin: -1em;
  }

  main:not(.home) section:not(:first-of-type) h2 {
    margin-top: 16rem;
  }

  /**************************
  /* メインビジュアル
  **************************/
  .homeMv {
    max-width: 1278px;
    margin: 0 auto;
    position: relative;
  }

  .homeMv__inner {
    padding-top: 2.4rem;
  }
  
  .homeMvBody {
    max-width: 353px;
    position: absolute;
    top: 56px;
    left: 124px;
    border: 2px solid #03AF7A;
  }

  .homeMvImg {
    max-width: none;
    margin: initial;
  }

  .homeMvImg.mobile {
    display: none;
  }

  .homeMvImg.pc {
    display: block;
  }

  /**************************
  /* リスト
  **************************/
  .stack {
    row-gap: 3.2rem;
  }

  /**************************
  /* 新着情報
  **************************/
  .homeNews {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 152px;
    padding-right: 152px;
    display: grid;
    grid-template-columns: 28rem 1fr;
    column-gap: 2.4rem;
  }

  .homeNews__body {
    max-width: none;
    margin: initial;
  }

  .bgNews {
    width: 100%;
    margin-top: 2.4rem;
    position: static;
  }

  /**************************
  /* ギャラリー
  **************************/
  .galleryTitle {
    margin-bottom: -4rem;
  }

  .galleryLead__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 128px;
    padding-right: 128px;
    padding-bottom: 9rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.2rem;
  }

  .pickup__inner {
    max-width: 1278px;
    margin: 0 auto;
  }

  .pickup__item.n1 {
    justify-content: flex-end;
  }

  .pickup__item.n2 {
    justify-content: flex-start;
  }

  .pickup__item.n3 {
    margin-top: 6.4rem;
  }

  .footprint {
    position: relative;
  }

  /**************************
  /* 公式SNS
  **************************/
  .social {
    padding-bottom: 28rem;
  }
}