@charset "UTF-8"; /* font-family :"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif; font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'Roboto', sans-serif; */ /*$bpPC: "print,screen and (min-width:835px)"; $bpTB: "screen and (min-width:601px) and (max-width:834px)"; $bpSP: "only screen and (max-width: 600px)"; $bpTBSP: "screen and (max-width:834px)";*/ /* ---------------------------------------------------------------------------------------------------------------------------- トップページ設定 ---------------------------------------------------------------------------------------------------------------------------- */ /* line 17, style.scss */ #home #mainImg { position: relative; background: #002640; overflow: hidden; /* swiperNav */ /*@media screen and (min-width: 1700px) { height: 1000px;}*/ } /* line 20, style.scss */ #home #mainImg .mySwiperWrap.swiper-container { width: 100%; height: 100%; } /* line 23, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide .kanbai { width: 380px; } /* line 25, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .kanbai { position: absolute; z-index: 15; left: calc(100% + 20px); bottom: -10px; } /* line 26, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .copyWrap { position: absolute; z-index: 25; filter: drop-shadow(0px 0px 5px black); left: 0; bottom: 40px; width: 52%; } /* line 27, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .copyWrap .wrap { width: 100%; margin: auto; filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5)); text-align: left; display: flex; flex-direction: column; flex-wrap: wrap; } /* line 28, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .copyWrap .wrap .ci { width: 100%; margin-bottom: 35px; margin-left: -7.5%; } /* line 31, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .copyWrap .wrap .catch { width: 100%; line-height: 0; margin-bottom: 25px; padding-left: 7.5%; } /* line 32, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .copyWrap .wrap .read { color: #fff; font-size: 14px; padding-left: 7.5%; } /* line 35, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .appearance { position: absolute; z-index: 10; width: 27%; bottom: 0; right: -1%; filter: drop-shadow(0px 0px 5px white) drop-shadow(0px 0px 8px white) drop-shadow(0px 0px 15px white); } /* line 36, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .phWrap { width: 100%; height: 100%; } /* line 37, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .phWrap .ph { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* line 38, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .phWrap .ph.ph01 { position: relative; z-index: 0; } /* line 39, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .phWrap .ph.ph02 { z-index: 1; } /* line 40, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .phWrap .ph.ph03 { z-index: 2; } /* line 41, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .phWrap .ph.ph04 { z-index: 3; } /* line 42, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .phWrap .ph.ph05 { z-index: 4; } /* line 47, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .kanbai { position: absolute; z-index: 5; /*margin: 20px 0 0 auto;*/ right: -30px; top: -70px; } /* line 48, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap { position: absolute; z-index: 25; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); right: 50px; top: 100px; width: 44%; height: calc(100% - 150px); } /* line 49, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap .wrap { width: 100%; margin: auto; filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5)); text-align: left; display: flex; flex-direction: column; flex-wrap: wrap; height: 100%; } /* line 50, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap .wrap .ci { width: 82%; margin-bottom: 50px; margin-left: -50px; /*margin-left: auto;*/ /*margin-top: 0;*/ position: relative; z-index: 10; } /* line 53, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap .wrap .catch { width: 100%; line-height: 0; margin-bottom: 40px; /*padding-left: 7.5%;*/ /*margin-top: 0; margin-bottom: auto;*/ } /* line 54, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap .wrap .price { /*display: none;*/ } /* line 55, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap .wrap .read { color: #fff; font-size: 14px; /*padding-left: 7.5%;*/ text-align: right; display: none; } /* line 59, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide03 { overflow: hidden; height: 0%; padding-top: 70.677%; } /* line 60, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide03 .ph { position: absolute; top: 0; left: 0; width: 0; height: 100%; padding-left: 344.703%; background: url("../img/mainImg03.jpg") no-repeat; background-size: auto 100%; } /* line 61, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide03.play { animation: infinity-scroll-left 25s infinite linear 0s both; } @keyframes infinity-scroll-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* line 72, style.scss */ #home #mainImg .swiper-container .swiper-pagination { z-index: 50; } /* line 73, style.scss */ #home #mainImg .swiper-container .swiper-pagination .swiper-pagination-bullet { direction: none; background: rgba(255, 255, 255, 0.5); opacity: 1; } /* line 74, style.scss */ #home #mainImg .swiper-container .swiper-pagination .swiper-pagination-bullet-active { background: rgba(165, 149, 84, 0.9); } /* line 76, style.scss */ #home #mainImg .swiper-container .swiper-button-prev, #home #mainImg .swiper-container .swiper-button-next { width: 40px; height: 40px; transition: .5s; display: none; } /* line 77, style.scss */ #home #mainImg .swiper-container .swiper-button-prev::before, #home #mainImg .swiper-container .swiper-button-next::before { background-image: none !important; content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; z-index: 10; font-family: "Font Awesome 5 Pro"; color: #fff; font-size: 21px; font-size: 1.3125rem; line-height: 1.3125rem; font-weight: 300; } /* line 78, style.scss */ #home #mainImg .swiper-container .swiper-button-prev::after, #home #mainImg .swiper-container .swiper-button-next::after { display: none; } /* line 81, style.scss */ #home #mainImg .swiper-container .swiper-button-prev::before { content: "\f053"; padding-right: 3px; } /* line 82, style.scss */ #home #mainImg .swiper-container .swiper-button-next::before { content: "\f054"; padding-left: 3px; } @media only screen and (max-width: 834px) { /* line 91, style.scss */ #home #mainImg::before { content: ""; width: 100%; height: 100%; background: url("../img/mainImgSpProt.png") no-repeat bottom; background-size: 100% auto; position: absolute; bottom: 0; left: 0; z-index: 1; } /* line 96, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide .kanbai { width: 120px; } /* line 98, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .kanbai { left: -15px; bottom: calc(100% - 45px); width: 68px; z-index: 0; display: none; } /* line 99, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .copyWrap { /*top: 12px;*/ filter: drop-shadow(0px 0px 5px black); left: 0; bottom: 15px; width: 100%; } /* line 100, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .copyWrap .wrap { width: 90%; margin: auto; filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5)); position: relative; z-index: 10; } /* line 101, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .copyWrap .wrap .ci { width: 70%; margin-bottom: 15px; margin-left: -11%; position: relative; z-index: 10; } /* line 104, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .copyWrap .wrap .catch { width: 59%; margin-bottom: 12px; padding-left: 0%; } /* line 106, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .copyWrap .wrap .read { font-size: 11px; line-height: 1.6; font-weight: 200; padding-left: 0; padding-right: 41%; text-align: justify; text-justify: inter-ideograph; } /* line 109, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slide01 .appearance { width: 42%; bottom: 0; right: -1%; filter: drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 5px white); } /* line 121, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .kanbai { right: -0px; top: 80px; } /* line 122, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap { filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); right: 0; left: 0; margin: auto; top: 12px; width: 94%; height: calc(100% - 50px); } /* line 123, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap .wrap { width: 100%; height: 100%; margin: auto; filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5)); flex-direction: row; align-items: flex-end; justify-content: space-between; } /* line 124, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap .wrap .ci { width: 58%; margin: 0 0 auto; } /* line 127, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap .wrap .catch { width: 39%; line-height: 0; margin: 7% 0 auto; } /* line 128, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap .wrap .price { width: 100%; margin: auto auto 0; } /* line 129, style.scss */ #home #mainImg .mySwiperWrap.swiper-container .swiper-wrapper .swiper-slide.slideCmn .copyWrap .wrap .read { color: #fff; font-size: 14px; /*padding-left: 7.5%;*/ text-align: right; display: none; } /* line 137, style.scss */ #home #mainImg .swiper-container .swiper-pagination { bottom: 7px; } } /* line 145, style.scss */ #home .cta { position: relative; z-index: 20; } /* line 151, style.scss */ #home #pointWrap { background: #002640; color: #fff; font-family: "YakuHanMP", "Shippori Mincho B1", serif; font-weight: 500; letter-spacing: -.015em; /*padding: 22.5px 0;*/ padding: 40px 0 50px; } /* line 153, style.scss */ #home #pointWrap ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; align-items: flex-end; } /* line 154, style.scss */ #home #pointWrap ul li { /*font-size: 24px;*/ font-size: 35px; line-height: 1.5; text-align: left; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; /*height: 50px;*/ } /* line 155, style.scss */ #home #pointWrap ul li:not(:last-child) { padding-right: 30px; margin-right: 30px; } /* line 156, style.scss */ #home #pointWrap ul li:not(:last-child)::after { content: ""; width: 1px; height: 50px; background: rgba(255, 255, 255, 0.8); position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; left: 100%; } /* line 158, style.scss */ #home #pointWrap ul li span, #home #pointWrap ul li em, #home #pointWrap ul li strong, #home #pointWrap ul li small { letter-spacing: -.015em; } /* line 159, style.scss */ #home #pointWrap ul li .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end; justify-content: center; } /* line 160, style.scss */ #home #pointWrap ul li .wrap:not(:last-child) { margin-right: 12px; } /* line 161, style.scss */ #home #pointWrap ul li .wrap .t { display: flex; flex-direction: column; flex-wrap: wrap; margin-right: 8px; } /* line 162, style.scss */ #home #pointWrap ul li .wrap .t span { font-size: 60%; line-height: 1; font-family: "YakuHanJP", "Noto Sans JP", sans-serif; position: absolute; top: -15px; left: 0; } /* line 163, style.scss */ #home #pointWrap ul li .wrap .t em { position: relative; } /* line 164, style.scss */ #home #pointWrap ul li .wrap .t em small { font-size: 50%; position: absolute; right: 18px; bottom: calc(100% - 20px); white-space: nowrap; } /* line 165, style.scss */ #home #pointWrap ul li .wrap .t em i { font-size: 68%; margin-left: 3px; } /* line 168, style.scss */ #home #pointWrap ul li .wrap .min { position: relative; } /* line 170, style.scss */ #home #pointWrap ul li .wrap .min em span { font-size: 60%; line-height: 1.2; } /* line 171, style.scss */ #home #pointWrap ul li .wrap .min em strong { font-size: 195%; line-height: .5; font-style: italic; /*color: $subColor3;*/ padding-right: 2px; } /* line 173, style.scss */ #home #pointWrap ul li .wrap .min small { font-size: 50%; /*@include centerX; text-align: center; top: calc(100% - 5px);*/ margin-left: 3px; } /* line 175, style.scss */ #home #pointWrap ul li .wrap .cap { font-size: 11px; letter-spacing: 0; width: 100%; } /* line 177, style.scss */ #home #pointWrap ul li.list01, #home #pointWrap ul li.list02 { margin-bottom: 30px; } /* line 178, style.scss */ #home #pointWrap ul li.list02::after { content: none; } /* line 180, style.scss */ #home #pointWrap ul li.list03 .wrap { position: relative; } /* line 181, style.scss */ #home #pointWrap ul li.list03 .wrap .cap { position: absolute; left: 0; right: 0; margin: auto; z-index: 10; top: calc(100% + 0px); text-align: center; } /* line 187, style.scss */ #home #pointWrap ul li.list04 .wrap .min em { display: flex; justify-content: space-between; flex-wrap: wrap; } /* line 188, style.scss */ #home #pointWrap ul li.list04 .wrap .min em span { font-size: 60%; line-height: 1.2; } /* line 189, style.scss */ #home #pointWrap ul li.list04 .wrap .min em strong { font-size: 195%; line-height: .5; padding-right: 4px; } /* line 190, style.scss */ #home #pointWrap ul li.list04 .wrap .min em strong + span { font-size: 80%; margin-top: auto; } @media only screen and (max-width: 834px) { /* line 151, style.scss */ #home #pointWrap { padding: 18px 0 18px; } /* line 204, style.scss */ #home #pointWrap ul li { font-size: 22px; line-height: 1.5; text-align: left; height: auto; width: 94%; justify-content: center; /*&:nth-of-type(1){ align-items: flex-end; padding-top: 20px; .wrap { flex-direction: column; &:not(:last-child){ margin-right: 40px;} .t { margin-right: 0px; span { @include centerX; top: 0; text-align: center; font-size: 75%;} em { small {} } } .min { margin-top: 20px; em { span {} strong {} } small {} } } }*/ } /* line 205, style.scss */ #home #pointWrap ul li:not(:last-child) { padding-right: 0; margin-right: 0; margin-bottom: 15px; padding-bottom: 15px; } /* line 206, style.scss */ #home #pointWrap ul li:not(:last-child)::after { width: 100%; height: 1px; position: relative; top: auto; left: auto; bottom: auto; right: auto; transform: none; position: absolute; left: 0; right: 0; margin: auto; z-index: 10; top: calc(100% - 3px); background: linear-gradient(to right, #242424 0%, rgba(255, 255, 255, 0.6) 25%, rgba(255, 255, 255, 0.6) 75%, #242424 100%); } /* line 209, style.scss */ #home #pointWrap ul li .wrap:not(:last-child) { margin-right: 0px; } /* line 210, style.scss */ #home #pointWrap ul li .wrap .t { margin-right: 8px; } /* line 211, style.scss */ #home #pointWrap ul li .wrap .t span { font-size: 62.5%; line-height: 1; position: relative; top: auto; left: auto; bottom: auto; right: auto; transform: none; } /* line 213, style.scss */ #home #pointWrap ul li .wrap .t em small { font-size: 45%; right: 5px; bottom: calc(100% - 13px); } /* line 214, style.scss */ #home #pointWrap ul li .wrap .t em i { font-size: 56%; margin-left: 2px; } /* line 219, style.scss */ #home #pointWrap ul li .wrap .min em span { font-size: 56%; } /* line 220, style.scss */ #home #pointWrap ul li .wrap .min em strong { font-size: 195%; } /* line 222, style.scss */ #home #pointWrap ul li .wrap .min small { font-size: 56%; position: relative; top: auto; left: auto; bottom: auto; right: auto; transform: none; margin-left: 3px; } /* line 243, style.scss */ #home #pointWrap ul li.list01, #home #pointWrap ul li.list02 { margin-bottom: 15px; } /* line 244, style.scss */ #home #pointWrap ul li.list02::after { content: ""; } /* line 252, style.scss */ #home #pointWrap ul li.list03 .wrap .min small { font-size: 80%; margin-left: 0; } /* line 254, style.scss */ #home #pointWrap ul li.list03 .wrap .cap { position: relative; top: auto; left: auto; bottom: auto; right: auto; transform: none; text-align: left; font-size: 10px; } } @media only screen and (max-width: 834px) and (min-width: 601px) and (max-width: 834px) { /* line 254, style.scss */ #home #pointWrap ul li.list03 .wrap .cap { text-align: center; } } /* line 262, style.scss */ #home .ytWrap { width: 820px; margin: 30px auto 80px; } /* line 263, style.scss */ #home .ytWrap .yt { width: 100%; height: 0; padding-top: 56.25%; position: relative; } /* line 264, style.scss */ #home .ytWrap .yt iframe { width: 100%; height: 100%; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; z-index: 10; } @media only screen and (max-width: 834px) { /* line 262, style.scss */ #home .ytWrap { width: 100%; margin: 0px auto 30px; } } @media only screen and (max-width: 834px) and (min-width: 601px) and (max-width: 834px) { /* line 262, style.scss */ #home .ytWrap { width: 92%; } } /* line 278, style.scss */ #home #intro { background: #eeeeef; padding: 50px 0 80px; } /* line 279, style.scss */ #home #intro .bnrSelectplan { filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1)); } /* line 281, style.scss */ #home #intro .contact .wrap { background: transparent; margin-bottom: 0; margin-top: 20px; } /* line 282, style.scss */ #home #intro .contact .tit.en, #home #intro .contact .info, #home #intro .contact .linelink, #home #intro .contact .yokoku { display: none; } @media only screen and (max-width: 834px) { /* line 278, style.scss */ #home #intro { padding: 30px 0 50px; } /* line 297, style.scss */ #home #intro .bnrSelectplan { width: 90%; margin: auto; } /* line 299, style.scss */ #home #intro .contact .wrap { background: transparent; margin-top: 0px; padding-bottom: 30px; } /* line 300, style.scss */ #home #intro .contact .tit.en, #home #intro .contact .info, #home #intro .contact .linelink, #home #intro .contact .yokoku { display: none; } } /* line 318, style.scss */ #home #intro #news .enT { font-size: 28px; color: #a59554; line-height: 1.2; letter-spacing: .15em; padding-bottom: 5px; } /* line 319, style.scss */ #home #intro #news .wrap { width: 80%; margin: auto; height: 160px; border: 1px solid #d2d2d2; position: relative; padding: 0 60px; } /* line 320, style.scss */ #home #intro #news .wrap::before, #home #intro #news .wrap::after { content: ""; width: calc(100% - 60px); height: 10px; background: #eeeeef; position: absolute; left: 0; right: 0; margin: auto; z-index: 10; } /* line 321, style.scss */ #home #intro #news .wrap::before { top: -5px; } /* line 322, style.scss */ #home #intro #news .wrap::after { bottom: -5px; } /* line 324, style.scss */ #home #intro #news ul { padding: 30px 0; position: relative; height: 100%; } /* line 325, style.scss */ #home #intro #news ul::before { content: ""; width: 1px; height: calc(100% - 50px); background: #d2d2d2; position: absolute; top: 25px; left: 150px; } /* line 326, style.scss */ #home #intro #news ul li { display: flex; justify-content: space-between; flex-wrap: wrap; text-align: left; padding-right: 15px; } /* line 327, style.scss */ #home #intro #news ul li span, #home #intro #news ul li em { font-size: 15px; } /* line 328, style.scss */ #home #intro #news ul li em { width: 150px; } /* line 329, style.scss */ #home #intro #news ul li span { width: calc(100% - 190px); } /* line 332, style.scss */ #home #intro #news .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: rgba(213, 205, 182, 0.8) !important; } /* line 333, style.scss */ #home #intro #news .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background: #d5cdb6 !important; } /* line 334, style.scss */ #home #intro #news .mCSB_scrollTools .mCSB_draggerRail { background-color: rgba(0, 0, 0, 0.1) !important; } /* line 335, style.scss */ #home #intro #news a { color: #a59554; display: inline-block; } /* line 336, style.scss */ #home #intro #news a:hover { text-decoration: underline; } @media only screen and (max-width: 834px) { /* line 344, style.scss */ #home #intro #news .enT { font-size: 24px; } /* line 345, style.scss */ #home #intro #news .wrap { width: 90%; margin: auto; height: 150px; padding: 0 25px; } /* line 346, style.scss */ #home #intro #news .wrap::before, #home #intro #news .wrap::after { width: calc(100% - 30px); height: 10px; } /* line 348, style.scss */ #home #intro #news ul { padding: 15px 0; } /* line 349, style.scss */ #home #intro #news ul::before { width: 1px; height: calc(100% - 50px); top: 25px; left: 150px; display: none; } /* line 351, style.scss */ #home #intro #news ul li span, #home #intro #news ul li em { font-size: 12px; line-height: 1.8; } /* line 352, style.scss */ #home #intro #news ul li em { width: 100%; } /* line 353, style.scss */ #home #intro #news ul li span { width: calc(100% - 0px); } } /* line 369, style.scss */ #home #topConcept { margin: 0 auto 180px; /*background: $bgColor3;*/ position: relative; } /* line 370, style.scss */ #home #topConcept .ph { margin-bottom: 40px; } /* line 371, style.scss */ #home #topConcept .catch { color: #a59554; letter-spacing: .15em; margin-bottom: 20px; } /* line 372, style.scss */ #home #topConcept .read { font-size: 16px; line-height: 2.2; } /* line 373, style.scss */ #home #topConcept .cmnBtn { /*margin: -30px auto 0;*/ position: absolute; left: 0; right: 0; margin: auto; z-index: 10; bottom: -90px; } @media only screen and (max-width: 834px) { /* line 369, style.scss */ #home #topConcept { margin: 0 auto 60px; background: none; } /* line 383, style.scss */ #home #topConcept .ph { margin-bottom: 20px; } /* line 384, style.scss */ #home #topConcept .catch { font-size: 24px; line-height: 1.8; letter-spacing: .1em; margin-bottom: 15px; padding-left: .25em; } /* line 385, style.scss */ #home #topConcept .read { font-size: 15px; line-height: 1.8; text-align: justify; text-justify: inter-ideograph; padding: 0 5%; } /* line 386, style.scss */ #home #topConcept .cmnBtn { position: relative; top: auto; left: auto; bottom: auto; right: auto; transform: none; margin: 20px auto 0; } } /* line 398, style.scss */ #home #linkWrap { margin-bottom: 120px; } /* line 399, style.scss */ #home #linkWrap .list { height: 560px; } /* line 400, style.scss */ #home #linkWrap .list:not(:last-child) { margin-bottom: 80px; } /* line 401, style.scss */ #home #linkWrap .list a { display: flex; justify-content: space-between; flex-wrap: wrap; flex-wrap: nowrap; color: #fff; position: relative; width: 100%; height: 100%; } /* line 402, style.scss */ #home #linkWrap .list a:hover { opacity: 1; } /* line 405, style.scss */ #home #linkWrap .list a:hover .textWrap .text .btn { border: 1px solid rgba(201, 177, 104, 0); left: 10px; } /* line 406, style.scss */ #home #linkWrap .list a:hover .textWrap .text .btn::after { width: 100%; background: white; opacity: .9; } /* line 407, style.scss */ #home #linkWrap .list a:hover .textWrap .text .btn em, #home #linkWrap .list a:hover .textWrap .text .btn i { /*color: $subColor;*/ } /* line 408, style.scss */ #home #linkWrap .list a:hover .textWrap .text .btn i { right: 10px; opacity: 1; } /* line 414, style.scss */ #home #linkWrap .list .textWrap { width: 62.5%; height: 100%; background-size: cover !important; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 0 70px; } /* line 415, style.scss */ #home #linkWrap .list .textWrap .text { text-align: left; /*width: 366px;*/ } /* line 416, style.scss */ #home #linkWrap .list .textWrap .text .t { display: flex; flex-direction: column; flex-wrap: wrap; position: relative; margin-bottom: 20px; } /* line 417, style.scss */ #home #linkWrap .list .textWrap .text .t span { color: #c9b168; font-size: 58px; line-height: 1; } /* line 418, style.scss */ #home #linkWrap .list .textWrap .text .t em { font-size: 20px; /*position: absolute;*/ /*margin-left: auto;*/ } /* line 420, style.scss */ #home #linkWrap .list .textWrap .text .copy { font-family: "YakuHanMP", "Shippori Mincho B1", serif; font-weight: 500; letter-spacing: -.015em; font-size: 26px; letter-spacing: -.05em; line-height: 1.8; margin-bottom: 45px; } /* line 421, style.scss */ #home #linkWrap .list .textWrap .text .btn { border: 1px solid #c9b168; width: 206px; height: 47px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; left: 0; transition: .5s; } /* line 422, style.scss */ #home #linkWrap .list .textWrap .text .btn::after { content: ""; width: 0; height: 100%; background: rgba(255, 255, 255, 0); transition: .5s; position: absolute; top: 0; left: 0; z-index: 0; opacity: 0; } /* line 423, style.scss */ #home #linkWrap .list .textWrap .text .btn em, #home #linkWrap .list .textWrap .text .btn i { color: #c9b168; transition: .5s; } /* line 424, style.scss */ #home #linkWrap .list .textWrap .text .btn em { font-family: "EB Garamond", serif; font-size: 22px; line-height: 1; padding-bottom: 4px; position: relative; z-index: 5; } /* line 425, style.scss */ #home #linkWrap .list .textWrap .text .btn i { font-size: 15px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; right: 50px; opacity: 0; } /* line 429, style.scss */ #home #linkWrap .list .phWrap { width: 38%; } /* line 430, style.scss */ #home #linkWrap .list .phWrap .ph { height: 100%; } /* line 433, style.scss */ #home #linkWrap .list:nth-of-type(even) a { flex-direction: row-reverse; } /* line 435, style.scss */ #home #linkWrap .list:nth-of-type(even) .textWrap .text { margin-left: auto; } /* line 437, style.scss */ #home #linkWrap .list:nth-of-type(even) .textWrap .text .btn { margin-left: auto; } /* line 444, style.scss */ #home #linkWrap .list.location a .textWrap { background: url("../img/topLinkLocation.jpg") no-repeat center; } /* line 447, style.scss */ #home #linkWrap .list.location a .textWrap .text .t span { /*width: 320px; margin-left: -25px;*/ } /* line 448, style.scss */ #home #linkWrap .list.location a .textWrap .text .t em { /*top: 95px; left: 140px;*/ } /* line 457, style.scss */ #home #linkWrap .list.location a .phWrap { display: flex; flex-direction: column; flex-wrap: wrap; } /* line 458, style.scss */ #home #linkWrap .list.location a .phWrap .ph { height: 50%; } /* line 464, style.scss */ #home #linkWrap .list.plan a .textWrap { background: url("../img/topLinkPlan.jpg") no-repeat center; } /* line 467, style.scss */ #home #linkWrap .list.plan a .textWrap .text .t span { /*width: 396px; margin-left: -30px;*/ } /* line 468, style.scss */ #home #linkWrap .list.plan a .textWrap .text .t em { /*top: 113px; left: 80px;*/ } /* line 477, style.scss */ #home #linkWrap .list.plan a .phSet { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; left: -100px; display: flex; justify-content: space-between; flex-wrap: wrap; width: 53%; } /* line 478, style.scss */ #home #linkWrap .list.plan a .phSet .ph { width: 48%; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25)); } @media only screen and (max-width: 834px) { /* line 398, style.scss */ #home #linkWrap { margin-bottom: 50px; } /* line 489, style.scss */ #home #linkWrap .list { height: auto; width: calc(100% - 12px); margin: auto; } /* line 490, style.scss */ #home #linkWrap .list:not(:last-child) { margin-bottom: 50px; } /* line 491, style.scss */ #home #linkWrap .list a { flex-wrap: wrap; } /* line 492, style.scss */ #home #linkWrap .list .textWrap { width: 100%; /*height: 320px;*/ height: 280px; background-size: cover !important; padding: 20px 6.5% 25px; align-items: flex-start; } /* line 493, style.scss */ #home #linkWrap .list .textWrap .text { height: 100%; display: flex; flex-direction: column; flex-wrap: wrap; } } @media only screen and (max-width: 834px) and (min-width: 601px) and (max-width: 834px) { /* line 493, style.scss */ #home #linkWrap .list .textWrap .text { width: 100%; } } @media only screen and (max-width: 834px) { /* line 494, style.scss */ #home #linkWrap .list .textWrap .text .t { margin-bottom: 15px; } } @media only screen and (max-width: 834px) and (min-width: 601px) and (max-width: 834px) { /* line 494, style.scss */ #home #linkWrap .list .textWrap .text .t { flex-direction: row; align-items: baseline; } } @media only screen and (max-width: 834px) { /* line 495, style.scss */ #home #linkWrap .list .textWrap .text .t span { font-size: 46px; margin-bottom: 5px; } } @media only screen and (max-width: 834px) and (min-width: 601px) and (max-width: 834px) { /* line 495, style.scss */ #home #linkWrap .list .textWrap .text .t span { margin-bottom: 0; margin-right: 15px; } } @media only screen and (max-width: 834px) { /* line 496, style.scss */ #home #linkWrap .list .textWrap .text .t em { font-size: 16px; /*position: absolute;*/ /*margin-left: auto;*/ } /* line 498, style.scss */ #home #linkWrap .list .textWrap .text .copy { font-size: 18px; line-height: 1.8; margin-bottom: 20px; text-align: justify; text-justify: inter-ideograph; } /* line 499, style.scss */ #home #linkWrap .list .textWrap .text .btn { width: 200px; height: 40px; margin: auto auto 0; } } @media only screen and (max-width: 834px) and (min-width: 601px) and (max-width: 834px) { /* line 499, style.scss */ #home #linkWrap .list .textWrap .text .btn { margin-top: 0px; } } @media only screen and (max-width: 834px) { /* line 500, style.scss */ #home #linkWrap .list .textWrap .text .btn em { font-size: 18px; padding-bottom: 4px; } /* line 501, style.scss */ #home #linkWrap .list .textWrap .text .btn i { font-size: 13px; right: 10px; opacity: 1; } /* line 505, style.scss */ #home #linkWrap .list .phWrap { width: 100%; } /* line 509, style.scss */ #home #linkWrap .list:nth-of-type(even) a { flex-direction: row; } /* line 511, style.scss */ #home #linkWrap .list:nth-of-type(even) .textWrap .text { margin-left: 0; } /* line 513, style.scss */ #home #linkWrap .list:nth-of-type(even) .textWrap .text .btn { margin-left: auto; } /* line 520, style.scss */ #home #linkWrap .list.location a .textWrap { background: url("../img/topLinkLocation.jpg") no-repeat center; } /* line 523, style.scss */ #home #linkWrap .list.location a .textWrap .text .t span { /*width: 210px; margin-left: -10px; margin-top: 0px;*/ } /* line 524, style.scss */ #home #linkWrap .list.location a .textWrap .text .t em { /*top: -4px; left: auto; right: 0px;*/ } /* line 533, style.scss */ #home #linkWrap .list.location a .phWrap { display: flex; flex-direction: column; flex-wrap: wrap; flex-direction: row; } /* line 534, style.scss */ #home #linkWrap .list.location a .phWrap .ph { height: 190px; width: 50%; } } @media only screen and (max-width: 834px) and (min-width: 601px) and (max-width: 834px) { /* line 534, style.scss */ #home #linkWrap .list.location a .phWrap .ph { height: 400px; } } @media only screen and (max-width: 834px) { /* line 540, style.scss */ #home #linkWrap .list.plan a .textWrap { background: url("../img/topLinkPlan.jpg") no-repeat center; } /* line 541, style.scss */ #home #linkWrap .list.plan a .textWrap::after { bottom: 18px; } /* line 544, style.scss */ #home #linkWrap .list.plan a .textWrap .text .t span { /*width: 255px; margin-left: -10px; margin-top: 0px;*/ } /* line 545, style.scss */ #home #linkWrap .list.plan a .textWrap .text .t em { /*top: -4px; left: auto; right: 0px;*/ } /* line 554, style.scss */ #home #linkWrap .list.plan a .phSet { position: relative; top: auto; left: auto; bottom: auto; right: auto; transform: none; position: absolute; left: 0; right: 0; margin: auto; z-index: 10; bottom: -10px; width: 88%; } /* line 555, style.scss */ #home #linkWrap .list.plan a .phSet .ph { width: 45%; } /* line 558, style.scss */ #home #linkWrap .list.plan a .phWrap .ph { height: 190px; } } @media only screen and (max-width: 834px) and (min-width: 601px) and (max-width: 834px) { /* line 558, style.scss */ #home #linkWrap .list.plan a .phWrap .ph { height: 400px; } } .topselect{ margin: 20px auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; width: 800px; justify-content: space-between; } .topselect img{ width: 100%; max-width: 590px; } .topselect_02{ margin: 20px auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; width: 1200px; justify-content: space-between; } .topselect_02 img{ width: 100%; max-width: 590px; } @media only screen and (max-width: 834px) { .topselect{ margin: 20px auto 10px auto; display: block; width: 90%; } .topselect img{ width: 100%; margin: 0 0 10px 0 } .topselect_02{ margin: 20px auto -10px auto; display: block; width: 90%; } .topselect_02 img{ width: 100%; margin: 0 0 10px 0 } }