/* Scss Document */ $breakpoint-sm: 375px; $breakpoint: 768px; $breakpoint-md: 1000px; $breakpoint-lg: 1500px; $txtcolor: #000000; $gold: #A9806E; $min: "Hiragino Mincho ProN W3", "ãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ ProN W3", "Hiragino Mincho ProN", "HG明æœE", "ï¼ï¼³ P明æœ", "ï¼ï¼³ 明æœ", serif; $goth: "Hiragino Sans","ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo,"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans", sans-serif; @mixin sm { @media screen and (max-width: $breakpoint-sm) { @content; } } @mixin mq { @media screen and (max-width: $breakpoint) { @content; } } @mixin ml { @media screen and (min-width: $breakpoint) { @content; } } @mixin md { @media screen and (max-width: $breakpoint-md) { @content; } } @mixin lg { @media screen and (min-width: $breakpoint-lg) { @content; } } @mixin mq-md { @media screen and (max-width: $breakpoint-md) { @content; } } //共通css * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a{ color: inherit; &:hover{ opacity: 0.7 !important; transition: 0.5s; } } img{ max-width: 100%; width: 100%; } html,body{ font-family: $min; font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body{ font-size: 1.6rem; font-weight: 300; line-height: 1.75; color: $txtcolor; font-feature-settings : "palt"; animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; display: flex; flex-direction: column; min-height: 100vh; background: #000; @include mq{ font-size: 1.4rem; } &.add_overray{ overflow: hidden; } } svg{fill: currentColor;} .sp{ display: none; @include mq{ display: block !important; } } .tb{ display: none; @include mq-md{ display: block !important; } } .pc{ display: block; @include mq{ display: none !important; } } //フォント .bodoni { font-family: 'Bodoni Moda', serif; font-weight: 700; font-style: normal; } .mont{ font-family: 'Montserrat', sans-serif; font-weight: 600; font-style: normal; } //フェードイン @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } .fadein { opacity : 0.1; transform : translate(0, 100px); transition : all 1100ms; -ms-filter: blur(6px); filter: blur(6px); @include mq{ transform : translate(0, 50px); } } .fadein.scrollin { opacity : 1; transform : translate(0, 0); -ms-filter: none; filter:none; } //震ãˆã‚‹ @keyframes hurueru { 0% {transform: none} 25% {transform: scale(1.1)} 50% {transform: none} 75% {transform: scale(1.15)} 100% {transform: none} } .fwari{ display: block; &:hover{ animation: hurueru .9s infinite; } } //カーソル #cursor { position: fixed; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #4D4D4D; width: 4px; height: 4px; border-radius: 100%; pointer-events: none; z-index: 10000001; &.active{ transform: scale(0); } } #stalker{ position: fixed; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 100%; transition: 0.3s; opacity: .7; pointer-events: none; z-index: 10000000; border: 1px solid #4D4D4D; &.active{ width: 100px; height: 100px; background: rgba(77,77,77,.3); border: none; } } //セレクト ::selection { background: #fff; } #wrapper { width: 100%; height: 100vh; scroll-snap-type: y mandatory; overflow: auto; scroll-behavior: smooth; } section{ width: 100%; height: 100%; scroll-snap-align: start; } #slide{ position: relative; article{ position: relative; width: 100%; top: 0; left: 0; height: 100vh; .main_slide{ width: 100%; height: 100vh; div{ width: 100%; height: 100vh; &.main_slide-cinema{ background: url("../img/top/slide_pc_cinema.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_cinema.jpg") center no-repeat; background-size: cover; } } &.main_slide-hto{ background: url("../img/top/slide_pc_hto.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_hto.jpg") center no-repeat; background-size: cover; } } &.main_slide-sus4{ background: url("../img/top/slide_pc_sus4.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_sus4.jpg") center no-repeat; background-size: cover; } } &.main_slide-wom{ background: url("../img/top/slide_pc_wom.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_wom.jpg") center no-repeat; background-size: cover; } } &.main_slide-hel{ background: url("../img/top/slide_pc_hel.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_hel.jpg") center no-repeat; background-size: cover; } } &.main_slide-wod{ background: url("../img/top/slide_pc_wod.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_wod.jpg") center no-repeat; background-size: cover; } } &.main_slide-pk{ background: url("../img/top/slide_pc_pk.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_pk.jpg") center no-repeat; background-size: cover; } } &.main_slide-maki{ background: url("../img/top/slide_pc_maki.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_maki.jpg") center no-repeat; background-size: cover; } } &.main_slide-climb{ background: url("../img/top/slide_pc_climb.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_climb.jpg") center no-repeat; background-size: cover; } } &.main_slide-sh{ background: url("../img/top/slide_pc_sh.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_sh.jpg") center no-repeat; background-size: cover; } } &.main_slide-as{ background: url("../img/top/slide_pc_as.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_as.jpg") center no-repeat; background-size: cover; } } &.main_slide-osc{ background: url("../img/top/slide_pc_osc.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_osc.jpg") center no-repeat; background-size: cover; } } &.main_slide-kobore{ background: url("../img/top/slide_pc_kobore.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_kobore.jpg") center no-repeat; background-size: cover; } } &.main_slide-jyu{ background: url("../img/top/slide_pc_jyu.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_jyu.jpg") center no-repeat; background-size: cover; } } &.main_slide-ann{ background: url("../img/top/slide_pc_ann.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_ann.jpg") center no-repeat; background-size: cover; } } &.main_slide-apes{ background: url("../img/top/slide_pc_apes.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/slide_sp_apes.jpg") center no-repeat; background-size: cover; } } } } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; width: 100%; height: 100%; h1{ width: 362px; margin: 0 auto 30px; top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; @include mq{ width: 248px; margin-bottom: 20px; } } h2{ width: 75px; margin: 0 auto; //padding-bottom: 100px; position: absolute; top: 30px; left: calc( 50% - 37px ); @include mq{ width: 50px; //padding-bottom: 50px; left: calc( 50% - 25px ); } } p{ font-size: 1.5rem; line-height: 2; text-align: center; @include mq{ font-size: 1.2rem; } @include sm{ line-height: 1.8; } } ul{ margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; @include mq{ margin-top: 25px; } li{ margin: 0 20px 20px; position: relative; width: auto; height: 45px; line-height: 45px; text-align: center; @include mq{ width: auto; margin: 0 auto 10px; height: 30px; line-height: 30px; } @include sm{ margin: 0 auto 8px; } &:last-child{ margin-bottom: 0; } a{ font-size: 2.4rem; text-align: center; width: 100%; height: 100%; position: relative; z-index: 4; padding: 0 20px; @include mq{ font-size: 1.5rem; } &::after{ width: 100%; height: 100%; top: 0; left: 0; position: absolute; content: ""; border: 1px solid #fff; transition: .5s; } &:hover{ &::after{ transform: scale(1.1); transition: .5s; } } } aside{ position: absolute; top: 10px; height: 20px; left: -15px; background: #fff; color: #000; line-height: 20px; font-size: 1.4rem; padding: 0 15px; @include mq{ font-size: 1.2rem; top: 6px; } } } } } .scroll{ position: absolute; bottom: 20px; padding-bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–¼"; bottom: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } } .top-lead{ color: #fff; position: relative; text-align: center; .top-lead-inner{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; } .top-lead-logo{ width: 75px; margin: 0 auto; position: absolute; top: 30px; left: calc( 50% - 37px ); @include mq{ width: 50px; left: calc( 50% - 25px ); } } h2{ max-width: 500px; width: 60%; margin: 0 auto 40px; @include mq{ width: 40%; margin: 0 auto 25px; } } h3{ color: #ddd; width: 90%; font-size: 2.4rem; margin: 0 auto 1em; line-height: 1.2; @include mq{ font-size: 1.8rem; } @include sm{ font-size: 1.6rem; } } .top-lead-txt{ width: 90%; font-size: 1.5rem; line-height: 2; text-align: center; margin: 0 auto 3em; @include mq{ font-size: 1.2rem; } @include sm{ line-height: 1.7; margin: 0 auto 2.5em; } span{ display: inline-block; } } .top-lead-list{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; row-gap: 20px; column-gap: 20px; //max-width: 975px; max-width: 1200px; width: 90%; margin: auto; @include mq{ column-gap: 2.5%; row-gap: 20px; } @include sm{ width: 94%; //column-gap: 12px; row-gap: 15px; } li{ //width: 13.5%; /*width: 135px; @include mq{ width: 23%; }*/ img{ width: 100%; height: 100%; object-fit: contain; object-position: center center; max-height: 120px; //display: flex; //align-items: center; } &.item_s{ width: 138px; @include mq{ width: 23%; } } &.item_m{ width: 115px; @include mq{ width: 22%; } } &.item_l{ width: 105px; @include mq{ width: 20%; } } &.item_ll{ width: 98px; @include mq{ width: 19.5%; } } a{ display: block; } .pt_1em{ padding-top: 1em; } .pt_05em{ padding-top: 0.5em; } /*&.kbr{ padding: 1% 1.2% 0 0.8%; } &.osc{ padding: 1.5% 0 0; } &.as{ padding: 1% 0 0; } &.sh{ padding: 1% 0 1% 1.5%; } &.climb{ padding: 0 1% 0 3%; } &.maki{ padding: 0 3.5% 0 2.5%; @include mq{ padding-top: 1%; } } &.pk{ padding: 1% 0; } &.cinema{ //padding-top: 1%; padding-right: 0.5%; @include mq{ padding-top: 3%; padding-right: 0; padding-left: 0.5%; } } &.sus4{ padding: 0 1%; @include mq{ width: 28%; } } &.hlc{ padding: 0 1%; @include mq{ width: 28%; } }*/ } } .scroll{ position: absolute; bottom: 20px; padding-bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–¼"; bottom: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } } #wod{ position: relative; background: url("../img/top/img_list_wod.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/img_list_wod_sp.jpg") center no-repeat; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; h2{ width: 370px; margin: 0 auto 25px; @include mq{ width: 205px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #hlc{ position: relative; background: url("../img/top/img_list_hlc.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/img_list_hlc_sp.jpg") center no-repeat; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; h2{ width: 340px; margin: 0 auto 45px; @include mq{ width: 193px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #wom{ position: relative; background: url("../img/top/img_list_wom.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/img_list_wom_sp.jpg") center no-repeat; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; h2{ width: 434px; margin: 0 auto 45px; @include mq{ width: 223px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #sus4{ position: relative; background: url("../img/top/img_list_sus4.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/img_list_sus4_sp.jpg") center no-repeat; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; h2{ width: 434px; margin: 0 auto 45px; @include mq{ width: 223px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #hto{ position: relative; background: url("../img/top/img_list_hto.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/img_list_hto_sp.jpg") center no-repeat; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; h2{ width: 474px; margin: 0 auto 45px; @include mq{ width: 223px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #cinema{ position: relative; background: url("../img/top/img_list_cinema_pc.jpg") center no-repeat; background-size: cover; @include mq{ background: url("../img/top/img_list_cinema_sp.jpg") center no-repeat; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; h2{ width: 474px; margin: 0 auto 45px; @include mq{ width: 223px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #pk{ position: relative; background: url("../img/top/img_list_pk_pc.jpg") center no-repeat #000; background-size: cover; @include mq{ background: url("../img/top/img_list_pk_sp.jpg") center no-repeat #000; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; h2{ width: 446px; margin: 0 auto 45px; @include mq{ width: 223px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #maki{ position: relative; background: url("../img/top/img_list_maki_pc.jpg") center no-repeat #000; background-size: cover; @include mq{ background: url("../img/top/img_list_maki_sp.jpg") center top no-repeat #000; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; h2{ width: 400px; margin: 0 auto 45px; @include mq{ width: 223px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #climb{ position: relative; background: url("../img/top/img_list_climb_pc.jpg") center no-repeat #000; background-size: cover; @include mq{ background: url("../img/top/img_list_climb_sp.jpg") center top no-repeat #000; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; h2{ width: 300px; margin: 0 auto 45px; @include mq{ width: 223px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #sh{ position: relative; background: url("../img/top/img_list_sh_pc.jpg") center no-repeat #000; background-size: cover; @include mq{ background: url("../img/top/img_list_sh_sp.jpg") center top no-repeat #000; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; h2{ width: 400px; margin: 0 auto 45px; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 240px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #as{ position: relative; background: url("../img/top/img_list_as_pc.jpg") center no-repeat #000; background-size: cover; @include mq{ background: url("../img/top/img_list_as_sp.jpg") center top no-repeat #000; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; @include mq{ top: 40%; left: 50%; transform: translate(-50%,-50%); } h2{ width: 700px; margin: 0 auto 45px; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 240px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #osc{ position: relative; background: url("../img/top/img_list_osc_pc.jpg") center no-repeat #000; background-size: cover; @include mq{ background: url("../img/top/img_list_osc_sp.jpg") center top no-repeat #000; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; @include mq{ top: 40%; left: 50%; transform: translate(-50%,-50%); } h2{ width: 700px; margin: 0 auto 45px; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 240px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #kobore{ position: relative; background: url("../img/top/img_list_kobore_pc.jpg") center no-repeat #000; background-size: cover; @include mq{ background: url("../img/top/img_list_kobore_sp.jpg") center top no-repeat #000; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; @include mq{ top: 40%; left: 50%; transform: translate(-50%,-50%); } h2{ width: 500px; margin: 0 auto 45px; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 240px; margin-bottom: 30px; } } a{ display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #jyu{ position: relative; background: url("../img/top/img_list_jyu_pc.jpg") center no-repeat #000; background-size: cover; @include mq{ background: url("../img/top/img_list_jyu_sp.jpg") center top no-repeat #000; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; top: 8%; left: 50%; transform: translateX(-50%); color: #fff; @include mq{ top: 20%; } h2{ width: 400px; margin: 0 auto 30%; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 240px; margin-bottom: 30px; } } } .main_txt-watch{ position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); width: 100%; a{ color: #fff; display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #ann{ position: relative; background: url("../img/top/img_list_ann_pc.jpg") center no-repeat #000; background-size: cover; @include mq{ background: url("../img/top/img_list_ann_sp.jpg") center top no-repeat #000; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); color: #fff; width: 100%; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ max-width: 300px; width: 75%; bottom: 13%; } &--logo{ max-width: 420px; margin: 0 auto 30px; @include mq{ max-width: 300px; } } } .main_txt-watch{ a{ color: #fff; display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } } #apes{ position: relative; background: url("../img/top/img_list_apes_pc.jpg") center no-repeat #000; background-size: cover; @include mq{ background: url("../img/top/img_list_apes_sp.jpg") center top no-repeat #000; background-size: cover; } .up{ position: absolute; top: 20px; padding-top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; font-size: 1.5rem; @include mq{ font-size: 1.4rem; } &::after{ position: absolute; content: "â–²"; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1rem; } } .main_txt{ position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); color: #fff; width: 100%; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ max-width: 300px; width: 75%; bottom: 13%; } &--logo{ max-width: 420px; margin: 0 auto 30px; @include mq{ max-width: 300px; } } } .main_txt-watch{ a{ color: #fff; display: block; margin: 0 auto; width: 180px; height: 40px; font-size: 1.8rem; line-height: 40px; text-align: center; position: relative; filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0)); @include mq{ width: 140px; line-height: 30px; height: 30px; font-size: 1.4rem; } &::before{ position: absolute; width: 100%; height: 100%; border: 1px solid #fff; content: ""; top: 0; left: 0; transition: .5s; } &:hover{ &::before{ transition: .5s; transform: scale(1.1); } } } } }