@charset "utf-8"; @media only screen and (max-width: 640px) { /*============================ #topPanelArea ============================*/ #topPanelArea { height: 65vh; } #topPanelArea .backGround {} #topPanelArea .backGround .bg { height: 65vh; } #topPanelArea .backGround .bg video { width: 100%; height: auto; min-height: 65vh; } #topPanelArea .backGround .bg::after {} #topPanelArea .backGround .logo { width: 90%; left: 0; bottom: 60px; padding: 20px; } /*#topPanelArea .backGround .logo::after { content: ""; position: absolute; left: 0; bottom: -30px; height: 1px; width: 100%; background: #fff; opacity: 0.5; }*/ #topPanelArea .backGround .logo .tagline { font-size: 1.125em; letter-spacing: 0.15em; } #topPanelArea .backGround .logo .siteTitle { margin-top: 25px; } #topPanelArea .backGround .logo .siteTitle img { width: 240px; height: auto; } #topPanelArea .backGround .logo .kana { margin-top: 20px; letter-spacing: 1em;} #topPanelArea .navi { padding: 10px 0 42px; display: none; } #topPanelArea .navi ul { display: block; 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: 100%; margin: 0; } #topPanelArea .navi ul li a { padding-bottom: 20px; font-size: 1em; letter-spacing: 0.1em; text-align: left; } #topPanelArea .navi ul li a::after { left: inherit; line-height: 0; right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); margin-top: -5px; bottom: inherit; background-size: 8px auto; } #topPanelArea .navi ul li a:hover::after { bottom: inherit; } #topPanelArea .navi ul li a span { display: inline-block; margin-bottom: 0; margin-right: 10px; position: relative; top: 2px; } #topPanelArea .navi ul li a span img { width: 60px; height: auto; } #topPanelArea .navi .scroll { position: absolute; right: 5%; bottom: 40px; } #topPanelArea .navi .scroll a {} /*============================ #movieArea ============================*/ #movieArea { padding-bottom: 40px; } #movieArea .md_container { display: flex; flex-direction: column; } #movieArea .title_sp { display: block; font-size: 1.25em; letter-spacing: 0.05em; } #movieArea .image { margin-top: 20px; width: 100%; } #movieArea .image a {} #movieArea .image a img {} #movieArea .image a::before { width: 60px; height: 60px; border-radius: 60px; } #movieArea .image a::after { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 8px solid #1f2748; } #movieArea .image a span {} #movieArea .image a span::before {} #movieArea .image a:hover img {} #movieArea .image a:hover span::before {} #movieArea .data { margin-left: 0; margin-top: 20px; } #movieArea .data .title { display: none; font-size: 1.25em; padding-bottom: 20px; letter-spacing: 0.05em; } #movieArea .data .text { margin-top: 20px; line-height: 1.5; } #movieArea .data .link { margin-top: 15px; text-align: right; } #movieArea .data .link .md_texxLink {} /*============================ #storyArea ============================*/ #storyArea { padding: 40px 0 0; } #storyArea .catch { font-size: 1.3em; line-height: 1.5; } #storyArea .link { margin-top: 0; padding-bottom: 40px; } #storyArea .link ul { display: block; max-width: inherit; padding: 0 20px; margin-top: 10px; } #storyArea .link ul li { float: inherit; width: 100%; height: 140px; margin-right: 0; margin-left: 0; margin-top: 40px; } #storyArea .link ul li:nth-child(2n) { margin-right: 0; } #storyArea .link ul li:nth-child(1) { margin-left: 0; } #storyArea .link ul li:nth-child(3) { margin-left: 0; } #storyArea .link ul li:nth-child(3) a .thum img { top: 0; transform: inherit; } #storyArea .link ul li a { display: block; height: 140px; position: relative; } #storyArea .link ul li a::after { border: solid 20px #fff; } #storyArea .link ul li a span { left: 5px; top: -16px; z-index: 1; } #storyArea .link ul li a span img { width: 100px; height: auto; } #storyArea .link ul li a .thum { overflow: hidden; height: 140px; position: relative; } #storyArea .link ul li a .thum img { width: 100%; height: auto; object-fit: cover; position: absolute; top: 50%; transform: translateY(-50%); } #storyArea .link ul li a .text { font-size: 1em; letter-spacing: 0.1em;background: rgba(255,255,255,0.75); padding: 30px 0; } #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,0.75); padding: 30px 0; letter-spacing: 0.1em; } #storyArea .grd { padding: 40px 0 0; background: #eee; } #storyArea .grd .content { margin-top: 50px; padding-left: 0; padding-bottom: 40px; } #storyArea .grd .content::before { bottom: 485px; width: 100%; height: 480px; } #storyArea .grd .content .mainImage {} #storyArea .grd .content .mainImage::before { top: -50px; width: 25%; opacity: 0.5; } #storyArea .grd .content .mainImage img {} #storyArea .grd .content .mainImage span { width: 100px; left: -20px; top: 15px; } #storyArea .grd .content .mainImage span img { width: 100px; } #storyArea .grd .content .mainImage .copy { padding: 20px; position: inherit; left: inherit; top: inherit; font-size: 1.375em; letter-spacing: 0.1em; line-height: 1.5; writing-mode: horizontal-tb; } #storyArea .grd .content .mainImage .lead { width: 90%; left: 0; bottom: 150px; padding: 10px; letter-spacing: 0.1em; font-size: 1em; } #storyArea .grd .content .subImage { height: inherit; position: relative; } #storyArea .grd .content .subImage ul {} #storyArea .grd .content .subImage ul li { display: block; margin-top: 40px; padding-left: 20%; } #storyArea .grd .content .subImage ul li:nth-child(2n) { padding-left: 0; padding-right: 20%; } #storyArea .grd .content .subImage ul li .image { text-align: right; } #storyArea .grd .content .subImage ul li .image img { width: 100%; height: auto; } #storyArea .grd .content .subImage ul li .data {} #storyArea .grd .content .subImage ul li .data .name { margin-top: 15px; font-size: 1em; } #storyArea .grd .content .subImage ul li .data .text { width: 100%; margin-top: 10px; line-height: 1.75; font-size: 0.875em; padding-right: 15px; } #storyArea .grd .content .subImage ul li:nth-child(2n) .image { text-align: left; } #storyArea .grd .content .subImage ul li:nth-child(2n) .data .name { padding-left: 15px; padding-right: 0; } #storyArea .grd .content .subImage ul li:nth-child(2n) .data .text { padding-left: 15px; padding-right: 0; } #storyArea .grd .content .button { margin-top: 30px; text-align: center; padding: 0 20px; } #storyArea .grd .content .button a { margin-left: 0; } #storyArea .grd #story01.content {} #storyArea .grd #story01.content::before {} #storyArea .grd #story01.content .subImage ul li.story01 { margin-top: 0; position: inherit; right: inherit; top: inherit; width: inherit; } #storyArea .grd #story01.content .subImage ul li.story01 .image {} #storyArea .grd #story01.content .subImage ul li.story01 .image img {} #storyArea .grd #story01.content .subImage ul li.story01 .data { position: inherit; right: inherit; top: inherit; transform: inherit; } #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: inherit; left: inherit; top: inherit; } #storyArea .grd #story01.content .subImage ul li.story02 .image { width: auto; } #storyArea .grd #story01.content .subImage ul li.story02 .image img {} #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: inherit; } #storyArea .grd #story01.content .subImage ul li.story03 { position: inherit; left: inherit; top: inherit; width: inherit; } #storyArea .grd #story01.content .subImage ul li.story03 .image {} #storyArea .grd #story01.content .subImage ul li.story03 .image img {} #storyArea .grd #story01.content .subImage ul li.story03 .data { position: inherit; left: inherit; bottom: inherit; width: inherit; } #storyArea .grd #story01.content .subImage ul li.story03 .data .name {} #storyArea .grd #story01.content .subImage ul li.story03 .data .text {} #storyArea .grd #story02.content .mainImage::before { left: inherit; right: 0; } #storyArea .grd #story02.content { margin-top: 50px; padding-left: 0; padding-right: 0; } #storyArea .grd #story02.content::before { bottom: 450px; } #storyArea .grd #story02.content .mainImage .lead { left: inherit; right: 0; text-align: right; } #storyArea .grd #story02.content .mainImage span { left: inherit; right: 0; } #storyArea .grd #story02.content .mainImage .copy { left: inherit; right: 0; text-align: right; } #storyArea .grd #story02.content .button { margin-left: 0; } #storyArea .grd #story02.content .button a { margin-left: 0; margin-right: 0; } #storyArea .grd #story02.content .subImage { height: inherit; } #storyArea .grd #story02.content .subImage ul li.story01 { position: inherit; left: inherit; top: inherit; width: inherit; } #storyArea .grd #story02.content .subImage ul li.story01 .image {} #storyArea .grd #story02.content .subImage ul li.story01 .image img {} #storyArea .grd #story02.content .subImage ul li.story01 .data { position: inherit; left: inherit; bottom: inherit; width: inherit; } #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: inherit; right: inherit; top: inherit; width: inherit; } #storyArea .grd #story02.content .subImage ul li.story02 .image {} #storyArea .grd #story02.content .subImage ul li.story02 .image img { width: 75%; height: auto; } #storyArea .grd #story02.content .subImage ul li.story02 .data { position: inherit; right: inherit; top: inherit; } #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: inherit; right: inherit; top: inherit; width: inherit; } #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: inherit; left: inherit; bottom: inherit; width: inherit; } #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: 50px; } #storyArea .grd #story03.content::before { bottom: 470px; } #storyArea .grd #story03.content .mainImage .lead {} #storyArea .grd #story03.content .subImage { height: inherit; } #storyArea .grd #story03.content .subImage ul li.story01 { position: inherit; right: inherit; top: inherit; width: inherit; } #storyArea .grd #story03.content .subImage ul li.story01 .image { width: 100%; } #storyArea .grd #story03.content .subImage ul li.story01 .image img {} #storyArea .grd #story03.content .subImage ul li.story01 .data { position: inherit; right: inherit; top: inherit; width: inherit; } #storyArea .grd #story03.content .subImage ul li.story01 .data .name {} #storyArea .grd #story03.content .subImage ul li.story01 .data .text { width: inherit; } #storyArea .grd #story03.content .subImage ul li.story01 .data .text02 { margin-top: 5px; width: inherit; font-size: 0.75em; line-height: 1.5; } #storyArea .grd #story03.content .subImage ul li.story01 .data .button { margin-top: 10px; text-align: left; padding: 0 15px 0 0; } #storyArea .grd #story03.content .subImage ul li.story01 .data .button a { display: block; width: 100%; padding: 13px 50px 12px 14px; white-space: normal; text-align: left; line-height: 1.25; } #storyArea .grd #story03.content .subImage ul li.story01 .data .button a:hover {} #storyArea .grd #story03.content .subImage ul li.story01 .data .button a::before {} #storyArea .grd #story03.content .subImage ul li.story01 .data .button a::after {} #storyArea .grd #story03.content .subImage ul li.story02 { position: inherit; left: inherit; top: inherit; width: inherit; } #storyArea .grd #story03.content .subImage ul li.story02 .image { width: inherit; } #storyArea .grd #story03.content .subImage ul li.story02 .image img { width: 50%;} #storyArea .grd #story03.content .subImage ul li.story02 .image img:first-child { margin-left: inherit; position: relative; } #storyArea .grd #story03.content .subImage ul li.story02 .data { margin-top: 40px;} #storyArea .grd #story03.content .subImage ul li.story02 .data .name {} #storyArea .grd #story03.content .subImage ul li.story02 .data .text { width: inherit; } #storyArea .grd #story03.content .subImage ul li.story03 { position: inherit; left: inherit; top: inherit; width: inherit; } #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: inherit; left: inherit; bottom: inherit; width: inherit; } #storyArea .grd #story03.content .subImage ul li.story03 .data .name {} #storyArea .grd #story03.content .subImage ul li.story03 .data .text { width: inherit; } #storyArea .modal {} #storyArea .modal-content-story { padding: 20px; width: 90%; max-height: 80%; overflow-y: scroll; } #storyArea .close { top: 10px; } #storyArea .close::before {} #storyArea .close::after {} /*============================ #prizeArea ============================*/ #prizeArea { padding: 30px 0 60px; } #prizeArea .md_container { display: block; } #prizeArea .md_container .image { width: 60%; text-align: center; } #prizeArea .md_container .image img { width: 100%; height: auto; } #prizeArea .md_container .data { margin-top: 20px; margin-left: 0; } #prizeArea .md_container .data .copy { padding: 20px 0; } #prizeArea .md_container .data .copy .title { font-size: 1.25em; letter-spacing: 0.1em; } #prizeArea .md_container .data .copy .text { font-size: 0.9125em; line-height: 1.5; } #prizeArea .md_container .data .sub { margin-top: 10px; } /*============================ #grayArea ============================*/ #grayArea { padding: 1px 0 0; } #grayArea .md_container {} #grayArea .title {} #grayArea .title span { width: 70px; height: 70px; font-size: 1.25em; padding-top: 14px; } #grayArea .title span em { font-size: 1em; } #grayArea .title .text { height: 70px; line-height: 1.25; padding: 0 20px; padding-top: 25px; font-size: 1.25em; letter-spacing: 0.1em; } #grayArea .title .sub { right: 10px; bottom: -7px; width: 100px; } #grayArea .title .sub img {} #grayArea .image {} #grayArea .image img {} #grayArea .info { padding: 0 15px 0 0; align-items: flex-start; } #grayArea .info .subImage { margin-top: -20px; width: 120px; } #grayArea .info .subImage img { width: 100%; height: auto; } #grayArea .info .subText { margin-left: 20px; margin-top: 20px; font-size: 0.9125em; line-height: 1.5; } #grayArea .pattern { margin-top: 30px; height: auto; } #grayArea .pattern .subTitle { width: auto; padding: 15px 16px 14px; font-size: 1.125em; } #grayArea .pattern .content { margin-top: 0; position: inherit; width: auto; margin-left: 0; margin-right: 0; padding: 40px 20px; left: inherit; } #grayArea .pattern .content ul {} #grayArea .pattern .content ul li { display: block; } #grayArea .pattern .content ul li img { width: 100%; height: auto; } #grayArea .button-prev, #grayArea .button-next { width: 60px; height: 60px; position: absolute; top: 50%; background-size: 30% 30%; background-repeat: no-repeat; background-position: center; opacity: 0.75; } #grayArea .button-prev { left: 50%; margin-left: -46%; background-image: url("../../imageFile/global/icon_arrow_white.svg"); /* ← 左矢印画像 */ } #grayArea .button-prev::after { display: none; } #grayArea .button-next { left: 50%; margin-left: 46%; 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; } #bottomMovieArea .md_container { display: block; } #bottomMovieArea .data {} #bottomMovieArea .data .title { font-size: 1.2em; } #bottomMovieArea .data .text { margin-top: 15px; } #bottomMovieArea .data .link { margin-top: 15px; } #bottomMovieArea .data .link .md_texxLink {} #bottomMovieArea .image { margin-top: 30px; width: 100%; margin-left: 0; } #bottomMovieArea .image a {} #bottomMovieArea .image a img { width: 100%; height: auto; } #bottomMovieArea .image a::before { width: 60px; height: 60px; border-radius: 60px; } #bottomMovieArea .image a::after { margin-left: 2px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 8px solid #1f2748; } #bottomMovieArea .image a span {} #bottomMovieArea .image a span::before {} #bottomMovieArea .image a:hover img {} #bottomMovieArea .image a:hover span::before {} /*============================ #exampleArea ============================*/ #exampleArea { padding: 60px 0; } #exampleArea .title { font-size: 1.25em; padding-bottom: 15px; } #exampleArea .list { margin-top: 0; } #exampleArea .list ul { display: block; } #exampleArea .list ul li { width: 100%; margin-top: 20px; } #exampleArea .list ul li a { display: flex; background: #fff; } #exampleArea .list ul li a .image { width: 130px; height: 130px; } #exampleArea .list ul li a .image img { object-fit: cover; height: 130px; width: auto;} #exampleArea .list ul li a .data { padding: 15px; flex: 1; } #exampleArea .list ul li a .data .subTitle { font-size: 0.9125em; } #exampleArea .list ul li a .data .price { margin-top: 12px;font-size: 0.875em; } #exampleArea .list ul li a .data .company { margin-top: 10px; font-size: 0.75em; } #exampleArea .list ul li a:hover .image img {} #exampleArea .button { margin-top: 20px; } #exampleArea .button a {} #exampleArea .snsButon { margin-top: 30px; } #exampleArea .snsButon .topButton {} #exampleArea .snsButon .topButton .md_btn_reserve {} #exampleArea .snsButon ul { margin-top: 20px; display: block; } #exampleArea .snsButon ul li { display: block; } #exampleArea .snsButon ul li:first-child { margin-right: 0; margin-bottom: 20px; } #exampleArea .snsButon ul li a { padding: 14px 18px 13px; display: flex; } #exampleArea .snsButon ul li a img {} #exampleArea .snsButon ul li a img:nth-child(2) {} #exampleArea .snsButon ul li a span { padding-left: 18px; margin-left: 20px; border-left: solid 1px #222; } /*============================ #reservationArea ============================*/ #reservationArea { padding: 40px 0 60px; } #reservationArea .image {} #reservationArea .image img { width: 40px; height: auto; } #reservationArea .title { margin-top: 20px; font-size: 1.125em; } #reservationArea .text {} #reservationArea .button { margin-top: 15px; } #reservationArea .button a {} /*============================ #catalogArea ============================*/ #catalogArea {} #catalogArea .image {} #catalogArea .image img { width: 200px; height: auto; } #catalogArea .button { margin-top: 20px; } #catalogArea .button ul { width: auto; display: block; } #catalogArea .button ul li { margin-top: 20px; } #catalogArea .button ul li a {} /* モーダルのコンテンツ部分 */ .modal-content { width: 94%; } }