@charset "UTF-8"; @font-face { font-family : "UniNeueHeavy"; src : url("../webFonts/UniNeueHeavy/font.woff2") format("woff2"), url("../webFonts/UniNeueHeavy/font.woff") format("woff"); } @font-face { font-family : "UniNeueBold"; src : url("../webFonts/UniNeueBold/font.woff2") format("woff2"), url("../webFonts/UniNeueBold/font.woff") format("woff"); } @font-face { font-family : "UniNeueRegular"; src : url("../webFonts/UniNeueRegular/font.woff2") format("woff2"), url("../webFonts/UniNeueRegular/font.woff") format("woff"); } @font-face { font-family : "UniNeueBook"; src : url("../webFonts/UniNeueBook/font.woff2") format("woff2"), url("../webFonts/UniNeueBook/font.woff") format("woff"); } /* basic - foundation --------------------------------------------------------- */ html , body , div , span , object , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , a , blockquote , pre , abbr , address , cite , code , del , dfn , em , img , ins , kbd , q , samp , small , strong , sub , sup , var , b , i , dl , dt , dd , ol , ul , li , fieldset , form , label , legend , table , caption , tbody , tfoot , thead , tr , th , td , article , aside , canvas , details , figcaption , figure , footer , header , menu , nav , section , summary , time , mark , audio , video { margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%; vertical-align : baseline; background : transparent; } html { font-size : 62.5%; } body { font-family : "BIZ UDPGothic", sans-serif; font-weight : 400; color : #25282a; text-size-adjust : 100%; font-feature-settings : "palt" 1; letter-spacing : 0.1em; vertical-align : baseline; font-size : 16px; font-size : 1.6rem; word-wrap : break-word; } article , aside , details , figcaption , figure , main , footer , header , menu , nav , section { display : block; } h1 , h2 , h3 , h4 , h5 , h6 { word-break : break-word; line-break : strict; overflow-wrap : break-word; word-wrap : break-word; font-weight : 400; } ul , ol { list-style : none; } span { font-weight : inherit; } blockquote , q { quotes : none; } blockquote:before , blockquote:after , q:before , q:after { content : ""; content : none; } a { cursor : pointer; color : inherit; transition : all 0.15s ease-out; } a[class] { text-decoration : none; } address { font-style : normal; } table { width : 100%; table-layout : fixed; border-collapse : collapse; border-spacing : 0; } img { max-width : 100%; height : auto; vertical-align : top; } input[type=text] , input[type=email] , input[type=tel] , textarea , button , select , option { display : block; width : 100%; max-width : 100%; font-family : inherit; outline : none; border : 0; border-radius : 0; background : transparent; margin : 0; padding : 0; } input[type=text] , input[type=email] , input[type=tel] , textarea , button , select { -webkit-appearance : none; -moz-appearance : none; appearance : none; outline : none; } input[type=radio] , input[type=checkbox] { margin : 0; padding : 0; vertical-align : middle; } textarea { resize : vertical; } button { cursor : pointer; } /* wrapper - layout --------------------------------------------------------- */ body.is-fixed { overflow : hidden; } /* breadcrumb - layout --------------------------------------------------------- */ .l-breadcrumb { width : 100%; margin-left : auto; margin-right : auto; padding-left : 15px; padding-right : 15px; margin-top : 60px; display : none; box-sizing : border-box; overflow-x : auto; } @media screen and (min-width: 768px) { .l-breadcrumb { display : block; } } @media screen and (min-width: 1024px) { .l-breadcrumb { max-width : 1366px; padding-left : 128px; padding-right : 128px; margin-top : 78px; } } .l-breadcrumb .l-breadcrumb-list { display : flex; justify-content : flex-start; padding-top : 16px; padding-bottom : 16px; } @media screen and (min-width: 1024px) { .l-breadcrumb .l-breadcrumb-list { padding-top : 40px; padding-bottom : 60px; } } .l-breadcrumb .l-breadcrumb-list__item { font-size : 13px; font-size : 1.3rem; font-weight : 700; white-space : nowrap; position : relative; padding-right : 32px; } .l-breadcrumb .l-breadcrumb-list__item:after { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 1px solid #25282a; border-left : 0; border-bottom : 0; box-sizing : border-box; transform : translateX(-25%) translateY(-50%) rotate(45deg); margin-left : 12px; margin-right : 12px; position : absolute; right : 0; top : 50%; } .l-breadcrumb .l-breadcrumb-list__item:last-of-type { text-overflow : ellipsis; overflow : hidden; padding-right : 0; } .l-breadcrumb .l-breadcrumb-list__item:last-of-type:after { background : none; display : none; } .l-breadcrumb .l-breadcrumb-list__link { opacity : 0.5; font-weight : 400; } .l-breadcrumb .l-breadcrumb-list__link:hover { opacity : 1; } /* container - layout --------------------------------------------------------- */ /* content - layout --------------------------------------------------------- */ .l-content { position : relative; margin-left : auto; margin-right : auto; padding-left : 15px; padding-right : 15px; max-width : calc(100% - 30px); } @media screen and (min-width: 1024px) { .l-content { max-width : 1110px; padding-left : 128px; padding-right : 128px; } } @media screen and (min-width: 1024px) { .l-content.is-col2 { display : flex; justify-content : space-between; } } .l-content__main { margin-bottom : 96px; } @media screen and (min-width: 1024px) { .l-content__main { flex : 0 0 auto; width : 730px; margin-bottom : 0; } } @media screen and (min-width: 1024px) { .l-content__sub { flex : 0 0 auto; width : 220px; margin-left : 96px; } } /* footer - layout --------------------------------------------------------- */ .l-footer { width : 100%; position : relative; margin-top : -12rem; } @media screen and (min-width: 1024px) { .l-footer { min-width : 1366px; } } .l-footer:before { content : ""; display : block; width : 100%; height : 12rem; background-image : url("data:image/svg+xml;utf8,"); background-repeat : no-repeat; background-position : right top; background-size : contain; } .l-footer-pagetop { display : none; position : absolute; right : 24px; top : 110px; z-index : 100; } @media screen and (min-width: 1024px) { .l-footer-pagetop { right : 32px; } } .l-footer-pagetop .l-footer-pagetop__link { background-image : url("data:image/svg+xml;utf8,"); background-repeat : no-repeat; background-position : center center; background-size : 12px 14px; width : 36px; height : 36px; display : inline-block; background-color : #ffffff; border-radius : 50%; border : 2px solid #25282a; box-sizing : border-box; } .l-footer-pagetop.is-fixed { position : fixed; bottom : 24px; top : auto; } @media screen and (min-width: 1024px) { .l-footer-pagetop.is-fixed { bottom : 32px; } } .l-footer-contact-button { display : none; position : fixed; bottom : 24px; left : 24px; z-index : 100; } .l-footer-contact-button .c-button { font-size : 12px; font-size : 1.2rem; padding : 1.2em 1.8em 1.2em 4em; } .l-footer-contact-button .c-button:before { content : ""; position : absolute; top : 50%; transform : translateY(-50%); left : 1.8em; background-image : url("../img/common/icon_contact.svg"); background-repeat : no-repeat; background-position : left center; background-size : 1.8rem 1.6rem; width : 1.8rem; height : 1.6rem; display : inline-block; } .l-footer-contact-button.is-active { display : block; } .l-footer-floating-banner { display : none; background-color : #25282a; border : 1px solid #ffffff; bottom : -1px; left : 128px; z-index : 1; color : #ffffff; text-align : center; padding : 15px; border-radius : 15px 15px 0 0; box-shadow : 0 0 32px 0 rgba(0, 0, 0, 0.2); } @media screen and (min-width: 1921px) { .l-footer-floating-banner.is-fixed { position : fixed; display : block; } } .l-footer-floating-banner .l-footer-floating-banner__logo { margin-bottom : 15px; } .l-footer-floating-banner .l-footer-floating-banner-list { display : flex; } .l-footer-floating-banner .l-footer-floating-banner-list .l-footer-floating-banner-list__item { font-size : 12px; font-size : 1.2rem; } .l-footer-floating-banner .l-footer-floating-banner-list .l-footer-floating-banner-list__item:after { content : "/"; display : inline-block; } .l-footer-floating-banner .l-footer-floating-banner-list .l-footer-floating-banner-list__item:last-child:after { content : ""; } .l-footer__inner { width : 100%; background-color : #25282a; padding-top : 80px; padding-bottom : 116px; position : relative; background-image : url("../img/common/bg_curve-line.svg"); background-repeat : no-repeat; background-position : right top 16px; background-size : 15.8rem 14.8rem; } @media screen and (min-width: 1024px) { .l-footer__inner { padding-bottom : 32px; } } .l-footer__inner:before { content : ""; display : block; width : calc(100% - 15.8rem); height : 1px; background-image : url("../img/common/bg_line.svg"); background-repeat : repeat-x; background-position : left top; background-size : contain; position : absolute; left : 0; top : 16px; } .l-footer-content { color : #ffffff; letter-spacing : 0; padding-left : 15px; padding-right : 15px; } .l-footer-content .l-footer-content__inner { margin-left : auto; margin-right : auto; display : flex; flex-direction : column; flex-wrap : wrap; justify-content : center; } @media screen and (min-width: 1024px) { .l-footer-content .l-footer-content__inner { flex-direction : row; width : 1110px; justify-content : flex-start; } } .l-footer-sns-list { display : flex; justify-content : center; column-gap : 16px; margin-bottom : 32px; } @media screen and (min-width: 1024px) { .l-footer-sns-list { order : 1; margin-left : auto; } } .l-footer-sns-list .l-footer-sns-list__icon { fill : #ffffff; width : 32px; height : 32px; } .l-footer-nav { width : 58.13vw; margin-left : auto; margin-right : auto; margin-bottom : 36px; } @media screen and (min-width: 1024px) { .l-footer-nav { width : auto; margin-left : 0; margin-right : 0; order : 0; margin-bottom : 150px; } } .l-footer-nav-group { display : flex; flex-wrap : wrap; flex-direction : column; font-size : 13px; font-size : 1.3rem; } @media screen and (min-width: 1024px) { .l-footer-nav-group { column-gap : 48px; width : 100%; flex-direction : row; order : 0; } } .l-footer-nav-list .l-footer-nav-list__parent { position : relative; } .l-footer-nav-list .l-footer-nav-list__parent:after { content : ""; display : block; background-image : url("data:image/svg+xml;utf8,"); background-repeat : no-repeat; background-position : center center; background-size : contain; width : 10px; height : 6px; position : absolute; right : 0; top : 50%; } @media screen and (min-width: 1024px) { .l-footer-nav-list .l-footer-nav-list__parent:after { background-image : none; } } .l-footer-nav-list .l-footer-nav-list__parent.is-open:after { transform : translateY(-50%) rotateZ(180deg); } .l-footer-nav-list .l-footer-nav-list__item { padding-top : 8px; padding-bottom : 8px; } @media screen and (min-width: 1024px) { .l-footer-nav-list .l-footer-nav-list__item { margin-bottom : 24px; padding-top : 0; padding-bottom : 0; } .l-footer-nav-list .l-footer-nav-list__item:last-child { margin-bottom : 0; } } .l-footer-nav-child-wrap { display : none; } @media screen and (min-width: 1024px) { .l-footer-nav-child-wrap { display : block; } } .l-footer-nav-child { color : rgba(255, 255, 255, 0.5); margin-top : 1em; margin-bottom : 1em; } @media screen and (min-width: 1024px) { .l-footer-nav-child { margin-top : 24px; } } .l-footer-nav-child .l-footer-nav-child__item { margin-bottom : 1em; } .l-footer-nav-child .l-footer-nav-child__item:last-child { margin-bottom : 0; } .l-footer-nav-list__item.l-footer-nav-list__store { margin-top : 40px; } @media screen and (min-width: 1024px) { .l-footer-nav-list__item.l-footer-nav-list__store { margin-top : 80px; margin-bottom : 13px; } } .l-footer-store { color : #ff6a14; } .l-footer-store .l-footer-store__link { width : 100%; display : inline-block; background-image : url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2210.828%22%20viewBox%3D%220%200%2014%2010.828%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_6138%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%206138%22%20transform%3D%22translate(-1270.02%20-490.236)%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_19%22%20data-name%3D%22%E7%B7%9A%2019%22%20x2%3D%2212%22%20transform%3D%22translate(1271.02%20495.617)%22%20fill%3D%22none%22%20stroke%3D%22%23ed7700%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_134%22%20data-name%3D%22%E3%83%91%E3%82%B9%20134%22%20d%3D%22M716.608%2C387.713l4-4-4-4%22%20transform%3D%22translate(562.412%20111.937)%22%20fill%3D%22none%22%20stroke%3D%22%23ed7700%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat : no-repeat; background-position : right center; } @media screen and (min-width: 1024px) { .l-footer-store .l-footer-store__link { background-image : none; } } .l-footer-repair { color : #ff6a14; } .l-footer-sub { font-size : 13px; font-size : 1.3rem; display : flex; flex-wrap : wrap; justify-content : center; gap : 24px 32px; color : rgba(255, 255, 255, 0.5); margin-bottom : 24px; } @media screen and (min-width: 1024px) { .l-footer-sub { justify-content : flex-start; margin-bottom : 0; order : 2; margin-left : auto; } } .l-footer-copyright { font-size : 12px; font-size : 1.2rem; text-align : center; } .l-footer-copyright span { font-weight : 700; } @media screen and (min-width: 1024px) { .l-footer-copyright { text-align : left; order : 1; } } /* header - layout --------------------------------------------------------- */ .l-header { position : fixed; top : 0; left : 0; width : 100%; height : auto; z-index : 9999; } @media screen and (min-width: 1024px) { .l-header { min-width : 1366px; } } .l-header { width : 100%; height : 60px; background-color : rgba(255, 255, 255, 0.93); color : #25282a; font-weight : 700; letter-spacing : 0; overflow-y : auto; } @media screen and (min-width: 1024px) { .l-header { height : 0; overflow-y : visible; } .l-header:before { content : ""; background-image : url("../img/header/header_curve.png"); background-repeat : no-repeat; background-position : right bottom; background-size : contain; display : block; width : 98px; height : 78px; position : absolute; right : 0; bottom : -78px; } .l-header:after { content : ""; width : calc(100% - 98px); background-color : rgba(255, 255, 255, 0.93); border-bottom : 1px solid #25282a; box-sizing : border-box; display : block; height : 78px; position : absolute; left : 0; bottom : -78px; } } .l-header:not(.is-open).is-transparent { background-color : transparent; } @media screen and (min-width: 1024px) { .l-header:not(.is-open).is-transparent:before , .l-header:not(.is-open).is-transparent:after { visibility : hidden; } } .l-header-info { position : relative; margin-left : auto; margin-right : auto; display : flex; align-items : center; padding-left : 15px; padding-right : 15px; min-height : 60px; z-index : 100; } @media screen and (min-width: 1024px) { .l-header-info { padding-left : 128px; padding-right : 128px; min-height : 78px; min-width : 1110px; background-color : transparent; } } .l-nav-front { color : #25282a; display : none; } @media screen and (min-width: 1024px) { .l-nav-front { display : block; margin-left : 32px; } } .l-nav-front-group { display : flex; font-size : 13px; font-size : 1.3rem; font-weight : 700; letter-spacing : 0; } .l-nav-front-group .l-nav-front-group__link { position : relative; display : flex; flex-direction : column; justify-content : center; align-items : center; height : 78px; } .l-nav-front-group .l-nav-front-group__link { padding-left : 16px; padding-right : 16px; } .l-nav-front-group .l-nav-front-group__item:hover .l-nav-front-group__link { color : #ff6a14; } .l-nav-front-group .l-nav-front-group__item:not(.has-no-dropdown):hover .l-nav-front-group__link:after { content : ""; display : inline-block; vertical-align : middle; width : 1.4rem; height : 1.4rem; border : 1px solid #25282a; border-left : 0; border-bottom : 0; box-sizing : border-box; transform : translateX(-50%) rotate(135deg); position : absolute; bottom : 8px; left : 50%; transition : all 0.25s ease-out; } .l-header-store { margin-left : auto; } .l-header-store .l-header-store__button { font-size : 13px; font-size : 1.3rem; min-width : 160px; border : 1px solid #ff6a14; background-color : #ff6a14; color : #ffffff; } @media screen and (min-width: 1024px) { .l-header-store .l-header-store__button { border : 1px solid #ff6a14; background-color : #ffffff; color : #ff6a14; } .l-header-store .l-header-store__button:hover { background-color : #ff6a14; color : #ffffff; } } .l-nav-button { position : relative; flex : 0 0 auto; border : 0; padding : 0; width : 20px; height : 20px; margin-left : 15px; } @media screen and (min-width: 1024px) { .l-nav-button { margin-left : 30px; } } .l-nav-button .l-nav-button__line { display : block; width : 20px; height : 1px; background : #25282a; position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); } .l-nav-button .l-nav-button__line:before , .l-nav-button .l-nav-button__line:after { content : ""; display : block; position : absolute; width : 20px; height : 1px; background : #25282a; transition : transform 0.25s ease-out; } .l-nav-button .l-nav-button__line:before { top : -6px; } .l-nav-button .l-nav-button__line:after { top : 6px; } .l-nav-button.is-open .l-nav-button__line { background : transparent; } .l-nav-button.is-open .l-nav-button__line:before { transform : rotate(-45deg) translateY(0px); top : 0; } .l-nav-button.is-open .l-nav-button__line:after { transform : rotate(45deg) translateY(0px); top : 0; } .l-nav { position : relative; z-index : 9999; } .l-nav-group { display : flex; flex-direction : column; width : calc(100% - 30px); margin-left : auto; margin-right : auto; } @media screen and (min-width: 1024px) { .l-nav-group { flex-direction : row; column-gap : 46px; width : auto; min-width : 1110px; padding-left : 128px; padding-right : 128px; padding-top : 58px; padding-bottom : 48px; } } .l-nav-group .l-nav-group__item { flex : 0 0 auto; border-bottom : 1px solid #707070; } .l-nav-group .l-nav-group__item:last-child { border-bottom : 0; } @media screen and (min-width: 1024px) { .l-nav-group .l-nav-group__item { border-bottom : 0; } } .l-nav-list { font-size : 16px; font-size : 1.6rem; } .l-nav-list .l-nav-list__item { padding-top : 24px; padding-bottom : 24px; } @media screen and (min-width: 1024px) { .l-nav-list .l-nav-list__item { padding-top : 0; padding-bottom : 0; } } .l-nav-list .l-nav-list__link:hover { color : #ff6a14; } .l-nav-list .l-nav-list__parent { position : relative; } @media screen and (min-width: 1024px) { .l-nav-list .l-nav-list__parent { margin-bottom : 24px; } } .l-nav-list .l-nav-list__parent:after { content : ""; display : block; background-image : url("data:image/svg+xml;utf8,"); background-repeat : no-repeat; background-position : center center; background-size : contain; width : 18px; height : 22px; transform : translateY(-50%); position : absolute; right : 0; top : 50%; } @media screen and (min-width: 1024px) { .l-nav-list .l-nav-list__parent:after { display : none; } } .l-nav-list .l-nav-list__parent.is-open:after { transform : translateY(-50%) rotateZ(180deg); } .l-nav-child-wrap { padding-left : 64px; padding-top : 24px; display : none; } @media screen and (min-width: 1024px) { .l-nav-child-wrap { display : block; padding-left : 0; padding-top : 0; } } .l-nav-child { font-size : 13px; font-size : 1.3rem; } .l-nav-child .l-nav-child__item { margin-bottom : 1em; } .l-nav-child .l-nav-child__item:last-child { margin-bottom : 0; } .l-nav-child .l-nav-child__link:hover { color : #ff6a14; } .l-nav-list__online-store { display : none; flex : 0 0 auto; } @media screen and (min-width: 1024px) { .l-nav-list__online-store { display : block; margin-bottom : 24px; } } .l-nav-list__store { display : none; flex : 0 0 auto; } @media screen and (min-width: 1024px) { .l-nav-list__store { display : block; margin-bottom : 24px; } } .l-nav-list__repair { display : none; flex : 0 0 auto; } @media screen and (min-width: 1024px) { .l-nav-list__repair { display : block; } } .l-sub-nav-wrap { padding-top : 24px; padding-bottom : 24px; } @media screen and (min-width: 1024px) { .l-sub-nav-wrap { display : none; } } .l-sub-nav-list { font-size : 13px; font-size : 1.3rem; } .l-sub-nav-list .l-sub-nav-list__item { margin-bottom : 1.5em; } .l-sub-nav-list .l-sub-nav-list__item:last-child { margin-bottom : 0; } .l-nav-dropdown { width : 100%; position : absolute; left : 0; } .l-nav-dropdown__inner { width : 100%; min-width : 1110px; padding-top : 56px; padding-bottom : 48px; padding-left : 128px; padding-right : 128px; display : flex; box-sizing : border-box; } .l-nav-dropdown-title { flex : 0 0 auto; width : 286px; } .l-nav-dropdown-title .l-nav-dropdown-title__sub { font-size : 13px; font-size : 1.3rem; font-weight : normal; color : #ff6a14; margin-bottom : 8px; } .l-nav-dropdown-title .l-nav-dropdown-title__main { font-size : 22px; font-size : 2.2rem; font-weight : 700; } .l-nav-dropdown-title .l-nav-dropdown-title__main .l-nav-dropdown-title__main__small { font-size : 16px; font-size : 1.6rem; } .l-nav-dropdown__list { flex : 0 0 auto; display : flex; flex-wrap : wrap; gap : 24px 0; width : 855px; } .l-nav-dropdown__list .l-nav-dropdown__item { flex : 0 0 auto; width : 285px; } .l-nav-dropdown__list .l-nav-dropdown__link { display : flex; align-items : center; } .l-nav-dropdown__list .l-nav-dropdown__img { flex : 0 0 auto; width : 90px; margin-right : 16px; border-radius : 3px; overflow : hidden; } .l-nav-dropdown__list .l-nav-dropdown__img--border { position : relative; } .l-nav-dropdown__list .l-nav-dropdown__img--border:after { content : ""; width : 100%; height : 100%; position : absolute; left : 0; top : 0; border : 1px solid #25282a; border-radius : 3px; box-sizing : border-box; z-index : 1; } .l-nav-dropdown__list .l-nav-dropdown__text { font-size : 13px; font-size : 1.3rem; font-weight : 700; line-height : 1.4; } .l-nav-dropdown__list .l-nav-dropdown__link:hover .l-nav-dropdown__text { color : #ff6a14; } .l-header { transition : height 0.35s ease-out; } .l-header.is-open { height : 100vh; height : 100dvh; } @media screen and (min-width: 1024px) { .l-header.is-open { height : auto; } } .l-nav-front-group__item .l-nav-dropdown { animation-name : dropdownAnime; animation-duration : 0.45s; animation-timing-function : linear; animation-delay : 0; animation-iteration-count : 1; display : none; } .l-nav-front-group__item.is-open .l-nav-dropdown { display : block; } .l-nav { animation-name : dropdownAnime; animation-duration : 0.45s; animation-timing-function : linear; animation-delay : 0; animation-iteration-count : 1; display : none; } .l-nav.is-open { display : block; } @keyframes dropdownAnime { 0% { opacity : 0; } 100% { opacity : 1; } } /* inner - layout --------------------------------------------------------- */ .l-inner { margin-left : auto; margin-right : auto; width : 100%; } @media screen and (min-width: 768px) { .l-inner { max-width : 730px; } } @media screen and (min-width: 1024px) { .l-inner { padding-left : 190px; padding-right : 190px; } } /* main - layout --------------------------------------------------------- */ .l-main { width : 100%; display : block; position : relative; flex : 1 0 auto; } /* wrapper - layout --------------------------------------------------------- */ .l-wrapper { width : 100%; min-height : 100vh; height : 100%; display : flex; flex-direction : column; position : relative; overflow-x : hidden; } .l-wrapper.is-fixed { position : fixed; } @media screen and (min-width: 1024px) { .l-wrapper.is-fixed { position : relative; } } .l-wrapper--bg { position : fixed; top : 0; left : -72vw; display : block; width : 200vw; height : 240vh; z-index : -1; background-image : url("../img/common/corner_left_bottom.svg"); background-repeat : no-repeat; background-position : 0 0; background-size : cover; } @media screen and (min-width: 768px) { .l-wrapper--bg { top : 0; left : -30vw; } } @media screen and (min-width: 1024px) { .l-wrapper--bg { top : 0; left : 0; } } /* archive - component - object --------------------------------------------------------- */ .c-archive .c-archive-item { font-size : 16px; font-size : 1.6rem; display : flex; flex-wrap : wrap; align-items : center; margin-bottom : 40px; } .c-archive .c-archive-item .c-archive-item__date { width : 100%; display : block; } @media screen and (min-width: 768px) { .c-archive .c-archive-item .c-archive-item__date { width : auto; display : inline-block; } } .c-archive .c-archive-item .c-archive-item__category { display : flex; flex-wrap : wrap; gap : 8px; margin-top : 10px; } @media screen and (min-width: 768px) { .c-archive .c-archive-item .c-archive-item__category { margin-left : 20px; margin-top : 0; } } .c-archive .c-archive-item .c-archive-item__title { width : 100%; margin-top : 1.6rem; line-height : 1.6; } .c-archive .c-archive-item .c-archive-item__title a:hover { text-decoration : none; } .c-archive .c-archive-item:last-of-type { margin-bottom : 0; } .c-archive .c-archive-label { display : inline-block; background-color : #25282a; color : #ffffff; font-size : 13px; font-size : 1.3rem; font-weight : 700; padding : 0 0.8em; line-height : 1.65; } .c-archive-media .c-archive-media-item { display : flex; flex-direction : column; align-items : flex-start; margin-bottom : 30px; } @media screen and (min-width: 768px) { .c-archive-media .c-archive-media-item { flex-direction : row; align-items : center; } } .c-archive-media .c-archive-media-item .c-archive-media-item__img { margin-bottom : 24px; } @media screen and (min-width: 768px) { .c-archive-media .c-archive-media-item .c-archive-media-item__img { flex : 0 0 350px; margin-bottom : 0; } } .c-archive-media .c-archive-media-item:last-child { margin-bottom : 0; } @media screen and (min-width: 768px) { .c-archive-media .c-archive-media-item__caption { margin-left : 36px; } } .c-archive-media .c-archive-media-item__label { display : inline-block; background-color : #25282a; color : #ffffff; font-size : 16px; font-size : 1.6rem; font-weight : 700; padding : 0 0.8em; margin-bottom : 12px; line-height : 1.65; } .c-archive-media .c-archive-media-item__main { font-size : 22px; font-size : 2.2rem; font-weight : 700; margin-bottom : 8px; } .c-archive-media .c-archive-media-item__sub { font-size : 16px; font-size : 1.6rem; font-weight : 700; line-height : 1.6; } .c-archive-media .c-archive-media-item__text { font-size : 16px; font-size : 1.6rem; line-height : 1.6; margin-top : 16px; } .c-archive-media .c-archive-media-item__button { margin-top : 22px; font-size : 13px; font-size : 1.3rem; } .c-archive-card { display : flex; flex-wrap : wrap; gap : 30px; } @media screen and (min-width: 768px) { .c-archive-card { gap : 96px 30px; } } .c-archive-card .c-archive-card-item { display : flex; flex-direction : column; } @media screen and (min-width: 768px) { .c-archive-card .c-archive-card-item { width : calc((100% - 60px) / 3); } } .c-archive-card .c-archive-card-item__head { margin-bottom : 16px; } .c-archive-card .c-archive-card-item__img { margin-top : auto; margin-bottom : 20px; } .c-archive-card .c-archive-card-item__label { display : inline-block; background-color : #25282a; color : #ffffff; font-size : 16px; font-size : 1.6rem; font-weight : 700; padding : 0 0.8em; margin-bottom : 12px; line-height : 1.65; } .c-archive-card .c-archive-card-item__main { font-size : 22px; font-size : 2.2rem; line-height : 1.4; font-weight : 700; } .c-archive-card .c-archive-card-item__text { font-size : 16px; font-size : 1.6rem; line-height : 1.6; } .c-archive-card .c-archive-card-item__button { margin-top : 22px; font-size : 13px; font-size : 1.3rem; } .c-archive-navi .c-archive-navi__item { font-size : 16px; font-size : 1.6rem; font-family : "UniNeueRegular", "BIZ UDPGothic", sans-serif; line-height : 2; border-bottom : 1px solid #25282a; margin-bottom : 18px; } .c-archive-navi .c-archive-navi__item:last-child { margin-bottom : 0; } .c-archive-navi .c-archive-navi__link { display : flex; } .c-archive-navi .c-archive-navi__link:hover { color : #ff6a14; } .c-archive-navi .c-archive-navi__count { margin-left : auto; } /* article - component - object --------------------------------------------------------- */ .c-article { padding-top : 84px; } @media screen and (min-width: 1024px) { .c-article { padding-top : 64px; } } .c-article .c-article-head { display : flex; flex-wrap : wrap; align-items : center; margin-bottom : 40px; } .c-article .c-article-head .c-article-head__date { font-size : 16px; font-size : 1.6rem; width : 100%; } @media screen and (min-width: 768px) { .c-article .c-article-head .c-article-head__date { width : auto; } } .c-article .c-article-head .c-article-head__category { display : flex; flex-wrap : wrap; gap : 8px; margin-top : 10px; } @media screen and (min-width: 768px) { .c-article .c-article-head .c-article-head__category { margin-left : 20px; margin-top : 0; } } .c-article .c-article-head .c-article-head__category .c-article-label { display : inline-block; background-color : #25282a; color : #ffffff; font-size : 13px; font-size : 1.3rem; font-weight : 700; padding : 0 0.8em; line-height : 1.65; } .c-article .c-article-head .c-article-head__title { font-size : 24px; font-size : 2.4rem; line-height : 1.6; margin-top : 40px; width : 100%; } .c-article .c-article-content { font-size : 16px; font-size : 1.6rem; margin-bottom : 56px; } .c-article .c-article-content h2:not([class]) { font-size : 22px; font-size : 2.2rem; font-weight : 700; line-height : 1.6; margin-bottom : 0.6em; } .c-article .c-article-content h2:not(:first-child) { margin-top : 40px; } .c-article .c-article-content h3:not([class]) { font-size : 20px; font-size : 2rem; font-weight : 700; line-height : 1.6; margin-bottom : 0.6em; } .c-article .c-article-content h3:not(:first-child) { margin-top : 1.8em; } .c-article .c-article-content h4:not([class]) { font-size : 18px; font-size : 1.8rem; font-weight : 700; line-height : 1.6; margin-bottom : 0.6em; } .c-article .c-article-content h4:not(:first-child) { margin-top : 1.8em; } .c-article .c-article-content p:not([class]) { line-height : 2; margin-bottom : 2em; } .c-article .c-article-content .c-article-text-small { font-size : 13px; font-size : 1.3rem; line-height : 2; margin-bottom : 2em; } .c-article .c-article-content img:not([class]) { margin-left : auto; margin-right : auto; display : block; } .c-article .c-article-content ul:not([class]) { list-style : inside; line-height : 2; } .c-article .c-article-content ul:not([class]) li { text-indent : -1em; padding-left : 1em; } .c-article .c-article-content .mt-be-columns { gap : 32px; } .c-article .c-article-content > *:not([class]):last-child { margin-bottom : 0; } /* text- helper --------------------------------------------------------- */ .c-bg-full { margin : 0 calc(50% - 50vw); padding : 0 calc(50vw - 50%); } .c-bg-text { padding : 6px; background-color : #25282a; font-weight : 700; color : #ffffff; background : linear-gradient(transparent 0%, #25282a 0%); line-height : 1.8; } .c-bg-text .c-bg-text-margin-sm { display : inline-block; padding-left : 6px; } @media screen and (min-width: 768px) { .c-bg-text .c-bg-text-margin-sm { display : none; } } @media screen and (min-width: 768px) { .c-bg-text .c-bg-text-margin-md { display : inline-block; padding-left : 6px; } } @media screen and (min-width: 1024px) { .c-bg-text .c-bg-text-margin-lg { display : inline-block; padding-left : 6px; } } .c-bg-warm-white { background-color : rgba(242, 233, 219, 0.25); } /* button - component - object --------------------------------------------------------- */ .c-button { display : inline-block; text-align : center; vertical-align : middle; border-radius : 100vh; font-weight : bold; padding : 0.75em 1.2em; box-sizing : border-box; position : relative; transition : all 0.25s ease-out; } .c-button--default { background-color : #25282a; border : 1px solid #ffffff; color : #ffffff; } .c-button--default:hover { border : 1px solid #ffffff; background-color : #ff6a14; color : #ffffff; } .c-button--primary { background-color : #ff6a14; border : 1px solid #ff6a14; color : #ffffff; } .c-button--primary:hover { border : 1px solid #ffffff; background-color : #25282a; color : #ffffff; } .c-button--secondary { border : 1px solid #ff6a14; background-color : #ffffff; color : #ff6a14; } .c-button--secondary:hover { background-color : #ff6a14; color : #ffffff; } .c-button--small { min-width : 128px; font-size : 14px; font-size : 1.4rem; } .c-button--arrow:before { content : ""; position : absolute; top : 50%; transform : translateY(-50%); right : 18px; background-image : url("data:image/svg+xml;utf8,"); background-repeat : no-repeat; background-position : center; background-size : contain; width : 14px; height : 10px; transition : all 0.25s ease-out; z-index : 1; } .c-button--arrow:hover:before { right : 14px; } .c-button--external { display : inline-flex; align-items : center; justify-content : center; } .c-button--external:after { content : ""; background-image : url("data:image/svg+xml;utf8,"); background-repeat : no-repeat; background-position : center; background-size : contain; width : 1em; height : 1em; display : inline-block; transition : all 0.25s ease-out; margin-left : 6px; } .c-button--external.c-button--secondary:after { background-image : url("data:image/svg+xml;utf8,"); } .c-button--external.c-button--secondary:hover:after { background-image : url("data:image/svg+xml;utf8,"); } .c-button-wrap { position : relative; display : inline-block; } .c-button-download-pdf { font-size : 14px; font-size : 1.4rem; font-weight : 700; border : 1px solid #707070; display : inline-flex; align-items : center; padding : 1.28em 2.28em; margin : 56px auto; } .c-button-download-pdf:before { content : ""; flex : 0 0 auto; background-image : url("../img/common/icon_pdf.svg"); background-repeat : no-repeat; background-position : left top; background-size : contain; width : 42px; height : 27px; display : inline-block; margin-right : 16px; } /* archive - component - object --------------------------------------------------------- */ .c-card-list { display : flex; flex-wrap : wrap; gap : 50px 30px; } .c-card-list .c-card-list__item { width : 100%; } @media screen and (min-width: 768px) { .c-card-list .c-card-list__item { width : calc((100% - 60px) / 3); } } .c-card .c-card__thumbnail { margin-bottom : 20px; box-sizing : border-box; position : relative; border-radius : 3px; overflow : hidden; } .c-card .c-card__thumbnail a { display : inline-block; } .c-card .c-card__thumbnail a:before { content : ""; width : 100%; height : 100%; position : absolute; left : 0; top : 0; border : 3px solid #ff6a14; border-radius : 3px; box-sizing : border-box; opacity : 0; transition : all 0.15s ease-out; z-index : 2; } .c-card .c-card__thumbnail a:hover:before { opacity : 1; } .c-card .c-card__thumbnail--border:after { content : ""; width : 100%; height : 100%; position : absolute; left : 0; top : 0; border : 1px solid #25282a; border-radius : 3px; box-sizing : border-box; z-index : 1; } .c-card .c-card__title { font-size : 20px; font-size : 2rem; line-height : 1.6; color : #ff6a14; font-weight : 700; text-align : center; margin-bottom : 10px; } .c-card .c-card__text { font-size : 16px; font-size : 1.6rem; line-height : 2; } /* category - component - object --------------------------------------------------------- */ @media screen and (max-width: 767px) { .c-category-navi { position : relative; display : inline-block; font-size : 16px; font-size : 1.6rem; } .c-category-navi__button { border : 1px solid #707070; border-radius : 100vh; background-color : #ffffff; padding : 0.625em 3em 0.625em 1em; text-align : left; min-width : 225px; display : inline-block; position : relative; cursor : pointer; box-sizing : border-box; transition : all 0.25s ease-out; } .c-category-navi__button:after { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 1px solid #25282a; border-left : 0; border-bottom : 0; box-sizing : border-box; transform : translateY(-25%) rotate(135deg); position : absolute; top : calc(50% - 0.25em); right : 1em; } .c-category-navi__button.is-open:after { transform : translateY(25%) rotate(-45deg); } .c-category-navi__inner { position : absolute; width : 100%; height : 100%; left : 0; top : 0; display : none; z-index : 100; } .c-category-navi__inner--show { display : block; } .c-category-navi-list { padding : 0; margin : 0; list-style : none; background-color : #ffffff; border-radius : 8px; box-shadow : 0 8px 16px rgba(0, 0, 0, 0.32); width : 100%; position : absolute; padding : 1em; box-sizing : border-box; } .c-category-navi-list__item { font-size : 16px; font-size : 1.6rem; padding : 6px 0; cursor : pointer; } .c-category-navi-list__item:hover { color : #ff6a14; } .c-category-navi-list__link.is-active { color : #ff6a14; } } @media screen and (min-width: 768px) { .c-category-navi { display : flex; flex-wrap : wrap; gap : 6px 8px; font-size : 16px; font-size : 1.6rem; max-width : 540px; } .c-category-navi__button { display : none; } .c-category-navi-list { display : flex; flex-wrap : wrap; gap : 5px 8px; } .c-category-navi-list__link { background-color : #ffffff; color : rgba(37, 40, 42, 0.5); display : inline-block; text-align : center; vertical-align : middle; border-radius : 100vh; font-weight : 700; box-sizing : border-box; position : relative; padding : 0.5em 1em; border : 1px solid #707070; transition : all 0.25s ease-out; } .c-category-navi-list__link:hover { background-color : #ff6a14; color : #ffffff; border : 1px solid #ff6a14; } .c-category-navi-list__link.is-active { background-color : #ff6a14; color : #ffffff; border : 1px solid #ff6a14; } } /* corner - component - object --------------------------------------------------------- */ .c-corner-right { width : 100%; height : 100%; position : absolute; top : -30px; right : 0; -webkit-mask-image : url("../img/common/corner_right_top.svg"); -webkit-mask-repeat : no-repeat; -webkit-mask-position : top right; -webkit-mask-size : 100% auto; mask-image : url("../img/common/corner_right_top.svg"); mask-repeat : no-repeat; mask-position : top right; mask-size : 100% auto; background-color : rgba(242, 233, 219, 0.5); z-index : -1; } @media screen and (min-width: 768px) { .c-corner-right { width : 62.81vw; max-width : 858px; top : 0; } } @media screen and (min-width: 1920px) { .c-corner-right { width : 59.16vw; max-width : 1136px; } } .c-corner-right .c-corner-right__inner { position : absolute; right : 0; top : 35.2vw; background-color : #25282a; width : 74.66vw; height : 38.66vw; overflow : hidden; } @media screen and (min-width: 768px) { .c-corner-right .c-corner-right__inner { top : 24.89vw; width : 41.94vw; height : 25.25vw; max-width : 573px; max-height : 345px; } } @media screen and (min-width: 1024px) { .c-corner-right .c-corner-right__inner { top : 340px; } } @media screen and (min-width: 1920px) { .c-corner-right .c-corner-right__inner { width : 44.68vw; max-width : 858px; } } .c-corner-right .c-corner-right__inner:before { content : ""; width : 16.8vw; height : 12.53vw; display : block; background-image : url("../img/common/corner_orange.svg"); background-repeat : no-repeat; background-position : right bottom; background-size : contain; position : absolute; right : 0; bottom : 0; z-index : 1; } @media screen and (min-width: 768px) { .c-corner-right .c-corner-right__inner:before { width : 10.54vw; height : 7.83vw; max-width : 144px; max-height : 107px; } } @media screen and (min-width: 1920px) { .c-corner-right .c-corner-right__inner:before { background-image : url("../img/common/corner_orange_lg.svg"); width : 21.97vw; height : 17.96vw; max-width : 422px; max-height : 345px; } } .c-corner-right--img .c-corner-right__inner { background-color : transparent; } .c-corner-right--wh .c-corner-right__inner { background-color : rgba(255, 255, 255, 0.5); } /* form - component - object --------------------------------------------------------- */ input.c-input[type=text] , input.c-input[type=email] , input.c-input[type=tel] , input.c-input[type=number] { font-size : 16px; font-size : 1.6rem; background-color : rgba(242, 233, 219, 0.5); padding : 1em; box-sizing : border-box; } textarea.c-textarea { font-size : 16px; font-size : 1.6rem; background-color : rgba(242, 233, 219, 0.5); padding : 1em; box-sizing : border-box; min-height : 12em; } .c-form { display : flex; flex-wrap : wrap; gap : 48px 30px; } .c-form-field { width : 100%; } @media screen and (min-width: 768px) { .c-form-field--50 { width : calc((100% - 30px) / 2); } } .c-form-field__label { font-weight : 700; white-space : nowrap; font-size : 16px; font-size : 1.6rem; margin-bottom : 18px; display : flex; flex-wrap : wrap; align-items : center; } .c-form-field__text { display : flex; flex-wrap : wrap; align-items : center; } .c-form-field__postal-code .c-input { width : 10em; } .c-form-field__tel .c-input { width : 16em; } .c-form-button { display : inline-block; border : 1px solid #25282a; border-radius : 3px; font-size : 13px; font-size : 1.3rem; text-align : center; width : 100%; max-width : 110px; padding : 0.75em 1em; box-sizing : border-box; white-space : nowrap; } .c-label { font-size : 13px; font-size : 1.3rem; font-weight : 700; font-style : normal; background-color : #25282a; border-radius : 100vh; color : #ffffff; display : inline-block; padding : 0.4em 0.7em; margin-left : 16px; } .c-form-field__select { position : relative; min-width : 100%; } @media screen and (min-width: 768px) { .c-form-field__select { min-width : auto; } } .c-form-field__select-label { width : 100%; display : inline-block; font-size : 16px; font-size : 1.6rem; background-color : rgba(242, 233, 219, 0.5); padding : 1em 2.5em 1em 1em; box-sizing : border-box; position : relative; overflow : hidden; z-index : 1; } .c-form-field__select-label:after { content : ""; display : inline-block; vertical-align : middle; width : 1rem; height : 1rem; border : 1px solid #25282a; border-left : 0; border-bottom : 0; box-sizing : border-box; transform : translateY(-50%) rotate(135deg); position : absolute; top : 50%; right : 16px; } input[type=radio] , input[type=checkbox] { margin : 0; padding : 0; background : none; border : none; border-radius : 0; outline : none; appearance : none; } input[type=checkbox] { position : relative; display : inline-block; width : 2em; height : 2em; box-sizing : border-box; transition : all 0.25s ease-out; border : 1px solid rgba(37, 40, 42, 0.5); background-color : rgba(242, 233, 219, 0.5); } input[type=checkbox]:after { content : ""; display : inline-block; position : absolute; left : 50%; top : 50%; transform : translateX(-50%) translateY(-50%) rotate(45deg); width : 0.35em; height : 0.6em; border : solid #ffffff; border-width : 0 2px 2px 0; opacity : 0; } input[type=checkbox]:checked { background : #ff6a14; border : 1px solid #ff6a14; } input[type=checkbox]:checked:after { opacity : 1; } input[type=radio] { position : relative; top : -0.1em; box-sizing : border-box; width : 1em; height : 1em; background-color : #ffffff; border : 1px solid #25282a; border-radius : 50%; cursor : pointer; transition : all 0.25s ease-out; display : inline-block; background-color : rgba(242, 233, 219, 0.5); } input[type=radio]:after { content : ""; display : inline-block; position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 0.3em; height : 0.3em; background-color : #ffffff; border-radius : 50%; opacity : 0; } input[type=radio]:checked { background : #ff6a14; border : 1px solid #ff6a14; } input[type=radio]:checked:after { opacity : 1; } .c-input-radio-group { display : flex; flex-wrap : wrap; } .c-input-radio-group .c-input-radio-group__item { display : inline-block; margin-left : 50px; } .c-input-radio-group .c-input-radio-group__item:first-child { margin-left : 0; } .c-input-radio__label { margin-left : 12px; display : inline-block; } .c-form-accept__title { font-size : 16px; font-size : 1.6rem; font-weight : 700; line-height : 2; margin-bottom : 16px; } .c-form-accept__text { font-size : 16px; font-size : 1.6rem; line-height : 2; margin-bottom : 32px; } .c-form-accept__details { width : 100%; max-height : 192px; background-color : #ffffff; overflow-y : scroll; border : 1px solid #25282a; box-sizing : border-box; padding : 1em; margin-bottom : 35px; } .c-form-accept__details--privacy-policy h3:not([class]) { font-size : 16px; font-size : 1.6rem; font-weight : 700; line-height : 2; margin-bottom : 10px; margin-top : 0; } .c-form-accept__details--privacy-policy p:not([class]) { font-size : 16px; font-size : 1.6rem; line-height : 2; margin-bottom : 1em; } .c-form-accept__details--privacy-policy ol:not([class]) { counter-reset : accept-details-counter; } .c-form-accept__details--privacy-policy ol:not([class]) > li { margin-bottom : 1em; } .c-form-accept__details--privacy-policy ol:not([class]) > li > dl { font-size : 13px; font-size : 1.3rem; line-height : 2; } .c-form-accept__details--privacy-policy ol:not([class]) > li > dl dt { font-weight : 700; } .c-form-accept__details--privacy-policy ol:not([class]) > li > dl dt:before { content : counter(accept-details-counter) "."; counter-increment : accept-details-counter; display : inline-block; } .c-form-accept__checkbox { display : flex; justify-content : center; align-items : center; } .c-form-accept__checkbox span { display : inline-block; margin-left : 24px; } .c-form-accept__checkbox p:not([class]) { margin-bottom : 0; margin-left : 24px; } .c-form-input-button { width : 100%; text-align : center; } .c-form-input-button .c-button { min-width : 156px; } .c-form-iframe { border : 1px solid #25282a; } /* archive - component - object --------------------------------------------------------- */ .c-list-indent li { padding-left : 1em; text-indent : -1em; line-height : 2; } .c-list-dot li { padding-left : 1em; text-indent : -1em; line-height : 2; } .c-list-dot li:before { content : "・"; display : inline; margin : 0 0.25em; } .c-list-decimal { counter-reset : decimal-counter; } .c-list-decimal li { padding-left : 2em; text-indent : -2em; line-height : 2; margin-bottom : 30px; } .c-list-decimal li:before { content : counter(decimal-counter) "."; counter-increment : decimal-counter; display : inline; font-family : "UniNeueBold"; margin-right : 1em; } .c-list-decimal li:last-child { margin-bottom : 0; } .c-list-circle-decimal { counter-reset : circle-decimal-counter; } .c-list-circle-decimal li { display : flex; margin-bottom : 30px; } .c-list-circle-decimal li:before { content : counter(circle-decimal-counter); counter-increment : circle-decimal-counter; display : inline-block; font-family : "UniNeueBold"; border : 3px solid #ff6a14; color : #ff6a14; width : 48px; height : 48px; text-align : center; font-size : 24px; font-size : 2.4rem; border-radius : 50%; line-height : 42px; flex : 0 0 auto; margin-right : 16px; box-sizing : border-box; } .c-list-circle-decimal li dt { font-size : 20px; font-size : 2rem; line-height : 1.5; font-weight : 700; margin-bottom : 8px; } .c-list-circle-decimal li dd { font-size : 16px; font-size : 1.6rem; line-height : 1.5; } .c-list-circle-decimal li .c-list-circle-decimal__img { margin-top : 24px; } .c-list-circle-decimal li:last-child { margin-bottom : 0; } /* navi - component - object --------------------------------------------------------- */ /* corner - component - object --------------------------------------------------------- */ .c-page-mainvisual { position : absolute; top : 0; right : 0; -webkit-mask-image : url("../img/common/main-visual_mask_sm.svg"); mask-image : url("../img/common/main-visual_mask_sm.svg"); -webkit-mask-repeat : no-repeat; mask-repeat : no-repeat; -webkit-mask-position : top right; mask-position : top right; -webkit-mask-size : 100% auto; mask-size : 100% auto; overflow : hidden; z-index : -1; } @media screen and (min-width: 768px) { .c-page-mainvisual { width : 62.81vw; height : 35.13vw; } } @media screen and (min-width: 1024px) { .c-page-mainvisual { -webkit-mask-image : url("../img/common/main-visual_mask_md.svg"); mask-image : url("../img/common/main-visual_mask_md.svg"); width : 858px; height : 480px; } } @media screen and (min-width: 1920px) { .c-page-mainvisual { -webkit-mask-image : url("../img/common/main-visual_mask_lg.svg"); mask-image : url("../img/common/main-visual_mask_lg.svg"); width : 1130px; } } .c-page-mainvisual img { object-fit : cover; object-position : 0 0; width : 100%; height : 100%; } .c-page-head { padding-top : 72.53vw; margin-bottom : 12.8vw; } @media screen and (min-width: 768px) { .c-page-head { padding-top : 24.15vw; margin-bottom : 100px; } } @media screen and (min-width: 1024px) { .c-page-head { padding-top : 0; } } .c-page-head .c-page-title { margin-bottom : 19.2vw; } @media screen and (min-width: 768px) { .c-page-head .c-page-title { margin-bottom : 80px; } } .c-page-head .c-page-title .c-page-title__sub { margin-bottom : 10px; color : #ff6a14; font-size : 18px; font-size : 1.8rem; } .c-page-head .c-page-lead { width : 100%; } @media screen and (min-width: 1024px) { .c-page-head .c-page-lead { max-width : 540px; } } .c-page-head .c-page-lead .c-page-lead__main { font-size : 20px; font-size : 2rem; margin-bottom : 32px; line-height : 1.6; } .c-page-head .c-page-lead .c-page-lead__text { font-size : 16px; font-size : 1.6rem; line-height : 2; margin-bottom : 1em; font-weight : 700; } .c-page-head .c-page-lead .c-page-lead__text:last-child { margin-bottom : 0; } .c-page-head .c-page-lead .c-page-lead__button { margin-top : 32px; } .c-page-head .c-page-lead .c-page-lead__button .c-button { font-size : 14px; font-size : 1.4rem; min-width : 274px; } .c-page-head--2-level { padding-top : 72vw; margin-bottom : 19.2vw; } @media screen and (min-width: 768px) { .c-page-head--2-level { padding-top : 24.15vw; margin-bottom : 100px; } } @media screen and (min-width: 1024px) { .c-page-head--2-level { padding-top : 0; min-height : 360px; } } @media screen and (min-width: 1024px) { .c-page-head--3-level { min-height : 450px; } } .c-page-navi { padding : 0 15px; margin : 0 -15px; overflow-x : auto; border-bottom : 1px solid rgba(37, 40, 42, 0.2); scrollbar-width : none; } @media screen and (min-width: 1024px) { .c-page-navi { padding : 0; margin : 0 auto 24px; border-bottom : 0; } } .c-page-navi::-webkit-scrollbar { display : none; } .c-page-navi .c-page-navi-list { display : flex; } @media screen and (min-width: 1024px) { .c-page-navi .c-page-navi-list { width : 100%; width : 730px; margin-left : auto; margin-right : auto; } } .c-page-navi .c-page-navi-list .c-page-navi-list__item { flex : 0 0 auto; font-size : 14px; font-size : 1.4rem; line-height : 1.6; font-weight : 700; text-align : center; color : rgba(37, 40, 42, 0.5); } @media screen and (min-width: 1024px) { .c-page-navi .c-page-navi-list .c-page-navi-list__item { width : 25%; border-right : 1px solid #25282a; box-sizing : border-box; color : #25282a; } .c-page-navi .c-page-navi-list .c-page-navi-list__item:first-child { border-left : 1px solid #25282a; } } .c-page-navi .c-page-navi-list .c-page-navi-list__item.is-active { border-bottom : 1px solid #25282a; color : #25282a; } @media screen and (min-width: 1024px) { .c-page-navi .c-page-navi-list .c-page-navi-list__item.is-active { border-bottom : 0; color : #ff6a14; } } .c-page-navi .c-page-navi-list .c-page-navi-list__link { width : 100%; height : 100%; display : flex; justify-content : center; align-items : center; padding : 10px 12px; box-sizing : border-box; } @media screen and (min-width: 1024px) { .c-page-navi .c-page-navi-list .c-page-navi-list__link:hover { color : #ff6a14; } } .c-page-navi.is-fixed { width : 100%; box-sizing : border-box; position : fixed; top : 60px; left : 0; z-index : 500; margin : 0; background-color : rgba(255, 255, 255, 0.9); } @media screen and (min-width: 1024px) { .c-page-navi.is-fixed { width : auto; top : 78px; left : 50%; transform : translateX(-50%); } } /* pagenation - component - object --------------------------------------------------------- */ .c-pagenation { position : relative; display : flex; flex-wrap : wrap; justify-content : center; } .c-pagenation .c-pagination__item { text-decoration : underline; } .c-pagenation .c-pagination__item:hover { text-decoration : none; } .c-pagenation .c-pagination__item--current { text-decoration : none; } .c-pagenation .c-pagination__item--previous:before , .c-pagenation .c-pagination__item--next:before { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 1px solid #25282a; border-left : 0; border-bottom : 0; text-decoration : underline; transition : all 0.15s ease-out; } .c-pagenation .c-pagination__item--previous:hover:before , .c-pagenation .c-pagination__item--next:hover:before { text-decoration : none; } .c-pagenation .c-pagination__item--first , .c-pagenation .c-pagination__item--last { position : relative; } .c-pagenation .c-pagination__item--first:before , .c-pagenation .c-pagination__item--last:before { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 1px solid #25282a; border-left : 0; border-bottom : 0; text-decoration : underline; transition : all 0.15s ease-out; } .c-pagenation .c-pagination__item--first:after , .c-pagenation .c-pagination__item--last:after { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 1px solid #25282a; border-left : 0; border-bottom : 0; text-decoration : underline; transition : all 0.15s ease-out; } .c-pagenation .c-pagination__item--previous:before { transform : translateX(25%) rotate(-135deg); } .c-pagenation .c-pagination__item--next:before { transform : translateX(-25%) rotate(45deg); } .c-pagenation .c-pagination__item--first:before { transform : translateX(25%) rotate(-135deg); } .c-pagenation .c-pagination__item--first:after { transform : translateX(25%) rotate(-135deg); } .c-pagenation .c-pagination__item--last:before { transform : translateX(-25%) rotate(45deg); } .c-pagenation .c-pagination__item--last:after { transform : translateX(-25%) rotate(45deg); } .c-pagenation-line { text-align : center; } .c-pagenation-line .c-pagenation-line__inner { position : relative; display : inline-flex; flex-wrap : wrap; justify-content : center; border-bottom : 1px solid rgba(37, 40, 42, 0.3); } .c-pagenation-line .c-pagenation-line__item { color : rgba(37, 40, 42, 0.3); font-family : "UniNeueBold"; font-size : 13px; font-size : 1.3rem; width : 32px; height : 32px; text-align : center; line-height : 32px; } .c-pagenation-line .c-pagenation-line__item:hover { color : #25282a; } .c-pagenation-line .c-pagenation-line__item--current { color : #25282a; border-bottom : 1px solid #25282a; } .c-pagenation-line .c-pagenation-line__item--previous:before , .c-pagenation-line .c-pagenation-line__item--next:before { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 1px solid rgba(37, 40, 42, 0.3); border-left : 0; border-bottom : 0; box-sizing : border-box; transition : all 0.15s ease-out; } .c-pagenation-line .c-pagenation-line__item--previous:hover:before , .c-pagenation-line .c-pagenation-line__item--next:hover:before { border-color : #25282a; } .c-pagenation-line .c-pagenation-line__item--first , .c-pagenation-line .c-pagenation-line__item--last { position : relative; } .c-pagenation-line .c-pagenation-line__item--first:before , .c-pagenation-line .c-pagenation-line__item--last:before { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 1px solid rgba(37, 40, 42, 0.3); border-left : 0; border-bottom : 0; text-decoration : underline; transition : all 0.15s ease-out; } .c-pagenation-line .c-pagenation-line__item--first:after , .c-pagenation-line .c-pagenation-line__item--last:after { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 1px solid rgba(37, 40, 42, 0.3); border-left : 0; border-bottom : 0; text-decoration : underline; transition : all 0.15s ease-out; } .c-pagenation-line .c-pagenation-line__item--first:hover:before , .c-pagenation-line .c-pagenation-line__item--first:hover:after , .c-pagenation-line .c-pagenation-line__item--last:hover:before , .c-pagenation-line .c-pagenation-line__item--last:hover:after { border-color : #25282a; } .c-pagenation-line .c-pagenation-line__item--previous:before { transform : translateX(25%) rotate(-135deg); } .c-pagenation-line .c-pagenation-line__item--next:before { transform : translateX(-25%) rotate(45deg); } .c-pagenation-line .c-pagenation-line__item--first:before { transform : translateX(25%) rotate(-135deg); } .c-pagenation-line .c-pagenation-line__item--first:after { transform : translateX(25%) rotate(-135deg); } .c-pagenation-line .c-pagenation-line__item--last:before { transform : translateX(-25%) rotate(45deg); } .c-pagenation-line .c-pagenation-line__item--last:after { transform : translateX(-25%) rotate(45deg); } .c-pagenation-archive { font-size : 14px; font-size : 1.4rem; font-weight : 700; column-gap : 1em; } .c-pagenation-single { font-size : 16px; font-size : 1.6rem; gap : 32px 40px; } @media screen and (min-width: 768px) { .c-pagenation-single .c-pagenation__previous , .c-pagenation-single .c-pagenation__next { position : absolute; } } @media screen and (min-width: 768px) { .c-pagenation-single .c-pagenation__previous { left : 0; top : 0; } } @media screen and (min-width: 768px) { .c-pagenation-single .c-pagenation__next { right : 0; top : 0; } } .c-pagenation-single .c-pagenation__all { margin-left : auto; margin-right : auto; width : 100%; text-align : center; } /* section - component - object --------------------------------------------------------- */ .c-section-container { position : relative; padding-top : 48px; padding-bottom : 48px; } @media screen and (min-width: 1024px) { .c-section-container { padding-top : 100px; padding-bottom : 100px; } } .c-section-container h3:not([class]) { font-size : 16px; font-size : 1.6rem; font-weight : 700; line-height : 1.6; margin-top : 2.5em; margin-bottom : 0.5em; } .c-section-container p:not([class]) { font-size : 16px; font-size : 1.6rem; line-height : 2; margin-bottom : 2.5em; } .c-section-container:last-of-type { margin-bottom : 72px; } @media screen and (min-width: 1024px) { .c-section-container:last-of-type { margin-bottom : 20px; } } .c-section-container.c-bg-full:last-of-type { padding-bottom : 120px; margin-bottom : 0; } .c-section-container .l-inner > *:last-child { margin-bottom : 0; } .c-section-text { font-size : 16px; font-size : 1.6rem; line-height : 2; margin-bottom : 2em; } .c-section-img { max-width : 540px; height : auto; margin : 45px auto; } .c-section-img img + img { margin-top : 30px; } .c-section-recommend .c-section-recommend__text { line-height : 1.6; margin-bottom : 16px; } .c-section-recommend .c-section-recommend__list li { margin-bottom : 13px; } .c-section-recommend .c-section-recommend__list li:last-child { margin-bottom : 0; } .c-section-recommend .c-button { min-width : 274px; font-size : 14px; font-size : 1.4rem; } .c-section-guide .c-button { min-width : 274px; font-size : 14px; font-size : 1.4rem; } .c-section-sub { margin-bottom : 70px; } .c-section-sub-title { font-size : 16px; font-size : 1.6rem; line-height : 2; margin-bottom : 14px; } /* sns - component - object --------------------------------------------------------- */ .c-sns-list { display : flex; gap : 8px; } @media screen and (min-width: 768px) { .c-sns-list { gap : 16px; } } .c-sns-list .c-sns-list__item { position : relative; flex : 1 1 auto; display : block; width : 100%; max-width : 95px; height : 40px; border-radius : 6px; } .c-sns-list .c-sns-list__link { width : 100%; height : 100%; border-radius : 4px; display : flex; justify-content : center; align-items : center; cursor : pointer; } .c-sns-list .c-sns-list__link--twitter { background-color : #1da1f2; } .c-sns-list .c-sns-list__link--facebook { background-color : #1877f2; } .c-sns-list .c-sns-list__link--line { background-color : #06c755; } .c-sns-list .c-sns-list__link--url { background-color : #888888; } .url-copied { display : none; } .url-copied span { width : 100%; height : 100%; background : rgba(37, 40, 42, 0.5); display : flex; align-items : center; justify-content : center; text-align : center; position : absolute; top : 0; left : 0; font-size : 12px; color : #ffffff; border-radius : 4px; } /* title - component - object --------------------------------------------------------- */ .c-title-section-wrapper { text-align : center; } @media screen and (min-width: 768px) { .c-title-section-wrapper { text-align : left; } } .c-title-section-wrapper .c-title-section { text-align : center; } @media screen and (min-width: 768px) { .c-title-section-wrapper .c-title-section { text-align : left; } } .c-title-section { position : relative; font-size : 24px; font-size : 2.4rem; font-weight : 700; color : #ff6a14; text-align : center; display : inline-block; margin-bottom : 1.55em; line-height : 1.4; } @media screen and (min-width: 768px) { .c-title-section { text-align : left; } } @media screen and (min-width: 1024px) { .c-title-section { display : block; } } .c-title-section:before { content : ""; width : 100%; height : 1px; background-color : #ff6a14; display : inline-block; position : absolute; left : 0; bottom : -12px; } @media screen and (min-width: 1024px) { .c-title-section:before { margin : 0 calc(50% - 50vw); padding : 0 calc(50vw - 50%); left : calc(50% - 50vw - 760px); top : 50%; bottom : auto; } } .c-title-1-level { font-size : 24px; font-size : 2.4rem; line-height : 1.4; margin-bottom : 1.2em; font-weight : 700; } .c-title-2-level { font-size : 22px; font-size : 2.2rem; line-height : 1.4; margin-bottom : 1.2em; font-weight : 700; } .c-title-3-level { font-size : 20px; font-size : 2rem; line-height : 1.4; margin-bottom : 1.2em; font-weight : 700; } .c-section-text + .c-title-2level { margin-top : 3em; } .c-title-4-level { font-size : 18px; font-size : 1.8rem; line-height : 1.4; margin-top : 2.2em; margin-bottom : 1em; font-weight : 700; } .c-title-5-level { font-size : 16px; font-size : 1.6rem; line-height : 1.4; margin-top : 2.2em; margin-bottom : 1em; font-weight : 700; } .c-title-recovery { margin-top : 2.5em; } /* youtube - component - object --------------------------------------------------------- */ @media screen and (min-width: 1024px) { .c-youtube { max-width : calc(100% - 64px); } } .c-youtube iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; max-width: 600px; display: block; margin: auto; z-index : 200; position: relative; padding-bottom : 40px; } /* company - project - object --------------------------------------------------------- */ .p-company-list { margin-bottom : 12rem; } .p-message-page-head .c-page-lead .c-page-lead__main { font-size : 28px; font-size : 2.8rem; font-weight : 700; line-height : 1.6; } .p-message-page-head .c-page-lead .c-page-lead__sub { font-size : 22px; font-size : 2.2rem; line-height : 1.4; margin-bottom : 1em; font-weight : 700; } .p-message-page-head .c-page-img { width : 74.66vw; height : auto; margin-left : auto; margin-right : auto; margin-bottom : 32px; } @media screen and (min-width: 768px) { .p-message-page-head .c-page-img { width : 445px; } } @media screen and (min-width: 1024px) { .p-message-page-head .c-page-img { float : right; max-width : 445px; width : 32.57vw; margin-left : 24px; padding-top : 103px; padding-right : 136px; margin-bottom : 32px; margin-right : calc(50% - 50vw); } } @media screen and (min-width: 1920px) { .p-message-page-head .c-page-img { padding-right : 415px; } } .p-brand-message { display : flex; flex-wrap : wrap; justify-content : center; gap : 30px; margin-top : 80px; } .p-brand-message .p-brand-message__item { flex : 0 0 auto; display : flex; flex-direction : column; align-items : center; text-align : center; border-radius : 50%; border : 3px solid #ff6a14; box-sizing : border-box; width : 350px; height : 350px; padding : 32px; } .p-brand-message .p-brand-message__title { font-size : 28px; font-size : 2.8rem; color : #ff6a14; font-weight : 700; line-height : 1.4; margin-bottom : 22px; margin-top : 42px; } .p-brand-message .p-brand-message__text { font-size : 20px; font-size : 2rem; font-weight : 700; line-height : 1.8; } .p-brand-venex-logo { margin-top : 80px; margin-bottom : 64px; } @media screen and (min-width: 768px) { .p-brand-venex-logo svg { width : 500px; } } @media screen and (min-width: 1024px) { .p-brand-keyword-list { margin-left : -15px; margin-right : -15px; } } .p-brand-keyword-list .p-brand-keyword-list__item { display : flex; align-items : center; margin-bottom : 30px; } .p-brand-keyword-list .p-brand-keyword-list__item:last-child { margin-bottom : 0; } @media screen and (min-width: 768px) { .p-brand-keyword-list .p-brand-keyword-list__item:nth-of-type(3n+2) { padding-left : 100px; } .p-brand-keyword-list .p-brand-keyword-list__item:nth-of-type(3n) { padding-left : 200px; } } .p-brand-keyword-list .p-brand-keyword-list__icon { flex : 0 0 auto; background-color : #25282a; color : #ffffff; width : 90px; height : 90px; border-radius : 50%; font-size : 13px; font-size : 1.3rem; font-family : "UniNeueBold"; margin-right : 20px; display : flex; justify-content : center; align-items : center; line-height : 1.2; text-align : center; } .p-brand-keyword-list .p-brand-keyword-list__title { font-size : 20px; font-size : 2rem; color : #ff6a14; font-weight : 700; line-height : 1.4; margin-bottom : 10px; } .p-brand-keyword-list .p-brand-keyword-list__text { font-size : 16px; font-size : 1.6rem; line-height : 1.4; } .p-history-page-head { min-height : auto; margin-bottom : 0; } .p-history .p-history-title { font-size : 16px; font-size : 1.6rem; font-weight : 700; position : relative; padding-left : 40px; margin-bottom : 24px; } .p-history .p-history-title:before { content : ""; width : 25px; height : 1px; background-color : #25282a; display : inline-block; position : absolute; top : 50%; left : 0; transform : translateY(-50%); } .p-history .p-history-table { table-layout : auto; line-height : 1.8; margin-bottom : 60px; } .p-history .p-history-table th { width : 1em; white-space : nowrap; text-align : right; font-weight : normal; padding-left : 64px; padding-right : 24px; } .p-history .p-history-table td { padding-bottom : 4px; } .p-history .p-history-table tr:last-child td { padding-bottom : 0; } .p-history .p-history-table:last-of-type { margin-bottom : 0; } /* HISTORY:テーブル内リンクだけ下線をホバーで出す */ .p-history .p-history-table td a{ text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; transition: text-decoration-color .15s ease-out; } .p-history .p-history-table td a:hover, .p-history .p-history-table td a:focus-visible{ text-decoration-color: currentColor; } .p-profile-corner-right .c-corner-right__inner img { position : absolute; left : 15px; } @media screen and (min-width: 768px) { .p-profile-corner-right .c-corner-right__inner img { position : static; left : auto; } } .p-profile { padding-top : 64px; } .p-profile-table { table-layout : auto; } .p-profile-table th , .p-profile-table td { font-size : 16px; font-size : 1.6rem; line-height : 2; text-align : left; width : 100%; display : block; padding-bottom : 16px; } @media screen and (min-width: 768px) { .p-profile-table th , .p-profile-table td { padding-bottom : 45px; display : table-cell; } } .p-profile-table th { white-space : nowrap; font-weight : 700; } @media screen and (min-width: 768px) { .p-profile-table th { width : 1em; padding-right : 56px; } } .p-profile-table td { padding-bottom : 45px; } @media screen and (min-width: 768px) { .p-profile-table td { width : auto; } } @media screen and (min-width: 768px) { .p-profile-table tr:last-of-type th { padding-bottom : 0; } } .p-profile-table tr:last-of-type td { padding-bottom : 0; } .p-profile-map { height : 0; overflow : hidden; padding-bottom : 400px; position : relative; } .p-profile-map iframe { position : absolute; left : 0; top : 0; width : 100%; height : 100%; } .p-overseasbase-world-map { max-width : 730px; margin-top : 90px; } .p-overseasbase-3-level { font-size : 16px; font-size : 1.6rem; font-weight : bold; position : relative; padding-left : 40px; margin-bottom : 40px; margin-top : 72px; } .p-overseasbase-3-level:before { content : ""; width : 25px; height : 1px; background-color : #25282a; display : inline-block; position : absolute; top : 50%; left : 0; transform : translateY(-50%); } .p-overseasbase-3-level:first-of-type { margin-top : 0; } .p-overseasbase-table { table-layout : auto; text-align : left; margin-bottom : 24px; } .p-overseasbase-table th , .p-overseasbase-table td { width : 100%; display : block; font-size : 16px; font-size : 1.6rem; line-height : 2; word-break : break-word; } @media screen and (min-width: 768px) { .p-overseasbase-table th , .p-overseasbase-table td { display : table-cell; } } .p-overseasbase-table th { white-space : nowrap; font-weight : 700; } @media screen and (min-width: 768px) { .p-overseasbase-table th { width : 1em; padding-right : 35px; } } .p-overseasbase-table td { padding-bottom : 24px; } @media screen and (min-width: 768px) { .p-overseasbase-table td { width : auto; padding-bottom : 0; } } .p-overseasbase-table tr:last-child td { padding-bottom : 0; } .p-overseasbase-item { margin-bottom : 36px; padding-left : 40px; } .p-overseasbase-item .p-overseasbase-item__text { font-size : 16px; font-size : 1.6rem; line-height : 1.6; } /* contact - project - object --------------------------------------------------------- */ .p-contact-page-head { min-height : auto; } @media screen and (min-width: 1024px) { .p-contact-page-head { margin-bottom : 175px; } } .p-contact-form { margin-bottom : 12rem; } .p-contact-completion-page-head { min-height : auto; margin-bottom : 30px; } @media screen and (min-width: 768px) { .p-contact-completion { max-width : 500px; margin-left : auto; margin-right : auto; } } .p-contact-completion-business-hours { text-align : center; border : 1px solid #25282a; box-sizing : border-box; padding : 32px; margin-bottom : 30px; } .p-contact-completion-business-hours p { line-height : 1.6; } .p-contact-completion-business-hours__title { font-size : 13px; font-size : 1.3rem; font-weight : 700; margin-bottom : 16px; } .p-contact-completion-business-hours__time { font-size : 20px; font-size : 2rem; font-weight : 700; color : #ff6a14; margin-bottom : 16px; } .p-contact-completion__text { font-size : 13px; font-size : 1.3rem; line-height : 2; margin-bottom : 40px; } .p-contact-completion__tel { text-align : center; font-size : 24px; font-size : 2.4rem; margin-bottom : 54px; } .p-contact-completion__tel a { text-decoration : none; } /* faq - project - object --------------------------------------------------------- */ .p-faq-list .p-faq-list__item { border-top : 1px solid #25282a; } .p-faq-list .p-faq-list__item:last-of-type { border-bottom : 1px solid #25282a; } .p-faq-list .p-faq-list__question { position : relative; font-size : 16px; font-size : 1.6rem; line-height : 2; font-weight : 700; padding : 15px 80px 15px 40px; } .p-faq-list .p-faq-list__question:before { content : "Q."; font-family : "UniNeueBold"; font-size : 24px; font-size : 2.4rem; color : #ff6a14; font-weight : normal; display : inline-block; position : absolute; left : 0; top : 0.25em; } .p-faq-list .p-faq-list__question i { width : 20px; height : 1px; background-color : #25282a; position : absolute; top : 50%; right : 10px; transform : translate(-50%, -50%); } .p-faq-list .p-faq-list__question i:before { content : ""; display : block; width : 20px; height : 1px; background-color : #25282a; transform : rotate(90deg); } .p-faq-list .p-faq-list__question.is-accordion-open i:before { display : none; } .p-faq-list .p-faq-list__answer { position : relative; font-size : 16px; font-size : 1.6rem; line-height : 2; padding : 15px 0 50px 40px; } @media screen and (min-width: 768px) { .p-faq-list .p-faq-list__answer { padding : 15px 80px 50px 40px; } } .p-faq-list .p-faq-list__answer:before { content : "A."; font-family : "UniNeueBold"; font-size : 24px; font-size : 2.4rem; font-weight : normal; display : inline-block; position : absolute; left : 0; top : 0.25em; } .p-faq-list .p-faq-list__answer p { margin-bottom : 1em; } /* home - project - object --------------------------------------------------------- */ .p-home-main { margin-bottom : 12rem; } /* --- keyvisual --- */ .p-home-keyvisual { width : 100%; position : relative; } @media screen and (min-width: 1024px) { .p-home-keyvisual { min-width : 1366px; } } .p-home-news { width : 100%; position : relative; } @media screen and (min-width: 1024px) { .p-home-news { min-width : 1366px; } } .p-home-news:before { content : ""; display : block; width : 100%; height : 12rem; background-image : url("data:image/svg+xml;utf8,"); background-repeat : no-repeat; background-position : right top; background-size : contain; position : absolute; right : 0; top : -12rem; } .p-home-news .p-home-news__wrap { width : 100%; position : relative; background-color : #25282a; padding-top : 56px; padding-bottom : 56px; } .p-home-news .p-home-news__wrap:before { content : ""; display : block; width : calc(100% - 15.8rem); height : 1px; background-image : url(../img/common/bg_line.svg); background-repeat : repeat-x; background-position : left top; background-size : contain; position : absolute; left : 0; top : 16px; } .p-home-news .p-home-news__wrap:after { content : ""; display : block; width : 15.8rem; height : 14.8rem; background-image : url(../img/common/bg_curve-line.svg); background-repeat : no-repeat; background-position : left top; background-size : contain; position : absolute; right : 0; top : 16px; } .p-home-news .p-home-news__inner { padding-left : 15px; padding-right : 15px; margin-left : auto; margin-right : auto; display : flex; flex-wrap : wrap; justify-content : flex-start; align-items : baseline; position : relative; z-index : 100; } @media screen and (min-width: 1024px) { .p-home-news .p-home-news__inner { max-width : 1110px; justify-content : space-between; } } .p-home-news .p-home-news-heading { font-family : "UniNeueBold"; font-size : 24px; font-size : 2.4rem; color : #ffffff; margin-right : 24px; } @media screen and (min-width: 1024px) { .p-home-news .p-home-news-heading { margin-right : 0; } } .p-home-news .p-home-news-link { font-family : "UniNeueBold"; font-size : 13px; font-size : 1.3rem; color : rgba(255, 255, 255, 0.5); } .p-home-news .p-home-news-link:after { content : ""; display : inline-block; background-image : url("data:image/svg+xml;utf8,"); background-repeat : no-repeat; background-position : left top; background-size : contain; width : 1.4rem; height : 1rem; opacity : 0.5; } @media screen and (min-width: 1024px) { .p-home-news .p-home-news-link { order : 2; margin-right : 96px; } } .p-home-news .p-home-news-list { margin-top : 40px; line-height : 1.6; width : 100%; } @media screen and (min-width: 1024px) { .p-home-news .p-home-news-list { width : auto; flex-direction : row; order : 1; margin-top : 0; } } .p-home-news .p-home-news-list .p-home-news-list__item { display : flex; flex-wrap : wrap; margin-bottom : 16px; } .p-home-news .p-home-news-list .p-home-news-list__item.p-home-news-list__item--special { width : calc(100% - 3em); } @media screen and (min-width: 768px) { .p-home-news .p-home-news-list .p-home-news-list__item.p-home-news-list__item--special { width : auto; } } .p-home-news .p-home-news-list .p-home-news-list__date { font-size : 16px; font-size : 1.6rem; color : rgba(255, 255, 255, 0.5); margin-bottom : 16px; font-family : "UniNeueBold"; } @media screen and (min-width: 1024px) { .p-home-news .p-home-news-list .p-home-news-list__date { margin-right : 56px; margin-bottom : 0; } } .p-home-news .p-home-news-list .p-home-news-list__title { font-size : 16px; font-size : 1.6rem; color : #ffffff; width : 100%; } @media screen and (min-width: 1024px) { .p-home-news .p-home-news-list .p-home-news-list__title { width : 35em; } } .p-home-title { margin-bottom : 24px; } .p-home-title svg { width : auto; height : 3rem; } @media screen and (min-width: 1024px) { .p-home-title { margin-bottom : 32px; } } .p-home-text { font-size : 16px; font-size : 1.6rem; line-height : 2; } .p-home-button { margin-top : 32px; } .p-home-recoverywear { width : 100%; position : relative; background-color : #25282a; padding-top : 32px; padding-bottom : 56px; margin-bottom : 96px; } @media screen and (min-width: 1024px) { .p-home-recoverywear { min-width : 1366px; padding-top : 0; padding-bottom : 120px; margin-bottom : 160px; } } .p-home-recoverywear .p-home-recoverywear__inner { position : relative; padding-left : 15px; padding-right : 15px; margin-left : auto; margin-right : auto; } @media screen and (min-width: 1024px) { .p-home-recoverywear .p-home-recoverywear__inner { max-width : 1110px; } } @media screen and (min-width: 1024px) { .p-home-recoverywear .p-home-recoverywear-title { padding-top : 56px; } } .p-home-recoverywear .p-home-recoverywear-text { color : #ffffff; margin-bottom : 24px; } @media screen and (min-width: 1024px) { .p-home-recoverywear .p-home-recoverywear-text { margin-bottom : 0; } } .p-home-recoverywear .p-home-recoverywear-button { text-align : center; } @media screen and (min-width: 1024px) { .p-home-recoverywear .p-home-recoverywear-button { text-align : left; } } @media screen and (min-width: 1024px) { .p-home-recoverywear .p-home-recoverywear-img { position : absolute; right : 0; top : 0; } } .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img01 , .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img02 { display : block; width : 61.06vw; height : auto; box-shadow : 0 0 32px 0 rgba(0, 0, 0, 0.3); } @media screen and (min-width: 768px) { .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img01 , .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img02 { width : 74.16vw; } } @media screen and (min-width: 1024px) { .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img01 , .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img02 { width : 445px; } } .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img01 { margin-right : auto; } @media screen and (min-width: 1024px) { .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img01 { margin-right : 0; } } .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img02 { margin-top : -18.94vw; margin-left : auto; } @media screen and (min-width: 768px) { .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img02 { margin-top : -138px; margin-left : auto; } } @media screen and (min-width: 1024px) { .p-home-recoverywear .p-home-recoverywear-img .p-home-recoverywear-img02 { margin-left : 190px; } } .p-home-user { width : 100%; height : auto; position : relative; } @media screen and (min-width: 1024px) { .p-home-user { min-width : 1366px; } } .p-home-user .p-home-user__inner { width : 100%; max-width : 1110px; margin-left : auto; margin-right : auto; } @media screen and (min-width: 768px) { .p-home-user .p-home-user__inner { position : absolute; top : 0; left : 50%; transform : translateX(-50%); } } .p-home-user .p-home-user-content { position : relative; z-index : 1; box-sizing : border-box; padding-left : 15px; padding-right : 15px; } @media screen and (min-width: 768px) { .p-home-user .p-home-user-content { padding-left : 41.72vw; padding-top : 5.27vw; } } @media screen and (min-width: 1024px) { .p-home-user .p-home-user-content { padding-left : 570px; padding-top : 72px; } } .p-home-user .p-home-user-img { min-width : 240px; max-width : 858px; width : 64vw; margin-top : -20px; } @media screen and (min-width: 768px) { .p-home-user .p-home-user-img { margin-top : 0; width : 62.81vw; } } @media screen and (min-width: 1024px) { .p-home-user .p-home-user-img { width : 858px; } } .p-home-initiatives { width : 100%; position : relative; z-index : 1; margin-top : -52px; } @media screen and (min-width: 1024px) { .p-home-initiatives { min-width : 1366px; margin-top : -80px; } } .p-home-initiatives .p-home-initiatives__inner { display : flex; align-items : center; justify-content : space-between; max-width : 1110px; margin-left : auto; margin-right : auto; } @media screen and (min-width: 1024px) { .p-home-initiatives .p-home-initiatives__inner { margin-right : 128px; } } .p-home-initiatives .p-home-initiatives-content { position : absolute; left : 0; z-index : 1; width : 20em; padding : 15px; } @media screen and (min-width: 768px) { .p-home-initiatives .p-home-initiatives-content { position : static; width : auto; left : auto; } } .p-home-initiatives .p-home-initiatives-img { box-shadow : 0 0 32px 0 rgba(0, 0, 0, 0.3); width : 51.73vw; min-width : 194px; max-width : 635px; margin-left : auto; } @media screen and (min-width: 768px) { .p-home-initiatives .p-home-initiatives-img { flex : 1 1 auto; width : 46.48vw; } } @media screen and (min-width: 1024px) { .p-home-initiatives .p-home-initiatives-img { width : 635px; } } .p-home-company { width : 100%; position : relative; margin-top : -56px; margin-bottom : 96px; } @media screen and (min-width: 1024px) { .p-home-company { margin-top : -128px; min-width : 1366px; margin-bottom : 128px; } } .p-home-company .p-home-company__wrap { width : 100%; min-height : 652px; -webkit-mask-image : url("../img/home/home_company_mask_sm.svg"); -webkit-mask-repeat : no-repeat; -webkit-mask-position : bottom right; -webkit-mask-size : cover; mask-image : url("../img/home/home_company_mask_sm.svg"); mask-repeat : no-repeat; mask-position : bottom right; mask-size : cover; background-image : url("../img/home/home_company_img_sm.jpg"); background-repeat : no-repeat; background-position : top center; background-size : cover; } @media screen and (min-width: 768px) { .p-home-company .p-home-company__wrap { -webkit-mask-image : url("../img/home/home_company_mask_md.svg"); mask-image : url("../img/home/home_company_mask_md.svg"); background-image : url("../img/home/home_company_img.jpg"); } } @media screen and (min-width: 1024px) { .p-home-company .p-home-company__wrap { background-image : url("../img/home/home_company_img.jpg"); -webkit-mask-image : none; mask-image : none; } } @media screen and (min-width: 1920px) { .p-home-company .p-home-company__wrap { background-image : url("../img/home/home_company_img_lg.jpg"); } } .p-home-company .p-home-company__wrap:before { content : ""; display : block; width : 100%; height : 100%; background-color : rgba(0, 0, 0, 0.25); position : absolute; left : 0; top : 0; } @media screen and (min-width: 1024px) { .p-home-company .p-home-company__wrap:after { content : ""; display : block; width : 100%; height : 12rem; background-image : url("data:image/svg+xml;utf8,"); background-repeat : no-repeat; background-position : right top; background-size : contain; position : absolute; right : 0; bottom : 0; } } .p-home-company .p-home-company__inner { position : absolute; left : 50%; top : 50%; transform : translateY(-50%) translateX(-50%); text-align : center; width : calc(100% - 30px); } .p-home-company .p-home-company-text { color : #ffffff; text-align : left; } @media screen and (min-width: 768px) { .p-home-company .p-home-company-text { text-align : center; } } .p-home-recovery-lab { width : 100%; margin-bottom : 128px; } @media screen and (min-width: 1024px) { .p-home-recovery-lab { min-width : 1366px; } } .p-home-recovery-lab .p-home-recovery-lab__inner { margin-left : auto; margin-right : auto; padding-left : 15px; padding-right : 15px; display : flex; flex-direction : column; } @media screen and (min-width: 1024px) { .p-home-recovery-lab .p-home-recovery-lab__inner { flex-direction : row; justify-content : center; align-items : center; max-width : 912px; } } @media screen and (min-width: 768px) { .p-home-recovery-lab .p-home-recovery-lab__content { min-width : 25em; } } @media screen and (min-width: 1024px) { .p-home-recovery-lab .p-home-recovery-lab__content { margin-left : 220px; } } .p-home-recovery-lab .p-home-recovery-lab-logo { text-align : center; margin-bottom : 32px; flex : 0 0 auto; } @media screen and (min-width: 768px) { .p-home-recovery-lab .p-home-recovery-lab-text { text-align : center; } } @media screen and (min-width: 1024px) { .p-home-recovery-lab .p-home-recovery-lab-text { text-align : left; } } .p-home-recovery-lab .p-home-recovery-button { text-align : center; } @media screen and (min-width: 1024px) { .p-home-recovery-lab .p-home-recovery-button { text-align : left; } } .p-home-banner { margin-bottom : 90px; } @media screen and (min-width: 1024px) { .p-home-banner { min-width : 1366px; } } .p-home-banner .p-home-banner__inner { max-width : 1110px; margin-left : auto; margin-right : auto; padding-left : 15px; padding-right : 15px; } .p-home-banner .p-home-banner-list { display : flex; flex-direction : column; flex-wrap : wrap; gap : 20px; } @media screen and (min-width: 768px) { .p-home-banner .p-home-banner-list { flex-direction : row; gap : 30px; } } .p-home-banner .p-home-banner-list .p-home-banner-list__item { width : 100%; } @media screen and (min-width: 768px) { .p-home-banner .p-home-banner-list .p-home-banner-list__item { width : calc((100% - 60px) / 3); } } .p-home-banner .p-home-banner-furusato-tax { margin-top : 20px; } @media screen and (min-width: 768px) { .p-home-banner .p-home-banner-furusato-tax { margin-top : 60px; } } .p-home-contact { padding-top : 72px; padding-bottom : 120px; background-color : rgba(242, 233, 219, 0.5); } @media screen and (min-width: 1024px) { .p-home-contact { padding-bottom : 176px; } } .p-home-contact .p-home-contact__inner { max-width : 1080px; margin-left : auto; margin-right : auto; padding-left : 15px; padding-right : 15px; } .p-home-contact .p-home-contact-title { text-align : center; margin-bottom : 32px; } .p-home-contact .p-home-contact-list { display : flex; flex-wrap : wrap; flex-direction : column; } @media screen and (min-width: 768px) { .p-home-contact .p-home-contact-list { flex-direction : row; } } .p-home-contact .p-home-contact-list .p-home-contact-list__item { position : relative; text-align : center; box-sizing : border-box; padding-bottom : 35px; margin-bottom : 35px; } .p-home-contact .p-home-contact-list .p-home-contact-list__item:after { content : ""; background-color : #25282a; width : 51.2vw; height : 1px; display : inline-block; position : absolute; bottom : 0; left : 50%; transform : translateX(-50%); } .p-home-contact .p-home-contact-list .p-home-contact-list__item:last-child { padding-bottom : 0; margin-bottom : 0; } .p-home-contact .p-home-contact-list .p-home-contact-list__item:last-child:after { display : none; } @media screen and (min-width: 768px) { .p-home-contact .p-home-contact-list .p-home-contact-list__item { border-right : 1px solid #25282a; width : 50%; padding-bottom : 0; margin-bottom : 0; } .p-home-contact .p-home-contact-list .p-home-contact-list__item:after { display : none; } .p-home-contact .p-home-contact-list .p-home-contact-list__item:last-child { border-right : 0; } } .p-home-contact .p-home-contact-list .p-home-contact-list__img { margin-bottom : 24px; } .p-home-contact .p-home-contact-list .p-home-contact-list__text { margin-bottom : 28px; line-height : 1.6; } .p-home-contact .p-home-contact-list .p-home-contact-list__tel { margin-bottom : 22px; font-size : 32px; font-size : 3.2rem; letter-spacing : 0.1em; } .p-home-contact .p-home-contact-list .p-home-contact-list__button { font-size : 14px; font-size : 1.4rem; } /* initiative - project - object --------------------------------------------------------- */ .p-initiative-list { margin-bottom : 12rem; } .p-market-japan-recovery-association .p-market-japan-recovery-association__img { max-width : 350px; height : auto; } .p-market-anniversary .p-market-anniversary__list { display : flex; flex-wrap : wrap; flex-direction : column; } @media screen and (min-width: 768px) { .p-market-anniversary .p-market-anniversary__list { flex-direction : row; gap : 46px; } } .p-market-anniversary .p-market-anniversary__item { margin-bottom : 32px; } @media screen and (min-width: 768px) { .p-market-anniversary .p-market-anniversary__item { width : calc((100% - 46px) / 2); margin-bottom : 0; } } .p-market-anniversary .p-market-anniversary__item:last-child { margin-bottom : 0; } .p-market-anniversary .p-market-anniversary__img { text-align : center; margin-bottom : 24px; } .p-market-anniversary .p-market-anniversary__img img { max-width : 160px; height : auto; } .p-market-anniversary .p-market-anniversary__title { text-align : center; margin-bottom : 24px; } .p-market-anniversary .p-market-anniversary__text { font-size : 16px; font-size : 1.6rem; line-height : 2; } @media screen and (min-width: 768px) { .p-market-anniversary .p-market-anniversary__text { font-size : 13px; font-size : 1.3rem; } } .p-market-online-yoga .p-market-online-yoga__img { max-width : 540px; height : auto; margin-right : auto; margin-left : auto; } .p-pioneer-founder .p-pioneer-founder__list { display : flex; flex-direction : column; align-items : center; margin-top : 60px; gap : 8.53vw; } @media screen and (min-width: 768px) { .p-pioneer-founder .p-pioneer-founder__list { flex-direction : row; gap : 4.75vw; } } @media screen and (min-width: 1024px) { .p-pioneer-founder .p-pioneer-founder__list { gap : 65px; } } .p-pioneer-founder .p-pioneer-founder__list .p-pioneer-founder__item { width : 53.33vw; text-align : center; } @media screen and (min-width: 768px) { .p-pioneer-founder .p-pioneer-founder__list .p-pioneer-founder__item { width : 100%; } } .p-pioneer-founder .p-pioneer-founder__list .p-pioneer-founder__img { margin-bottom : 22px; } .p-pioneer-founder .p-pioneer-founder__list .p-pioneer-founder__name { font-size : 16px; font-size : 1.6rem; margin-bottom : 5px; } .p-pioneer-founder .p-pioneer-founder__list .p-pioneer-founder__text { font-size : 15px; font-size : 1.5rem; } @media screen and (min-width: 768px) { .p-randd__list { display : flex; } .p-randd__img { flex-shrink: 0; width: 50%; margin-top: 2.5em; margin-right: 1em; } .p-randd__img_academics { flex-shrink: 0; margin: 2.5em auto 0; } .p-randd__img_books { flex-shrink: 0; width: 20%; margin-right: 1em; } .p-randd__box1 { margin-right: 20px; } } @media screen and (max-width: 767px) { .p-randd__img { display: flex; justify-content: center; } .p-randd__img_books { display: flex; justify-content: center; } } .p-randd__books_01 { margin-bottom: 1em; } .p-randd_text-b { font-weight: bold; } .p-randd__list-text { line-height: 1.5; } .p-customer-questionnaire .p-customer-questionnaire__img { max-width : 540px; height : auto; margin-right : auto; margin-left : auto; } .p-customer-rlm .p-customer-rlm__img { max-width : 300px; height : auto; margin : 72px auto 48px; } .p-customer-rlm .p-customer-rlm-latest .p-customer-rlm-latest__title { font-size : 18px; font-size : 1.8rem; font-weight : 700; color : #ff6a14; margin-bottom : 20px; } @media screen and (min-width: 768px) { .p-customer-rlm .p-customer-rlm-latest .p-customer-rlm-latest-article { display : flex; align-items : flex-start; align-items : center; } } .p-customer-rlm .p-customer-rlm-latest .p-customer-rlm-latest-article .p-customer-rlm-latest-article__img { margin-bottom : 12px; } @media screen and (min-width: 768px) { .p-customer-rlm .p-customer-rlm-latest .p-customer-rlm-latest-article .p-customer-rlm-latest-article__img { flex : 0 0 auto; max-width : 350px; margin-right : 30px; } } .p-customer-rlm .p-customer-rlm-latest .p-customer-rlm-latest-article .p-customer-rlm-latest-article__caption { display : flex; flex-wrap : wrap; } .p-customer-rlm .p-customer-rlm-latest .p-customer-rlm-latest-article .p-customer-rlm-latest-article__title { font-size : 16px; font-size : 1.6rem; line-height : 1.8; width : 100%; margin-bottom : 10px; } .p-customer-rlm .p-customer-rlm-latest .p-customer-rlm-latest-article .p-customer-rlm-latest-article__category { display : inline; font-size : 13px; font-size : 1.3rem; font-family : "UniNeueRegular", "BIZ UDPGothic", sans-serif; line-height : 1.8; } .p-customer-rlm .p-customer-rlm-latest .p-customer-rlm-latest-article .p-customer-rlm-latest-article__category:after { content : "|"; margin-left : 0.5em; margin-right : 0.5em; display : inline-block; } .p-customer-rlm .p-customer-rlm-latest .p-customer-rlm-latest-article .p-customer-rlm-latest-article__date { font-size : 13px; font-size : 1.3rem; line-height : 1.8; font-family : "UniNeueRegular", "BIZ UDPGothic", sans-serif; } .p-sdgs-logo { max-width : 411px; } .p-sdgs-target { display : flex; align-items : center; margin-bottom : 72px; } .p-sdgs-target .p-sdgs-target__img { flex : 0 0 auto; max-width : 150px; margin-right : 24px; } .p-sdgs-target .p-sdgs-target__caption { flex : 1 1 auto; max-width : 352px; } .p-sdgs-target .p-sdgs-target__caption .p-sdgs-target__lead { font-size : 13px; font-size : 1.3rem; font-weight : 700; line-height : 2; margin-bottom : 5px; } .p-sdgs-target .p-sdgs-target__caption .p-sdgs-target__text { font-size : 13px; font-size : 1.3rem; line-height : 2; } .p-sdgs-green-nano-img { max-width : 565px; height : auto; margin-right : auto; margin-left : auto; } .p-community-corner-right .c-corner-right__inner img { position : absolute; bottom : 0; } .p-community-collab-1 .p-community-collab-1__img { max-width : 730px; height : auto; margin : 64px auto; } .p-community-collab-2 .p-community-collab-2__img { max-width : 485px; height : auto; margin : 64px auto; } .p-community-furusato-tax .p-community-furusato-tax__banner { display : block; max-width : 234px; height : auto; margin : 0 auto; } .p-staff-training .p-staff-training__title { font-size : 22px; font-size : 2.2rem; line-height : 1.4; margin-bottom : 1.2em; font-weight : 700; margin-top : 100px; } .p-staff-training .p-staff-training__model { margin-bottom : 100px; } @media screen and (min-width: 1024px) { .p-repair-corner-right { top : -124px; } } .p-repair-page-head { min-height : auto; } @media screen and (min-width: 1024px) { .p-repair-page-head { padding-top : 24px; margin-bottom : 108px; } } @media screen and (min-width: 768px) { .p-repair-recommend-list { display : flex; justify-content : center; gap : 30px; } } .p-repair-howto .p-repair-howto__title { font-size : 32px; font-size : 3.2rem; line-height : 1.4; margin-bottom : 1.2em; text-align : center; } .p-repair-howto .p-repair-howto__list { display : flex; flex-wrap : wrap; gap : 30px; } .p-repair-howto .p-repair-howto__list .p-repair-howto__item { overflow : hidden; border-radius : 6px; } @media screen and (min-width: 768px) { .p-repair-howto .p-repair-howto__list .p-repair-howto__item { width : calc((100% - 30px) / 2); } } .p-repair-howto .p-repair-howto-point__list { margin-bottom : 64px; } .p-repair-howto .p-repair-howto-point__list li { margin-bottom : 30px; } .p-repair-howto .p-repair-howto-point__list li:after { content : ""; display : block; clear : both; } .p-repair-howto .p-repair-howto-point__list li:last-child { margin-bottom : 0; } .p-repair-howto .p-repair-howto-point__list li .p-repair-howto-point__pict { float : left; margin-right : 32px; width : 95px; height : auto; } .p-repair-howto .p-repair-howto-point__list li .p-repair-howto-point__lead { font-weight : 700; font-size : 20px; font-size : 2rem; margin-bottom : 16px; } .p-repair-howto .p-repair-howto-point__list li .p-repair-howto-point__lead .p-repair-howto-point__small-lead { font-size : 16px; font-size : 1.6rem; } .p-repair-howto .p-repair-howto-point__list li .p-repair-howto-point__text { font-size : 16px; font-size : 1.6rem; line-height : 1.5; overflow : hidden; } .p-repair-service .p-repair-service__title { font-size : 32px; font-size : 3.2rem; line-height : 1.4; margin-bottom : 1.2em; text-align : center; } .p-repair-service .p-repair-service__title .p-repair-service__small-title { font-size : 24px; font-size : 2.4rem; } .p-repair-service .p-repair-service__img { display : flex; flex-wrap : wrap; justify-content : space-between; gap : 30px; margin-bottom : 60px; } .p-repair-service .p-repair-service__img li { width : 100%; overflow : hidden; border-radius : 6px; } .p-repair-service .p-repair-service__img li:last-child { margin-bottom : 0; } @media screen and (min-width: 768px) { .p-repair-service .p-repair-service__img li { width : calc((100% - 60px) / 3); margin-bottom : 0; } } .p-repair-service .p-repair-service-caution { width : 100%; max-width : 600px; margin-left : auto; margin-right : auto; border : 1px solid #25282a; padding : 32px; margin-bottom : 96px; box-sizing : border-box; } @media screen and (min-width: 1024px) { .p-repair-service .p-repair-service-caution { padding : 32px 56px; } } .p-repair-service .p-repair-service-caution .p-repair-service-caution__title { font-size : 13px; font-size : 1.3rem; font-weight : 700; margin-bottom : 24px; text-align : center; } .p-repair-service .p-repair-service-caution .p-repair-service-caution__list li { font-size : 13px; font-size : 1.3rem; margin-bottom : 10px; } .p-repair-service .p-repair-service-caution .p-repair-service-caution__list li:last-child { margin-bottom : 0; } .p-repair-service .p-repair-service-flow { margin-bottom : 95px; } .p-repair-service .p-repair-service-flow li:first-of-type { align-items : center; } .p-repair-service .p-repair-service-flow li:first-of-type dt { margin-bottom : 0; } .p-repair-service .p-repair-destination { border : 1px solid #25282a; text-align : center; padding : 32px; box-sizing : border-box; margin-top : 16px; } @media screen and (min-width: 1024px) { .p-repair-service .p-repair-destination { padding : 32px 56px; } } .p-repair-service .p-repair-destination .p-repair-destination__title { margin-bottom : 16px; font-size : 13px; font-size : 1.3rem; font-weight : bold; line-height : 2; } .p-repair-service .p-repair-destination .p-repair-destination__address { margin-bottom : 16px; font-size : 13px; font-size : 1.3rem; line-height : 2; } .p-repair-service .p-repair-destination .p-repair-destination__phone { font-size : 24px; font-size : 2.4rem; color : #ff6a14; } .p-repair-completion-page-head { min-height : auto; margin-bottom : 30px; } @media screen and (min-width: 768px) { .p-repair-completion { max-width : 500px; margin-left : auto; margin-right : auto; } } .p-repair-address { text-align : center; border : 1px solid #25282a; box-sizing : border-box; padding : 32px; margin-bottom : 70px; text-align : center; font-size : 13px; font-size : 1.3rem; } @media screen and (min-width: 768px) { .p-repair-address { padding : 32px 56px; } } .p-repair-address p { line-height : 1.6; } .p-repair-address .p-repair-address__title { font-size : 13px; font-size : 1.3rem; font-weight : 700; margin-bottom : 16px; line-height : 2; } .p-repair-address .p-repair-address__text { font-size : 13px; font-size : 1.3rem; line-height : 2; } .p-repair-precaution_list { margin-top: 1em; margin-bottom: 1em; font-size: 1.5rem; } .p-repair-banner { margin-bottom: 2em; text-align: center; } /* news - project - object --------------------------------------------------------- */ .p-news-category { margin-bottom : 48px; } @media screen and (min-width: 768px) { .p-news-category { margin-bottom : 120px; } } @media screen and (min-width: 1024px) { .p-news-category { width : 33.67vw; } } .p-news-archive { margin-bottom : 12rem; } .p-news-article { margin-bottom : 12rem; } .p-news-pagenation { margin-top : 80px; } /* privacy - project - object --------------------------------------------------------- */ .p-privacy-page-head { min-height : auto; margin-bottom : 48px; } .p-privacy-basicpolicy-page-head { min-height : auto; } @media screen and (min-width: 1024px) { .p-privacy-basicpolicy-page-head { margin-bottom : -37px; } } .p-privacy-contact { border-top : 1px solid #25282a; border-bottom : 1px solid #25282a; padding : 50px 30px; } .p-privacy-contact .p-privacy-contact__title { line-height : 2; font-weight : 700; } .p-privacy-contact .p-privacy-contact__text { font-size : 14px; font-size : 1.4rem; line-height : 2; } .p-privacy-contact + .p-privacy-contact { border-top : 0; } .p-privacy-mark { width : 115px; height : 115px; margin-top : 40px; } .p-privacy-list { counter-reset : privacy-list-counter; } .p-privacy-list .p-privacy-list__item { padding-left : 30px; position : relative; } .p-privacy-list .p-privacy-list__title { font-size : 16px; font-size : 1.6rem; line-height : 2; font-weight : bold; margin-bottom : 8px; } .p-privacy-list .p-privacy-list__title:before { content : counter(privacy-list-counter) "."; counter-increment : privacy-list-counter; display : inline; font-family : "UniNeueBold"; font-weight : normal; font-size : 18px; font-size : 1.8rem; position : absolute; left : 0; } .p-privacy-list .p-privacy-list__description { font-size : 16px; font-size : 1.6rem; line-height : 2; margin-bottom : 45px; } .p-privacy-list .p-privacy-list__description > *:last-child { margin-bottom : 0; } .p-privacy-list .p-privacy-list__description p { margin-bottom : 1.25em; } .p-privacy-list .p-privacy-list__description ol , .p-privacy-list .p-privacy-list__description ul { line-height : 2; } .p-privacy-list .p-privacy-list__description ol > li , .p-privacy-list .p-privacy-list__description ul > li { margin-bottom : 32px; } .p-privacy-list .p-privacy-list__description ol > li:last-child , .p-privacy-list .p-privacy-list__description ul > li:last-child { margin-bottom : 0; } .p-privacy-list .p-privacy-list__description ol.c-list-indent li { line-height : 1.75; margin-bottom : 1em; } .p-privacy-list .p-privacy-list__description table { font-size : 14px; font-size : 1.4rem; line-height : 1.6; } .p-privacy-list .p-privacy-list__description table tr { border-top : 1px solid #25282a; } .p-privacy-list .p-privacy-list__description table tr:last-child { border-bottom : 1px solid #25282a; } .p-privacy-list .p-privacy-list__description table th { font-weight : 700; padding : 12px 0; } .p-privacy-list .p-privacy-list__description table td { padding : 16px 0; } .p-privacy-list .p-privacy-list__description .p-privacy-contact { padding : 32px; } .p-privacy-list .p-privacy-list__indent { padding-left : 2em; } /* recovery_lab_magazine - project - object --------------------------------------------------------- */ @media screen and (min-width: 1024px) { .recovery_lab_magazine { background-image : url("../img/recovery_lab_magazine/head_bg.svg"); background-repeat : no-repeat; background-position : right top 373px; background-size : 145px 108px; } } .p-rlm-content { margin-bottom : 12rem; } .p-rlm-logo { margin-bottom : 96px; text-align : center; } .p-rlm-category:after { content : "|"; margin-left : 0.5em; margin-right : 0.5em; display : inline-block; } .p-rlm-pagenation { margin-top : 72px; } .p-rlm-content__sub { width : 100%; max-width : 255px; margin-left : auto; margin-right : auto; } @media screen and (min-width: 768px) { .p-rlm-content__sub { max-width : calc(100% - 156px); padding-left : 78px; padding-right : 78px; } } @media screen and (min-width: 1024px) { .p-rlm-content__sub { max-width : 220px; padding-left : 0; padding-right : 0; margin-left : 96px; } } @media screen and (min-width: 1024px) { .p-rlm-content__sub--top { padding-top : 193px; } } .p-rlm-page-head-latest { width : 100%; height : 480px; overflow : hidden; position : relative; padding-top : 0; background-repeat : no-repeat; background-position : center top; background-size : cover; color : #ffffff; margin-left : calc(50% - 50vw); margin-right : calc(50% - 50vw); padding-left : calc(50vw - 50%); padding-right : calc(50vw - 50%); } @media screen and (min-width: 1024px) { .p-rlm-page-head-latest { margin-right : 0; margin-left : calc(50% - 50vw); padding-left : calc(50vw - 50%); padding-right : 48px; background-position : left top; } } .p-rlm-page-head-latest:before { content : ""; background-image : url("../img/recovery_lab_magazine/head_cover@sm.svg"); background-repeat : no-repeat; background-position : left top; background-size : contain; width : 273px; height : 325px; position : absolute; top : 0; right : 0; } @media screen and (min-width: 1024px) { .p-rlm-page-head-latest:before { background-image : url("../img/recovery_lab_magazine/head_cover.svg"); width : 402px; height : 480px; } } .p-rlm-page-head-latest .p-rlm-page-head-latest__inner { position : absolute; bottom : 48px; left : 0; padding-left : 15px; padding-right : 15px; } @media screen and (min-width: 1024px) { .p-rlm-page-head-latest .p-rlm-page-head-latest__inner { left : auto; } } .p-rlm-page-head-latest .p-rlm-page-head-latest__title { flex : 0 0 auto; max-width : 9em; font-size : 24px; font-size : 2.4rem; line-height : 1.4; font-family : "UniNeueRegular", "BIZ UDPGothic", sans-serif; margin-bottom : 22px; text-shadow : 0 0 16px rgba(0, 0, 0, 0.4); } @media screen and (min-width: 768px) { .p-rlm-page-head-latest .p-rlm-page-head-latest__title { max-width : 28em; } } @media screen and (min-width: 1024px) { .p-rlm-page-head-latest .p-rlm-page-head-latest__title { max-width : 20em; } } .p-rlm-page-head-latest .p-rlm-page-head-latest__meta { text-shadow : 0 0 16px rgba(0, 0, 0, 0.4); } .p-rlm-page-head-latest .p-rlm-page-head-latest__category { display : inline; font-size : 16px; font-size : 1.6rem; line-height : 1.8; } .p-rlm-page-head-latest .p-rlm-page-head-latest__date { font-size : 16px; font-size : 1.6rem; line-height : 1.8; } .p-rlm-page-head-latest .p-rlm-page-head-latest__button { width : 100%; margin-top : 32px; } .p-rlm-page-head-latest .p-rlm-page-head-latest__img { position : absolute; right : 0; top : 0; } .p-rlm-page-head-category { padding-top : 32vw; margin-bottom : 56px; } @media screen and (min-width: 768px) { .p-rlm-page-head-category { padding-top : 40px; margin-bottom : 80px; } } @media screen and (min-width: 1024px) { .p-rlm-page-head-category { padding-top : 20px; min-height : 188px; } } .p-rlm-page-head-category .c-page-title { position : relative; font-size : 28px; font-size : 2.8rem; line-height : 1.4; font-family : "UniNeueRegular", "BIZ UDPGothic", sans-serif; margin-bottom : 40px; } @media screen and (min-width: 1024px) { .p-rlm-page-head-category .c-page-title { font-size : 40px; font-size : 4rem; } } .p-rlm-page-head-category .c-page-title__main:after { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 2px solid #25282a; border-left : 0; border-bottom : 0; box-sizing : border-box; transform : translateY(-25%) rotate(135deg); margin-left : 16px; } @media screen and (min-width: 1024px) { .p-rlm-page-head-category .c-page-title__main:after { display : none; } } .p-rlm-category-dropdown { display : none; position : absolute; left : 0; top : -48px; width : 100%; margin-left : auto; margin-right : auto; border-radius : 9px; background-color : #ffffff; box-shadow : 0 8px 16px rgba(0, 0, 0, 0.32); padding : 20px; box-sizing : border-box; flex-direction : column; } .p-rlm-category-dropdown .p-rlm-category-dropdown__link { display : flex; align-items : center; font-size : 16px; font-size : 1.6rem; } .p-rlm-category-dropdown .p-rlm-category-dropdown__link:before { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 1px solid #25282a; border-left : 0; border-bottom : 0; box-sizing : border-box; transform : translateX(25%) rotate(-135deg); margin-right : 12px; } .p-rlm-category-dropdown .p-rlm-category-dropdown__title { font-size : 32px; font-size : 3.2rem; color : #ff6a14; margin : 10px 0 12px; } .p-rlm-category-dropdown .p-rlm-category-dropdown-list { font-size : 16px; font-size : 1.6rem; font-family : "UniNeueBold", "BIZ UDPGothic", sans-serif; line-height : 1.4; } .p-rlm-category-dropdown .p-rlm-category-dropdown-list__item { line-height : 1.4; margin-bottom : 10px; } .p-rlm-category-dropdown .p-rlm-category-dropdown-list__item:before { content : ""; display : inline-block; vertical-align : middle; width : 0.5em; height : 0.5em; border : 1px solid #25282a; border-left : 0; border-bottom : 0; box-sizing : border-box; transform : translateX(-25%) rotate(45deg); margin-right : 12px; } .p-rlm-category-dropdown .p-rlm-category-dropdown-list__item:last-child { margin-bottom : 0; } @media screen and (min-width: 1024px) { .p-rlm-category-dropdown { display : none; } } .p-rlm-category-dropdown.is-open { display : flex; } .p-rlm-article .p-rlm-article-head { margin-bottom : 20px; padding-top : 60px; } @media screen and (min-width: 768px) { .p-rlm-article .p-rlm-article-head { margin-bottom : 50px; padding-top : 40px; } } @media screen and (min-width: 1024px) { .p-rlm-article .p-rlm-article-head { padding-top : 20px; } } .p-rlm-article .p-rlm-article-head .p-rlm-article-head__img { margin-left : -15px; margin-right : -15px; margin-bottom : 25px; } .p-rlm-article .p-rlm-article-head .p-rlm-article-head__img img { width : 100%; } @media screen and (min-width: 768px) { .p-rlm-article .p-rlm-article-head .p-rlm-article-head__img { width : 100%; margin-left : 0; margin-right : 0; margin-bottom : 40px; } } .p-rlm-article .p-rlm-article-head .p-rlm-article-head__title { width : 100%; line-height : 1.4; font-size : 24px; font-size : 2.4rem; margin-bottom : 25px; } @media screen and (min-width: 768px) { .p-rlm-article .p-rlm-article-head .p-rlm-article-head__title { font-size : 32px; font-size : 3.2rem; margin-bottom : 20px; } } .p-rlm-article .p-rlm-article-head .p-rlm-article-head__category { font-size : 13px; font-size : 1.3rem; line-height : 1.8; display : inline; } .p-rlm-article .p-rlm-article-head .p-rlm-article-head__date { font-size : 13px; font-size : 1.3rem; font-family : "UniNeueRegular", "BIZ UDPGothic", sans-serif; line-height : 1.8; } .p-rlm-article .p-rlm-article-content { font-size : 16px; font-size : 1.6rem; } .p-rlm-article .p-rlm-article-content h2:not([class]) { font-size : 20px; font-size : 2rem; font-weight : 700; line-height : 1.6; margin-bottom : 1.4em; } @media screen and (min-width: 768px) { .p-rlm-article .p-rlm-article-content h2:not([class]) { font-size : 24px; font-size : 2.4rem; } } .p-rlm-article .p-rlm-article-content h2:not(:first-child) { margin-top : 3.4em; } .p-rlm-article .p-rlm-article-content p:not([class]) { margin-bottom : 2em; line-height : 2; } .p-rlm-article .p-rlm-article-content .c-article-text-small { font-size : 13px; font-size : 1.3rem; line-height : 2; margin-bottom : 2em; } .p-rlm-article .p-rlm-article-content img:not([class]) { margin-left : auto; margin-right : auto; display : block; margin-top : 2em; margin-bottom : 2em; } .p-rlm-article .p-rlm-article-content ul:not([class]) { list-style : inside; line-height : 2; } .p-rlm-article .p-rlm-article-content ul:not([class]) li { text-indent : -1em; padding-left : 1em; } .p-rlm-sns { margin-top : 48px; margin-bottom : 96px; } @media screen and (min-width: 768px) { .p-rlm-sns { margin-top : 96px; } } .p-rlm-latest .p-rlm-latest__title { font-family : "UniNeueRegular"; font-size : 32px; font-size : 3.2rem; line-height : 1.6; margin-bottom : 32px; } .p-rlm-archive-card { display : flex; flex-wrap : wrap; gap : 50px 30px; } .p-rlm-archive-card .p-rlm-archive-card-item { width : 100%; } @media screen and (min-width: 768px) { .p-rlm-archive-card .p-rlm-archive-card-item { width : calc((100% - 30px) / 2); } } .p-rlm-archive-card .p-rlm-archive-card-item .p-rlm-archive-card-item__img { margin-bottom : 12px; } .p-rlm-archive-card .p-rlm-archive-card-item .p-rlm-archive-card-item__title { font-size : 16px; font-size : 1.6rem; line-height : 1.6; width : 100%; margin-bottom : 12px; } .p-rlm-archive-card .p-rlm-archive-card-item .p-rlm-archive-card-item__category { display : inline; font-size : 13px; font-size : 1.3rem; line-height : 1.8; font-family : "UniNeueRegular", "BIZ UDPGothic", sans-serif; } .p-rlm-archive-card .p-rlm-archive-card-item .p-rlm-archive-card-item__category:after { content : "|"; margin-left : 0.5em; margin-right : 0.5em; display : inline-block; } .p-rlm-archive-card .p-rlm-archive-card-item .p-rlm-archive-card-item__date { line-height : 1.8; font-size : 13px; font-size : 1.3rem; font-family : "UniNeueRegular", "BIZ UDPGothic", sans-serif; } .p-rlm-section-sub-title { color : rgba(37, 40, 42, 0.5); } /* recoverywear - project - object --------------------------------------------------------- */ .p-recoverywear-list { margin-bottom : 12rem; } .p-commitment-dpv576 .p-commitment-dpv576__graph { position : relative; margin-top : 75px; margin-bottom : 72px; } .p-commitment-dpv576 .p-commitment-dpv576__graph .p-commitment-dpv576__list { position : absolute; left : 0; top : 7.46vw; width : 12em; } @media screen and (min-width: 768px) { .p-commitment-dpv576 .p-commitment-dpv576__graph .p-commitment-dpv576__list { position : relative; display : flex; justify-content : flex-end; width : 100%; left : auto; top : auto; margin-bottom : 24px; } } .p-commitment-dpv576 .p-commitment-dpv576__graph .p-commitment-dpv576__list li { font-size : 16px; font-size : 1.6rem; font-weight : 700; line-height : 1.4; margin-bottom : 6.4vw; } @media screen and (min-width: 768px) { .p-commitment-dpv576 .p-commitment-dpv576__graph .p-commitment-dpv576__list li { width : 8em; margin-bottom : 0; margin-left : 17px; margin-right : 17px; } } .p-commitment-dpv576 .p-commitment-dpv576__graph .p-commitment-dpv576__list li:before { display : block; } .p-commitment-dpv576 .p-commitment-dpv576__small-text p { margin-bottom : 16px; } .p-technology-pht .p-technology-pht__img { margin-top : 72px; margin-left : auto; margin-right : auto; } @media screen and (min-width: 768px) { .p-technology-pht .p-technology-pht__img { max-width : 630px; } } .p-technology-process .p-technology-process__list { margin-bottom : 72px; } .p-technology-evaluation .p-technology-evaluation__list { display : flex; flex-direction : column; flex-wrap : wrap; gap : 32px; margin-top : 72px; margin-bottom : 72px; } @media screen and (min-width: 768px) { .p-technology-evaluation .p-technology-evaluation__list { flex-direction : row; } } .p-technology-evaluation .p-technology-evaluation__item { width : 100%; } @media screen and (min-width: 768px) { .p-technology-evaluation .p-technology-evaluation__item { width : calc((100% - 64px) / 3); } } .p-technology-evaluation .p-technology-evaluation__img { margin-bottom : 16px; display : flex; align-items : center; justify-content : center; } @media screen and (min-width: 768px) { .p-technology-evaluation .p-technology-evaluation__img { min-height : 160px; } } .p-technology-evaluation .p-technology-evaluation__text { font-size : 16px; font-size : 1.6rem; line-height : 1.4; } .p-technology-evaluation .p-technology-evaluation__item--ispo .p-technology-evaluation__img img { width : 160px; height : auto; } .p-product-timing .p-product-timing__group { display : flex; justify-content : space-between; gap : 16px; margin-top : 40px; } .p-product-timing .p-product-timing__pict { max-width : 95px; } .p-product-series .p-product-series__title { margin-top : 100px; margin-bottom : 100px; } .p-product-series .p-product-series__list { display : flex; flex-wrap : wrap; gap : 100px 30px; } .p-product-series .p-product-series__item { width : 100%; display : flex; flex-direction : column; } @media screen and (min-width: 768px) { .p-product-series .p-product-series__item { width : calc((100% - 30px) / 2); } } .p-product-series .p-product-series__header { border-bottom : 1px solid #25282a; padding-bottom : 24px; margin-bottom : 28px; } .p-product-series .p-product-series__title-en { font-size : 24px; font-size : 2.4rem; color : #ff6a14; font-family : "UniNeueBold"; text-align : center; line-height : 1.4; letter-spacing : 0.18em; margin-bottom : 5px; } .p-product-series .p-product-series__title-jp { font-size : 14px; font-size : 1.4rem; text-align : center; line-height : 1.4; font-weight : 700; } .p-product-series .p-product-series__lead { font-size : 18px; font-size : 1.8rem; text-align : center; line-height : 1.4; font-weight : 700; margin-bottom : 8px; } .p-product-series .p-product-series__text { font-size : 14px; font-size : 1.4rem; line-height : 2; margin-bottom : 24px; } .p-product-series .p-product-series__button { text-align : center; margin-top : auto; } .p-product-series .p-product-series__button .c-button { font-size : 13px; font-size : 1.3rem; min-width : 290px; margin-left : auto; margin-right : auto; } .p-award-history { max-width : 730px; margin-top : 72px; } @media screen and (min-width: 768px) { .p-award-history { margin-top : 140px; } } .p-award-history .p-award-history__title { font-weight : 700; margin-bottom : 24px; } .p-award-history .p-award-history__table { table-layout : auto; line-height : 1.8; margin-bottom : 40px; } .p-award-history .p-award-history__table th { width : 3em; white-space : nowrap; text-align : right; font-weight : normal; padding-right : 24px; } .p-award-history .p-award-history__table td { padding-bottom : 16px; } .p-award-history .p-award-history__table tr:last-child td { padding-bottom : 0; } .p-award-history .p-award-history__link { font-size : 12px; font-size : 1.2rem; text-decoration : underline; font-weight : 700; transition : all 0.25s ease-out; } .p-award-history .p-award-history__link:after { content : ""; background-image : url("data:image/svg+xml;utf8,"); background-repeat : no-repeat; background-position : center; background-size : contain; width : 9px; height : 11px; display : inline-block; margin-left : 6px; } .p-award-history .p-award-history__link:hover { text-decoration : none; } .p-award-detail .p-award-ispo__gold-medal { width : 42.66vw; height : auto; margin-bottom : 24px; margin-left : auto; margin-right : auto; } @media screen and (min-width: 768px) { .p-award-detail .p-award-ispo__gold-medal { width : 200px; margin-left : 48px; margin-bottom : 48px; margin-right : 0; float : right; } } .p-award-detail .p-award-detail__img { max-width : 540px; height : auto; margin-right : auto; margin-left : auto; } .p-award-detail .p-award-oeko-tex__chart { margin-top : 100px; } .p-award-ebhsrb .p-award-ebhsrb__list { line-height : 1.8; } .p-award-ebhsrb .p-award-ebhsrb__list li { margin-bottom : 1em; } .p-award-detail .p-award-me-byo__logo { margin-bottom : 32px; max-width : 280px; margin-left : auto; margin-right : auto; } @media screen and (min-width: 768px) { .p-award-detail .p-award-me-byo__logo { margin-left : 48px; margin-bottom : 0; float : right; min-height : 240px; display : inline-flex; align-items : center; } } @media screen and (min-width: 768px) { .p-story-page-head { margin-bottom : 76px; } } /* recruit - project - object --------------------------------------------------------- */ @media screen and (min-width: 768px) { .p-recruit-page-head { margin-bottom : 76px; } } @media screen and (min-width: 768px) { .p-recruit-entry-page-head { min-height : auto; margin-bottom : 168px; } } .p-recruit-completion-page-head { min-height : auto; margin-bottom : 30px; } /* store - project - object --------------------------------------------------------- */ .p-store-category { margin-bottom : 48px; } @media screen and (min-width: 768px) { .p-store-category { margin-bottom : 120px; } } @media screen and (min-width: 1024px) { .p-store-category { width : 33.67vw; } } .p-store-list { margin-bottom : 12rem; } .p-store-section { margin-bottom : 72px; } .p-store-section:last-of-type { margin-bottom : 170px; } .p-store-section .p-store-2-level { font-size : 16px; font-size : 1.6rem; font-weight : bold; margin-bottom : 32px; } .p-store-section .p-store-3-level { font-size : 16px; font-size : 1.6rem; font-weight : bold; position : relative; padding-left : 40px; margin-bottom : 32px; } .p-store-section .p-store-3-level:before { content : ""; width : 25px; height : 1px; background-color : #25282a; display : inline-block; position : absolute; top : 50%; left : 0; transform : translateY(-50%); } .p-store-section .p-store-3-level:first-of-type { margin-top : 0; } .p-store-section .p-store-item { padding-left : 40px; margin-bottom : 45px; } .p-store-section .p-store-item .p-store-item__label { font-size : 13px; font-size : 1.3rem; display : inline-block; background-color : #25282a; color : #ffffff; font-weight : 700; padding : 0.35rem 1rem; margin-bottom : 4px; } .p-store-section .p-store-item .p-store-item__label + .p-store-item__label { margin-left : 12px; } .p-store-section .p-store-item .p-store-item__name { font-size : 1.8rem; line-height : 1.75; margin-bottom : 8px; } .p-store-section .p-store-item .p-store-item__info { font-size : 1.4rem; line-height : 1.75; margin-bottom : 14px; } .p-store-section .p-store-item .p-store-item__button { font-size : 13px; font-size : 1.3rem; } .p-store-section .p-store-item .p-store-item__button .c-button { min-width : 250px; } .p-store-section .p-store-item .p-store-item__img { margin-bottom : 14px; } @media screen and (min-width: 768px) { .p-store-section .p-store-item .p-store-item__img { max-width : 350px; height : auto; } } .p-store-ecsite .p-store-ecsite__text { font-size : 16px; font-size : 1.6rem; line-height : 1.75; margin-bottom : 20px; } .p-store-ecsite .p-store-ecsite__list { display : flex; flex-wrap : wrap; gap : 35px; } .p-store-ecsite .p-store-ecsite__title { font-size : 16px; font-size : 1.6rem; line-height : 2; font-weight : 700; margin-bottom : 8px; } .p-store-ecsite .p-store-ecsite__button { font-size : 13px; font-size : 1.3rem; } .p-store-ecsite .p-store-ecsite__button .c-button { min-width : 220px; } /* ambassador - project - object --------------------------------------------------------- */ .p-user-list { margin-bottom : 12rem; } .p-supportteam-archive { margin-bottom : 12rem; } .p-supportteam-archive .p-supportteam-archive-list { display : flex; flex-wrap : wrap; gap : 30px; } @media screen and (min-width: 768px) { .p-supportteam-archive .p-supportteam-archive-list { gap : 96px 30px; } } .p-supportteam-archive .p-supportteam-archive-item { display : flex; flex-direction : column; } @media screen and (min-width: 768px) { .p-supportteam-archive .p-supportteam-archive-item { width : calc((100% - 60px) / 3); } } .p-supportteam-archive .p-supportteam-archive-item .p-supportteam-archive-item__head { margin-bottom : 16px; } .p-supportteam-archive .p-supportteam-archive-item .p-supportteam-archive-item__label { display : inline-block; background-color : #25282a; color : #ffffff; font-size : 16px; font-size : 1.6rem; font-weight : 700; padding : 0 0.8em; margin-bottom : 12px; line-height : 1.65; } .p-supportteam-archive .p-supportteam-archive-item .p-supportteam-archive-item__main { font-size : 22px; font-size : 2.2rem; line-height : 1.4; font-weight : 700; } .p-supportteam-archive .p-supportteam-archive-item .p-supportteam-archive-item__img { margin-top : auto; margin-bottom : 20px; } .p-supportteam-archive .p-supportteam-archive-item .p-supportteam-archive-item__text { font-size : 16px; font-size : 1.6rem; line-height : 1.6; } .p-supportteam-archive .p-supportteam-archive-item .p-supportteam-archive-item__button { margin-top : 22px; font-size : 13px; font-size : 1.3rem; } .p-supportteam-archive .p-supportteam-archive-item .p-supportteam-archive-item__button .c-button { min-width : 160px; } .p-ambassador-archive { margin-bottom : 12rem; } .p-ambassador-archive .p-ambassador-archive-item { display : flex; flex-direction : column; align-items : flex-start; margin-bottom : 30px; } @media screen and (min-width: 768px) { .p-ambassador-archive .p-ambassador-archive-item { flex-direction : row; align-items : center; } } .p-ambassador-archive .p-ambassador-archive-item:last-child { margin-bottom : 0; } .p-ambassador-archive .p-ambassador-archive-item .p-ambassador-archive-item__img { margin-bottom : 24px; } @media screen and (min-width: 768px) { .p-ambassador-archive .p-ambassador-archive-item .p-ambassador-archive-item__img { flex : 0 0 350px; margin-bottom : 0; } } @media screen and (min-width: 768px) { .p-ambassador-archive .p-ambassador-archive-item .p-ambassador-archive-item__caption { margin-left : 36px; } } .p-ambassador-archive .p-ambassador-archive-item .p-ambassador-archive-item__label { display : inline-block; background-color : #25282a; color : #ffffff; font-size : 16px; font-size : 1.6rem; font-weight : 700; padding : 0 0.8em; margin-bottom : 12px; line-height : 1.65; } .p-ambassador-archive .p-ambassador-archive-item .p-ambassador-archive-item__main { font-size : 22px; font-size : 2.2rem; font-weight : 700; margin-bottom : 8px; } .p-ambassador-archive .p-ambassador-archive-item .p-ambassador-archive-item__sub { font-size : 16px; font-size : 1.6rem; font-weight : 700; line-height : 1.6; } .p-ambassador-archive .p-ambassador-archive-item .p-ambassador-archive-item__text { font-size : 16px; font-size : 1.6rem; line-height : 1.6; margin-top : 16px; } .p-ambassador-archive .p-ambassador-archive-item .p-ambassador-archive-item__button { margin-top : 22px; font-size : 13px; font-size : 1.3rem; } .p-ambassador-archive .p-ambassador-archive-item .p-ambassador-archive-item__button .c-button { min-width : 160px; } .p-user-single { margin-bottom : 12rem; padding-top : 60px; } @media screen and (min-width: 1024px) { .p-user-single { padding-top : 0; } } .p-user-article { padding-top : 0; } .p-user-article .p-user-article-head { position : relative; width : 100%; height : auto; z-index : -1; overflow : hidden; margin-bottom : 0; } @media screen and (min-width: 1024px) { .p-user-article .p-user-article-head { height : 700px; } .p-user-article .p-user-article-head img { position : absolute; left : 50%; top : 0; transform : translateY(0%) translateX(-50%); } } .p-user-article .p-user-article-content { margin-bottom : 50px; } .p-user-article .p-user-article-content h2:not([class]) { font-size : 24px; font-size : 2.4rem; text-align : center; margin-bottom : 36px; } .p-user-article .p-user-article-content h2:not(:first-child) { margin-top : 96px; } .p-user-comment { max-width : 798px; background-color : #ffffff; margin-left : auto; margin-right : auto; padding : 42px 15px 202px; box-sizing : border-box; } @media screen and (min-width: 1024px) { .p-user-comment { width : 798px; margin-top : -100px; padding-left : 80px; padding-right : 80px; } } .p-user-comment .p-user-comment__inner > *:not([class]):last-child , .p-user-comment .p-user-comment__inner > *:last-child { margin-bottom : 0; } .p-user-single--supportteam .p-user-comment { padding-bottom : 96px; } .p-user-profile { position : relative; background-color : rgba(242, 233, 219, 0.25); padding-left : 15px; padding-right : 15px; } .p-user-profile .p-user-profile__inner { max-width : 638px; margin-left : auto; margin-right : auto; } .p-user-profile .p-user-profile__head { display : flex; flex-direction : column; position : relative; margin-bottom : 25px; } @media screen and (min-width: 1024px) { .p-user-profile .p-user-profile__head { flex-direction : row; } } @media screen and (min-width: 1024px) { .p-user-profile .p-user-profile__img { flex : 0 0 auto; } } .p-user-profile .p-user-profile__caption { flex : 1 1 auto; text-align : center; } @media screen and (min-width: 1024px) { .p-user-profile .p-user-profile__caption { text-align : left; margin-left : 30px; } } .p-user-profile .p-user-profile__caption > *:not([class]):last-child { margin-bottom : 0; } .p-user-profile .p-user-profile__label { display : inline-block; background-color : #25282a; color : #ffffff; font-size : 14px; font-size : 1.4rem; font-weight : 700; padding : 0.35rem 1rem; margin-bottom : 6px; } .p-user-profile .p-user-profile__name { font-size : 22px; font-size : 2.2rem; font-weight : 700; line-height : 1.6; margin-bottom : 20px; } .p-user-profile .p-user-profile__sns { display : flex; justify-content : center; column-gap : 8px; margin-bottom : 12px; } @media screen and (min-width: 1024px) { .p-user-profile .p-user-profile__sns { justify-content : flex-start; } } .p-user-profile .p-user-profile__career h3 { font-weight : 700; } .p-user-profile .p-user-profile__career h3:not([class]) { line-height : 1.6; } .p-user-profile .p-user-profile__career p:not([class]) { line-height : 1.6; } .p-user-profile .p-user-profile__career > *:not([class]):last-child { margin-bottom : 0; } .p-user-profile--supportteam { padding-top : 48px; padding-bottom : 48px; } .p-user-profile--supportteam .p-user-profile__head { align-items : center; } .p-user-profile--supportteam .p-user-profile__img { max-width : 300px; } .p-user-profile--ambassador { padding-top : 48px; padding-bottom : 72px; } .p-user-profile--ambassador .p-user-profile__head { align-items : center; } @media screen and (min-width: 1024px) { .p-user-profile--ambassador .p-user-profile__head { align-items : flex-end; } } .p-user-profile--ambassador .p-user-profile__img { max-width : 255px; margin-top : -123px; margin-bottom : 25px; } @media screen and (min-width: 1024px) { .p-user-profile--ambassador .p-user-profile__img { margin-bottom : 0; } } .p-user-sns { margin-bottom : 72px; padding-right : 15px; padding-left : 15px; } .p-user-sns .c-sns-list { justify-content : center; } .p-user-pagenation { max-width : 800px; padding-left : 15px; padding-right : 15px; margin-left : auto; margin-right : auto; } /* br - utility - object --------------------------------------------------------- */ .u-br-sm { display : inline-block; } @media screen and (min-width: 768px) { .u-br-sm { display : none; } } @media screen and (min-width: 1024px) { .u-br-sm { display : none; } } .u-br-md { display : none; } @media screen and (min-width: 768px) { .u-br-md { display : inline-block; } } .u-br-lg { display : none; } @media screen and (min-width: 1024px) { .u-br-lg { display : inline-block; } } /* clear - utility - object --------------------------------------------------------- */ .u-clearfix:after { display : block; clear : both; content : ""; } /* display- helper --------------------------------------------------------- */ .u-display-sm { display : none; } @media screen and (min-width: 768px) { .u-display-sm { display : inline-block; } } .u-display-md { display : none; } @media screen and (min-width: 1024px) { .u-display-md { display : inline-block; } } .u-display-lg { display : none; } @media screen and (min-width: 1280px) { .u-display-lg { display : inline-block; } } .u-display-xl { display : none; } @media screen and (min-width: 1280px) { .u-display-xl { display : inline-block; } } /* fade- helper --------------------------------------------------------- */ /* その場で */ .u-fade-in { animation-name : fadeInAnime; animation-duration : 1s; animation-fill-mode : forwards; opacity : 0; } @keyframes fadeInAnime { from { opacity : 0; } to { opacity : 1; } } /* 下から */ .u-fade-up { animation-name : fadeUpAnime; animation-duration : 0.65s; animation-fill-mode : forwards; opacity : 0; } @keyframes fadeUpAnime { from { opacity : 0; transform : translateY(80px); } to { opacity : 1; transform : translateY(0); } } /* 上から */ .u-fade-down { animation-name : fadeDownAnime; animation-duration : 0.65s; animation-fill-mode : forwards; opacity : 0; } @keyframes fadeDownAnime { from { opacity : 0; transform : translateY(-80px); } to { opacity : 1; transform : translateY(0); } } /* 左から */ .u-fade-left { animation-name : fadeLeftAnime; animation-duration : 0.65s; animation-fill-mode : forwards; opacity : 0; } @keyframes fadeLeftAnime { from { opacity : 0; transform : translateX(-80px); } to { opacity : 1; transform : translateX(0); } } /* 右から */ .u-fade-right { animation-name : fadeRightAnime; animation-duration : 0.65s; animation-fill-mode : forwards; opacity : 0; } @keyframes fadeRightAnime { from { opacity : 0; transform : translateX(80px); } to { opacity : 1; transform : translateX(0); } } /* br - utility - object --------------------------------------------------------- */ .u-br-sm { display : inline-block; } @media screen and (min-width: 768px) { .u-br-sm { display : none; } } @media screen and (min-width: 1024px) { .u-br-sm { display : none; } } .u-br-md { display : none; } @media screen and (min-width: 768px) { .u-br-md { display : inline-block; } } .u-br-lg { display : none; } @media screen and (min-width: 1024px) { .u-br-lg { display : inline-block; } } /* font-size - helper --------------------------------------------------------- */ .u-font-size-1 { font-size : 1px; font-size : 0.1rem; } .u-font-size-2 { font-size : 2px; font-size : 0.2rem; } .u-font-size-3 { font-size : 3px; font-size : 0.3rem; } .u-font-size-4 { font-size : 4px; font-size : 0.4rem; } .u-font-size-5 { font-size : 5px; font-size : 0.5rem; } .u-font-size-6 { font-size : 6px; font-size : 0.6rem; } .u-font-size-7 { font-size : 7px; font-size : 0.7rem; } .u-font-size-8 { font-size : 8px; font-size : 0.8rem; } .u-font-size-9 { font-size : 9px; font-size : 0.9rem; } .u-font-size-10 { font-size : 10px; font-size : 1rem; } .u-font-size-11 { font-size : 11px; font-size : 1.1rem; } .u-font-size-12 { font-size : 12px; font-size : 1.2rem; } .u-font-size-13 { font-size : 13px; font-size : 1.3rem; } .u-font-size-14 { font-size : 14px; font-size : 1.4rem; } .u-font-size-15 { font-size : 15px; font-size : 1.5rem; } .u-font-size-16 { font-size : 16px; font-size : 1.6rem; } .u-font-size-17 { font-size : 17px; font-size : 1.7rem; } .u-font-size-18 { font-size : 18px; font-size : 1.8rem; } .u-font-size-19 { font-size : 19px; font-size : 1.9rem; } .u-font-size-20 { font-size : 20px; font-size : 2rem; } .u-font-size-21 { font-size : 21px; font-size : 2.1rem; } .u-font-size-22 { font-size : 22px; font-size : 2.2rem; } .u-font-size-23 { font-size : 23px; font-size : 2.3rem; } .u-font-size-24 { font-size : 24px; font-size : 2.4rem; } .u-font-size-25 { font-size : 25px; font-size : 2.5rem; } .u-font-size-26 { font-size : 26px; font-size : 2.6rem; } .u-font-size-27 { font-size : 27px; font-size : 2.7rem; } .u-font-size-28 { font-size : 28px; font-size : 2.8rem; } .u-font-size-29 { font-size : 29px; font-size : 2.9rem; } .u-font-size-30 { font-size : 30px; font-size : 3rem; } .u-font-size-31 { font-size : 31px; font-size : 3.1rem; } .u-font-size-32 { font-size : 32px; font-size : 3.2rem; } .u-font-size-33 { font-size : 33px; font-size : 3.3rem; } .u-font-size-34 { font-size : 34px; font-size : 3.4rem; } .u-font-size-35 { font-size : 35px; font-size : 3.5rem; } .u-font-size-36 { font-size : 36px; font-size : 3.6rem; } .u-font-size-37 { font-size : 37px; font-size : 3.7rem; } .u-font-size-38 { font-size : 38px; font-size : 3.8rem; } .u-font-size-39 { font-size : 39px; font-size : 3.9rem; } .u-font-size-40 { font-size : 40px; font-size : 4rem; } /* font- helper --------------------------------------------------------- */ .u-font-uniNeue-book { font-family : "UniNeueBook"; } .u-font-uniNeue-bold { font-family : "UniNeueBold"; } .u-font-uniNeue-regular { font-family : "UniNeueRegular"; } .u-font-uniNeue-heavy { font-family : "UniNeueHeavy"; } .u-font-color-primary { color : #ff6a14; } /* link- helper --------------------------------------------------------- */ .u-link-line { text-decoration : underline; } .u-link-line:hover { text-decoration : none; } /* margin - helper --------------------------------------------------------- */ /* auto margin */ .u-margin-c { margin-right : auto !important; margin-left : auto !important; } .u-margin-l-auto { margin-left : auto !important; } .u-margin-r-auto { margin-left : auto !important; } /* Top margin */ .u-margin-t-0 { margin-top : 0 !important; } .u-margin-t-2 { margin-top : 2px !important; } .u-margin-t-4 { margin-top : 4px !important; } .u-margin-t-6 { margin-top : 6px !important; } .u-margin-t-8 { margin-top : 8px !important; } .u-margin-t-10 { margin-top : 10px !important; } .u-margin-t-12 { margin-top : 12px !important; } .u-margin-t-14 { margin-top : 14px !important; } .u-margin-t-16 { margin-top : 16px !important; } .u-margin-t-18 { margin-top : 18px !important; } .u-margin-t-20 { margin-top : 20px !important; } .u-margin-t-22 { margin-top : 22px !important; } .u-margin-t-24 { margin-top : 24px !important; } .u-margin-t-26 { margin-top : 26px !important; } .u-margin-t-28 { margin-top : 28px !important; } .u-margin-t-30 { margin-top : 30px !important; } .u-margin-t-32 { margin-top : 32px !important; } .u-margin-t-34 { margin-top : 34px !important; } .u-margin-t-36 { margin-top : 36px !important; } .u-margin-t-38 { margin-top : 38px !important; } .u-margin-t-40 { margin-top : 40px !important; } .u-margin-t-42 { margin-top : 42px !important; } .u-margin-t-44 { margin-top : 44px !important; } .u-margin-t-46 { margin-top : 46px !important; } .u-margin-t-48 { margin-top : 48px !important; } .u-margin-t-50 { margin-top : 50px !important; } .u-margin-t-52 { margin-top : 52px !important; } .u-margin-t-54 { margin-top : 54px !important; } .u-margin-t-56 { margin-top : 56px !important; } .u-margin-t-58 { margin-top : 58px !important; } .u-margin-t-60 { margin-top : 60px !important; } .u-margin-t-62 { margin-top : 62px !important; } .u-margin-t-64 { margin-top : 64px !important; } .u-margin-t-66 { margin-top : 66px !important; } .u-margin-t-68 { margin-top : 68px !important; } .u-margin-t-70 { margin-top : 70px !important; } .u-margin-t-72 { margin-top : 72px !important; } .u-margin-t-74 { margin-top : 74px !important; } .u-margin-t-76 { margin-top : 76px !important; } .u-margin-t-78 { margin-top : 78px !important; } .u-margin-t-80 { margin-top : 80px !important; } .u-margin-t-82 { margin-top : 82px !important; } .u-margin-t-84 { margin-top : 84px !important; } .u-margin-t-86 { margin-top : 86px !important; } .u-margin-t-88 { margin-top : 88px !important; } .u-margin-t-90 { margin-top : 90px !important; } .u-margin-t-92 { margin-top : 92px !important; } .u-margin-t-94 { margin-top : 94px !important; } .u-margin-t-96 { margin-top : 96px !important; } .u-margin-t-98 { margin-top : 98px !important; } .u-margin-t-100 { margin-top : 100px !important; } .u-margin-t-102 { margin-top : 102px !important; } .u-margin-t-104 { margin-top : 104px !important; } .u-margin-t-106 { margin-top : 106px !important; } .u-margin-t-108 { margin-top : 108px !important; } .u-margin-t-110 { margin-top : 110px !important; } .u-margin-t-112 { margin-top : 112px !important; } .u-margin-t-114 { margin-top : 114px !important; } .u-margin-t-116 { margin-top : 116px !important; } .u-margin-t-118 { margin-top : 118px !important; } .u-margin-t-120 { margin-top : 120px !important; } /* Bottom margin */ .u-margin-b-0 { margin-bottom : 0 !important; } .u-margin-b-2 { margin-bottom : 2px !important; } .u-margin-b-4 { margin-bottom : 4px !important; } .u-margin-b-6 { margin-bottom : 6px !important; } .u-margin-b-8 { margin-bottom : 8px !important; } .u-margin-b-10 { margin-bottom : 10px !important; } .u-margin-b-12 { margin-bottom : 12px !important; } .u-margin-b-14 { margin-bottom : 14px !important; } .u-margin-b-16 { margin-bottom : 16px !important; } .u-margin-b-18 { margin-bottom : 18px !important; } .u-margin-b-20 { margin-bottom : 20px !important; } .u-margin-b-22 { margin-bottom : 22px !important; } .u-margin-b-24 { margin-bottom : 24px !important; } .u-margin-b-26 { margin-bottom : 26px !important; } .u-margin-b-28 { margin-bottom : 28px !important; } .u-margin-b-30 { margin-bottom : 30px !important; } .u-margin-b-32 { margin-bottom : 32px !important; } .u-margin-b-34 { margin-bottom : 34px !important; } .u-margin-b-36 { margin-bottom : 36px !important; } .u-margin-b-38 { margin-bottom : 38px !important; } .u-margin-b-40 { margin-bottom : 40px !important; } .u-margin-b-42 { margin-bottom : 42px !important; } .u-margin-b-44 { margin-bottom : 44px !important; } .u-margin-b-46 { margin-bottom : 46px !important; } .u-margin-b-48 { margin-bottom : 48px !important; } .u-margin-b-50 { margin-bottom : 50px !important; } .u-margin-b-52 { margin-bottom : 52px !important; } .u-margin-b-54 { margin-bottom : 54px !important; } .u-margin-b-56 { margin-bottom : 56px !important; } .u-margin-b-58 { margin-bottom : 58px !important; } .u-margin-b-60 { margin-bottom : 60px !important; } .u-margin-b-62 { margin-bottom : 62px !important; } .u-margin-b-64 { margin-bottom : 64px !important; } .u-margin-b-66 { margin-bottom : 66px !important; } .u-margin-b-68 { margin-bottom : 68px !important; } .u-margin-b-70 { margin-bottom : 70px !important; } .u-margin-b-72 { margin-bottom : 72px !important; } .u-margin-b-74 { margin-bottom : 74px !important; } .u-margin-b-76 { margin-bottom : 76px !important; } .u-margin-b-78 { margin-bottom : 78px !important; } .u-margin-b-80 { margin-bottom : 80px !important; } .u-margin-b-82 { margin-bottom : 82px !important; } .u-margin-b-84 { margin-bottom : 84px !important; } .u-margin-b-86 { margin-bottom : 86px !important; } .u-margin-b-88 { margin-bottom : 88px !important; } .u-margin-b-90 { margin-bottom : 90px !important; } .u-margin-b-92 { margin-bottom : 92px !important; } .u-margin-b-94 { margin-bottom : 94px !important; } .u-margin-b-96 { margin-bottom : 96px !important; } .u-margin-b-98 { margin-bottom : 98px !important; } .u-margin-b-100 { margin-bottom : 100px !important; } .u-margin-b-102 { margin-bottom : 102px !important; } .u-margin-b-104 { margin-bottom : 104px !important; } .u-margin-b-106 { margin-bottom : 106px !important; } .u-margin-b-108 { margin-bottom : 108px !important; } .u-margin-b-110 { margin-bottom : 110px !important; } .u-margin-b-112 { margin-bottom : 112px !important; } .u-margin-b-114 { margin-bottom : 114px !important; } .u-margin-b-116 { margin-bottom : 116px !important; } .u-margin-b-118 { margin-bottom : 118px !important; } .u-margin-b-120 { margin-bottom : 120px !important; } /* Right margin */ .u-margin-r-0 { margin-right : 0 !important; } .u-margin-r-2 { margin-right : 2px !important; } .u-margin-r-4 { margin-right : 4px !important; } .u-margin-r-6 { margin-right : 6px !important; } .u-margin-r-8 { margin-right : 8px !important; } .u-margin-r-10 { margin-right : 10px !important; } .u-margin-r-12 { margin-right : 12px !important; } .u-margin-r-14 { margin-right : 14px !important; } .u-margin-r-16 { margin-right : 16px !important; } .u-margin-r-18 { margin-right : 18px !important; } .u-margin-r-20 { margin-right : 20px !important; } .u-margin-r-22 { margin-right : 22px !important; } .u-margin-r-24 { margin-right : 24px !important; } .u-margin-r-26 { margin-right : 26px !important; } .u-margin-r-28 { margin-right : 28px !important; } .u-margin-r-30 { margin-right : 30px !important; } .u-margin-r-32 { margin-right : 32px !important; } .u-margin-r-34 { margin-right : 34px !important; } .u-margin-r-36 { margin-right : 36px !important; } .u-margin-r-38 { margin-right : 38px !important; } .u-margin-r-40 { margin-right : 40px !important; } .u-margin-r-42 { margin-right : 42px !important; } .u-margin-r-44 { margin-right : 44px !important; } .u-margin-r-46 { margin-right : 46px !important; } .u-margin-r-48 { margin-right : 48px !important; } .u-margin-r-50 { margin-right : 50px !important; } .u-margin-r-52 { margin-right : 52px !important; } .u-margin-r-54 { margin-right : 54px !important; } .u-margin-r-56 { margin-right : 56px !important; } .u-margin-r-58 { margin-right : 58px !important; } .u-margin-r-60 { margin-right : 60px !important; } .u-margin-r-62 { margin-right : 62px !important; } .u-margin-r-64 { margin-right : 64px !important; } .u-margin-r-66 { margin-right : 66px !important; } .u-margin-r-68 { margin-right : 68px !important; } .u-margin-r-70 { margin-right : 70px !important; } .u-margin-r-72 { margin-right : 72px !important; } .u-margin-r-74 { margin-right : 74px !important; } .u-margin-r-76 { margin-right : 76px !important; } .u-margin-r-78 { margin-right : 78px !important; } .u-margin-r-80 { margin-right : 80px !important; } .u-margin-r-82 { margin-right : 82px !important; } .u-margin-r-84 { margin-right : 84px !important; } .u-margin-r-86 { margin-right : 86px !important; } .u-margin-r-88 { margin-right : 88px !important; } .u-margin-r-90 { margin-right : 90px !important; } .u-margin-r-92 { margin-right : 92px !important; } .u-margin-r-94 { margin-right : 94px !important; } .u-margin-r-96 { margin-right : 96px !important; } .u-margin-r-98 { margin-right : 98px !important; } .u-margin-r-100 { margin-right : 100px !important; } .u-margin-r-102 { margin-right : 102px !important; } .u-margin-r-104 { margin-right : 104px !important; } .u-margin-r-106 { margin-right : 106px !important; } .u-margin-r-108 { margin-right : 108px !important; } .u-margin-r-110 { margin-right : 110px !important; } .u-margin-r-112 { margin-right : 112px !important; } .u-margin-r-114 { margin-right : 114px !important; } .u-margin-r-116 { margin-right : 116px !important; } .u-margin-r-118 { margin-right : 118px !important; } .u-margin-r-120 { margin-right : 120px !important; } /* Left margin */ .u-margin-l-0 { margin-left : 0 !important; } .u-margin-l-2 { margin-left : 2px !important; } .u-margin-l-4 { margin-left : 4px !important; } .u-margin-l-6 { margin-left : 6px !important; } .u-margin-l-8 { margin-left : 8px !important; } .u-margin-l-10 { margin-left : 10px !important; } .u-margin-l-12 { margin-left : 12px !important; } .u-margin-l-14 { margin-left : 14px !important; } .u-margin-l-16 { margin-left : 16px !important; } .u-margin-l-18 { margin-left : 18px !important; } .u-margin-l-20 { margin-left : 20px !important; } .u-margin-l-22 { margin-left : 22px !important; } .u-margin-l-24 { margin-left : 24px !important; } .u-margin-l-26 { margin-left : 26px !important; } .u-margin-l-28 { margin-left : 28px !important; } .u-margin-l-30 { margin-left : 30px !important; } .u-margin-l-32 { margin-left : 32px !important; } .u-margin-l-34 { margin-left : 34px !important; } .u-margin-l-36 { margin-left : 36px !important; } .u-margin-l-38 { margin-left : 38px !important; } .u-margin-l-40 { margin-left : 40px !important; } .u-margin-l-42 { margin-left : 42px !important; } .u-margin-l-44 { margin-left : 44px !important; } .u-margin-l-46 { margin-left : 46px !important; } .u-margin-l-48 { margin-left : 48px !important; } .u-margin-l-50 { margin-left : 50px !important; } .u-margin-l-52 { margin-left : 52px !important; } .u-margin-l-54 { margin-left : 54px !important; } .u-margin-l-56 { margin-left : 56px !important; } .u-margin-l-58 { margin-left : 58px !important; } .u-margin-l-60 { margin-left : 60px !important; } .u-margin-l-62 { margin-left : 62px !important; } .u-margin-l-64 { margin-left : 64px !important; } .u-margin-l-66 { margin-left : 66px !important; } .u-margin-l-68 { margin-left : 68px !important; } .u-margin-l-70 { margin-left : 70px !important; } .u-margin-l-72 { margin-left : 72px !important; } .u-margin-l-74 { margin-left : 74px !important; } .u-margin-l-76 { margin-left : 76px !important; } .u-margin-l-78 { margin-left : 78px !important; } .u-margin-l-80 { margin-left : 80px !important; } .u-margin-l-82 { margin-left : 82px !important; } .u-margin-l-84 { margin-left : 84px !important; } .u-margin-l-86 { margin-left : 86px !important; } .u-margin-l-88 { margin-left : 88px !important; } .u-margin-l-90 { margin-left : 90px !important; } .u-margin-l-92 { margin-left : 92px !important; } .u-margin-l-94 { margin-left : 94px !important; } .u-margin-l-96 { margin-left : 96px !important; } .u-margin-l-98 { margin-left : 98px !important; } .u-margin-l-100 { margin-left : 100px !important; } .u-margin-l-102 { margin-left : 102px !important; } .u-margin-l-104 { margin-left : 104px !important; } .u-margin-l-106 { margin-left : 106px !important; } .u-margin-l-108 { margin-left : 108px !important; } .u-margin-l-110 { margin-left : 110px !important; } .u-margin-l-112 { margin-left : 112px !important; } .u-margin-l-114 { margin-left : 114px !important; } .u-margin-l-116 { margin-left : 116px !important; } .u-margin-l-118 { margin-left : 118px !important; } .u-margin-l-120 { margin-left : 120px !important; } /* text- helper --------------------------------------------------------- */ .u-uppercase { text-transform : uppercase; } .u-separator { display : inline-block; } .u-text-bold { font-weight : 700 !important; } .u-text-normal { font-weight : normal !important; } .u-text-center { text-align : center; } .u-text-left { text-align : left; } .u-text-right { text-align : right; } .u-text-notice { text-indent : -1em; padding-left : 1em; line-height : 1.6; display : inline-block; font-size : 13px; font-size : 1.3rem; } .u-text-small { font-size : 14px; font-size : 1.4rem; } /* width - helper --------------------------------------------------------- */ .u-width-100 { width : 100%; } .video { width: 100%; position: relative; padding-top: 56.25%; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ========================================= Footer SNS icons layout (VENEX) SP:3列×2段(中央) 中間:6個横並び(中央) PC:3列×2段(右寄せ) ========================================= */ .l-footer-sns-list { flex-wrap: wrap; align-content: flex-start; row-gap: 12px; margin-left: auto; margin-right: auto; } .l-footer-sns-list__item { line-height: 1; } .l-footer-sns-list__item > a { display: inline-flex; } /* SP:3列×2段(中央) */ @media screen and (max-width: 767px) { .l-footer-sns-list { /* 3列固定:32×3 + 16×2 = 128 */ max-width: calc(32px * 3 + 16px * 2); } } /* 中間:6個横並び(中央) */ @media screen and (min-width: 768px) and (max-width: 1023px) { .l-footer-sns-list { flex-wrap: nowrap; /* 1列固定 */ row-gap: 0; /* 6個固定:32×6 + 16×5 = 272 */ max-width: calc(32px * 6 + 16px * 5); } } /* PC:3列×2段(右寄せ) */ @media screen and (min-width: 1024px) { .l-footer-sns-list { flex-wrap: wrap; row-gap: 12px; /* 3列固定 */ max-width: calc(32px * 3 + 16px * 2); /* 右寄せに戻す */ margin-left: auto; margin-right: 0; justify-content: flex-end; } }