@charset "UTF-8"; /* Scss Document */ /* Scss Document */ /*--------------- 追加 reset ---------------*/ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } a { color: inherit; text-decoration: none; } a:visited { color: inherit; } li { list-style: none; } /*--------------- 共通 ---------------*/ html { font-size: 62.5%; } body { width: 100%; max-width: 192rem; min-width: 120rem; margin: 0 auto; color: #000; font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳＰゴシック", sans-serif; font-size: 1.6rem; line-height: 1.8; -webkit-font-feature-settings: "palt"; -moz-font-feature-settings: "palt"; -ms-font-feature-settings: "palt"; -o-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 640px) { body { min-width: 100%; font-size: 3.75vw; } } a:hover { opacity: 0.6; transition: 0.5s; } img { width: auto; max-width: 100%; height: auto; max-height: 100%; vertical-align: bottom; } @media only screen and (max-width: 640px) { .pc { display: none !important; } } .sp { display: none !important; } @media only screen and (max-width: 640px) { .sp { display: inherit !important; } } .anchor { margin-top: -100px; padding-top: 100px; } .inner { margin: 0 auto; padding: 0 3rem; width: 100%; max-width: 120rem; min-width: 120rem; } @media only screen and (max-width: 640px) { .inner { margin: 0; max-width: 100%; min-width: 100%; } } .inner._m { max-width: 1440rem; padding: 0 6.5rem; } @media only screen and (max-width: 640px) { .inner._m { padding: 0 6.25vw; min-width: 100%; } } .inner._l { max-width: 160rem; margin: 0 auto; padding: 0 4rem; } @media only screen and (max-width: 640px) { .inner._l { width: 100%; min-width: 100%; padding: 0 6.25vw; } } .inner._f { max-width: 100%; margin: 0 auto; padding: 0 4rem; } @media only screen and (max-width: 640px) { .inner._f { min-width: 100%; padding: 0 6.25vw; } } .flex_wrap { -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; justify-content: space-between; } /*--------------- テキスト関係 ---------------*/ .p { /*　基本のテキスト　*/ /*　に設定のもの font-size: 1.6rem; letter-spacing: .1em; text-indent: .1em; line-height: 1.8; @include css3(font-feature-settings, "palt"); @include sp { min-width: 100%; font-size: calc((24/640)*100vw); } */ } .p_red { color: #D80000 !important; } .p_center { text-align: center !important; } .p_pc_center { text-align: center !important; } @media only screen and (max-width: 640px) { .p_pc_center { text-align: left !important; } } /*--------------- header ---------------*/ .header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 192rem; min-width: 120rem; height: 10rem; background: rgba(0, 0, 0, 0.5); z-index: 8888; } @media only screen and (max-width: 640px) { .header { height: calc(80 / 640 * 100vw); max-width: 100%; min-width: 100%; } } .header .header_logo { position: absolute; top: 0.5rem; left: 2rem; width: 24rem; z-index: 1001; } @media only screen and (max-width: 640px) { .header .header_logo { top: calc(5 / 640 * 100vw); left: calc(20 / 640 * 100vw); width: calc(200 / 640 * 100vw); } } .header .header_sns { position: absolute; top: 50%; right: 3rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; z-index: 1001; } @media only screen and (max-width: 640px) { .header .header_sns { right: calc(92 / 640 * 100vw); } } .header .header_sns li { width: 3rem; margin: 0 1rem; } @media only screen and (max-width: 640px) { .header .header_sns li { width: calc(40 / 640 * 100vw); margin: 0 calc(12 / 640 * 100vw); } } .header .gnav { margin: 0 auto; } .header .gnav_button { display: none; } @media only screen and (max-width: 640px) { .header .gnav_button { display: block; background: url("../images/common/header_menu_open.png") top right no-repeat; background-size: contain; border: none; padding: 0; width: calc(80 / 640 * 100vw); height: calc(80 / 640 * 100vw); cursor: pointer; position: fixed; top: 0; right: 0; z-index: 1001; outline: none; } } @media only screen and (max-width: 640px) { .header .gnav_button.active { background: url("../images/common/header_menu_close.png") top right no-repeat; background-size: contain; } } .header .gnav_menu { -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; justify-content: center; height: 10rem; } @media only screen and (max-width: 640px) { .header .gnav_menu { display: block; height: auto; } } .header .gnav_menu li { margin: 0 1em; font-size: 2rem; color: #FFF; font-weight: normal; letter-spacing: 0.15em; font-weight: 600; } @media only screen and (max-width: 1400px) { .header .gnav_menu li { margin: 0 0.75em; font-size: 1.8rem; letter-spacing: 0.1em; } } @media only screen and (max-width: 640px) { .header .gnav_menu li { margin: 1rem 0 0; background: rgba(255, 255, 255, 0.05); font-size: calc(24 / 640 * 100vw); line-height: 1.3; } } @media only screen and (max-width: 640px) { .header .gnav_menu li:first-child { margin-top: 0; } } @media only screen and (max-width: 640px) { .header .gnav_menu li span, .header .gnav_menu li a { display: flex; flex-direction: column; justify-content: center; width: 100%; margin: 0; padding: 3.125vw; background: url("../images/common/arrow.png") center right calc(20 / 640 * 100vw) no-repeat; background-size: calc(28 / 640 * 100vw); } } .header .gnav_menu li span:hover, .header .gnav_menu li a:hover { opacity: 0.6; transition: 0.5s; } .header .gnav_menu li span { background: none; opacity: 0.3; } @media only screen and (max-width: 640px) { .header .gnav_menu .sub { position: relative; } } @media only screen and (max-width: 640px) { .header .gnav_menu .sub:before { position: absolute; top: 0; left: calc(20 / 640 * 100vw); content: ""; width: calc(520 / 640 * 100vw); height: calc(2 / 640 * 100vw); background: rgba(255, 255, 255, 0.05); } } @media only screen and (max-width: 640px) { .header .gnav_menu .sub li { display: inline-block; margin: 0; background: none; font-size: calc(24 / 640 * 100vw); } } @media only screen and (max-width: 640px) { .header .gnav_menu .sub li a { display: inline-block; height: auto; background: none; } } .header .gnav_menu .sub li a:before { content: "・"; } .header .gnav_menu_wrapper { padding: 0 3rem 0 10rem; } @media only screen and (max-width: 640px) { .header .gnav_menu_wrapper { width: 100%; height: 100vh; transition: all 0.2s; transform: translate(100%); position: fixed; top: 0; right: 0; z-index: 1000; padding: calc(100 / 640 * 100vw) calc(40 / 640 * 100vw) calc(40 / 640 * 100vw); background-color: #000; } } @media only screen and (max-width: 640px) { .header .gnav_menu_wrapper.open { transform: translate(0); } } /*--------------- main ---------------*/ .main { overflow: hidden; } .page_ttl { padding-top: 11rem; height: 50rem; display: flex; justify-content: center; align-items: center; background: url(../images/common/bg_mv.jpg) no-repeat center top; background-size: cover; } @media only screen and (max-width: 640px) { .page_ttl { padding-top: calc(80 / 640 * 100vw); height: calc(300 / 640 * 100vw); background: url(../images/common/bg_mv_sp.jpg) no-repeat center top; background-size: cover; } } .page_ttl h1 { color: #FFF; font-size: 6rem; text-align: center; } @media only screen and (max-width: 640px) { .page_ttl h1 { font-size: 6.6666666667vw; } } /*--------------- footer ---------------*/ .footer .footer_top { overflow: hidden; } .footer .footer_top .slick-list { overflow: visible !important; } .footer .footer_top .slick-slide { height: 27rem; } @media only screen and (max-width: 640px) { .footer .footer_top .slick-slide { height: calc(232 / 640 * 100vw); } } .footer .footer_top .content { padding: 0; } .footer .footer_slider { width: 36rem; margin: 0 auto; } @media only screen and (max-width: 640px) { .footer .footer_slider { width: calc(310 / 640 * 100vw); } } .footer .footer_bottom { background: #000; } .footer .footer_bottom .content { padding: 10rem 0; } @media only screen and (max-width: 640px) { .footer .footer_bottom .content { padding: 0; } } .footer .footer_bottom .inner { display: flex; align-self: flex-start; justify-content: space-between; } @media only screen and (max-width: 640px) { .footer .footer_bottom .inner { flex-direction: column; padding: 0; } } .footer .footer_info { width: 34rem; } @media only screen and (max-width: 640px) { .footer .footer_info { order: 2; width: 100%; padding: calc(50 / 640 * 100vw) calc(40 / 640 * 100vw); background: #DE1C16; } } .footer .footer_logo { width: 34rem; margin-bottom: 2rem; } @media only screen and (max-width: 640px) { .footer .footer_logo { width: calc(348 / 640 * 100vw); margin: 0 auto calc(20 / 640 * 100vw); } } .footer .footer_sns { display: flex; align-items: flex-start; justify-content: center; } .footer .footer_sns li { width: 2.4rem; margin: 0 0.8rem; } @media only screen and (max-width: 640px) { .footer .footer_sns li { width: calc(40 / 640 * 100vw); margin: 0 calc(12 / 640 * 100vw); } } .footer .footer_nav { margin-left: 9.5rem; display: flex; align-items: flex-start; justify-content: space-between; width: 80.5rem; color: #FFF; font-size: 2rem; font-weight: normal; line-height: 1.2; } @media only screen and (max-width: 640px) { .footer .footer_nav { margin-left: 0; order: 1; flex-direction: column; width: 100%; padding: calc(30 / 640 * 100vw) calc(40 / 640 * 100vw) 0; } } @media only screen and (max-width: 640px) { .footer .footer_nav ul { width: 100%; } } .footer .footer_nav li { margin-bottom: 0.75em; } @media only screen and (max-width: 640px) { .footer .footer_nav li { margin: calc(10 / 640 * 100vw) 0 0; background: rgba(255, 255, 255, 0.05); font-size: calc(28 / 640 * 100vw); } } .footer .footer_nav li:first-child { margin-top: 0; } @media only screen and (max-width: 640px) { .footer .footer_nav li:first-child { margin-top: calc(10 / 640 * 100vw); } } @media only screen and (max-width: 640px) { .footer .footer_nav li span, .footer .footer_nav li a { display: flex; flex-direction: column; justify-content: center; width: 100%; height: calc(90 / 640 * 100vw); margin: 0; padding: 4.6875vw; background: url("../images/common/arrow.png") top calc(27 / 640 * 100vw) right calc(20 / 640 * 100vw) no-repeat; background-size: calc(37 / 640 * 100vw); } } .footer .footer_nav li span { background: none; opacity: 0.3; } .footer .footer_nav .sub { margin: 0.5em 0 1em; font-size: 1.6rem; } @media only screen and (max-width: 640px) { .footer .footer_nav .sub { position: relative; margin: 0; } } @media only screen and (max-width: 640px) { .footer .footer_nav .sub:before { position: absolute; top: 0; left: calc(20 / 640 * 100vw); content: ""; width: calc(520 / 640 * 100vw); height: calc(2 / 640 * 100vw); background: rgba(255, 255, 255, 0.05); } } .footer .footer_nav .sub li { margin-top: 0.5em; /*&:before { content: '・'; }*/ } @media only screen and (max-width: 640px) { .footer .footer_nav .sub li { display: inline-block; margin: 0; background: none; font-size: calc(24 / 640 * 100vw); } } @media only screen and (max-width: 640px) { .footer .footer_nav .sub li a { display: inline-block; height: auto; background: none; padding: calc(35 / 640 * 100vw) calc(30 / 640 * 100vw); } } .footer .footer_nav .sub li a:before { margin-right: 0.5em; content: "・"; } @media only screen and (max-width: 640px) { .footer .footer_nav .privacy { text-align: center; } } @media only screen and (max-width: 640px) { .footer .footer_nav .privacy li { display: inline-block; padding: 2em 1em; background: none; } } @media only screen and (max-width: 640px) { .footer .footer_nav .privacy li a { display: block; width: auto; height: auto; padding: 0; background: none; font-size: calc(20 / 640 * 100vw); } }/*# sourceMappingURL=common.css.map */