@charset "utf-8";

/*============================
#topPanelArea
============================*/
#topPanelArea { height: 820px; position: relative; }
#topPanelArea .backGround {}
#topPanelArea .backGround .bg { position: relative; overflow: hidden; height: 820px; }
#topPanelArea .backGround .bg video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; min-height: 820px; object-fit: cover; pointer-events: none; z-index: 0; }
#topPanelArea .backGround .bg::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(rgba(49, 53, 68, 0) 50%, rgba(49, 53, 68, 0.5)); z-index: 0; }
#topPanelArea .backGround .bg::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #1f2748; opacity: 0.2; z-index: 0; }
#topPanelArea .backGround .logo { position: absolute; left: 5%; bottom: 200px; background: rgba(0, 0, 0, 0.15); padding: 40px; }
#topPanelArea .backGround .logo .tagline { font-size: 1.5em; color: #fff; text-align: left; letter-spacing: 0.45em; }
#topPanelArea .backGround .logo .siteTitle { margin-top: 40px; }
#topPanelArea .backGround .logo .siteTitle img { width: 540px; height: auto; }
#topPanelArea .backGround .logo .kana { margin-top: 30px; color: #fff; letter-spacing: 1.5em; font-size: 1.25em; font-weight: bold; padding-left: 0.1em; }
#topPanelArea .navi { position: absolute; left: 0; bottom: 0; width: 100%; padding: 30px 0 50px; z-index: 2; }
#topPanelArea .navi ul { display: flex; justify-content: center; width: 90%; margin: 0 auto; position: relative; }
#topPanelArea .navi ul::before { content: ""; position: absolute; left: 0; top: -30px; height: 1px; width: 100%; background: #fff; opacity: 0.5; }
#topPanelArea .navi ul li { position: relative; width: 360px; margin: 0 20px; }
#topPanelArea .navi ul li a { display: block; padding-bottom: 30px; font-size: 1.375em; letter-spacing: 0.2em; position: relative; color: #fff; text-align: center; white-space: nowrap; }
#topPanelArea .navi ul li a::after { content: ""; display: block; width: 15px; height: 15px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(90deg); background: url("../../imageFile/global/icon_arrow_white.svg") no-repeat center; background-size: 10px auto; transition: .3s; }
#topPanelArea .navi ul li a:hover::after { bottom: -5px; }
#topPanelArea .navi ul li a span { display: block; margin-bottom: 15px; text-align: center; }
#topPanelArea .navi ul li a span img { width: 80px; height: auto; }
#topPanelArea .navi .scroll { position: absolute; right: 5%; bottom: 40px; display: none; }
#topPanelArea .navi .scroll a { color: #fff; font-size: 0.875em; letter-spacing: 0.1em; }

/*============================
#movieArea
============================*/
#movieArea { background: #d7dde7; padding-bottom: 70px; position: relative; z-index: 1;}
#movieArea .md_container { display: flex; align-items: center; }
#movieArea .title_sp { display: none; font-size: 1.5em; padding-top: 30px; letter-spacing: 0.15em; line-height: 1.5; }
#movieArea .image { margin-top: -30px; position: relative; width: 600px; overflow: hidden; }
#movieArea .image a { position: relative; display: block; z-index: 2; }
#movieArea .image a img { position: relative; display: block; width: 100%; height: auto; object-fit: cover; transition: .3s; }
#movieArea .image a::before { content:""; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; border-radius: 90px; background: #fff; z-index: 2; transition: .3s; }
#movieArea .image a::after { content:""; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-left: 3px; width: 0; height: 0; border-style: solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 13px solid #1f2748; border-right: 0; z-index: 2; }
#movieArea .image a span { position: relative; display: block; }
#movieArea .image a span::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #1f2748; opacity: 0.3; z-index: 1; transition: .3s; }
#movieArea .image a:hover img { transform: scale(1.05); }
#movieArea .image a:hover span::before { opacity: 0.2; }
#movieArea .data { flex: 1; margin-left: 60px; margin-top: 30px; }
#movieArea .data .pr { margin-bottom: 20px; }
#movieArea .data .pr span { color: #222; border: solid 1px #222; padding: 4px 12px 3px; font-size: 0.875em; opacity: 0.8; }
#movieArea .data .title { font-size: 1.325em; padding-bottom: 25px; border-bottom: solid 1px #555; letter-spacing: 0.15em; line-height: 1.5; }
#movieArea .data .text { margin-top: 25px; line-height: 2; }
#movieArea .data .link { margin-top: 20px; }
#movieArea .data .link .md_texxLink {text-decoration: underline; }

/*============================
#storyArea
============================*/
#storyArea { padding: 80px 0 0; }
#storyArea .catch { font-size: 1.875em; letter-spacing: 0.2em; text-align: center; line-height: 1.75; font-weight: 500; }
#storyArea .link { margin-top: 85px; padding-bottom: 100px; }
#storyArea .link ul { display: flex; margin: 0 auto; max-width: 1840px; padding: 0 40px; }
#storyArea .link ul li { width: 31.3333%; margin-left: 4%; }
#storyArea .link ul li:first-child { margin-left: 0; }
#storyArea .link ul li a { display: block; position: relative; }
#storyArea .link ul li a::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: solid 40px #fff; opacity: 0.2; transition: .3s; }
#storyArea .link ul li a span { position: absolute; left: 10px; top: -32px; opacity: 0.8; }
#storyArea .link ul li a span img { width: 180px; height: auto; }
#storyArea .link ul li a .thum img { width: 100%; height: auto; }
#storyArea .link ul li a .text { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; background: rgba(255,255,255,0.85); padding: 20px 0; text-align: center; font-size: 1.3125em; line-height: 1.5; font-weight: bold; letter-spacing: 0.2em; transition: .3s; }
#storyArea .link ul li a:hover::after { border: solid 0 #fff; opacity: 0; }
#storyArea .link ul li a:hover .text { background: rgba(255,255,255,1); letter-spacing: 0.25em; }
#storyArea .grd { padding: 100px 0 0; background: #eee; }
#storyArea .grd .content { margin-top: 100px; padding-left: 15%; padding-bottom: 100px; position: relative; }
#storyArea .grd .content::before { content: ""; position: absolute; left: 0; bottom: 490px; width: 100%; height: 480px; background: rgba(255,255,255,0.25); z-index: 0; }
#storyArea .grd .content .mainImage { position: relative; }
#storyArea .grd .content .mainImage::before { content: ""; position: absolute; left: 0; top: -100px; width: 100%; height: 1px; border-bottom: solid 1px #222; }
#storyArea .grd .content .mainImage img { width: 100%; height: auto; }
#storyArea .grd .content .mainImage span { position: absolute; width: 130px; left: 0; top: 25px; display: inline-block; transform: rotate(90deg); }
#storyArea .grd .content .mainImage span img { width: 100%; height: auto; }
#storyArea .grd .content .mainImage .copy { position: absolute; left: 120px; top: 55px; font-size: 1.8vmax; letter-spacing: 0.2em; line-height: 1.5; }
#storyArea .grd .content .mainImage .lead { position: absolute; width: 50%; left: 0; bottom: 55px; padding: 25px; letter-spacing: 0.2em; background: linear-gradient(to right, rgba(49, 53, 68, 1.0) 50%, rgba(49, 53, 68, 0)); font-size: 1.25em; color: #fff; }
#storyArea .grd .content .subImage { height: 740px; position: relative; }
#storyArea .grd .content .subImage ul {}
#storyArea .grd .content .subImage ul li { display: inline-block; }
#storyArea .grd .content .subImage ul li .image {}
#storyArea .grd .content .subImage ul li .image img {}
#storyArea .grd .content .subImage ul li .data {}
#storyArea .grd .content .subImage ul li .data .name { margin-top: 25px; font-size: 1.125em; line-height: 1.25; font-weight: bold; }
#storyArea .grd .content .subImage ul li .data .text { width: 300px; margin-top: 10px; line-height: 1.75; }
#storyArea .grd .content .button { text-align: center; overflow: hidden; }
#storyArea .grd .content .button a { margin-left: -20%; }

#storyArea .grd #story01.content {}
#storyArea .grd #story01.content::before {}
#storyArea .grd #story01.content .subImage ul li.story01 { position: absolute; right: 0; top: 40px; width: 30%; max-width: 450px; }
#storyArea .grd #story01.content .subImage ul li.story01 .image {}
#storyArea .grd #story01.content .subImage ul li.story01 .image img { width: 100%; height: auto; }
#storyArea .grd #story01.content .subImage ul li.story01 .data { position: absolute; right: 107%; top: 50%; transform: translateY(-50%); }
#storyArea .grd #story01.content .subImage ul li.story01 .data .name {}
#storyArea .grd #story01.content .subImage ul li.story01 .data .text {}
#storyArea .grd #story01.content .subImage ul li.story02 { position: absolute; left: 0; top: 180px; }
#storyArea .grd #story01.content .subImage ul li.story02 .image { width: 400px; }
#storyArea .grd #story01.content .subImage ul li.story02 .image img { width: 100%; height: auto; }
#storyArea .grd #story01.content .subImage ul li.story02 .data {}
#storyArea .grd #story01.content .subImage ul li.story02 .data .name {}
#storyArea .grd #story01.content .subImage ul li.story02 .data .text { width: 340px; }
#storyArea .grd #story01.content .subImage ul li.story03 { position: absolute; right: 360px; top: 400px; width: 30%; max-width: 450px; }
#storyArea .grd #story01.content .subImage ul li.story03 .image {}
#storyArea .grd #story01.content .subImage ul li.story03 .image img { width: 100%; height: auto; }
#storyArea .grd #story01.content .subImage ul li.story03 .data { position: absolute; left: 107%; bottom: 0; width: 300px; }
#storyArea .grd #story01.content .subImage ul li.story03 .data .name {}
#storyArea .grd #story01.content .subImage ul li.story03 .data .text {}
#storyArea .grd #story02.content { margin-top: 100px; padding-left: 0; padding-right: 15%; }
#storyArea .grd #story02.content::before { bottom: 450px; }
#storyArea .grd #story02.content .mainImage .lead { left:  inherit; right: 0; text-align: right; background: linear-gradient(to left, rgba(36, 61, 82, 1.0) 50%, rgba(36, 61, 82, 0)); }
#storyArea .grd #story02.content .mainImage span { left: inherit; right: 0; }
#storyArea .grd #story02.content .mainImage .copy { left: inherit; right: 120px; }
#storyArea .grd #story02.content .button { margin-left: 0; }
#storyArea .grd #story02.content .button a { margin-left: 0; margin-right: -20%; }
#storyArea .grd #story02.content .subImage { height: 720px; }
#storyArea .grd #story02.content .subImage ul li.story01 { position: absolute; left: 0; top: -5%; width: 30%; max-width: 450px; }
#storyArea .grd #story02.content .subImage ul li.story01 .image {}
#storyArea .grd #story02.content .subImage ul li.story01 .image img { width: 100%; height: auto; }
#storyArea .grd #story02.content .subImage ul li.story01 .data { position: absolute; left: 107%; bottom: 0; width: 440px; }
#storyArea .grd #story02.content .subImage ul li.story01 .data .name {}
#storyArea .grd #story02.content .subImage ul li.story01 .data .text {}
#storyArea .grd #story02.content .subImage ul li.story02 { position: absolute; right: 0; top: 140px; width: 300px; }
#storyArea .grd #story02.content .subImage ul li.story02 .image {}
#storyArea .grd #story02.content .subImage ul li.story02 .image img {}
#storyArea .grd #story02.content .subImage ul li.story02 .data { position: absolute; right: 330px; top: 100px; }
#storyArea .grd #story02.content .subImage ul li.story02 .data .name {}
#storyArea .grd #story02.content .subImage ul li.story02 .data .text {}
#storyArea .grd #story02.content .subImage ul li.story03 { position: absolute; right: 700px; top: 380px; width: 460px; }
#storyArea .grd #story02.content .subImage ul li.story03 .image {}
#storyArea .grd #story02.content .subImage ul li.story03 .image img {}
#storyArea .grd #story02.content .subImage ul li.story03 .data { position: absolute; left: 500px; bottom: 0; width: 440px; }
#storyArea .grd #story02.content .subImage ul li.story03 .data .name {}
#storyArea .grd #story02.content .subImage ul li.story03 .data .text {}
#storyArea .grd #story03.content { margin-top: 100px; }
#storyArea .grd #story03.content::before { bottom: 470px; }
#storyArea .grd #story03.content .mainImage .lead { background: linear-gradient(to right, rgba(36, 46, 82, 1.0) 50%, rgba(36, 46, 82, 0)); }
#storyArea .grd #story03.content .subImage { height: 760px; }
#storyArea .grd #story03.content .subImage ul li.story01 { position: absolute; right: 0; top: -80px; width: 400px; }
#storyArea .grd #story03.content .subImage ul li.story01 .image { width: 400px; }
#storyArea .grd #story03.content .subImage ul li.story01 .image img { width: 100%; height: auto; }
#storyArea .grd #story03.content .subImage ul li.story01 .data { position: absolute; right: 160px; top: 140px; width: 600px; }
#storyArea .grd #story03.content .subImage ul li.story01 .data .name {}
#storyArea .grd #story03.content .subImage ul li.story01 .data .text { width: 330px; }
#storyArea .grd #story03.content .subImage ul li.story01 .data .text02 { margin-top: 10px; width: 580px; line-height: 1.5; color: #555; font-size: 0.875em; }
#storyArea .grd #story03.content .subImage ul li.story01 .data .button { margin-top: 10px; text-align: left; }
#storyArea .grd #story03.content .subImage ul li.story01 .data .button a { display: inline-block; text-align: center; color: #222; border: solid 1px #222; font-weight: 400;  width: auto; white-space: nowrap; font-size: 0.875em; margin-left: 0; padding: 18px 50px 17px 20px; cursor: pointer; position: relative; transition: .3s; }
#storyArea .grd #story03.content .subImage ul li.story01 .data .button a:hover { background: rgba(255,255,255,0.5); }
#storyArea .grd #story03.content .subImage ul li.story01 .data .button a::before { content: ""; position: absolute; right: 14px; top: 50%; width: 17px; height: 1px; background: #222; }
#storyArea .grd #story03.content .subImage ul li.story01 .data .button a::after { content: ""; position: absolute; right: 22px; top: 50%; margin-top: -8px; width: 1px; height: 17px; background: #222; }
#storyArea .grd #story03.content .subImage ul li.story02 { position: absolute; left: 0; top: 140px; width: 24%; max-width: 420px; }
#storyArea .grd #story03.content .subImage ul li.story02 .image {}
#storyArea .grd #story03.content .subImage ul li.story02 .image img { width: 100%; height: auto; }
#storyArea .grd #story03.content .subImage ul li.story02 .image img:first-child { margin-left: 12%; }
#storyArea .grd #story03.content .subImage ul li.story02 .data {}
#storyArea .grd #story03.content .subImage ul li.story02 .data .name {}
#storyArea .grd #story03.content .subImage ul li.story02 .data .text { width: 300px; }
#storyArea .grd #story03.content .subImage ul li.story03 { position: absolute; right: 300px; top: 420px; width: 460px; }
#storyArea .grd #story03.content .subImage ul li.story03 .image {}
#storyArea .grd #story03.content .subImage ul li.story03 .image img {}
#storyArea .grd #story03.content .subImage ul li.story03 .data { position: absolute; left: 490px; bottom: 0; width: 240px; }
#storyArea .grd #story03.content .subImage ul li.story03 .data .name {}
#storyArea .grd #story03.content .subImage ul li.story03 .data .text { width: 240px; }

#storyArea .modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); }
#storyArea .modal-content-story { left: 0; top: 50%; transform: translateY(-50%); background-color: #242e52; margin: 0 auto; padding: 60px; width: 1240px; position: relative; color: #fff; font-size: 0.9125em; line-height: 2; z-index: 9999; }
#storyArea .close { position: fixed; display: block; width: 51px; height: 51px; right: 30px; top: 30px; cursor: pointer; opacity: 0.75; z-index: 99999; }
#storyArea .close::before { content: ""; position: absolute; right: 0; top: 50%; width: 51px; height: 1px; background: #fff; transform: rotate(45deg); }
#storyArea .close::after { content: ""; position: absolute; right: 26px; top: 50%; margin-top: -25px; width: 1px; height: 51px; background: #fff; transform: rotate(45deg);  }

/*============================
#prizeArea
============================*/
#prizeArea { padding: 100px 0; }
#prizeArea .md_container { display: flex; align-items: center; }
#prizeArea .md_container .image { width: 430px; }
#prizeArea .md_container .image img { width: 430px; height: auto; }
#prizeArea .md_container .data { flex: 1; margin-left: 50px; }
#prizeArea .md_container .data .copy { padding: 40px 0; border-top: solid 1px #222; border-bottom: solid 1px #222; }
#prizeArea .md_container .data .copy .title { font-size: 1.5em; line-height: 1.5; font-weight: bold; text-indent: -0.25em; letter-spacing: 0.2em; }
#prizeArea .md_container .data .copy .text { margin-top: 10px; line-height: 1.75; }
#prizeArea .md_container .data .sub { margin-top: 15px; font-size: 0.875em; line-height: 1.25; }

/*============================
#grayArea
============================*/
#grayArea { padding: 100px 0; background: #b0aba1; }
#grayArea .md_container { padding: 0; }
#grayArea .title { display: flex; align-items: center; background: #fff; position: relative; }
#grayArea .title span { display: block; width: 90px; height: 90px; background: #6f6a60; color: #fff; font-size: 1.375em; line-height: 1.3; text-align: center; padding-top: 18px; }
#grayArea .title span em { font-size: 1.125em; font-weight: normal; letter-spacing: 0.08em; }
#grayArea .title .text { height: 90px; line-height: 95px; padding: 0 30px; font-size: 1.75em; letter-spacing: 0.15em; }
#grayArea .title .sub { position: absolute; right: 30px; bottom: -17px; width: 270px; opacity: 0.75; }
#grayArea .title .sub img { width: 100%; height: auto; }
#grayArea .image {}
#grayArea .image img { width: 100%; height: auto; }
#grayArea .info { display: flex; align-items: flex-end; width: 100%; padding:  0 80px; }
#grayArea .info .subImage { margin-top: -40px; width: 320px; }
#grayArea .info .subImage img { width: 100%; height: auto; }
#grayArea .info .subText { flex: 1; margin-left: 40px; line-height: 2; letter-spacing: 0.1em; }
#grayArea .pattern { margin-top: 60px; position: relative; overflow: hidden; height: 520px; }
#grayArea .pattern .subTitle { width: 1240px; margin: 0 auto; background: #6f6a60; color: #fff; padding: 18px 20px 17px; font-size: 1.25em; }
#grayArea .pattern .content { margin-top: 40px; width: auto!important; }
#grayArea .pattern .content ul {display: flex; transition: transform 0.5s ease-in-out; }
#grayArea .pattern .content ul li { width: 100%; /* li一つがコンテナの幅全体を使うように設定 */flex-shrink: 0; /* liが縮まないようにする */ display: flex; align-items: center; justify-content: center; text-align: center; transition: opacity 0.25s; }
/* 隠れているスライドのスタイル（デフォルト） */
#grayArea .content li:not(.is-active) { /*filter: grayscale(80%);  例：グレースケールで暗くする */ opacity: 0.5; /* 例：少しだけ透明にする */ }

/* is-activeクラスがついたスライド（表示中）は通常通り表示 */
#grayArea .content li.is-active { filter: none; opacity: 1;}

#grayArea .button-prev,
#grayArea .button-next { width: 60px; height: 60px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;  cursor: pointer; background-size: 50% 50%;  background-repeat: no-repeat;  background-position: center; opacity:  0.75; }
#grayArea .button-prev {
  left: 50%; transform: translateX(-50%) rotate(180deg); margin-left: -640px; background-image: url("../../imageFile/global/icon_arrow_white.svg"); /* ← 左矢印画像 */ }
#grayArea .button-prev::after { display: none; }
#grayArea .button-next {
  left: 50%; transform: translateX(-50%); margin-left: 640px; background-image: url("../../imageFile/global/icon_arrow_white.svg");  /* → 右矢印画像 */ }
#grayArea .button-next::after { display: none; }
#grayArea .pattern .content ul li .imageLeft {}
#grayArea .pattern .content ul li .imageLeft img { width: 100%; height: auto; }
#grayArea .pattern .content ul li .imageRight {}
#grayArea .pattern .content ul li .imageRight img { width: 100%; height: auto; }

/*============================
#bottomMovieArea
============================*/
#bottomMovieArea { padding: 60px 0; background: linear-gradient( #424867, #2c425d); }
#bottomMovieArea .md_container { display: flex; align-items: center; }
#bottomMovieArea .data { flex: 1; }
#bottomMovieArea .data .pr { margin-bottom: 20px; }
#bottomMovieArea .data .pr span { color: #fff; border: solid 1px #fff; padding: 4px 12px 3px; font-size: 0.875em; opacity: 0.8; }
#bottomMovieArea .data .title { font-size: 1.275em; line-height: 1.75; color: #fff; }
#bottomMovieArea .data .text { margin-top: 25px; line-height: 1.75; color: #fff; }
#bottomMovieArea .data .link { margin-top: 30px; text-align: right; }
#bottomMovieArea .data .link .md_textLink { text-decoration: underline; color: #fff; }
#bottomMovieArea .data .link .md_textLink::before { border: solid 1px #fff; }
#bottomMovieArea .data .link .md_textLink::after { background: url("../../imageFile/global/icon_arrow_white.svg") no-repeat center; background-size: 5px auto;}
#bottomMovieArea .image { width: 700px; margin-left: 60px; overflow: hidden; }
#bottomMovieArea .image a { position: relative; display: block; z-index: 2; }
#bottomMovieArea .image a img { position: relative; display: block; transition: .3s; }
#bottomMovieArea .image a::before { content:""; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; border-radius: 90px; background: #fff; z-index: 2; transition: .3s;  }
#bottomMovieArea .image a::after { content:""; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-left: 3px; width: 0; height: 0; border-style: solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 13px solid #1f2748; border-right: 0; z-index: 2; }
#bottomMovieArea .image a span { position: relative; display: block; }
#bottomMovieArea .image a span::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #1f2748; opacity: 0.3; z-index: 1; transition: .3s; }
#bottomMovieArea .image a:hover img { transform: scale(1.05); }
#bottomMovieArea .image a:hover span::before { opacity: 0.2; }

/*============================
#exampleArea
============================*/
#exampleArea { padding: 100px 0; background: #f5f5f5; }
#exampleArea .title { font-size: 1.5em; padding-bottom: 20px; border-bottom: solid 1px #555; letter-spacing: 0.1em; font-weight: bold; }
#exampleArea .list { margin-top: 50px; }
#exampleArea .list ul { display: flex; justify-content: space-between; }
#exampleArea .list ul li { width: 32%; }
#exampleArea .list ul li a {}
#exampleArea .list ul li a .image { overflow: hidden; }
#exampleArea .list ul li a .image img { width: 100%; height: auto; transition: .3s; }
#exampleArea .list ul li a .data { background: #fff; padding: 25px; }
#exampleArea .list ul li a .data .subTitle { font-size: 1.125em; line-height: 1.5; }
#exampleArea .list ul li a .data .price { margin-top: 20px; }
#exampleArea .list ul li a .data .company { margin-top: 10px; font-size: 0.875em; line-height: 1.25; }
#exampleArea .list ul li a:hover .image img { transform: scale(1.05); }
#exampleArea .button { margin-top: 40px; text-align: center; }
#exampleArea .button a {}
#exampleArea .snsButon { margin-top: 60px; }
#exampleArea .snsButon .topButton { text-align: center; }
#exampleArea .snsButon .topButton .md_btn_reserve {padding: 18px 0 17px; border-radius: 50px; font-size: 0.875em; }
#exampleArea .snsButon ul { margin-top: 30px; display: flex; justify-content: center; width: 100%; }
#exampleArea .snsButon ul li { display: inline-block; }
#exampleArea .snsButon ul li:first-child { margin-right: 30px; }
#exampleArea .snsButon ul li a { background: #fff; padding: 14px 18px 13px; display: flex; align-items: center; }
#exampleArea .snsButon ul li a img { height: 25px; width: auto; }
#exampleArea .snsButon ul li a img:nth-child(2) { margin-left: 10px; top: 2px; position: relative; }
#exampleArea .snsButon ul li a span { color: #222; padding-left: 18px; margin-left: 20px; border-left: solid 1px #222; }

/*============================
#reservationArea
============================*/
#reservationArea { padding: 100px 0; text-align: center; }
#reservationArea .image { text-align: center; }
#reservationArea .image img {}
#reservationArea .title { margin-top: 25px; font-size: 1.25em; font-weight: bold; }
#reservationArea .text { margin-top: 10px; line-height: 2; }
#reservationArea .button { margin-top: 40px; }
#reservationArea .button a {}

/*============================
#catalogArea
============================*/
#catalogArea {}
#catalogArea .image { text-align: center; }
#catalogArea .image img { width: 240px; height: auto; }
#catalogArea .button { margin-top: 40px; }
#catalogArea .button ul { width: 940px; margin: 0 auto;  display: flex; justify-content: space-between;  }
#catalogArea .button ul li {}
#catalogArea .button ul li a {}

/*============================
movie
============================*/

/* モーダル全体を覆う背景 */
.modal-container { display: none; position: fixed; /* 画面に固定 */ z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒 */ align-items: center; justify-content: center;}

/* モーダルのコンテンツ部分 */
.modal-content { position: relative; background-color: #222; padding: 5px 5px 2px; border-radius: 3px; width: 80%; max-width: 800px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* 閉じるボタン */
.modal-close { position: fixed; display: block; width: 51px; height: 51px; right: 30px; top: 30px; cursor: pointer; opacity: 0.75; pointer-events: none; }
.modal-close::before { content: ""; position: absolute; right: 0; top: 50%; width: 51px; height: 1px; background: #fff; transform: rotate(45deg); }
.modal-close::after { content: ""; position: absolute; right: 26px; top: 50%; margin-top: -25px; width: 1px; height: 51px; background: #fff; transform: rotate(45deg);  }
.modal-close:hover,
.modal-close:focus { color: #000; }

/* 埋め込むビデオのスタイル */
.modal-video {
/* 親要素(.modal-content)のサイズを超えず、アスペクト比を維持 */
max-width: 100%; max-height: 100%; width: auto; height: auto;display: block; /* 余分な隙間を防ぐ */}

/* 再生ボタンのスタイル（お好みで調整してください） */
.play-button { cursor: pointer; }