@charset "utf-8"; html { font-size: 62.5%; overflow-x: hidden; } html:has(.is-open) { overflow: hidden; scrollbar-gutter: stable; } * { box-sizing: border-box; font-feature-settings: "palt"; letter-spacing: .05em; } body { position: relative; font-family: 'Noto Sans JP', sans-serif; font-size: 1.6rem; line-height: 1.7; font-weight: 400; color: #3e3a39; } body:not(.toppage) { overflow-x: hidden; } body.fixed { position: fixed; width: 100%; z-index: 1; } .preload * { transition: none !important; } strong { font-weight: 700; } img { max-width: 100%; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } sup { bottom: 1ex; } sub { top: .5ex; } .pcNone { display: none !important; } input, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; border: 0; background: none; } select::-ms-expand { display: none; } input[type="submit"] { box-sizing: border-box; cursor: pointer; } input[type="submit"]:-webkit-search-decoration { display: none; } input[type="submit"]:focus { outline-offset: -2px; } input[type="submit"]:-moz-focus-inner{ border :0; } input[type=radio], input[type=checkbox] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } @media screen and (max-width: 767px) { body { -webkit-text-size-adjust: 100%; } img { width: 100%; } .spNone { display: none !important; } .pcNone { display: block !important; } } .right { text-align: right !important; } .center { text-align: center !important; } .mt00 { margin-top: 0 !important; } .mt10 { margin-top: 10px !important; } .mt20 { margin-top: 20px !important; } .mt30 { margin-top: 30px !important; } .mt40 { margin-top: 40px !important; } .mt50 { margin-top: 50px !important; } .mt60 { margin-top: 60px !important; } /* link *****************************************/ a:link, a:visited { color: #3e3a39; text-decoration: underline; } a:hover, a:active { color: #3e3a39; text-decoration: none; } a.link01 > span { position: relative; display: initial; padding-right: 13px; } a.link01 > span::before { position: absolute; bottom: 4px; right: 0; width: 11px; height: 11px; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; content: ""; } a.link01.type01 > span::before { bottom: 3px; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%233e3a39%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } a.link01.type02 { color: #3e3a39; } a.link01.type02 > span { padding-right: 22px; } a.link01.type02 > span::before { width: 16px; height: 16px; bottom: 3px; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%233e3a39%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } a.link02 { color: #d85b94; } img { image-rendering: -webkit-optimize-contrast; } /* header *****************************************/ .header01 { position: absolute; width: 100%; left: 0; top: 0; z-index: 1000; height: 70px; } .header01.bgshow::before { position: absolute; z-index: -2; top: 70px; left: 50%; transform: translateX(-50%); width: 200vw; height: 250px; background: rgba(24,46,92,.8); transition: opacity .5s,visibility .5s; content: ""; } .toppage .header01.bgshow::before { top: 0; height: 320px; } .header01.fixed::after { position: absolute; width: 100%; height: 100%; background-color: #fff; left: 0; top: 0; z-index: -1; content: ""; } .header01.lower,.header01.fixed { box-shadow: 0px 1px 6px 0 rgba(0,0,0,0.2); background-color: #fff; } .header01.fixed { position: fixed; transform: translate(0,-500%); } .header01.fixed .globalNav01 > ul > li > a, .header01.fixed .headBlock01 > .tel, .header01.lower .globalNav01 > ul > li > a, .header01.lower .headBlock01 > .tel { color: #3e3a39; } .header01.fixed .globalNav01 > ul > li.dropMenu > a::before, .header01.lower .globalNav01 > ul > li.dropMenu > a::before { border-color: #3e3a39; } .header01.fixed.on { transition: transform .5s; transform: translate(0,0); } .headButton01 { display: none; } .header01 > .inner01 { position: relative; max-width: 1290px; margin: 0 auto; padding: 0 20px; } .header01 > .inner01 > .logo01 { position: absolute; z-index: 2; width: 120px; height: 120px; } .header01.fixed > .inner01 > .logo01 { width: 86px; height: 86px; } .header01.on > .inner01 > .logo01 { transition: width .3s,height .3s; } .header01.init > .inner01 > .logo01 { width: 120px; height: 120px; } .header01 > .inner01 > .logo01 > .image01 { display: block; height: 100%; background-color: #d85b94; } .header01 > .inner01 > .logo01 > .image01 > a { height: 100%; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; line-height: 1.0; color: #fff; text-align: center; text-decoration: none; } .header01 > .inner01 > .logo01 > .image01 > a > .logo { display: block; width: 69px; } .header01.fixed > .inner01 > .logo01 > .image01 > a > .logo { width: 46px; } .header01.init > .inner01 > .logo01 > .image01 > a > .logo { width: 69px; } .header01.on > .inner01 > .logo01 > .image01 > a > .logo { transition: width .3s,height .3s; } .header01 > .inner01 > .logo01 > .text01 { display: none; } #headNavArea01 { position: absolute; height: 70px; right: 380px; top: 0; } #headNavArea02 { display: none; } .globalNav01 { height: 100%; } .globalNav01 > ul { display: flex; flex-wrap: wrap; height: 100%; } .globalNav01 > ul > li { height: 100%; display: flex; flex-wrap: wrap; align-items: center; } .globalNav01 > ul > li:not(:last-child) { /*margin-right: 48px;2023/1/12ナビゲーション追加で修正*/ margin-right: 40px; } .globalNav01 > ul > li > a { display: block; position: relative; text-decoration: none; font-weight: 700; color: #fff; letter-spacing: .02em; } .globalNav01 > ul > li.dropMenu > a { position: relative; padding-right: 14px; } .globalNav01 > ul > li.dropMenu > a:hover { cursor: pointer; } .globalNav01 > ul > li.dropMenu > a::before { position: absolute; right: 0; width: 5px; height: 5px; margin-top: -3px; top: 50%; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(135deg); content: ""; } .globalNav01 > ul > li > a::after { position: absolute; bottom: -4px; left: 0; border-radius: 10px; width: 100%; height: 2px; background-color: #D95B94; opacity: 0; visibility: visible; transition: opacity .3s,visibility .3s; content: ""; } .globalNav01 > ul > li > a:hover::after { opacity: 1.0; visibility: visible; } .headBlock01 { position: absolute; z-index: 2; right: 20px; width: 297px; height: 70px; top: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .headBlock01 > .tel { margin-top: -2px; text-align: right; color: #fff; } .headBlock01 > .tel > .text01 { position: relative; padding-left: 23px; margin-right: -3px; font-size: 2.2rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; } .headBlock01 > .tel > .text01::before { position: absolute; top: 6px; left: 0; width: 18px; height: 20px; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017.42%2017.42%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22%E3%83%9C%E3%83%88%E3%83%A0%E6%B1%8E%E7%94%A82%22%3E%3Cg%20id%3D%22%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%22%3E%3Cg%20id%3D%22Page-1%22%3E%3Cg%20id%3D%22_003---Call%22%20data-name%3D%22003---Call%22%3E%3Cpath%20id%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M7.21%2C10.21a7.1%2C7.1%2C0%2C0%2C1-2.12-4%2C.63.63%2C0%2C0%2C1%2C.17-.5L6.61%2C4.37a.59.59%2C0%2C0%2C0%2C.08-.74L4.55.3A.6.6%2C0%2C0%2C0%2C3.77.08L.33%2C1.7A.61.61%2C0%2C0%2C0%2C0%2C2.3%2C16.6%2C16.6%2C0%2C0%2C0%2C5.07%2C12.35a16.6%2C16.6%2C0%2C0%2C0%2C10%2C5.07.61.61%2C0%2C0%2C0%2C.6-.33l1.62-3.44a.6.6%2C0%2C0%2C0-.22-.78l-3.33-2.14a.59.59%2C0%2C0%2C0-.74.08l-1.34%2C1.35a.63.63%2C0%2C0%2C1-.5.17%2C7.1%2C7.1%2C0%2C0%2C1-4-2.12Z%22%2F%3E%3Cpath%20id%3D%22Shape-2%22%20data-name%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M13.82%2C9.31a.6.6%2C0%2C0%2C1-.6-.6A4.52%2C4.52%2C0%2C0%2C0%2C8.71%2C4.2a.6.6%2C0%2C0%2C1-.6-.6.6.6%2C0%2C0%2C1%2C.6-.6%2C5.73%2C5.73%2C0%2C0%2C1%2C5.71%2C5.71A.6.6%2C0%2C0%2C1%2C13.82%2C9.31Z%22%2F%3E%3Cpath%20id%3D%22Shape-3%22%20data-name%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M16.82%2C9.31a.6.6%2C0%2C0%2C1-.6-.6A7.52%2C7.52%2C0%2C0%2C0%2C8.71%2C1.2a.6.6%2C0%2C0%2C1%2C0-1.2%2C8.72%2C8.72%2C0%2C0%2C1%2C8.71%2C8.71.62.62%2C0%2C0%2C1-.6.6Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; content: ""; } .header01.fixed .headBlock01 > .tel > .text01::before, .header01.lower .headBlock01 > .tel > .text01::before { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017.42%2017.42%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%233e3a39%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22%E3%83%9C%E3%83%88%E3%83%A0%E6%B1%8E%E7%94%A82%22%3E%3Cg%20id%3D%22%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%22%3E%3Cg%20id%3D%22Page-1%22%3E%3Cg%20id%3D%22_003---Call%22%20data-name%3D%22003---Call%22%3E%3Cpath%20id%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M7.21%2C10.21a7.1%2C7.1%2C0%2C0%2C1-2.12-4%2C.63.63%2C0%2C0%2C1%2C.17-.5L6.61%2C4.37a.59.59%2C0%2C0%2C0%2C.08-.74L4.55.3A.6.6%2C0%2C0%2C0%2C3.77.08L.33%2C1.7A.61.61%2C0%2C0%2C0%2C0%2C2.3%2C16.6%2C16.6%2C0%2C0%2C0%2C5.07%2C12.35a16.6%2C16.6%2C0%2C0%2C0%2C10%2C5.07.61.61%2C0%2C0%2C0%2C.6-.33l1.62-3.44a.6.6%2C0%2C0%2C0-.22-.78l-3.33-2.14a.59.59%2C0%2C0%2C0-.74.08l-1.34%2C1.35a.63.63%2C0%2C0%2C1-.5.17%2C7.1%2C7.1%2C0%2C0%2C1-4-2.12Z%22%2F%3E%3Cpath%20id%3D%22Shape-2%22%20data-name%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M13.82%2C9.31a.6.6%2C0%2C0%2C1-.6-.6A4.52%2C4.52%2C0%2C0%2C0%2C8.71%2C4.2a.6.6%2C0%2C0%2C1-.6-.6.6.6%2C0%2C0%2C1%2C.6-.6%2C5.73%2C5.73%2C0%2C0%2C1%2C5.71%2C5.71A.6.6%2C0%2C0%2C1%2C13.82%2C9.31Z%22%2F%3E%3Cpath%20id%3D%22Shape-3%22%20data-name%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M16.82%2C9.31a.6.6%2C0%2C0%2C1-.6-.6A7.52%2C7.52%2C0%2C0%2C0%2C8.71%2C1.2a.6.6%2C0%2C0%2C1%2C0-1.2%2C8.72%2C8.72%2C0%2C0%2C1%2C8.71%2C8.71.62.62%2C0%2C0%2C1-.6.6Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } .headBlock01 > .tel > .text02 { margin-top: 3px; font-size: 1.0rem; line-height: 1.2; letter-spacing: 0; font-weight: 700; font-feature-settings: "palt"; } .headBlock01 > .btn01 { width: auto; display: inline-block; margin-right: 0; margin-left: inherit; width: 140px; } .headBlock01 > .btn01 > a { padding: 9px 24px 11px; font-size: 1.6rem; height: auto; min-height: inherit; box-shadow: none; } .headBlock01 > .btn01 > a:hover { color: #26bfa7; } .headBlock01 > .btn01 > a::before { position: absolute; top: 0; left: 0; z-index: -1; border: none; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .headBlock01 > .btn01 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .headBlock01 > .btn01 > a::before { border: none !important; } .headBlock01 > .btn01 > a > .inner01 { padding-right: 0; } .headBlock01 > .btn01 > a > .inner01::before, .headBlock01 > .btn01 > a > .inner01::after { content: none; } .header01:not(.fixed):not(.lower) .headBlock01>.btn01>a { border: solid 2px #fff; background-color: rgba(255,255,255,0); } .header01:not(.fixed):not(.lower) .headBlock01>.btn01>a:hover { color: #fff; } .header01:not(.fixed):not(.lower) .headBlock01>.btn01>a::before { background-color: #26bfa7; } .funcMenuList { display: flex; flex-wrap: wrap; align-items: flex-start; padding-top: 32px; max-width: 1100px; margin-right: auto; transition: opacity .3s,visibility .3s; position: absolute; z-index: 1; opacity: 0; top: 70px; padding-bottom: 30px; width: 100vw; /*margin-left: -290px; 2023/1/12/メニュー調整*/ margin-left: -150px; visibility: hidden; } .funcMenuList::before { /*position: absolute; z-index: -1; top: -70px; left: 50%; transform: translateX(-50%); width: 200vw; height: 320px; background: rgba(24,46,92,.8); transition: opacity .5s,visibility .5s; content: "";*/ } .fixed .funcMenuList { transition: none; transform: translate(-50%,-100%); } .on .funcMenuList { position: absolute; transform: translate(0); transition: opacity .3s,visibility .3s; } .funcMenuList.open { opacity: 1.0; visibility: visible; } .funcMenuList > li { width: auto; padding-left: 22px; padding-right: 22px; } .funcMenuList > li > a { display: table; height: 100%; color: #d2b36d; text-decoration: none; } .funcMenuList > li dl > dt { display: inline-block; padding-right: 15px; margin-bottom: 5px; position: relative; font-weight: 700; } .funcMenuList > li > a:hover dl > dt { text-decoration: underline; } .funcMenuList > li dl > dt::before { position: absolute; right: 0; width: 6px; height: 6px; border-top: 2px solid #d2b36d; border-right: 2px solid #d2b36d; top: 50%; margin-top: -4px; transform: rotate(45deg); content: ""; } .funcMenuList > li dl > dd { color: #fff; opacity: .6; font-size: 1.4rem; } @media screen and (max-width: 1400px) { .header01 > .inner01 > .logo01 { margin-left: -20px; } .globalNav01 > ul > li:not(:last-child) { margin-right: 30px; } } @media screen and (max-width: 1200px) { .header01 > .inner01 > .logo01, .header01.init > .inner01 > .logo01 { width: 86px; height: 86px; } .header01 > .inner01 > .logo01 > .image01 > a > .logo, .header01.init > .inner01 > .logo01 > .image01 > a > .logo { width: 46px; } .globalNav01 > ul > li:not(:last-child) { margin-right: 18px; } .globalNav01 > ul > li > a { font-size: 1.5rem; } .headBlock01 { width: 288px; } .headBlock01 > .tel > .text01 { font-size: 2.0rem; } #headNavArea01 { right: 330px; } .headBlock01 > .btn01 > a { padding-left: 19px; padding-right: 19px; } .funcMenuList > li { width: 220px; } } @media screen and (max-width: 1000px) { .header01 { height: 44px; background-color: #fff; } .header01.active { position: fixed; } .header01::before { position: absolute; z-index: -1; top: 44px; left: 0; width: 100%; height: 100vh; background-color: #f3f3f1; content: ""; opacity: 0; visibility: hidden; transition: all .3s; } .header01.active::before { opacity: 1.0; visibility: visible; } .headButton01 { position: absolute; top: 0; right: 0; display: block; width: 44px; height: 44px; background-color: #232531; overflow: hidden; cursor: pointer; } .headButton01 > span { display: block; position: absolute; left: 50%; margin-left: -9px; width: 18px; height: 2px; background-color: #fff; text-indent: 100%; white-space: nowrap; transition: all .1s; } .headButton01 > .top { top: 14px; } .headButton01 > .bottom { bottom: 14px; } .headButton01 > .middle { top: 21px; } .active .headButton01 > .middle { background: none; } .active .headButton01 > .top { top: 21px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .active .headButton01 > .bottom { bottom: 21px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .header01 > .inner01 { z-index: 1000; padding-right: 0; padding-left: 0; height: 100%; box-shadow: 0px 1px 6px 0 rgba(0,0,0,0.2); } .header01 > .inner01 > .logo01 { position: relative; width: auto !important; height: auto; max-width: 220px; margin-left: 0; } .header01 > .inner01 > .logo01 > .image01 { width: 70px; height: 70px; display: block; } .header01 > .inner01 > .logo01 > .image01 > a > .logo, .header01.fixed > .inner01 > .logo01 > .image01 > a > .logo { width: 40px; } .header01 > .inner01 > .logo01 > .text01 { position: absolute; display: block; left: 80px; top: 8px; color: #566577; font-size: 1.0rem; line-height: 1.4; } #headNavArea01 { display: none; } #headNavArea02 { position: fixed; display: block; top: 44px; left: 0; right: inherit; padding: 0; width: 100%; height: calc(100vh - 44px); overflow: hidden; opacity: 0; visibility: hidden; overflow-y: auto; transition: opacity .3s,visibility .3s; } .active #headNavArea02 { opacity: 1.0; visibility: visible; } #headNavArea02 .globalNav02 > ul { background-color: #f7f7f5; } .globalNav02 > ul { padding-top: 22px; } .footerNavArea01 .globalNav02 > ul { padding-top: 0; } .globalNav02 > ul > li { position: relative; border-bottom: solid 1px #e4e4e2; } .globalNav02 > ul > li > a { display: block; font-size: 1.6rem; font-weight: 700; padding: 9px 25px; color: #3e3a39; text-decoration: none; } .globalNav02 > ul > li > dl > dt { font-size: 1.6rem; font-weight: 700; padding: 9px 25px; background-color: #f7f7f5; transition: background .3s; } .globalNav02 > ul > li > dl > dt:hover { cursor: pointer } .globalNav02 > ul > li > dl > dt.open { background-color: rgba(24,46,92,.1); } .globalNav02 > ul > li > dl > dd { display: none; background-color: #fff; } .globalNav02 > ul > li > dl > dd > a { display: block; padding: 10px 25px; color: #000; font-size: 1.4rem; text-decoration: none; font-weight: 700; } .globalNav02 > ul > li.dropMenu::before { position: absolute; right: 26px; width: 7px; height: 7px; top: 17px; border-top: 2px solid #3e3a39; border-right: 2px solid #3e3a39; transform: rotate(135deg); pointer-events: none; content: ""; } .globalNav02 > ul > li.dropMenu.on::before { transform: rotate(-45deg); top: 20px; } .navList02:not(:first-child) { border-top: solid 1px #e7e8f1; } .navList02 > dt { font-size: 1.6rem; font-weight: 700; padding: 10px 20px; } .navList02 > dd > a:not(:first-child) { border-top: solid 1px #e7e8f1; } .globalNav02 a.link01 > span::before { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%233e3a39%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } .headBlock01 { right: 44px; width: 94px; height: 44px; } .headBlock01 > .tel { display: none; } .headBlock01 > .btn01 { width: 82px; height: 32px; display: none; } .headBlock01 > .btn01 > a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 100%; padding: 2px 5px; text-align: center; font-size: 1.2rem; } .headBlock01 > .btn01 > a:hover { color: #fff; background-color: #26bfa7; } .headBlock01 > .btn01 > a:hover::before { content: none; } .headBlock02 { padding: 36px 4% 120px; background: #182e5c url(../images/bg02s.png) no-repeat 50% 10px/100%; color: #fff; } .headBlock02 > .text01 { font-size: 1.6rem; text-align: center; } .headBlock02 > .btn01 { display: table; max-width: 300px; width: 100%; margin: 15px auto 0; } .headBlock02 > .btn01 > a { position: relative; z-index: 1; display: block; height: auto; padding: 8px 30px 12px; border: solid 3px #26bfa7; width: 100%; border-radius: 100px; color: #fff; font-weight: 700; font-size: 1.6rem; background-color: #26bfa7; text-align: center; line-height: 1.4; overflow: hidden; text-decoration: none; } .headBlock02 > .btn01 > a::before { content: none; } .headBlock02 > .btn01 > a > .inner01 { position: relative; display: inline-block; padding-right: 28px; } .headBlock02 > .btn01 > a > .inner01::before { width: 18px; height: 18px; right: 0; background-color: #fff; border-radius: 50%; } .headBlock02 > .btn01 > a > .inner01::after { width: 6px; height: 6px; right: 5px; } .headBlock02 > .btn01 > a > .inner01::before, .headBlock02 > .btn01 > a > .inner01::after { position: absolute; top: 55%; transform: translateY(-50%); content: ""; } .headBlock02 > .btn01 > a > .inner01::after { width: 8px; height: 8px; right: 5px; z-index: 2; background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2326bfa7%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; } .headBlock02 > .tel { margin-top: 40px; padding-top: 35px; border-top: solid 1px #7a7c8b; } .headBlock02 > .tel > .text01 { margin-top: 5px; font-size: 1.3rem; text-align: center; letter-spacing: .02em; } .headBlock02 > .tel > .text02 { position: relative; display: table; margin-top: 8px; padding-left: 40px; margin-right: auto; margin-left: auto; font-size: 3.2rem; font-weight: 700; line-height: 1.2; letter-spacing: .02em; } .headBlock02 > .tel > .text02 > a { color: #fff; text-decoration: none; } .headBlock02 > .tel > .text02::before { position: absolute; top: 8px; left: 0; width: 27px; height: 28px; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2043.15%2043.14%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%22%3E%3Cg%20id%3D%22CTA%22%3E%3Cg%20id%3D%22Page-1%22%3E%3Cg%20id%3D%22_003---Call%22%20data-name%3D%22003---Call%22%3E%3Cpath%20id%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M17.87%2C25.28a17.42%2C17.42%2C0%2C0%2C1-5.26-9.89A1.51%2C1.51%2C0%2C0%2C1%2C13%2C14.15l3.34-3.33A1.5%2C1.5%2C0%2C0%2C0%2C16.58%2C9L11.27.74A1.49%2C1.49%2C0%2C0%2C0%2C9.34.2l-8.51%2C4A1.48%2C1.48%2C0%2C0%2C0%2C0%2C5.69C.45%2C9.93%2C2.3%2C20.35%2C12.55%2C30.6s20.66%2C12.09%2C24.9%2C12.53a1.47%2C1.47%2C0%2C0%2C0%2C1.48-.81l4-8.52a1.49%2C1.49%2C0%2C0%2C0-.54-1.93l-8.24-5.3a1.48%2C1.48%2C0%2C0%2C0-1.84.21L29%2C30.11a1.49%2C1.49%2C0%2C0%2C1-1.24.43%2C17.4%2C17.4%2C0%2C0%2C1-9.88-5.26Z%22%2F%3E%3Cpath%20id%3D%22Shape-2%22%20data-name%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M34.22%2C23.06a1.49%2C1.49%2C0%2C0%2C1-1.49-1.49A11.18%2C11.18%2C0%2C0%2C0%2C21.57%2C10.41a1.49%2C1.49%2C0%2C0%2C1%2C0-3A14.15%2C14.15%2C0%2C0%2C1%2C35.71%2C21.57%2C1.49%2C1.49%2C0%2C0%2C1%2C34.22%2C23.06Z%22%2F%3E%3Cpath%20id%3D%22Shape-3%22%20data-name%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M41.66%2C23.06a1.49%2C1.49%2C0%2C0%2C1-1.49-1.49A18.61%2C18.61%2C0%2C0%2C0%2C21.57%2C3a1.49%2C1.49%2C0%2C0%2C1%2C0-3A21.6%2C21.6%2C0%2C0%2C1%2C43.15%2C21.57a1.48%2C1.48%2C0%2C0%2C1-.44%2C1.05A1.49%2C1.49%2C0%2C0%2C1%2C41.66%2C23.06Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; content: ""; } .headBlock02 > .closeBtn01 { display: table; margin: 40px auto 0; min-width: 200px; } .headBlock02 > .closeBtn01 > a { display: block; padding: 8px 20px 11px; border: solid 1px #fff; border-radius: 60px; color: #fff; font-size: 1.3rem; text-decoration: none; letter-spacing: .02em; text-align: center; } .headBlock02 > .closeBtn01 > a > .inner01 { position: relative; padding-left: 28px; } .headBlock02 > .closeBtn01 > a > .inner01::before, .headBlock02 > .closeBtn01 > a > .inner01::after { position: absolute; top: 50%; left: 0; width: 18px; height: 2px; margin-top: -1px; background-color: #fff; content: ""; } .headBlock02 > .closeBtn01 > a > .inner01::before{ transform: rotate(45deg); } .headBlock02 > .closeBtn01 > a > .inner01::after { transform: rotate(-45deg); } .headNavArea01 .funcMenuList { display: none; } .headBlock02 > .btn01 > a:hover { color: #fff; background-color: #26bfa7; } .headBlock02 > .btn01 > a:hover::before, .headBlock02 .btn02 > a:hover::before { content: none; } .headBlock02 > .btn01 > a:hover > .inner01::before { background-color: #fff; } .headBlock02 > .btn01 > a:hover > .inner01::after { background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2326bfa7%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; } .headBlock02 .btn02 > a:hover { color: #1a237e; background-color: #fff; } .headBlock02 .btn02 > a:hover > .inner01::before { background-color: #1a237e; } .headBlock02 .btn02 > a:hover > .inner01::after { background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; } } @media screen and (max-width: 767px) { .funcMenuList::before { content: none; } .funcMenuList > li { width: 100%; border-left: none; border-top: solid 1px #e6e7f0; } .funcMenuList > li:last-child { border-right: none; border-bottom: solid 1px #e6e7f0; } .funcMenuList > li:nth-child(2), .funcMenuList > li:nth-child(3), .funcMenuList > li:nth-child(5) { width: 100%; } .funcMenuList > li > a { padding: 14px 10px 16px; } .funcMenuList > li dl > dt { padding-right: 13px; } .funcMenuList > li > a:hover dl > dt { text-decoration: none; } .funcMenuList > li dl > dd { margin-top: 8px; } } @media screen and (max-width: 360px) { .header01 > .inner01 > .logo01 > .text01 { left: 64px; } .header01 > .inner01 > .logo01 > .image01 { width: 55px; height: 55px; } .header01 > .inner01 > .logo01 > .image01 > a > .logo { width: 32px !important; margin-top: -3px; } } @media screen and (max-width: 340px) { .header01 > .inner01 > .logo01 > .image01 { width: 52px; height: 52px; } .header01 > .inner01 > .logo01 > .text01 { left: 58px; letter-spacing: 0; } .headBlock01 { right: 28px; } .headBlock01 > .btn01 { width: 72px; } } /* footer *****************************************/ .contactArea01 { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 90px; background: linear-gradient(60deg, rgba(24, 46, 92, 1) 0%, rgba(49, 69, 110, 1) 100%); color: #fff; } .contactArea01::before { width: 100%; min-width: 1440px; left: 50%; transform: translateX(-50%); top: 0; height: 100%; position: absolute; z-index: -1; background: url(../images/bg02.png) no-repeat 50% 0/cover; content: ""; } .contactArea01 > .inner01 { max-width: 1240px; padding: 0 20px; margin: 0 auto; } .contactArea01 > .inner01 > .title01 { text-align: center; font-size: 3.6rem; font-weight: 700; line-height: 1.2; color: #fff; letter-spacing: .06em; } .contactArea01 > .inner01 > .title01 > .text01 { display: block; margin-bottom: 5px; font-family: 'Montserrat', sans-serif; font-size: 1.8rem; color: #d2b46e; font-weight: 700; letter-spacing: .1em; } .contactArea01 > .inner01 > .text01 { margin-top: 40px; text-align: center; font-size: 2.4rem; font-weight: 700; letter-spacing: .14em; } .contactArea01>.inner01>.text02 { text-align: center; margin-top: 70px; font-size: 1.7rem; } .contactArea01 > .inner01 > .btn01 { display: block; width: 320px; margin: 50px auto 0; } .contactArea01 > .inner01 > .btn01 > a { padding: 12px 30px 14px; position: relative; z-index: 1; display: block; border: solid 3px #ba9c6e; width: 100%; height: auto; min-height: inherit; border-radius: 100px; color: #fff; font-size: 1.8rem; font-weight: 700; background-color: #ba9c6e; text-align: center; line-height: 1.4; overflow: hidden; text-decoration: none; box-shadow: none; } .contactArea01 > .inner01 > .btn01 > a:hover { color: #ba9c6e; } .contactArea01 > .inner01 > .btn01 > a::before { position: absolute; top: 0; left: 0; z-index: -1; border: none; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .contactArea01 > .inner01 > .btn01 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .contactArea01 > .inner01 > .btn01 > a > .inner01 { position: relative; display: inline-block; padding-right: 25px; } .contactArea01 > .inner01 > .btn01 > a > .inner01::before, .contactArea01 > .inner01 > .btn01 > a > .inner01::after { position: absolute; top: 50%; transform: translateY(-50%); content: ""; transition: all .3s; } .contactArea01 > .inner01 > .btn01 > a > .inner01::before { right: 0; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; } .contactArea01 > .inner01 > .btn01 > a > .inner01::after { width: 8px; height: 8px; right: 6px; z-index: 2; background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ba9c6e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; } .contactArea01 > .inner01 > .btn01 > a:hover > .inner01::before { background-color: #ba9c6e; } .contactArea01 > .inner01 > .btn01 > a:hover > .inner01::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .contactArea01 > .inner01 > .box01 { margin: 80px auto 0; padding: 30px 7%; background-color: #5e6d8d; max-width: 690px; } .contactArea01 > .inner01 > .box01 > .text01 { text-align: center; font-size: 2.1rem; font-weight: 500; } .contactArea01 > .inner01 > .box01 > .tel > .text01 { position: relative; display: table; margin: 18px auto 0; padding-left: 56px; font-size: 4.0rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; } .contactArea01 > .inner01 > .box01 > .tel > .text01 > a { text-decoration: none; color: #fff; pointer-events: none; } .contactArea01 > .inner01 > .box01 > .tel > .text01::before { position: absolute; top: 6px; left: 0; width: 43px; height: 45px; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2043.15%2043.14%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%22%3E%3Cg%20id%3D%22CTA%22%3E%3Cg%20id%3D%22Page-1%22%3E%3Cg%20id%3D%22_003---Call%22%20data-name%3D%22003---Call%22%3E%3Cpath%20id%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M17.87%2C25.28a17.42%2C17.42%2C0%2C0%2C1-5.26-9.89A1.51%2C1.51%2C0%2C0%2C1%2C13%2C14.15l3.34-3.33A1.5%2C1.5%2C0%2C0%2C0%2C16.58%2C9L11.27.74A1.49%2C1.49%2C0%2C0%2C0%2C9.34.2l-8.51%2C4A1.48%2C1.48%2C0%2C0%2C0%2C0%2C5.69C.45%2C9.93%2C2.3%2C20.35%2C12.55%2C30.6s20.66%2C12.09%2C24.9%2C12.53a1.47%2C1.47%2C0%2C0%2C0%2C1.48-.81l4-8.52a1.49%2C1.49%2C0%2C0%2C0-.54-1.93l-8.24-5.3a1.48%2C1.48%2C0%2C0%2C0-1.84.21L29%2C30.11a1.49%2C1.49%2C0%2C0%2C1-1.24.43%2C17.4%2C17.4%2C0%2C0%2C1-9.88-5.26Z%22%2F%3E%3Cpath%20id%3D%22Shape-2%22%20data-name%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M34.22%2C23.06a1.49%2C1.49%2C0%2C0%2C1-1.49-1.49A11.18%2C11.18%2C0%2C0%2C0%2C21.57%2C10.41a1.49%2C1.49%2C0%2C0%2C1%2C0-3A14.15%2C14.15%2C0%2C0%2C1%2C35.71%2C21.57%2C1.49%2C1.49%2C0%2C0%2C1%2C34.22%2C23.06Z%22%2F%3E%3Cpath%20id%3D%22Shape-3%22%20data-name%3D%22Shape%22%20class%3D%22cls-1%22%20d%3D%22M41.66%2C23.06a1.49%2C1.49%2C0%2C0%2C1-1.49-1.49A18.61%2C18.61%2C0%2C0%2C0%2C21.57%2C3a1.49%2C1.49%2C0%2C0%2C1%2C0-3A21.6%2C21.6%2C0%2C0%2C1%2C43.15%2C21.57a1.48%2C1.48%2C0%2C0%2C1-.44%2C1.05A1.49%2C1.49%2C0%2C0%2C1%2C41.66%2C23.06Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; content: ""; } .contactArea01 > .inner01 > .box01 > .tel > .text02 { margin-top: 28px; font-size: 1.9rem; text-align: center; letter-spacing: .02em; font-weight: 500; } .contactArea01>.inner01>.box02 { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4.7%; max-width: 840px; width: 100%; margin-left: auto; margin-right: auto; margin-top: 40px; } .contactArea01>.inner01>.box02 > .column01 { background-color: #d0d2d7; border-radius: 10px; width: 47.619%; padding: 30px 37px 40px; color: #3e3a39; } .contactArea01>.inner01>.box02>.column01 > .title01 { font-size: 2.4rem; font-weight: 700; border-bottom: solid 1px #182e5c; padding-bottom: 10px; } .contactArea01>.inner01>.box02>.column01>.title01>.text01::before, .contactArea01>.inner01>.box02>.column01>.title01>.text02::before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; } .contactArea01>.inner01>.box02>.column01>.title01>.text01::before { width: 39px; height: 36px; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2038.651%2036.08%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23182e5c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22mv_slide1%22%3E%3Cg%20id%3D%22footer%22%3E%3Cg%20id%3D%22AhQeuo%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M22.355%2C29.251q.5.784%2C1.006%2C1.571Q24.179%2C32.1%2C25%2C33.377c.232.363.465.724.7%2C1.088a.215.215%2C0%2C0%2C0%2C.209.1q1.352%2C0%2C2.7%2C0a.762.762%2C0%2C0%2C1%2C.751.792.775.775%2C0%2C0%2C1-.706.713c-.058%2C0-.117%2C0-.176%2C0q-9.151%2C0-18.3%2C0a.835.835%2C0%2C0%2C1-.77-.38.744.744%2C0%2C0%2C1%2C.345-1.062%2C1.088%2C1.088%2C0%2C0%2C1%2C.365-.069q1.314-.008%2C2.629%2C0a.243.243%2C0%2C0%2C0%2C.234-.128q.5-.8%2C1.008-1.586c.394-.616.791-1.23%2C1.185-1.846q.552-.86%2C1.1-1.721c.008-.013.015-.028.036-.067-.084%2C0-.152-.011-.22-.011H6.019c-.918%2C0-1.837.007-2.755-.01a3.126%2C3.126%2C0%2C0%2C1-1.312-.341A3.423%2C3.423%2C0%2C0%2C1%2C.41%2C27.383%2C3.786%2C3.786%2C0%2C0%2C1%2C.06%2C26.4%2C4.244%2C4.244%2C0%2C0%2C1%2C0%2C25.422Q0%2C15.807%2C0%2C6.19c0-.1%2C0-.2%2C0-.3a3.322%2C3.322%2C0%2C0%2C1%2C.35-1.371A3.376%2C3.376%2C0%2C0%2C1%2C1.808%2C2.992a2.751%2C2.751%2C0%2C0%2C1%2C1.035-.357%2C8.675%2C8.675%2C0%2C0%2C1%2C.938-.064q9.1%2C0%2C18.2%2C0a1.424%2C1.424%2C0%2C0%2C1%2C.429.067A.742.742%2C0%2C0%2C1%2C22.439%2C4a1.392%2C1.392%2C0%2C0%2C1-.452.076q-3.843.008-7.686%2C0H3.52a1.936%2C1.936%2C0%2C0%2C0-1.663.844A1.9%2C1.9%2C0%2C0%2C0%2C1.51%2C6.067q0%2C2.566%2C0%2C5.132%2C0%2C7.233%2C0%2C14.465a1.975%2C1.975%2C0%2C0%2C0%2C.524%2C1.408%2C1.832%2C1.832%2C0%2C0%2C0%2C1.34.62c.792.016%2C1.585.006%2C2.378.006q14.641%2C0%2C29.285%2C0a2.3%2C2.3%2C0%2C0%2C0%2C.873-.143%2C1.912%2C1.912%2C0%2C0%2C0%2C1-.9%2C2.086%2C2.086%2C0%2C0%2C0%2C.227-1q0-5.742%2C0-11.484a.825.825%2C0%2C0%2C1%2C.3-.687.754.754%2C0%2C0%2C1%2C1.142.28.86.86%2C0%2C0%2C1%2C.072.309q0%2C5.9%2C0%2C11.8a3.247%2C3.247%2C0%2C0%2C1-.351%2C1.395%2C3.339%2C3.339%2C0%2C0%2C1-1.095%2C1.3%2C3.05%2C3.05%2C0%2C0%2C1-1.385.579%2C7.348%2C7.348%2C0%2C0%2C1-.925.065q-6.158.007-12.316%2C0h-.207Zm1.583%2C5.3a1.019%2C1.019%2C0%2C0%2C0-.051-.1q-.747-1.173-1.5-2.345c-.591-.921-1.185-1.84-1.773-2.763a.253.253%2C0%2C0%2C0-.244-.133c-.638%2C0-1.275.014-1.912%2C0a.521.521%2C0%2C0%2C0-.532.282c-.5.812-1.023%2C1.606-1.538%2C2.408q-.747%2C1.164-1.493%2C2.332c-.064.1-.124.2-.2.327Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M16.634%2C15.585a4.2%2C4.2%2C0%2C0%2C1-1.576-3.725%2C4.037%2C4.037%2C0%2C0%2C1%2C1.433-2.77%2C4.192%2C4.192%2C0%2C0%2C1%2C5.582.081%2C4.076%2C4.076%2C0%2C0%2C1%2C1.232%2C2.044%2C4.155%2C4.155%2C0%2C0%2C1-.09%2C2.4%2C4.3%2C4.3%2C0%2C0%2C1-1.372%2C1.954c.275.171.541.32.79.493a5.881%2C5.881%2C0%2C0%2C1%2C1.759%2C1.93%2C5.988%2C5.988%2C0%2C0%2C1%2C.575%2C1.4%2C5.638%2C5.638%2C0%2C0%2C1%2C.192%2C1.491c0%2C.671%2C0%2C1.342%2C0%2C2.012a.731.731%2C0%2C0%2C1-.328.678%2C1.5%2C1.5%2C0%2C0%2C1-.347.129.488.488%2C0%2C0%2C1-.138%2C0q-5.106%2C0-10.213%2C0a.749.749%2C0%2C0%2C1-.726-.4.923.923%2C0%2C0%2C1-.1-.4c-.009-.7-.012-1.409%2C0-2.113a5.632%2C5.632%2C0%2C0%2C1%2C.291-1.727%2C5.9%2C5.9%2C0%2C0%2C1%2C2.584-3.231C16.324%2C15.757%2C16.467%2C15.68%2C16.634%2C15.585Zm2.6%2C6.609h4.239c.172%2C0%2C.174%2C0%2C.174-.177%2C0-.357%2C0-.713%2C0-1.069a4.469%2C4.469%2C0%2C0%2C0-.238-1.467%2C4.22%2C4.22%2C0%2C0%2C0-.8-1.419%2C4.28%2C4.28%2C0%2C0%2C0-2.538-1.476%2C4.442%2C4.442%2C0%2C0%2C0-2.266.158%2C4.406%2C4.406%2C0%2C0%2C0-2.533%2C2.239%2C3.665%2C3.665%2C0%2C0%2C0-.4%2C1.339c-.036.552-.04%2C1.105-.055%2C1.658-.005.214%2C0%2C.214.216.214Zm0-7.245a2.684%2C2.684%2C0%2C1%2C0-2.686-2.687A2.677%2C2.677%2C0%2C0%2C0%2C19.23%2C14.949Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M31.464%2C0h4.692a2.408%2C2.408%2C0%2C0%2C1%2C1.922.87%2C2.135%2C2.135%2C0%2C0%2C1%2C.5%2C1.036%2C3.739%2C3.739%2C0%2C0%2C1%2C.062.605c0%2C2.335%2C0%2C4.67.007%2C7.005a2.528%2C2.528%2C0%2C0%2C1-.381%2C1.378%2C2.371%2C2.371%2C0%2C0%2C1-1.179.969%2C2.629%2C2.629%2C0%2C0%2C1-.984.158q-2.258%2C0-4.516%2C0a.367.367%2C0%2C0%2C0-.288.117q-1.269%2C1.275-2.544%2C2.544a.748.748%2C0%2C0%2C1-1.244-.156.988.988%2C0%2C0%2C1-.09-.436c-.01-.621%2C0-1.241%2C0-1.861%2C0-.2-.009-.205-.2-.207-.248%2C0-.5.007-.742-.015a2.333%2C2.333%2C0%2C0%2C1-1.792-1.081%2C2.375%2C2.375%2C0%2C0%2C1-.393-1.364q.006-3.546%2C0-7.093A2.375%2C2.375%2C0%2C0%2C1%2C25.143.579%2C2.335%2C2.335%2C0%2C0%2C1%2C26.7%2C0q2.384%2C0%2C4.767%2C0ZM28.932%2C12.274l.033.025a1.266%2C1.266%2C0%2C0%2C0%2C.154-.116c.463-.461.926-.921%2C1.384-1.386a.916.916%2C0%2C0%2C1%2C.7-.288c.247%2C0%2C.5%2C0%2C.742%2C0H36.1a1.034%2C1.034%2C0%2C0%2C0%2C.591-.131.931.931%2C0%2C0%2C0%2C.441-.836q0-2.5%2C0-5c0-.684%2C0-1.367%2C0-2.05a.973.973%2C0%2C0%2C0-.117-.495.95.95%2C0%2C0%2C0-.9-.484q-4.653.006-9.306%2C0a1.383%2C1.383%2C0%2C0%2C0-.214.009.932.932%2C0%2C0%2C0-.558.286.988.988%2C0%2C0%2C0-.242.729q.006%2C3.118%2C0%2C6.237c0%2C.3%2C0%2C.6.005.9a.8.8%2C0%2C0%2C0%2C.2.5.911.911%2C0%2C0%2C0%2C.765.331q.679-.006%2C1.358%2C0a.761.761%2C0%2C0%2C1%2C.8.783c0%2C.176%2C0%2C.353%2C0%2C.529C28.933%2C11.974%2C28.932%2C12.124%2C28.932%2C12.274Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } .contactArea01>.inner01>.box02>.column01>.title01>.text02::before { width: 37px; height: 37px; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036.909%2036.534%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23182e5c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22mv_slide1%22%3E%3Cg%20id%3D%22footer%22%3E%3Cg%20id%3D%22TIZKmp%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M21.882%2C31.11a.744.744%2C0%2C0%2C0-.125%2C0c-.331.057-.661.118-.992.176s-.661.113-.992.17l-1.111.19c-.343.058-.686.114-1.028.173-.363.062-.724.128-1.087.19-.342.058-.686.113-1.029.172l-1.074.186-1.005.172-1.1.19c-.174.03-.346.067-.521.086a.929.929%2C0%2C0%2C1-1.009-.8c-.076-.493-.174-.984-.259-1.476-.059-.346-.112-.694-.171-1.041s-.124-.692-.184-1.038-.113-.67-.17-1c-.063-.366-.128-.732-.19-1.1-.058-.335-.113-.67-.171-1.005q-.093-.543-.187-1.087c-.059-.338-.115-.677-.173-1.016-.063-.366-.128-.732-.191-1.1l-.168-.993-.192-1.11c-.057-.335-.112-.67-.17-1-.062-.362-.126-.724-.188-1.086-.057-.331-.113-.662-.17-.993-.064-.374-.13-.748-.194-1.122-.056-.331-.111-.662-.168-.993-.062-.366-.127-.732-.19-1.1-.057-.331-.112-.662-.169-.993l-.192-1.11c-.057-.331-.112-.662-.169-.993-.063-.37-.129-.74-.192-1.11-.035-.209-.071-.418-.1-.628-.013-.1-.045-.134-.148-.1Q6.186%2C9%2C5.664%2C9.175c-.389.131-.78.256-1.169.388s-.776.269-1.164.4c-.3.1-.6.2-.893.309-.4.141-.8.288-1.206.427-.085.029-.077.082-.056.141.1.282.2.563.3.844l.328.9c.112.311.225.622.336.934.107.3.211.593.317.89s.213.592.32.889.219.607.328.911.221.606.33.91.212.593.318.89.22.607.329.91.213.593.319.889.22.608.329.911c.1.286.212.569.3.858a.544.544%2C0%2C0%2C1-.354.642.529.529%2C0%2C0%2C1-.641-.263c-.107-.244-.192-.5-.284-.748q-.167-.454-.329-.911t-.319-.889q-.163-.455-.329-.911t-.319-.889l-.333-.922-.315-.878q-.166-.46-.332-.922L1.163%2C14c-.134-.371-.27-.742-.4-1.113-.108-.3-.213-.6-.321-.9s-.212-.6-.328-.9a1.035%2C1.035%2C0%2C0%2C1-.09-.639.836.836%2C0%2C0%2C1%2C.452-.6c.311-.134.632-.243.95-.36q.358-.133.72-.259c.305-.107.611-.21.917-.315l.746-.256.975-.328.928-.314c.257-.087.512-.178.77-.261.147-.047.164-.075.137-.224-.069-.381-.133-.763-.2-1.145-.03-.174-.062-.347-.084-.521a.887.887%2C0%2C0%2C1%2C.5-.96.952.952%2C0%2C0%2C1%2C.272-.088c.48-.083.962-.158%2C1.443-.24S9.518%2C4.4%2C10%2C4.316c.35-.06.7-.111%2C1.052-.171s.685-.122%2C1.028-.182c.314-.056.629-.112.944-.163.182-.03.183-.026.183-.217%2C0-.861%2C0-1.721%2C0-2.582a.956.956%2C0%2C0%2C1%2C.436-.846A1.117%2C1.117%2C0%2C0%2C1%2C14.29%2C0q3.381%2C0%2C6.762%2C0%2C5.17%2C0%2C10.341%2C0a1.167%2C1.167%2C0%2C0%2C1%2C.863.335q2.182%2C2.1%2C4.378%2C4.181a.845.845%2C0%2C0%2C1%2C.275.645q-.007%2C11.709%2C0%2C23.417a.91.91%2C0%2C0%2C1-.516.894%2C1.184%2C1.184%2C0%2C0%2C1-.5.108c-.876.011-1.753.005-2.63.005-.76%2C0-1.521-.008-2.282%2C0a6.893%2C6.893%2C0%2C0%2C0-.88.092c-.391.058-.779.136-1.169.2a5.436%2C5.436%2C0%2C0%2C0-1.235.327c-.3.121-.6.214-.9.322s-.591.217-.887.323-.608.216-.912.325-.6.217-.9.326l-.878.315c-.315.113-.629.228-.945.341-.368.131-.737.258-1.1.39s-.726.267-1.09.4c-.3.109-.6.212-.9.32-.368.132-.734.268-1.1.4-.3.107-.6.211-.9.319-.367.132-.734.268-1.1.4-.292.106-.586.209-.878.314-.379.136-.757.275-1.136.411-.288.1-.578.2-.867.308-.379.136-.757.276-1.135.411-.3.109-.61.213-.914.321s-.585.211-.877.317a.9.9%2C0%2C0%2C1-1.189-.484c-.154-.393-.289-.794-.434-1.19-.158-.435-.319-.868-.476-1.3s-.3-.864-.46-1.3c-.132-.367-.27-.733-.4-1.1s-.258-.737-.39-1.1-.27-.733-.4-1.1-.259-.737-.391-1.1-.267-.726-.4-1.09-.26-.736-.392-1.1c-.108-.3-.221-.6-.327-.9a5.708%2C5.708%2C0%2C0%2C1-.186-.568.529.529%2C0%2C0%2C1%2C.549-.655.509.509%2C0%2C0%2C1%2C.463.33c.139.348.254.705.382%2C1.057s.267.726.4%2C1.089.258.729.389%2C1.093.267.734.4%2C1.1c.107.3.211.593.318.89s.22.606.329.91.212.593.319.89.219.607.328.911.213.592.319.889.223.614.333.922.212.593.318.889.2.572.306.856c.023.062.061.1.147.072.393-.145.787-.284%2C1.182-.424.3-.108.609-.213.913-.322s.6-.22.9-.328.586-.208.879-.313l.921-.335.879-.313%2C1.124-.407.878-.314%2C1.114-.4c.3-.108.6-.213.9-.32l1.113-.4.71-.25c.085-.03.169-.065.253-.1Zm2.129-1.483%2C0-.027c-.111-.005-.221-.014-.332-.014h-9.32c-.088%2C0-.176%2C0-.264-.005a.941.941%2C0%2C0%2C1-.606-.279%2C1.036%2C1.036%2C0%2C0%2C1-.275-.769q0-5.217%2C0-10.434c0-.052%2C0-.105%2C0-.156a.56.56%2C0%2C0%2C1%2C.454-.508.517.517%2C0%2C0%2C1%2C.556.284%2C1.018%2C1.018%2C0%2C0%2C1%2C.067.405q0%2C5.038%2C0%2C10.075c0%2C.064%2C0%2C.128%2C0%2C.192s.031.112.106.112H35.643c.18%2C0%2C.18%2C0%2C.18-.187V5.9c0-.206%2C0-.206-.2-.206q-1.574%2C0-3.147%2C0a3.22%2C3.22%2C0%2C0%2C1-.574-.029%2C1.777%2C1.777%2C0%2C0%2C1-.538-.184%2C1.13%2C1.13%2C0%2C0%2C1-.585-1.044c-.006-.841%2C0-1.682-.007-2.522%2C0-.228%2C0-.456%2C0-.684%2C0-.1-.044-.14-.136-.14h-16.1c-.229%2C0-.233%2C0-.233.237V15.252c0%2C.088%2C0%2C.177-.007.264a.524.524%2C0%2C0%2C1-.342.45.564.564%2C0%2C0%2C1-.6-.162.7.7%2C0%2C0%2C1-.134-.473q0-4.527%2C0-9.054c0-.424%2C0-.848%2C0-1.273%2C0-.1-.029-.138-.134-.119-.429.077-.859.148-1.288.223-.621.109-1.243.223-1.865.33s-1.245.208-1.868.312c-.161.027-.323.056-.485.081-.109.016-.153.069-.127.181s.044.228.063.342c.057.331.112.662.169.993.063.366.128.732.191%2C1.1.057.335.113.67.17%2C1%2C.063.371.128.741.192%2C1.111.057.33.112.661.169.992.063.362.127.724.189%2C1.087.058.338.114.677.172%2C1.016.062.366.127.732.189%2C1.1.057.331.112.662.169.993.063.37.129.74.192%2C1.11.057.331.112.662.169.993.063.37.128.74.192%2C1.11q.084.5.169.992c.062.363.126.725.189%2C1.087.058.338.113.678.171%2C1.016.063.37.128.74.191%2C1.11.057.331.113.662.17.993.062.362.126.724.188%2C1.086.058.339.114.678.172%2C1.017.062.366.127.732.19%2C1.1.057.335.113.67.17%2C1%2C.063.362.127.724.189%2C1.086.058.339.114.678.172%2C1.016.061.355.128.708.185%2C1.063.026.162.026.175.185.151.332-.048.663-.1.994-.158.312-.052.622-.108.933-.162l1.111-.191c.323-.055.646-.108.969-.164.366-.063.731-.13%2C1.1-.193.327-.056.655-.107.982-.164.354-.061.707-.13%2C1.061-.19.481-.082.963-.156%2C1.444-.239s.966-.177%2C1.451-.26.994-.161%2C1.49-.243C23.7%2C29.689%2C23.855%2C29.656%2C24.011%2C29.627ZM31.869%2C1.468c-.008.093-.017.15-.017.207q0%2C1.29%2C0%2C2.581c0%2C.313.016.34.33.343.932.008%2C1.865.007%2C2.8.007a.717.717%2C0%2C0%2C0%2C.14-.037Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M25.17%2C11.7h7.589a.648.648%2C0%2C0%2C1%2C.476.119.513.513%2C0%2C0%2C1%2C.187.535.546.546%2C0%2C0%2C1-.506.425c-.068.006-.136.006-.2.006H17.605a.744.744%2C0%2C0%2C1-.488-.125.533.533%2C0%2C0%2C1-.177-.613.517.517%2C0%2C0%2C1%2C.461-.343c.071-.005.144-.005.216-.005Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M25.157%2C20.451h-7.6a.626.626%2C0%2C0%2C1-.462-.124.526.526%2C0%2C0%2C1-.152-.6.536.536%2C0%2C0%2C1%2C.46-.352%2C1.244%2C1.244%2C0%2C0%2C1%2C.2-.01H32.7a.811.811%2C0%2C0%2C1%2C.525.127.55.55%2C0%2C0%2C1%2C.2.543.537.537%2C0%2C0%2C1-.462.409c-.068.006-.136.006-.2.006Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M25.157%2C16.618q-3.823%2C0-7.648%2C0a.573.573%2C0%2C0%2C1-.521-.257.544.544%2C0%2C0%2C1%2C.386-.822c.056-.005.112-.005.168-.005q7.63%2C0%2C15.26%2C0a.588.588%2C0%2C0%2C1%2C.526.225.506.506%2C0%2C0%2C1%2C.041.574.526.526%2C0%2C0%2C1-.432.281%2C1.984%2C1.984%2C0%2C0%2C1-.2%2C0Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M25.167%2C23.221q3.819%2C0%2C7.637%2C0a.6.6%2C0%2C0%2C1%2C.535.231.531.531%2C0%2C0%2C1-.283.812%2C1.231%2C1.231%2C0%2C0%2C1-.295.039q-7.595%2C0-15.189%2C0a.634.634%2C0%2C0%2C1-.584-.261.534.534%2C0%2C0%2C1%2C.34-.806%2C1.679%2C1.679%2C0%2C0%2C1%2C.275-.015Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M25.171%2C8.939H17.583a.661.661%2C0%2C0%2C1-.495-.136.54.54%2C0%2C0%2C1%2C.337-.942c.051%2C0%2C.1%2C0%2C.156%2C0H32.769a.636.636%2C0%2C0%2C1%2C.563.23.529.529%2C0%2C0%2C1-.323.832%2C1.775%2C1.775%2C0%2C0%2C1-.31.021Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } .contactArea01>.inner01>.box02>.column01>.title01 > .text01 { font-size: 2.4rem; display: table; position: relative; padding-left: 47px; margin-left: auto; margin-right: auto; } .contactArea01>.inner01>.box02>.column01>.title01>.text02 { font-size: 2.4rem; position: relative; display: table; padding-left: 45px; margin-left: auto; margin-right: auto; } .contactArea01>.inner01>.box02>.column01>.title01> strong { color: #182e5c; font-weight: 700; font-size: 1.8rem; position: relative; display: table; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .contactArea01>.inner01>.box02>.column01>.title01> strong::before,.contactArea01>.inner01>.box02>.column01>.title01> strong::after { position: absolute; top: 55%; width: 1px; height: 22px; background-color: #182e5c; content: ""; } .contactArea01>.inner01>.box02>.column01>.title01> strong::before { left: 10px; transform: translateY(-50%) rotate(-30deg); } .contactArea01>.inner01>.box02>.column01>.title01> strong::after { right: 10px; transform: translateY(-50%) rotate(30deg); } .contactArea01>.inner01>.box02>.column01> .text01 { margin-top: 15px; font-size: 1.4rem; line-height: 1.85; } .contactArea01>.inner01>.box02>.column01> .btn01 { margin-top: 30px; width: 100%; } .contactArea01>.inner01>.box02>.column01>.btn01 > a { font-size: 1.8rem; background-color: #26b199; box-shadow: none;; } .contactArea01>.inner01>.box02>.column01>.btn01>a { border-color: #26b199; } .footerNavArea01 { padding-top: 45px; padding-bottom: 45px; background: url(../images/bg01.jpg) no-repeat 50% 0/cover; } .footerNavArea01 > .inner01 { max-width: 1240px; padding: 0 20px; margin: 0 auto; } .footerNavArea01 > .inner01 > .globalNav02 { display: none; } .footerList01 { display: flex; flex-wrap: wrap; max-width: 1080px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } .footerList01 > li { padding-right: 2%; max-width: 19.5%; } /*2023/1/17 大衆移行でカラム調整 .footerList01 > li:first-child { min-width: 28%; }*/ /*2025/6/2 カラム崩れ調整 .footerList01 > li:not(:last-child) { margin-right: 4.6%; }*/ .footerList01 > li:not(:last-child) { margin-right: 2%; } .footerList01 > li a { position: relative; display: table; padding-left: 8px; color: #fff; font-size: 1.2rem; line-height: 1.4; transition: opacity .3s; text-decoration: none; } .footerList01 > li a:hover { opacity: .6; } .footerList01 > li a::before { position: absolute; top: 50%; transform: translateY(-50%); background-color: #fff; left: 0; width: 1px; height: 90%; content: ""; } .footerList01 > li a.link01 > span::before { width: 10px; bottom: 3px; } .footerList01 > li a:not(:first-child) { margin-top: 10px; } .footerNavList01:not(:first-child) { margin-top: 36px; } .footerNavList01 > dt { color: #fff; font-weight: 700; font-size: 1.4rem; } .footerNavList01 > dd { margin-top: 12px; margin-left: 5px; } .footerNavList01 > dd > ul { margin-top: 10px; margin-bottom: 14px; margin-left: 10px; } .footerNavList01 > dd > ul > li:not(:first-child) { margin-top: 10px; } .footerNavList01 > dd > dl > dt { color: #fff; font-size: 1.2rem; position: relative; display: table; padding-left: 8px; line-height: 1.4; transition: opacity .3s; text-decoration: none; } .footerNavList01 > dd > dl > dt::before { position: absolute; top: 50%; transform: translateY(-50%); background-color: #fff; left: 0; width: 1px; height: 90%; content: ""; } .footerNavList01 > dd > dl > dd > a { display: block; margin-top: 8px; padding-left: 12px; } .footerNavList01 > dd > dl > dd > a::before { position: absolute; top: 50%; margin-top: -3px; left: 0; width: 6px; height: 6px; border-top: solid 1px #fff; border-right: solid 1px #fff; background: none; transform: rotate(45deg); content: ""; } .footerNavList02 { margin-top: 12px; margin-left: 10px; } .footerNavList02:first-child { margin-top: 0; } .footerNavList02.type01 { margin-left: 5px; } .footerNavList02 > dt { color: #fff; font-weight: 700; font-size: 1.2rem; } .footerNavList02 > dt.title01 { font-size: 1.4rem; } .footerNavList02 > dd { margin-top: 12px; } .footerNavList02.type01 > dd { margin-left: 4px; } .footerNavList03 > li:not(:first-child) { margin-top: 12px; } .footerNavList03 > li:last-child { margin-top: 36px; } .footerNavList03 > li > a { font-size: 1.2rem; } .footBlock01 { padding-top: 40px; padding-bottom: 30px; } .footBlock01 > .inner01 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; flex-direction: row-reverse; max-width: 1080px; padding: 0 20px; margin: 0 auto; } .footBlock01 > .inner01 > .box01 { margin-right: -12px; position: relative; padding-right: 96px; } .footBlock01 > .inner01 > .box01 > .logo01 { width: 200px; } .footBlock01 > .inner01 > .box01 > .text01 { margin-top: 28px; font-size: 1.4rem; font-weight: 700; } .footerList02 { width: 40%; margin-right: 10px; } .footerList02 > dt { font-weight: 700; font-size: 1.4rem; } .footerList02 > dd { margin-top: 10px; margin-left: 5px; font-size: 1.2rem; } .footerList02 > dd > a { position: relative; display: table; padding-left: 6px; line-height: 1.4; transition: opacity .3s; text-decoration: none; } .footerList02 > dd > a:not(:first-child) { margin-top: 10px; } .footerList02 > dd > a:hover { opacity: .6; } .footerList02 > dd > a::before { position: absolute; top: .1em; background-color: #3e3a39; left: -1px; width: 1px; height: 80%; content: ""; } .footerList03 { margin-top: 6px; display: flex; flex-wrap: wrap; } .footerList03 > li { line-height: 1.4; } .footerList03 > li:not(:last-child) { margin-right: 16px; } .footerList03 > li > a { transition: opacity .3s; font-size: 1.2rem; text-decoration: none; } .footerList03 > li > a:hover { opacity: .6 } @media all and (-ms-high-contrast: none) { .footerList03 > li > a.link01.type01 > span::before { bottom: 11px; } } .snsList01 { display: flex; flex-wrap: wrap; align-items: center; } .snsList01 > li:not(:last-child) { margin-right: 20px; } .snsList01 > li > a { transition: opacity .3s; display: block; } .snsList01 > li > a:hover { opacity: .6; } .snsList01 > li > a img { height: 28px; width: auto; } .snsList01 > li > a img.facebook { position: relative; height: 30px; width: auto; top: 1px; } .footBlock01 > .inner02 { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1080px; padding: 0 20px; margin: 0 auto; } .footBlock01 > .inner02 > .column02 { width: 380px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } .footBlock01 > .inner02 > .column02 > .box01 > .logo01 { width: 200px; } .footBlock01 > .inner02 > .column02 > .box01 > .logo01 > img { width: 100%; } .footBlock01 > .inner02 > .column02 > .box01 > .text01 { font-weight: bold; margin-top: 10px; font-size: 1.4rem; } .footBlock01 > .inner02 > .column02 > .box01 > .text02 { font-size: 1.4rem; } .footBlock01 > .inner02 > .box01 { position: relative; width: 370px; } .footBlock01 > .inner02 > .box01 > .text01 { font-weight: 700; margin-top: 14px; font-size: 1.4rem; } .footBlock01 > .inner02 > .box01 > .text02 { font-size: 1.4rem; } .pagetop01 { position: fixed; z-index: 998; bottom: 0; right: 20px; width: 44px; height: 44px; opacity: 0; visibility: hidden; transition: all .5s; } .pagetop01.fadeIn { opacity: 1.0; visibility: visible; } .pagetop01 > a { position: relative; display: block; width: 100%; height: 100%; white-space:nowrap; text-indent: 100%; overflow: hidden; background-color: #545454; transition: opacity .3s; } .pagetop01 > a:hover { opacity: .6; } .pagetop01 > a::before { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-top: 1px solid #fff; margin-left: -5px; margin-top: -2px; border-right: 1px solid #fff; transform: rotate(-45deg); content: ""; } .copyrights01 { padding: 4px 20px 8px; background-color: #d2d3d3; text-align: center; line-height: 1.2; } .copyrights01 small { font-size: 1.2rem; letter-spacing: 0; } @media screen and (max-width: 1200px) { .footBlock01 > .inner01 > .box01 { margin-right: 0; width: 42%; } } @media screen and (max-width: 767px) { .contactArea01 { padding-top: 65px; padding-bottom: 100px; } .contactArea01::before { background-image: url(../images/bg02s.png); background-position: 50% 0; min-width: inherit; transform: translateX(0); left: 0; } .contactArea01 > .inner01 { padding-left: 6.66%; padding-right: 6.66%; } .contactArea01 > .inner01 > .title01 { font-size: 3.0rem; } .contactArea01 > .inner01 > .title01 > .text01 { font-size: 1.4rem; } .contactArea01 > .inner01 > .text01 { font-size: 1.6rem; } .contactArea01>.inner01>.text02 { margin-top: 30px; font-size: 1.6rem; } .contactArea01>.inner01>.box02 { display: block; width: 100%; } .contactArea01>.inner01>.box02 > .column01 { width: 100%; padding: 30px 7.69% 45px; } .contactArea01>.inner01>.box02 > .column01 + .column01 { margin-top: 30px; } .contactArea01>.inner01>.box02>.column01 > .title01 { border-bottom: none; padding-bottom: 0; } .contactArea01>.inner01>.box02>.column01>.title01 > .text01 { padding-left: 50px; } .contactArea01>.inner01>.box02>.column01>.title01>.text02 { padding-left: 48px; } .contactArea01>.inner01>.box02>.column01> .text01 { margin-top: 20px; } .contactArea01>.inner01>.box02>.column01> .btn01 { margin-top: 20px; } .contactArea01>.inner01>.box02>.column01>.btn01 > a { font-size: 1.6rem; padding: 8px 20px 12px; } .contactArea01 > .inner01 > .btn01 { margin-top: 60px; max-width: 280px; } .contactArea01 > .inner01 > .btn01 > a { padding: 9px 10px 11px; font-size: 1.6rem; } .contactArea01 > .inner01 > .btn01 > a > .inner01 { padding-right: 32px; } .contactArea01 > .inner01 > .btn01 > a:hover { color: #fff; } .contactArea01 > .inner01 > .btn01 > a:hover::before, .contactArea01 > .inner01 > .box01 > .column01 > .btn02 > a:hover::before { content: none; } .contactArea01 > .inner01 > .btn01 > a:hover > .inner01::before { background-color: #fff; } .contactArea01 > .inner01 > .btn01 > a:hover > .inner01::after { background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2326bfa7%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; } .contactArea01 > .inner01 > .box01 { width: 100%; margin-top: 45px; padding-top: 22px; } .contactArea01 > .inner01 > .box01 > .text01 { line-height: 2.0; font-size: 1.6rem; } .contactArea01 > .inner01 > .box01 > .tel > .text01 { margin-top: 16px; padding-left: 40px; font-size: 3.0rem; } .contactArea01 > .inner01 > .box01 > .tel > .text01 > a { pointer-events: auto; } .contactArea01 > .inner01 > .box01 > .tel > .text01::before { width: 28px; } .contactArea01 > .inner01 > .box01 > .tel > .text02 { margin-top: 5px; font-size: 1.2rem; } .footerNavArea01 { padding-top: 0; padding-bottom: 0; background: none; } .footerNavArea01 > .inner01 { padding-left: 0; padding-right: 0; } .footerNavArea01 > .inner01 > .globalNav02 { display: block; background: url(../images/bg01s.jpg) no-repeat 50% 30%/180%; } .footerNavArea01 > .inner01 > .globalNav02 > ul > li > a { color: #fff; } .footerNavArea01 > .inner01 > .globalNav02 > ul > li > dl > dt { background: none; color: #fff; } .footerNavArea01 > .inner01 > .globalNav02 > ul > li > dl > dt.open { background: rgba(2,24,56,.8); } .footerNavArea01 > .inner01 >.globalNav02 > ul > li.dropMenu::before { border-color: #fff; } .footerList01 { display: none; } .footerList01 > li { width: calc(100% / 4); padding-right: 2%; } .footerList01 > li a { position: relative; display: table; padding-left: 8px; color: #fff; font-size: 1.2rem; line-height: 1.4; } .footerList01 > li a::before { position: absolute; top: .1em; background-color: #fff; left: 0; width: 1px; height: 80%; content: ""; } .footerList01 > li a.link01 > span::before { width: 10px; bottom: 3px; } .footerList01 > li a:not(:first-child) { margin-top: 12px; } .footerNavList01:not(:first-child) { margin-top: 40px; } .footerNavList01 > dt { color: #fff; font-weight: 700; font-size: 1.4rem; } .footerNavList01 > dd { margin-top: 8px; margin-left: 5px; } .footerNavList01 > dd > ul { margin-top: 10px; margin-bottom: 14px; margin-left: 10px; } .footerNavList01 > dd > ul > li:not(:first-child) { margin-top: 10px; } .footerNavList02 { margin-top: 12px; } .footerNavList02.type01 { margin-left: 5px; } .footerNavList02 > dt { color: #fff; font-weight: 700; font-size: 1.4rem; } .footerNavList02 > dd { margin-top: 8px; } .footerNavList02.type01 > dd { margin-left: 4px; } .footerNavList03 > li:not(:first-child) { margin-top: 24px; } .footerNavList03 > li > a { font-size: 1.4rem; font-weight: bold; } .footBlock01 { padding-bottom: 40px; position: relative; } .footBlock01 > .inner01 { display: block; padding-left: 6.133%; padding-right: 6.133%; } .footBlock01 > .inner01 > .box01 { width: 100%; padding-right: 0; position: static; } .footBlock01 > .inner01 > .box01 > .logo01 { margin-left: 15px; } .footBlock01 > .inner01 > .box01 > .text01 { font-size: 1.6rem; } .footerList02 { margin-top: 22px; width: 100%; } .footerList02 > dt { font-size: 1.3rem; } .footerList02 > dd { margin-left: 0; font-size: 1.1rem; } .footerList02 > dd > a::before { height: 90%; } .footerList02 > dd > a:not(:first-child) { margin-top: 15px; } .footerList03 { margin-top: 20px; display: block; } .footerList03 > li { border-bottom: solid 1px #e8e9f2; } .footerList03 > li:not(:last-child) { margin-bottom: 12px; margin-right: 0; } .footerList03 > li > a { display: block; padding-bottom: 12px; font-size: 1.4rem; } .snsList01 { justify-content: flex-end; margin-top: 5px; } .snsList01 > li:not(:last-child) { margin-right: 20px; } .snsList01 > li > a > img { height: 25px; width: auto; } .snsList01 > li > a > img.twitter { height: 24px; } .footerList02 dd a:hover, .footerList03 > li > a:hover, .snsList01 > li > a:hover, .pagetop01 > a:hover { opacity: 1.0; } .pagetop01 { display: none; } .footBlock01 > .inner02 > .box01 { width: 100%; } .copyrights01 { padding-top: 2px; padding-bottom: 6px; } .footBlock01 > .inner02 > .column02 { width: 100%; display: block; } .footBlock01 > .inner02 > .column02 > .box01 > .logo01 { width: 175px; } .footBlock01 > .inner02 > .column02 > .box01 > .text01 { font-size: 1.2rem; } .footBlock01 > .inner02 > .column02 > .box01 > .text02 { font-size: 1.2rem; } } @media screen and (max-width: 360px) { .contactArea01 > .inner01 > .box01 > .tel > .text01 { padding-left: 32px; } .contactArea01 > .inner01 > .box01 > .tel > .text01::before { width: 24px; } .contactArea01 > .inner01 > .box01 > .tel > .text01 > a { font-size: 2.6rem; } .footerNavArea01 > .inner01 > .globalNav02 { display: block; background: url(../images/bg01s.jpg) no-repeat 50% 25%/200%; } } /* contents *****************************************/ .contents01::before { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999; background: rgba(24,46,92,.8); opacity: 0; visibility: hidden; transition: opacity .5s,visibility .5s; content: ""; } /*.contents01.bgshow::before { opacity: 1.0; visibility: visible; }*/ .contents01#function > .titleArea01::before { top: 200px; bottom: 0; height: 71.71vw; background: url(../../inbound-tickets/feature/images/bg02.png) no-repeat 0 0/100%; } .wrap01 { display: flex; flex-wrap: wrap; } .wrap01.bC { justify-content: center; } .wrap01.between { justify-content: space-between; } .wrap01.aC { align-items: center; } .wrap01.aEnd { align-items: flex-end; } .wrap01.reverse { flex-direction: row-reverse; } .mainArea01 { position: relative; z-index: 2; height: 36.944vw; min-height: 532px; padding-left: 2%; padding-right: 2%; overflow: hidden; -webkit-mask-image: url('../../images/mask_main.svg'); mask-image: url('../../images/mask_main.svg'); -webkit-mask-size: 1440px; mask-size: 1440px; background-color: #fff; } @media screen and (min-width: 1440px) { .mainArea01 { -webkit-mask-size: 100vw; mask-size: 100vw; } } .mainArea01 .item01 { min-width: 1440px; } .mainArea01 .item01 img { vertical-align: bottom; height: 100%; width: auto; } /*.mainArea01::before { position: absolute; bottom: -1px; width: 100%; min-width: 1400px; left: 50%; transform: translateX(-50%); height: 5.65vw; min-height: 82px; background: url(../images/bg03.png) no-repeat 50% 100%/100%; content: ""; }*/ .mainArea01::after { position: absolute; top: 0; left: 0; width: 100%; height: 182px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); content: ""; } .mainArea01 > .title01 { position: relative; z-index: 2; color: #fff; padding-top: 10.25vw; font-size: 3.6rem; font-weight: 700; text-align: center; line-height: 1.575; letter-spacing: .02em; text-shadow: 0px 0px 20px rgba(0,0,0,0.6),0px 0px 10px rgba(0,0,0,0.6),0px 0px 10px rgba(0,0,0,0.6),0px 0px 2px rgba(0,0,0,0.8),0px 0px 50px rgba(0,0,0,0.6); } .mainArea01 > ul { display: flex; flex-wrap: wrap; justify-content: space-between;; margin-top: 60px; width: 440px; margin-left: auto; margin-right: auto; } .mainArea01 > ul > .btn01 { width: 200px; } .mainArea01 > ul > .btn01 > a { padding: 9px 10px 11px; font-size: 1.8rem; height: 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .slider01 { width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; } .slider01 .item01 img { width: 100%; max-width: inherit; } .titleArea01 { position: relative; height: 290px; margin-top: 70px; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; } .titleArea01::before { position: absolute; bottom: -1px; width: 100%; min-width: 1400px; left: 50%; transform: translateX(-50%); height: 5.65vw; min-height: 82px; background: url(../images/bg03.png) no-repeat 50% 100%/100%; content: ""; } .titleArea01 > .title01 { position: absolute; width: 100%; top: 95px; left: 50%; padding-right: 4%; padding-left: 4%; transform: translateX(-50%); font-size: 4.8rem; font-weight: 700; line-height: 1.2; text-align: center; color: #fff; font-feature-settings: "palt"; letter-spacing: .06em; } .titleArea02 { margin-top: 60px; padding-bottom: 10px; border-bottom: solid 2px #e8d9b6; } .titleArea02 > .title01 { font-size: 3.7rem; font-weight: 700; line-height: 1.45; letter-spacing: 0; } .titleArea02 > .catList01 { margin-top: 27px; } .titleArea02 > .catList01 > li { margin-right: 10px; padding-left: 8px; } .titleArea02 > .catList01 > li::before { content: none; } .breadcrumbs01 { display: flex; flex-wrap: wrap; align-content: flex-start; position: absolute; max-width: 1290px; width: 100%; left: 50%; top: 10px; transform: translateX(-50%); padding: 0 20px; padding-left: 160px; margin: 0 auto; } .breadcrumbs01.type01 { z-index: 100; top: 80px; bottom: inherit; } .breadcrumbs01 > li { color: #fff; } .breadcrumbs01 > li > a { position: relative; display: block; margin-right: 17px; color: #fff; text-decoration: none; } .breadcrumbs01 > li > a:hover { text-decoration: underline; } .breadcrumbs01 > li > a::before { position: absolute; top: 50%; right: -7px; border-top: solid 1px #fff; border-right: solid 1px #fff; transform: rotate(45deg) translateY(-4px); width: 6px; height: 6px; content: ""; } .contentsWrap01 { padding-top: 40px; padding-bottom: 80px; } #solution .contentsWrap01 { background: url(../../solution/images/bg02.png) no-repeat 50% -70px/cover; } .contentsWrap01:first-child { padding-top: 0; margin-top: 70px; padding-bottom: 200px; } .contentsWrap01#price { padding-top: 80px; padding-bottom: 200px; } .contentsWrap01#casestudy { padding-top: 80px; padding-bottom: 200px; } .contentsWrap01 > .inner01 { max-width: 1270px; padding: 0 20px; margin: 0 auto; } .contentsWrap01.error > .inner01 { padding-top: 60px; } .contentsWrap01 > .inner02 { max-width: 1120px; padding: 0 20px; margin: 0 auto; } .heading01 { margin-top: 120px; font-weight: 700; font-size: 3.4rem; line-height: 1.35; letter-spacing: .05em; } .heading01 .text01 { display: block; margin-bottom: 18px; font-size: 1.8rem; color: #d85b94; font-weight: 500; letter-spacing: 0; } .heading01 .text02 { display: block; margin-top: 20px; font-weight: 400; font-size: 1.8rem; } .heading02 { position: relative; display: table; margin-left: auto; margin-right: auto; padding-bottom: 20px; font-size: 3.0rem; font-weight: 700; line-height: 1.4; text-align: center; } .heading02::before { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 4px; background-color: #e8d9b6; border-radius: 10px; content: ""; } .heading02 > .font01 { font-size: 2.0rem; } .heading03 { font-size: 3.4rem; line-height: 2.0; font-weight: 700; text-align: center; letter-spacing: 0; } .heading04 { font-size: 4.8rem; color: #d85b94; font-weight: 700; line-height: 1.2; text-align: center; letter-spacing: 0; } .heading04 > .text01 { display: block; margin-top: 15px; font-family: 'Montserrat', sans-serif; font-size: 2.8rem; font-weight: 500; color: #d2b46e; } .heading04.type01 { font-size: 8.0rem; } .heading04.type01 > .text01 { font-size: 1.4rem; } .block01 .heading04 { color: #fff; } .heading05 { font-size: 4.0rem; color: #d85b92; font-weight: 700; text-align: center; } .block01 .heading05 { color: #fff; } .heading05 > .text01 { position: relative; padding-bottom: 8px; margin-bottom: 18px; display: table; margin-left: auto; margin-right: auto; font-size: 2.8rem; } .heading05 > .text01::before { width: 130px; background-color: #d85b92; height: 1px; position: absolute; bottom: 0; left: 50%; margin-left: -65px; content: ""; display: block; } .block01 .heading05 > .text01::before { background-color: #fff; } .heading06 { display: table; padding: 0 126px; margin: 0 auto; position: relative; color: #d85b94; font-size: 4.0rem; font-weight: 700; line-height: 1.5; text-align: center; letter-spacing: .07em; } .heading06::before,.heading06::after { position: absolute; top: 50%; width: 88px; height: 1px; background-color: #d85b94; content: ""; } .block01 .heading06 { color: #fff; } .block01 .heading06::before,.block01 .heading06::after { background-color: #fff; } .heading06::before { left: 0; } .heading06::after { right: 0; } .heading07 { display: table; padding: 0 34px; position: relative; margin: 0 auto; font-size: 2.8rem; font-weight: 700; text-align: center; } .heading07::before,.heading07::after { position: absolute; top: -3px; height: calc(100% + 12px); width: 2px; background-color: #3e3a39; content: ""; } .heading07::before { left: 0; transform: skewX(16deg); } .heading07::after { right: 0; transform: skewX(-16deg); } .heading07.type01 { font-size: 2.4rem; } #price > .heading07 { margin-bottom: 40px; max-width: 92%; } .heading08 { position: relative; font-size: 2.4rem; font-weight: 700; line-height: 1.5; padding-left: 24px; padding-top: 3px; padding-bottom: 6px; } .heading08::before { position: absolute; top: 0; border-radius: 3px; left: 0; width: 6px; background-color: #d85b94; height: 100%; content: ""; } .heading09 { color: #d85b94; display: table; margin: 0 auto; } .heading09 > span { position: relative; display: inline-block; padding-bottom: 4px; line-height: 1.675; font-size: 4.0rem; font-weight: 700; } .heading09 > span::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #d85b94; content: ""; } .heading10 { font-size: 4.0rem; line-height: 1.675; font-weight: 700; text-align: center; } .mainColumn01 { width: calc(100% - 350px); } .sideColumn01 { width: 280px; } .sideBlock01 { margin-top: 60px; } .sideBlock01 > .title01 { margin-bottom: 10px; } .sideBlock01 > .title01.type01 { margin-bottom: 0; } .block01 { position: relative; z-index: 1; overflow: hidden; background: linear-gradient(45deg, rgba(210,180,110,.85) 0%,rgba(216,91,148,.85) 50%,rgba(216,91,148,.85) 100%); } .block01.type01 { background: linear-gradient(135deg, rgba(216,91,148,.85) 0%,rgba(216,91,148,.85) 30%,rgba(210,180,110,.85) 100%); } .blockIn01 { position: relative; max-width: 1120px; width: 100%; padding: 0 20px; margin: 0 auto; } .conceptBlock01 { position: relative; z-index: 2; padding: 70px 20px 80px; } .conceptBlock01::before { position: absolute; z-index: -2; top: 40px; right: 0; width: 100%; max-width: 1383px; height: 100%; background: url(../../images/bg01.png) no-repeat 50% 0/cover; content: ""; } .conceptBlock01 > .title01 { font-size: 3.6rem; font-weight: 700; text-align: center; line-height: 1.6; letter-spacing: .02em; } .conceptBlock01 > .title01 > .logo01 { position: relative; left: -2%; display: block; width: 447px; margin: 0 auto 60px; } .conceptBlock01 > .title01 > .logo01 > img { width: 100%; height: auto; } .conceptBlock01 > .txt02 { margin-top: 60px; font-weight: 400; line-height: 1.77; } .featureBlock01 { position: relative; z-index: 1; } .featureBlock01::before { position: absolute; z-index: 2; top: 0; width: 100%; min-width: 1400px; left: 50%; transform: translateX(-50%); height: 6vw; min-height: 82px; background: url(../images/bg05.png) no-repeat 50% 0/100%; content: ""; } .featureBlock01 [class*="bg"] { padding: 80px 0; } .featureBlock01 .bg01 { padding: 180px 0 200px; background: url(../../images/bg06.png) no-repeat 50% 0/cover; } .featureBlock01 .bg02 { padding-bottom: 130px; background: url(../../images/bg03.png) no-repeat 50% 0/cover; } .featureBlock01 .bg03 { background: url(../../images/bg04.png) no-repeat 50% 0/cover; } .featureBlock01 .bg03 .illust01,.featureBlock01 .bg03 .illust02 { position: absolute; } .featureBlock01 .bg03 .illust01 { left: -94px; top: 20px; } .featureBlock01 .bg03 .illust02 { right: -88px; bottom: 100px; } .featureBlock01 .bg04 { padding: 120px 0 155px; background: url(../../images/bg05.png) no-repeat 50% 0/cover; } .usageBlock01 { position: relative; z-index: 1; } .usageBlock01 .bg01 { padding: 120px 0 26.388vw; background: url(../../images/bg02.png) no-repeat 50% 0/cover; } .functionBlock01 { padding-bottom: 140px; } .functionBlock01 .box01 { padding-left: 2.94%; padding-right: 2.94%; margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; } .functionBlock01 .box01 > .icon01 { width: 18.9125%; margin-left: 4.3%; } .functionBlock01 .box01 > .column01 { width: 70.039%; } .functionBlock01 .box01 > .column01 > .title01 > .text01 { display: table; margin-bottom: 15px; padding: 6px 30px 8px; background-color: #d85b94; border-radius: 50px; font-size: 2.1rem; font-weight: 700; color: #fff; line-height: 1.2; } .functionBlock01 .box01 > .column01 > .title01 > .text02 { font-size: 2.8rem; font-weight: 700; color: #d85b94; } .functionBlock01 .box01 > .column01 > .title01 > .text02 > span { display: inline; line-height: 2.0; padding-bottom: 6px; border-bottom: solid 1px #d85b94; } .functionBlock01 .box01 > .column01 > .title01 > .text02 > span + span { margin-top: 4px; } .functionBlock01 .box01 > .column01 > .text01 { margin-top: 36px; } .functionBlock01 .box01 > .column01 > .text01 + .text01 { margin-top: 12px; } .functionBlock01 .box01 > .column01 > .image01 { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px; } .functionBlock01 .box01 > .column01 > .image01 > li { width: 47.413%; border-radius: 20px; overflow: hidden; } .functionBlock01 .box02 { margin-top: 80px; } .functionBlock01 .box02 > .image01 { text-align: center; margin-top: 30px; margin-bottom: -20px; } .functionBlock02 { position: relative; z-index: 2; } .functionBlock02 > li { padding-top: 60px; padding-bottom: 200px; } .functionBlock02 > li:nth-child(odd) { background-color: #f3f3f1; } .functionBlock02 > li > .blockIn01 { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; } .functionBlock02 .titleBlock { position: absolute; width: 210px; margin-top: -100px; top: 0; } .functionBlock02 > li.fixed .titleBlock { position: fixed; margin-top: 0; top: 100px; } .functionBlock02 > li.fixedBottom .titleBlock { margin-top: 0; } .functionBlock02 .titleBlock > .title01 { position: relative; display: flex; flex-wrap: wrap; width: 100%; font-size: 2.4rem; color: #d85b94; background-color: #f7deea; text-align: center; font-weight: 700; } .functionBlock02 .titleBlock > .title01 > span { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; padding: 25px; min-height: 210px; letter-spacing: 0; line-height: 1.4; } .functionBlock02 .titleBlock > .text01 { margin-top: 15px; text-align: center; } .functionBlock02 .titleBlock > .btn01 { margin-top: 30px; width: 100%; } .functionBlock02 .titleBlock > .btn01 > a { padding: 11px 20px 13px; font-size: 1.6rem; line-height: 1.2; box-shadow: none; } .functionBlock02 .contentsBlock { width: calc(100% - 324px); margin-right: 0; margin-left: auto; } .functionBlock02 .contentsBlock > .text01 { margin-top: 20px; } .functionBlock02 .contentsBlock > .box01 { display: none; } .functionBlock02 .contentsBlock > .box02 { border-top: solid 1px #d3d3d3; margin-top: 40px; } .functionBlock02 .contentsBlock > .box02 > .image01 { margin-top: 45px; text-align: center; } .functionList01 { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 60px; } .functionList01 > li { display: flex; flex-wrap: wrap; justify-content: space-between; width: 48.437%; padding: 0 10px 35px 15px; border-bottom: solid 1px #d4d4d3; } .functionList01.type01 > li { width: 100%; align-items: center; } .functionList01 > li:nth-child(n+3) { margin-top: 30px; } .functionList01.type01 > li:nth-child(n+2) { margin-top: 40px; } .functionList01 > li .image01 { width: 98px; display: flex; flex-wrap: wrap; align-items: center; } .functionList01 > li .image01 > img { image-rendering: inherit; } .functionList01 > li > .column01 { width: calc(100% - 130px); } .functionList01 > li .title01 { margin-top: -2px; font-size: 2.1rem; color: #d85b94; font-weight: 700; line-height: 1.4; } .functionList01 > li .text01 { margin-top: 5px; } .functionList02 { margin-bottom: -80px; padding: 40px 20px 45px; background: rgba(24,46,92,.8); } .functionList02 > ul { display: flex; flex-wrap: wrap; justify-content: center; } .functionList02 > ul > li { margin: 0 23px; } .functionList02 > ul > li > a { display: table; height: 100%; color: #d2b36d; text-decoration: none; } .functionList02 > ul > li dl > dt { display: inline-block; padding-right: 15px; margin-bottom: 5px; position: relative; font-weight: 700; } .functionList02 > ul > li dl > dt::before { position: absolute; right: 0; width: 6px; height: 6px; border-top: 2px solid #d2b36d; border-right: 2px solid #d2b36d; top: 50%; margin-top: -3px; transform: rotate(45deg); content: ""; } .functionList02 > ul > li > a:hover dl > dt { text-decoration: underline; } .functionList02 > ul > li dl > dd { color: #fff; opacity: .6; font-size: 1.4rem; } .solutionBlock01 { position: relative; z-index: 3; padding-top: 100px; padding-bottom: 110px; } .solutionBlock01 > .blockIn01::before,.solutionBlock01 > .blockIn01::after { position: absolute; z-index: -1; content: ""; } .solutionBlock01 > .blockIn01::before { top: -160px; left: -25px; width: 188px; height: 293px; background: url(../../solution/images/il01.png) no-repeat 0 0/100%; } .solutionBlock01 > .blockIn01::after { top: -70px; right: 20px; width: 136px; height: 283px; background: url(../../solution/images/il02.png) no-repeat 0 0/100%; } .solutionBlock02 { padding-top: 110px; padding-bottom: 160px; } .solutionBox01 { margin-top: 80px; } .solutionBox02 { margin-top: 130px; } .solutionBox02 > .box01 { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse; margin-top: 60px; } .solutionBox02 > .box01:not(:first-child) { margin-top: 100px; } .solutionBox02 > .box01 > .image01 { width: 47.22%; } .solutionBox02 > .box01 > .column01 { width: 48.148%; margin-top: 5px; } .solutionBox02 > .box01 > .column01 > .iconBox01 { display: flex; flex-wrap: wrap; } .solutionBox02 > .box01 > .column01 > .iconBox01:not(:first-child) { padding-top: 30px; margin-top: 30px; border-top: solid 1px #dfdfdf; } .solutionBox02 > .box01 > .column01 > .iconBox01 > .icon01 { width: 55px; margin-right: 22px; margin-left: -5px; } .solutionBox02 > .box01 > .column01 > .iconBox01 > .column01 { width: calc(100% - 75px); } .solutionBox02 > .box01 > .column01 > .iconBox01 > .column01 > .text01 { font-size: 2.1rem; font-weight: 700; } .solutionBox02 > .box01 > .column01 > .iconBox01 > .column01 > .text02 { font-size: 1.4rem; color: #969696; font-weight: 500; } .solutionBox02 > .box01 > .column01 > .title01 { margin-top: 20px; } .solutionBox02 > .box01 > .column01 > .title01 > .text01 { display: table; line-height: 1.2; padding: 1px 24px 3px; background-color: #d85b94; color: #fff; border-radius: 50px; } .solutionBox02 > .box01 > .column01 > .title01 > .text02 { display: block; margin-top: 10px; font-size: 2.8rem; font-weight: 700; line-height: 1.5; } .solutionBox02 > .box01 > .column01 > .text01 { margin-top: 12px; color: #969696; font-size: 1.8rem; font-weight: 700; } .solutionBox02 > .box01 > .column01 > .text02 { margin-top: 12px; font-weight: 500; } .solutionBox02 > .box01 > .column01 > .btn03 { margin-top: 40px; margin-left: 0; margin-right: auto; } .solutionBox02 > .box01 > .column01 > .btn03 > a { font-size: 1.8rem; padding-left: 35px; padding-right: 35px; } .articleHeading01 { margin-top: -4px; margin-bottom: 38px; line-height: 1.4; font-size: 4.0rem; font-weight: 700; font-feature-settings: "palt"; letter-spacing: .04em; } .subBlock01 { display: flex; flex-wrap: wrap; align-items: flex-start; } .subBlock01 > .date01 { margin-right: 20px; } .subBlock01 > .closeTxt01 { margin-right: 20px; top: -2px; } .subBlock01 > .category01 { position: relative; top: -1px; margin-right: 18px; } .subBlock01 > .category01 > li + li { margin-left: 8px; } .date01 { font-size: 1.4rem; color: #71748b; line-height: 1.4; } .closeTxt01 { position: relative; padding: 1px 12px 3px; background-color: #a8a8a7; color: #fff; font-size: 1.4rem; line-height: 1.4; } .category01 { font-size: 0; } .category01 > li { display: inline-block; padding: 2px 8px 4px; background-color: #f7deea; color: #d85b94; font-size: 1.4rem; line-height: 1.2; } .catList01 { margin-top: -12px; display: flex; flex-wrap: wrap; } .catList01 + .catList01 { margin-top: 0; } .catList01 > li { padding: 2px 8px; margin-right: 5px; margin-top: 12px; background-color: #f3f3f1; line-height: 1.4; font-size: 1.2rem; letter-spacing: .05em; } .catList02 > .title01 { font-weight: 700; font-size: 2.1rem; } .catList02 > ul { margin-top: 28px; } .catList02 > ul > li:not(:first-child) { margin-top: 20px; } .catList02 > ul > li > a { display: flex; flex-wrap: wrap; justify-content: space-between; text-decoration: none; } .catList02 > ul > li > a:hover > .text01 { text-decoration: underline; } .bnrList01 { margin-top: 60px; } .bnrList01 > li:not(:first-child) { margin-top: 20px; } .bnrList01 > li a { transition: opacity .3s; } .bnrList01 > li a:hover { opacity: .6; } .tagList01 { display: flex; flex-wrap: wrap; margin-top: 1px; } .tagList01 > li { position: relative; top: -1px; font-size: 1.4rem; color: #969696; line-height: 1.4; margin-bottom: 2px; } .tagList01 > li:not(:last-child) { padding-right: 10px; } .tagList01 > li:not(:last-child)::after { position: relative; top: 1px; margin-left: 10px; bottom: .1em; right: 0; width: 1px; height: 12px; display: inline-block; background-color: #969696; content: ""; } .newsBlock01 { display: flex; flex-wrap: wrap; justify-content: space-between; } .newsBlock01 > .column01 { width: 61.627%; } .newsBlock01 > .column01.type01 { width: 100%; } .newsBlock01 > .column01 > .title01 { margin-top: 10px; line-height: 1.5; font-size: 2.0rem; font-weight: 700; font-feature-settings: "palt"; letter-spacing: .04em; } .newsBlock01 > .column01 > .title01 > a { text-decoration: none; } .newsBlock01 > .column01 > .title01 > a:hover { text-decoration: underline; } .newsBlock01 > .column01 > .text01 { margin-top: 32px; color: #8c8c8c; font-size: 1.6rem; } .newsBlock01 > .column01 > .text01 + .text01 { margin-top: 8px; } .newsBlock01 > .column01 > .btn03 { margin-left: 0; } .newsBlock01 .btn03 > a { min-width: inherit; } .newsBlock01 > .column02 { width: 34.883%; } .newsBlock01 > .column02 > .image01 > a { transition: opacity .3s; } .newsBlock01 > .column02 > .image01 > a:hover { opacity: .6; } .newsBlock01 > .column02 > .btn03 { margin-top: 30px; } .newsBlock01 > .linkTxt01, .newsBlock01 > .btn03 { display: none; } .newsBlock02 { padding: 100px 0 180px; } .shopInfoBlock01 { margin-top: 40px; } .shopInfoBlock01 > .box01 { display: flex; flex-wrap: wrap; justify-content: space-between; } .shopInfoBlock01 > .box01 > .column01 { width: 28%; } .shopInfoBlock01 > .box01 > .column02 { width: 66%; margin-top: 20px; } .shopInfoBlock01 > .box01 > .column02 > dl { overflow: hidden; } .shopInfoBlock01 > .box01 > .column02 > dl > dt { width: 110px; padding-right: 10px; float: left; clear: left; } .shopInfoBlock01 > .box01 > .column02 > dl > dd { margin-left: 110px; margin-bottom: 2px; } .shopInfoBlock01 > .box01 > .column02 > dl > dt, .shopInfoBlock01 > .box01 > .column02 > dl > dd { font-size: 1.6rem; } .shopInfoBlock01 > .box01 > .column02 > dl > dd:first-of-type { margin-top: -2px; margin-bottom: 30px; font-size: 2.0rem; font-weight: 700; line-height: 1.4; letter-spacing: 0; } .shopInfoBlock01 > .text01 { margin-top: 20px; line-height: 1.66; font-size: 1.8rem; } .shopInfoBlock02 { margin-top: 100px; } .shopInfoBlock02 > .box01 { display: flex; flex-wrap: wrap; justify-content: space-between; } .shopInfoBlock02 > .box01 > .column01 { width: 45%; } .shopInfoBlock02 > .box01 > .column01 > img { border-radius: 20px; } .shopInfoBlock02 > .box01 > .column02 { width: 51%; } .shopInfoBlock02 > .box01 > .column02 > .title01 { margin-top: -8px !important; font-weight: 700; font-size: 2.0rem; } .shopInfoBlock02 > .box01 > .column02 > dl > dt { margin-top: 25px; color: #8c8c8c; } .shopInfoBlock02 > .box01 > .column02 > dl > dd { font-size: 1.8rem; } .taskBlock01 { margin-top: 80px; } .taskBlock01 > .box01 { position: relative; padding: 54px 30px; background-color: #f3f3f1; border: solid 1px #c2c2c2; border-radius: 20px 20px 0 0; } .taskBlock01 > .box01::before { position: absolute; z-index: 1; left: 50%; bottom: -28px; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 28px 29px 0 29px; border-color: #aeafbc transparent transparent transparent; content: ""; } .taskBlock01 > .box01::after { position: absolute; z-index: 2; left: 50%; bottom: -27px; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 27px 28px 0 28px; border-color: #f3f3f1 transparent transparent transparent; content: ""; } .taskBlock01 > .box02 { border: solid 1px #b5b6c2; border-top: none; padding: 74px 30px; border-radius: 0 0 20px 20px; } .taskBlock01 > .box01 > dl, .taskBlock01 > .box02 > dl { display: flex; flex-wrap: wrap; align-items: center; } .taskBlock01 > .box01 > dl > dt, .taskBlock01 > .box02 > dl > dt { position: relative; padding-left: 38px; width: 120px; margin-right: 40px; font-size: 3.2rem; font-weight: 700; letter-spacing: .1em; } .taskBlock01 > .box01 > dl > dt::before, .taskBlock01 > .box02 > dl > dt::before { position: absolute; transform: translateY(-50%); left: -2px ; background-position: 0 0; background-repeat: no-repeat; background-size: 100%; content: ""; } .taskBlock01 > .box01 > dl > dt::before { width: 32px; height: 30px; top: 54%; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D.cls-2%7Bfill%3A%233e3a39%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%207-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22PC%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M0%2C0H32V32H0Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M8.61%2C25.33%2C2.67%2C30V5.33A1.33%2C1.33%2C0%2C0%2C1%2C4%2C4H28a1.33%2C1.33%2C0%2C0%2C1%2C1.33%2C1.33V24A1.32%2C1.32%2C0%2C0%2C1%2C28%2C25.33Zm-3.28-.82%2C2.35-1.84h19v-16H5.33Zm9.34-7.18h2.66V20H14.67Zm0-8h2.66V16H14.67Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .taskBlock01 > .box02 > dl > dt::before { width: 32px; height: 32px; top: 55%; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D.cls-2%7Bfill%3A%23d85b94%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%208-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22PC%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M0%2C0H32V32H0Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M16%2C29.33a13.33%2C13.33%2C0%2C0%2C1-4-26V6.11A10.67%2C10.67%2C0%2C1%2C0%2C25.89%2C20h2.83A13.33%2C13.33%2C0%2C0%2C1%2C16%2C29.33Zm13.27-12H14.67V2.73c.44%2C0%2C.88-.06%2C1.33-.06A13.33%2C13.33%2C0%2C0%2C1%2C29.33%2C16C29.33%2C16.45%2C29.31%2C16.89%2C29.27%2C17.33ZM17.33%2C5.42v9.25h9.25A10.66%2C10.66%2C0%2C0%2C0%2C17.33%2C5.42Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .taskBlock01 > .box02 > dl > dt { color: #d85b94; } .taskBlock01 > .box01 > dl > dd, .taskBlock01 > .box02 > dl > dd { width: calc(100% - 160px); } .taskBlock01 > .box01 > dl > dd > ul > li, .taskBlock01 > .box02 > dl > dd > ul > li { position: relative; padding-left: 25px !important; font-size: 2.0rem; letter-spacing: .05em; } .taskBlock01 > .box01 > dl > dd > ul > li:not(:first-child), .taskBlock01 > .box02 > dl > dd > ul > li:not(:first-child) { margin-top: 28px; } .taskBlock01 > .box01 > dl > dd > ul > li::before, .taskBlock01 > .box02 > dl > dd > ul > li::before { position: absolute; top: .8em !important; left: 0; width: 17px; height: 3px; background-color: #3e3a39; content: "" !important; } .taskBlock01 > .box02 > dl > dd > ul > li::before { background-color: #d85b94; } .caseBlock01 { margin-top: 100px; } .caseBlock01 + .caseBlock01 { margin-top: 0; } .caseBlock01:last-of-type .caseBlock01In { border-bottom: solid 1px #cacaca; } .caseBlock01In { padding-top: 60px; padding-bottom: 60px; border-top: solid 1px #cacaca; } .caseBlock01In * { line-height: 1.7 !important; } .caseBlock01In > .title01 { font-weight: 700; text-align: center; font-size: 3.4rem; line-height: 1.4; letter-spacing: .03em; } .caseBlock01In > .inner01 { display: flex; flex-wrap: wrap; align-items: center; max-width: 820px; margin-left: auto; margin-right: auto; margin-top: 30px; } .caseBlock01In > .inner01 > .icon01 { width: 100px; margin-right: 40px; } .caseBlock01In > .inner01 > .btn03 { width: 200px; margin-right: 0; margin-top: 0; } .caseBlock01In > .inner01 > .btn03 > a { color: #fff; min-width: inherit; padding-left: 20px; padding-right: 20px; } .caseBlock01In > .inner01 > .btn03 > a:hover { color: #d2b46e; } .caseBlock01In > .inner01 > .column01 { width: calc(100% - 370px); } .caseBlock01In > .inner01 > .column01 > .title01 { font-weight: 700; } .caseBlock01In > .inner01 > .column01 > .text01 { margin-top: 0; font-size: 16px; } .caseBlock01In > .inner02 { display: flex; flex-wrap: wrap; align-items: flex-start; max-width: 1000px; margin-left: auto; margin-right: auto; margin-top: 36px; } .caseBlock01In > .inner02 > .image01 { width: 300px; margin-right: 40px; border: solid 1px #e7e8f1; } .caseBlock01In > .inner02 > .column01 { width: calc(100% - 340px); margin-top: -8px; } .caseBlock01In > .inner02 > .column01 > .title01 { margin-bottom: 4px; font-weight: 700; } .caseBlock01In > .inner02 > .column01 > .text01 { margin-top: 0; font-size: 1.6rem; } .caseBlock01In > .inner02 > .column01 > dl { margin-top: 30px; } .caseBlock01In > .inner02 > .column01 > dl + dl { margin-top: 30px; } .caseBlock01In > .inner02 > .column01 > dl > dt { float: left; clear: left; font-size: 1.6rem; } .caseBlock01In > .inner02 > .column01 > dl > dt::after { display: inline-block; margin-left: 4px; margin-right: 4px; content: ":"; } .caseBlock01In > .inner02 > .column01 > dl > dd { font-size: 1.6rem; } .tabArea01:not(:first-child) { margin-top: 100px; } .tabList01 { display: flex; flex-wrap: wrap; } .tabList01 > li { min-width: 200px; margin-right: 1px; } .tabList01 > li > a { display: block; border-radius: 6px 6px 0 0; padding: 10px; opacity: .5; background-color: #e8d9b6; font-size: 1.6rem; transition: opacity .3s; text-decoration: none; text-align: center; cursor: default; pointer-events: none; } .tabList01 > li.active > a { opacity: 1.0; } .tabBlock01 { padding: 40px 50px; background-color: #f3f3f1; } .tabInner01 { display: flex; flex-wrap: wrap; } .tabInner01 > .title01 { font-weight: 700; margin-bottom: 6px; } .tabInner01 > .title01:not(:first-child) { margin-top: 40px; } .tabInner01 > ul { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: -10px; margin-left: 20px; } .tabInner01 > ul > li { margin-right: 6%; margin-bottom: 10px; } .item01 > .image01 > a { display: block; overflow: hidden; } .item01 > .image01 > a > img { transition: all .3s; } .item01 > .image01 > a:hover > img { transform: scale(1.06,1.06); } .item01 > .title01 { margin-top: 14px; font-weight: 700; } .item01 > .title01 > a { text-decoration: none; } .item01 > .title01 > a:hover { text-decoration: underline; } .item01 > .text01 { margin-top: 30px; color: #8c8c8c; font-size: 1.6rem; } .colWrap01 { display: flex; flex-wrap: wrap; margin-top: 25px; } .colWrap01 > .item01 { width: 31.666%; } .colWrap01 > .item01 > .image01 { border-radius: 20px; overflow: hidden; } .colWrap01 > .item01:not(:first-child) { margin-left: 2.5%; } .col01 { margin-top: 100px; width: 30.833%; box-shadow: 1px 1px 4px 1px rgba(234,234,234,1); background-color: #fff; border-radius: 20px; overflow: hidden; } .col01:not(:nth-child(3n+1)) { margin-left: 3.75%; } .col01 > .image01 > a { display: block; overflow: hidden; } .col01 > .image01 > a > img { transition: transform .3s; } .col01 > .image01 > a:hover > img { transform: scale(1.06,1.06); } .col01 > .inner01 { padding: 20px 18px 25px 18px; } .col01 > .inner01 > .title01 { font-size: 2.0rem; font-weight: 700; line-height: 1.5; } .col01 > .inner01 > .title01 > a { text-decoration: none; } .col01 > .inner01 > .title01 > a:hover { text-decoration: underline; } .col01 > .inner01 > .box01 { margin-top: 20px; } .col01 > .inner01 > .text01 { margin-top: 28px; color: #8c8c8c; font-size: 1.6rem; line-height: 1.5; } .frameArea01 { margin: 40px auto 0; padding: 50px 40px 55px; border-radius: 16px; background-color: #f3f3f1; } .heading10 + .frameArea01 { margin-top: 60px; padding-bottom: 70px; } .frameArea01:first-child { margin-top: 0; } .frameArea01 > .title01 { font-size: 2.8rem; font-weight: 700; text-align: center; } .frameArea01 > .text01 { margin-top: 25px; text-align: center; } .frameArea01 > .btn01 { max-width: 320px; width: 100%; margin-top: 35px; } .frameArea01 > .btn01 > a { padding-top: 14px; padding-bottom: 18px; font-size: 1.6rem; } .frameArea01 > .btn01 > a > .inner01 { padding-right: 24px; } .frameArea01 > .box01 { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; } .frameArea01 > .box01 > .column01 { width: 50%; padding-bottom: 35px; } .frameArea01 > .box01 > .column01:nth-child(odd) { padding-right: 3%; } .frameArea01 > .box01 > .column01:nth-child(even) { padding-left: 3%; } .frameArea01 > .box01 > .column01 + .column01 { border-left: solid 1px #a1a19f; } .frameArea01 > .box01 > .column01 > .icon01 { width: auto; height: 112px; text-align: center; } .frameArea01 > .box01 > .column01 > .icon01 > img { height: 100%; width: auto; } .frameArea01 > .box01 > .column01 > .title01 { margin-top: 10px; font-size: 3.2rem; font-weight: 700; text-align: center; } .frameArea01 > .box01 > .column01 > .text01 { margin-top: 12px; font-size: 2.0rem; font-weight: 500; text-align: center; } .frameArea01 > .box01 + .btn01 { width: 100%; max-width: 414px; margin-top: 50px; } .frameArea01 > .box01 + .btn01 > a { padding-top: 10px; padding-bottom: 14px; font-size: 2.2rem; } .frameArea02 { padding: 12px 4%; background-color: #d85b94; } .frameArea02 > .text01 { color: #fff; font-size: 1.8rem; text-align: center; } .cvArea03 + .frameArea02 { margin-bottom: -80px; } .cvArea01 { margin: 40px auto 0; padding: 40px 40px 50px; border-radius: 16px; background-color: #f3f3f1; } .list05 + .cvArea01 { max-width: 1060px; } .cvArea01 > .title01 { display: table; padding-left: 34px; padding-right: 34px; position: relative; margin-left: auto; margin-right: auto; font-size: 2.4rem; font-weight: 700; } .cvArea01 > .title01::before,.cvArea01 > .title01::after { position: absolute; top: -5px; height: calc(100% + 20px); width: 2px; background-color: #3e3a39; content: ""; } .cvArea01 > .title01::before { left: 0; transform: skewX(16deg); } .cvArea01 > .title01::after { right: 0; transform: skewX(-16deg); } .cvArea01 > .text01 { margin-top: 30px; font-size: 2.8rem; font-weight: 700; line-height: 1.5; color: #d85b92; text-align: center; } .cvArea01 > .text02 { margin-top: 30px; text-align: center; font-weight: 500; } .cvArea01 > .btn01 { width: 415px; margin-top: 20px; } .cvArea02 { margin: 130px auto 0; max-width: 900px; padding: 50px 40px 55px; border-radius: 16px; background-color: #ffffff; } .cvArea02 > .title01 { font-size: 3.6rem; font-weight: 700; text-align: center; line-height: 1.5; } .cvArea02 > .text01 { margin-top: 35px; font-size: 2.4rem; color: #d85b94; text-align: center; font-weight: 500; } .cvArea02 > .btn01 { width: 415px; margin-top: 45px; } .cvArea03 { padding: 80px 20px 100px; background: url(../../solution/images/bg03.jpg) no-repeat 50% 50%/cover; } .cvArea03 > .title01 { color: #fff; font-size: 4.0rem; font-weight: 700; line-height: 1.45; text-align: center; } .cvArea03 > .box01 { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 60px; } .cvArea03 > .btn01 { width: 100%; max-width: 414px; margin-top: 40px; } .cvArea04 { margin-top: 60px; } .cvArea04 > .text01 { font-weight: 500; text-align: center; } .cvArea04 > .btn01 { margin-top: 15px; } .companyList { display: flex; flex-wrap: wrap; margin-top: 50px; max-width: 880px; margin-left: auto; margin-right: auto; } .companyList > li { width: 32.386%; border-radius: 16px; overflow: hidden; } .companyList > li:not(:nth-child(3n+1)) { margin-left: 1.363%; } .companyList > li:nth-child(n+4) { margin-top: 12px; } .list01:not(:first-child) { margin-top: 40px; } .list01 > li { padding-bottom: 60px; border-bottom: solid 1px #cacaca; } .list01 > li:not(:first-child) { margin-top: 60px; } .list02 { margin-top: 30px; overflow: hidden; color: #8c8c8c; font-size: 1.6rem; } .list02.type01 { line-height: 1.5; } .list02 > dt { float: left; clear: left; margin-right: 10px; } .list02.type01 > dt { float: none; } .list02 > dd { margin-top: 1px; text-indent: -.5em; } .list02 > dd > ul { margin-left: .5em; } .list03 { margin-top: 60px; } .list03 > li { padding-top: 30px; padding-bottom: 24px; border-bottom: solid 1px #e5e6f0; } .list03 > li:first-child { border-top: solid 1px #e5e6f0; } .list03 > li > .text01 { margin-left: 102px; margin-top: 10px; font-size: 1.8rem; } .list03 > li > .text01 > a { text-decoration: none; } .list03 > li > .text01 > a:hover { text-decoration: underline; } .list03 > li > .subBlock01 > .tagList01 { max-width: calc(100% - 240px); } .list03 + .btn03 { margin-top: 90px; } .list04 { display: flex; flex-wrap: wrap; margin-top: 80px; } .list04 > li { width: 31.481%; padding: 40px 30px 50px; background-color: rgba(255,255,255,.8); border-radius: 16px; } .list04 > li:not(:nth-child(3n+1)) { margin-left: 2.685%; } .list04 > li > .text01 { position: relative; display: table; margin: -8px auto 0; padding: 0 10px 6px; color: #d85b92; font-size: 2.4rem; font-weight: 700; } .list04 > li > .text01::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #d85b92; content: ""; } .list04 > li > .text02 { margin-top: 30px; font-weight: 500; color: #737373; } .list04 > li > .title01 { margin-top: 34px; text-align: center; font-size: 2.1rem; font-weight: 700; line-height: 1.6; } .list04 > li > .icon01 { margin-top: 30px; height: 120px; text-align: center; } .list04 > li > .icon02 { margin-top: 30px; height: 112px; text-align: center; } .list04 > li > .icon01 > img, .list04 > li > .icon02 > img { height: 100%; width: auto; } .list04.type01 > li { padding: 35px 30px 40px; background-color: #f3f3f1; } .list04.type01 > li > .text02 { max-width: 97%; margin: 16px auto 0; } .list05 { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1060px; margin: 70px auto 0; border-radius: 16px; overflow: hidden; } .list05 > li { width: 32.765%; } .list05 > li:nth-child(n+4) { margin-top: 8px; } .list06 { margin-top: 80px; display: flex; flex-wrap: wrap; justify-content: space-between; } .list06 > li { width: 47.222%; } .list06 > li:nth-child(2) { margin-top: 110px; } .list06 > li:nth-child(2n+3) { margin-top: -115px; } .list06 > li:nth-child(2n+4) { padding-top: 40px; } .list06 > li > .image01 { border-radius: 16px; overflow: hidden; } .list06 > li > .image01 > a > img { transition: transform .3s; } .list06 > li.is_hover > .image01 > a[href] > img { transform: scale(1.1,1.1); } .list06 > li > .button01 { position: relative; margin-top: 25px; } .list06 > li > .button01 > a { position: relative; padding-bottom: 4px; padding-left: 27px; padding-right: 70px; display: block; color: #fff; text-decoration: none; } .list06 > li > .button01 > a::before { position: absolute; content: ""; border-radius: 3px; top: 0; left: 0; width: 6px; height: 100%; background-color: #d2b46e; } .list06 > li > .button01 > a[href]::after { position: absolute; top: 50%; transform: translateY(-50%); right: 28px; width: 30px; height: 30px; transition: background .3s; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2029.42%2029.42%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M14.71%2C0A14.71%2C14.71%2C0%2C1%2C1%2C0%2C14.71%2C14.72%2C14.72%2C0%2C0%2C1%2C14.71%2C0Zm0%2C13.24H8.83v2.94h5.88V20.6l5.89-5.89L14.71%2C8.83Z%22%2F%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; content: ""; } .list06 > li.is_hover > .button01 > a[href]::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2029.42%2029.42%22%3E%3Cdefs%3E%3Cstyle%3Epath%7Bfill%3A%23d2b46e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M14.71%2C0A14.71%2C14.71%2C0%2C1%2C1%2C0%2C14.71%2C14.72%2C14.72%2C0%2C0%2C1%2C14.71%2C0Zm0%2C13.24H8.83v2.94h5.88V20.6l5.89-5.89L14.71%2C8.83Z%22%2F%3E%3C%2Fsvg%3E'); } .list06 > li > .button01 > a > .text01 { display: block; font-size: 3.2rem; font-weight: 700; line-height: 1.4; } .list06 > li > .button01 > a > .text02 { display: block; margin-top: 5px; } .list07 { display: flex; flex-wrap: wrap; margin-top: 60px; } .list07 > li { display: flex; flex-wrap: wrap; align-items: center; width: 31%; } .list07 > li:nth-child(1) { margin-left: 1%; } .list07 > li:nth-child(2) { margin-left: 2%; } .list07 > li:nth-child(3) { margin-left: 4%; } .list07 > li > .icon01 { width: 130px; margin-right: 20px; } .list07 > li > .text01 { display: flex; flex-wrap: wrap; width: calc(100% - 150px); width: -webkit-calc(100% - 150px); font-weight: 700; font-size: 2.4rem; color: #969696; text-align: center; line-height: 1.33; } .list07 + .btn03 { margin-top: 100px; } .list08 > li { padding-left: 32px; position: relative; color: #fff; } .list08 > li:not(:first-child) { margin-top: 2px; } .list08 > li::before { position: absolute; top: .3em; left: 0; width: 23px; height: 17px; background: url(../images/ic01.png) no-repeat 0 0/100%; content: ""; } .flow01 { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1000px; padding-left: 50px; padding-right: 50px; margin: 90px auto 180px; } .flow01 > li { position: relative; width: 18.5%; padding-bottom: 15px; } .flow01 > li:nth-child(2) { width: 19.2%; left: -.8%; } .flow01 > li::before { width: 145%; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-size: 2.4rem; font-weight: 700; color: #d85b92; text-align: center; line-height: 1.4; } .flow01 > li:nth-child(1)::before { content: "e チケットの発行"; } .flow01 > li:nth-child(2)::before { content: "e チケットの配信"; } .flow01 > li:nth-child(3)::before { content: "e チケットの販売管理"; } .flow01 > li > .icon01 { position: relative; } .flow01 > li:not(:last-child) > .icon01:after { position: absolute; top: 50%; transform: translateY(-50%); left: 100%; width: 117.957%; height: 2px; background-color: #d85b92; content: ""; } .parallax01 { position: relative; z-index: 2; margin-top: -16.33vw; background-image: url(../../images/ph09.jpg); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; -webkit-mask-image: url('../../images/mask.svg'); mask-image: url('../../images/mask.svg'); -webkit-mask-size: 100%; mask-size: 100%; height: 63.5vw; } .parallax01::before { position: absolute; bottom: 0; left: 0; width: 40%; height: 3vw; background-color: #fff; content: ""; } .btn01 { display: table; margin-left: auto; margin-right: auto; } .btn01 > a { position: relative; z-index: 1; display: block; padding: 10px 30px 14px; border: solid 3px #26bfa7; width: 100%; border-radius: 100px; color: #fff; font-weight: 700; background-color: #26bfa7; text-align: center; line-height: 1.4; font-size: 2.2rem; overflow: hidden; text-decoration: none; box-shadow: 3px 3px 4px 0px rgb(0 0 0 / 30%); } .btn01 > a:hover { color: #26bfa7; } .btn01 > a::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 120%; height: 102%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .btn01 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .btn01 > a > .inner01 { position: relative; display: inline-block; padding-right: 28px; } .btn01 > a > .inner01::before, .btn01 > a > .inner01::after { position: absolute; top: 55%; transform: translateY(-50%); content: ""; transition: all .3s; } .btn01 > a > .inner01::before { right: 0; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; } .btn01 > a:hover > .inner01::before { background-color: #26bfa7; } .btn01 > a > .inner01::after { width: 8px; height: 8px; right: 6px; z-index: 2; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2326bfa7%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } .btn01 > a:hover > .inner01::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .btn01.type01 { width: 415px; margin-top: 60px; } .btn03 { display: table; margin-left: auto; margin-right: auto; margin-top: 40px; } .tabArea01 + .btn03, .editorArea01 + .btn03 { margin-top: 60px; } .btn03 > a { position: relative; z-index: 1; display: block; min-width: 315px; min-height: 50px; padding: 9px 40px 11px; border: solid 1px #d2b46e; border-radius: 60px; background-color: #d2b46e; text-align: center; text-decoration: none; font-weight: 700; overflow: hidden; color: #fff; transition: color .3s; } .btn03.type01 > a { width: 375px; font-size: 1.8rem; } .btn03 > a:hover { color: #d2b46e; } .btn03 > a::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .btn03 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .btn03 > a > .inner01 { position: relative; display: initial; padding-right: 22px; } .btn03 > a > .inner01::before { position: absolute; bottom: .3em; right: 0; width: 16px; height: 16px; transition: background .3s; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; content: ""; } .btn03 > a:hover > .inner01::before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d2b46e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .link03 { margin-top: 35px; display: table; margin-left: auto; margin-right: auto; } .link03 > a { display: block; position: relative; font-size: 1.8rem; font-weight: 700; color: #fff; padding-left: 35px; text-decoration: none; padding-bottom: 10px; transition: all .3s; } .link03 > a::before,.link03 > a::after { position: absolute; content: ""; } .link03 > a::before { width: 26px; height: 19px; left: 0; top: 8px; transition: all .3s; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2027.745%2020.496%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22mv_slide1%22%3E%3Cg%20id%3D%22footer%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%221%22%20y%3D%221%22%20width%3D%2225.745%22%20height%3D%2218.496%22%2F%3E%3Cpolyline%20class%3D%22cls-1%22%20points%3D%221%201%2013.873%2010.248%2026.745%201%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } .link03 > a::after { bottom: 0; left: 0; width: 100%; height: 1px; background-color: #fff; transition: all .3s; } .link03 > a > .inner01 { display: block; position: relative; padding-right: 32px; } .link03 > a > .inner01::before,.link03 > a > .inner01::after { position: absolute; top: 55%; transform: translateY(-50%); content: ""; transition: all .3s; } .link03 > a > .inner01::before { right: 0; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; } .link03 > a > .inner01::after { width: 8px; height: 8px; right: 6px; z-index: 2; transition: all .3s; background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23182e5c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; } @media screen and (min-width:768px) { .link03 > a:hover { color: #ba9c6e; } .link03 > a:hover::after { background-color: #ba9c6e; } .link03 > a:hover::before { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2027.745%2020.496%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23ba9c6e%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22mv_slide1%22%3E%3Cg%20id%3D%22footer%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%221%22%20y%3D%221%22%20width%3D%2225.745%22%20height%3D%2218.496%22%2F%3E%3Cpolyline%20class%3D%22cls-1%22%20points%3D%221%201%2013.873%2010.248%2026.745%201%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } .link03 > a:hover > .inner01::before { background-color: #ba9c6e; } } .txt01 { margin-bottom: -10px; text-align: center; font-weight: 700; font-size: 2.4rem; } .txt02 { margin-top: 40px; text-align: center; font-size: 2.1rem; line-height: 1.52; letter-spacing: .12em; font-weight: 500; } .block01 .txt02 { color: #fff; } .txt03 { margin-top: 45px; text-align: center; } .block01 .txt03 { color: #fff; } .txt04 { text-align: center; font-weight: 700; font-size: 3.2rem; line-height: 1.68; } .txt05 { margin-top: 40px; color: #969696; font-weight: 500; text-align: center; } .subText01 { margin-top: 20px; display: table; margin-right: 0; margin-left: auto; font-size: 1.6rem; } .subText01 > p { line-height: 1.7 !important; } .mainImage01 { position: relative; left: 50%; transform: translateX(-50%); min-width: 1400px; width: 100vw; margin-left: auto; margin-right: auto; } .mainImage01::before { position: absolute; bottom: 0; width: 100%; min-width: 1400px; left: 50%; transform: translateX(-50%); height: 5.65vw; min-height: 82px; background: url(../images/bg03.png) no-repeat 50% 100%/100%; content: ""; } .mainImage01 > img { width: 100%; } .pagination { margin-top: 60px; } .pagination ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .pagination ul > li { position: relative; margin: 0 4px; } .pagination ul > li > a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 34px; height: 34px; padding: 0 0 2px; background-color: #f3f3f1; border-radius: 50%; vertical-align: top; text-decoration: none; color: #3e3a39; line-height: 1.0; font-size: 1.6rem; transition: all .3s; } .pagination ul > li > a.prev, .pagination ul > li > a.next { border: none; } .pagination ul > li > a.prev > a, .pagination ul > li > a.next > a { white-space: nowrap; text-indent: 100%; overflow: hidden; } .pagination ul > li > a.prev::before, .pagination ul > li > a.next::before { position: absolute; top: 50%; margin-top: -2px; width: 4px; height: 4px; border-top: 1px solid #3e3a39; border-right: 1px solid #3e3a39; pointer-events: none; transition: border .3s; content: ""; } .pagination ul > li > a.prev::before { left: 50%; margin-left: -1px; transform: rotate(-135deg); } .pagination ul > li >a.next::before { right: 50%; margin-right: -1px; transform: rotate(45deg); } .pagination ul > li > a.prev:hover::before, .pagination ul > li > a.next:hover::before { border-top-color: #d85b94; border-right-color: #d85b94; pointer-events: none; } .pagination ul > li > a:not(.prev):not(.next):hover, .pagination ul > li > a:not(.prev):not(.next):active { background-color: #d85b94; color: #fff; } .pagination ul > li > span { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0 0 2px; vertical-align: top; } .pagination ul > li > span.dots { height: 20px; padding-left: 0; padding-right: 0; } .pagination ul > li > span:not(.dots) { width: 34px; height: 34px; border-radius: 50%; line-height: 1.0; font-size: 1.6rem; background-color: #d85b94; color: #fff; } @keyframes popup { 0% { transform: translateY(40px) scale(0.8); opacity: 0; } 100% { transform: translateY(0) scale(1.0); } 80%, 100% { opacity: 1; } } @keyframes fadeup { 0% { transform: translateY(60px); opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } .js_fadeIn01 { overflow: hidden; opacity: 0; display: block; } .js_fadeIn01 > span { opacity: 0; display: block; transform: matrix(1, 0, 0, 1, 0, 100); transition: all .4s ease; } img.js_fadeIn01 { opacity: 0; display: block; transform: matrix(1, 0, 0, 1, 0, 100); transition: all .4s ease; } img.js_fadeIn01.is_show { opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); } .conceptBlock01 .js_fadeIn01 > span { transition-duration: .6s; } .js_fadeIn01.is_show { opacity: 1.0; } .js_fadeIn01.is_show > span { opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); } .js_fadeIn02 { opacity: 0; } .js_fadeIn02.is_show { animation: popup .6s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .js_fadeIn03 { opacity: 0; } .js_fadeIn03.is_show { animation: fadeup .6s cubic-bezier(0.33, 1, 0.68, 1) forwards; } .list04 .js_fadeIn03.is_show:nth-child(2) { animation: fadeup .6s cubic-bezier(0.33, 1, 0.68, 1) .2s forwards; } .list04 .js_fadeIn03.is_show:nth-child(3) { animation: fadeup .6s cubic-bezier(0.33, 1, 0.68, 1) .4s forwards; } .js_fadeIn04 > li { opacity: 0; } .js_fadeIn04 .is_active { opacity: 1.0; transition: opacity .3s; } .js_fadeIn04 > li > .icon01::after { width: 0 !important; transition: width .1s ease-out .3s; } .js_fadeIn04 .is_active > .icon01::after { width: 117.957% !important; } @media screen and (min-width: 1401px) { .contents01#function > .titleArea01::before { top: 14.565vw; } .conceptBlock01::before { transform: translateX(-50%); left: 50%; } .titleArea01 { height: 20.714vw; } .titleArea01 > .title01 { top: 35%; } } @media screen and (max-width: 1400px) { .parallax01 { height: 64.6vw; background-size: 110%; } } @media screen and (max-width: 1200px) { .breadcrumbs01 { padding-left: 100px; } } @media screen and (max-width: 1120px) { .featureBlock01 .bg03 .illust01,.featureBlock01 .bg03 .illust02 { display: none; } .list07 > li > .icon01 { width: 30%; margin-right: 5%; } .list07 > li > .text01 { width: 65%; font-size: 2.0rem; } .list07 > li:nth-child(1) { margin-left: 0; } } @media screen and (max-width: 1000px) { .breadcrumbs01 { top: 18px; } .breadcrumbs01.type01 { top: 62px; } .contentsWrap01:first-child { margin-top: 44px; } .mainArea01 { min-height: inherit; height: 50vw; -webkit-mask-size: auto 100%; mask-size: auto 100%; } .mainArea01 .slick-dots { bottom: 10vw; } .mainArea01 > ul { margin-top: 4vw; } .mainArea01 .item01 { min-width: 140%; } .mainArea01 .item01 img { height: auto; width: 101%; } .mainArea01 > .title01 { font-size: 3.2vw; padding-top: 14vw; } .mainArea01 > .btn01 { margin-top: 5vw; } .titleArea01 { margin-top: 44px; } .breadcrumbs01 { padding-left: 84px; } .parallax01 { background-size: 120% auto; } .functionList01 > li { width: 100%; } .functionList01 > li:nth-child(n+2), .functionList01.type01 > li:nth-child(n+2) { margin-top: 38px; } } @media screen and (min-width:768px) and ( max-width:1000px) { .mainColumn01 { width: calc(100% - 250px); } .sideColumn01, .sideColumn02 { width: 210px; } .sideBlock02 > .tel01 > a { font-size: 1.8rem; } .functionBlock01 .box01 { padding-right: 2.77%; } .functionBlock02 .contentsBlock { width: calc(100% - 260px); } .functionList02 > ul > li { width: 21%; margin-left: 2%; margin-right: 2%; } .functionList02 > ul > li:first-child { margin-left: 0; } .functionList02 > ul > li:last-child { margin-right: 0; } .newsBlock01 > .column01 > .subBlock01 > .closeTxt01 { display: table; margin-left: 0; margin-right: 40%; margin-top: 10px; } .newsBlock01 > .column01 > .subBlock01 > .category01 { margin-right: 0; } .newsBlock01 > .column01 > .subBlock01 > .tagList01 { width: 100% !important; margin-top: 7px; } .newsBlock01 > .column02 > .btn03 { width: 100%; } .newsBlock01 > .column02 > .btn03 > a { min-width: inherit; width: 100%; padding-left: 10px; padding-right: 10px; } .functionBlock01 .titleBlock > .btn01 > a { padding-left: 10px; padding-right: 10px; font-size: 1.5rem; } } @media screen and (max-width: 767px) { .breadcrumbs01 > li > .pcNone { display: none !important; } .contents01#function > .titleArea01::before { min-width: inherit; left: 0; bottom: -8px; top: inherit; transform: translateX(0); height: 28px; min-height: inherit; background-image: url(../images/bg03s.png); background-size: 100% 100%; } #solution .contentsWrap01 { background: url(../../solution/images/bg02s.png) no-repeat 50% 70.4vw/100%; } .mainArea01 { height: 123.166vw; margin-top: 44px; -webkit-mask-image: url('../../images/mask_main_sp.svg'); mask-image: url('../../images/mask_main_sp.svg'); -webkit-mask-size: cover; mask-size: cover; } .mainArea01::after { display: none; } .mainArea01 > .title01 { padding-top: 24vw; font-size: 6.0vw; line-height: 1.6; } .mainArea01>ul { margin-top: 8.33vw; width: 88.66vw; } .mainArea01>ul > .btn01 { width: 42vw; } .mainArea01 .slick-dots { bottom: 15vw; } .mainArea01>ul>.btn01>a { height: 12.8vw; font-size: 4.266vw; } .mainArea01>ul>.btn01 > a > .inner01 { padding-right: 0; } .mainArea01>ul>.btn01>a>.inner01::before,.mainArea01>ul>.btn01>a>.inner01::after { content: none; } .mainArea01 > .btn01 { min-width: 280px; margin-top: 26.66vw; } .mainArea01 > .btn01 > a { box-shadow: 3px 3px 4px 0px rgb(0 0 0 / 30%); } .slider01 .item01 { height: 100%; min-width: inherit; } .titleArea01 { height: 170px; margin-top: 44px; background-position: 50% 50%; } .titleArea01::before { min-width: inherit; left: 0; bottom: -8px; transform: translateX(0); height: 28px; min-height: inherit; background-image: url(../images/bg03s.png); background-size: 100% 100%; } .titleArea01 > .title01 { top: 43%; transform: translate(-50%,-50%); font-size: 2.8rem; line-height: 1.33; } .titleArea02 { margin-top: 60px; padding-bottom: 14px; } .titleArea02 > .catList01 { margin-top: 40px; } .breadcrumbs01 { top: inherit; bottom: 30px; padding-left: 5.33%; padding-right: 5.33%; font-size: 1.0rem; } .breadcrumbs01.type01 { height: 95vw; top: inherit;display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; } .breadcrumbs01 > li > a { margin-right: 9px; } .breadcrumbs01 > li > a::before { right: -4px; transform: rotate(45deg) translateY(-2px); width: 3px; height: 3px; } .contentsWrap01:first-child { padding-bottom: 100px; } .contentsWrap01#price { padding-top: 40px; padding-bottom: 90px; } .contentsWrap01#casestudy { padding-top: 40px; padding-bottom: 100px; } .contentsWrap01>.inner01, .contentsWrap01>.inner02 { padding: 0 5.333%; } .heading01 { margin-top: 80px; font-size: 2.8rem; line-height: 1.42; } .heading01 .text01 { margin-bottom: 20px; font-size: 1.4rem; } .heading01 .text02 { font-size: 1.4rem; } .heading04 { font-size: 3.0rem; } .heading04 > .text01 { margin-top: 20px; font-size: 2.3rem; } .heading04.type01 { font-size: 6.0rem; } .heading04.type01 > .text01 { margin-top: 10px; } .heading05 { margin-top: -8px; font-size: 2.4rem; line-height: 1.4; } .heading05 > .text01 { padding-bottom: 12px; margin-bottom: 34px; font-size: 2.0rem; } .heading05 > .text01::before { width: 110px; margin-left: -55px; } .heading06 { padding: 0 45px; font-size: 2.4rem; line-height: 1.33; } .heading06::before,.heading06::after { width: 30px; } .heading07 { padding-left: 20px; padding-right: 20px; font-size: 2.4rem; } .heading07.type01 { padding-left: 20px; padding-right: 20px; font-size: 1.4rem; } .heading07.type01::before,.heading07.type01::after { display: block; } #price > .heading07 { font-size: 1.8rem; max-width: 87%; } .heading08 { line-height: 1.33; padding-top: 0; padding-bottom: 3px; } .heading08::before { top: .1em; height: 96%; } .heading09 { text-align: center; } .heading09 > span { line-height: 1.72; font-size: 2.2rem; } .heading10 { font-size: 2.4rem; line-height: 1.33; } .mainColumn01 { width: 100%; } .sideColumn01 { width: 100%; margin-top: 80px; padding-right: 8.955%; padding-left: 8.955%; } .blockIn01 { padding: 0 6.4%; } .conceptBlock01 { padding: 55px 6.4% 80px; } .conceptBlock01::before { top: 68px; right: inherit; left: -4%; height: 60vw; width: 108%; background-size: 115%; background-position: 0 0; } .conceptBlock01::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #fff; content: ""; } .conceptBlock01 > .title01 { font-size: 2.2rem; line-height: 1.6; letter-spacing: .02em; } .conceptBlock01 > .title01 > .logo01 { left: -2.66%; width: 86.363%; margin-bottom: 60px; } .conceptBlock01 > .txt02 { margin-top: 40px; text-align: center; font-size: 1.6rem; line-height: 2.0; } .featureBlock01::before { width: 100%; min-width: 100%; height: 7.33vw; min-height: inherit; background-size: 100% 100%; } .featureBlock01 [class*="bg"] { background-size: 100%; } .featureBlock01 .bg01 { padding: 110px 0 65px; background-image: url(../../images/bg06s.png); } .featureBlock01 .bg02 { padding-top: 40px; padding-bottom: 60px; background-image: url(../../images/bg03s.png); } .featureBlock01 .bg03 { padding-bottom: 40px; background-image: url(../../images/bg04s.png); } .featureBlock01 .bg03 .illust01,.featureBlock01 .bg03 .illust02 { position: absolute; } .featureBlock01 .bg03 .illust01,.featureBlock01 .bg03 .illust02 { display: block; opacity: .5; } .featureBlock01 .bg03 .illust01 { width: 31.2vw; left: 2.66%; top: -40px; } .featureBlock01 .bg03 .illust02 { width: 22.66vw; right: 2.66%; top: -37px; bottom: inherit; } .featureBlock01 .bg04 { padding-top: 60px; padding-bottom: 90px; background-image: url(../../images/bg05s.png); } .usageBlock01 .bg01 { padding: 40px 0 28.533vw; background-image: url(../../images/bg02s.png); } .functionBlock01 { padding-bottom: 60px; background: url(../../inbound-tickets/feature/images/bg02s.png) no-repeat 50% 0/100%; } .functionBlock01 .box01 { padding-left: 0; padding-right: 0; margin-top: -20px; display: block; } .functionBlock01 .box01 > .icon01 { width: 29.09%; margin-left: auto; margin-right: auto; } .functionBlock01 .box01 > .column01 { width: 100%; } .functionBlock01 .box01 > .column01 > .title01 { margin-top: 20px; } .functionBlock01 .box01 > .column01 > .title01 > .text01 { margin: 0 auto 35px; padding: 5px 25px 8px; font-size: 4.8vw; } .functionBlock01 .box01 > .column01 > .title01 > .text02 { font-size: 5.866vw; } .functionBlock01 .box01 > .column01 > .title01 > .text02 > span { position: relative; line-height: 1.8; padding-bottom: 3px; } .functionBlock01 .box01 > .column01 > .text01 { margin-top: 45px; } .functionBlock01 .box01 > .column01 > .text01 + .text01 { margin-top: 12px; } .functionBlock01 .box01 > .column01 > .image01 { position: relative; z-index: 1; padding-bottom: 26.66vw; } .functionBlock01 .box01 > .column01 > .image01 > li { width: 60.66%; } .functionBlock01 .box01 > .column01 > .image01 > li:nth-child(2) { position: absolute; z-index: -1; bottom: 0; right: 0; } .functionBlock01 .box02 { margin-top: 80px; } .functionBlock01 .box02 > .image01 { width: 106%; margin-left: -4%; margin-bottom: 0; } .functionBlock02 > li { padding-top: 0; padding-bottom: 60px; } .functionBlock02 > li > .blockIn01 { display: block; padding: 0; } .functionBlock02 .titleBlock { position: static; width: 100%; margin-top: 0; } .functionBlock02 .titleBlock > .title01 { min-height: inherit; font-size: 2.4rem; line-height: 1.4; } .functionBlock02 .titleBlock > .title01 > span { min-height: 157px; padding: 20px 5.333%; } .functionBlock02 .titleBlock > .text01, .functionBlock02 .titleBlock > .btn01 { display: none; } .functionBlock02 .contentsBlock { width: 100%; margin: 0 auto; padding: 30px 6.66% 0; } .functionBlock02 .contentsBlock > .box01 { display: block; } .functionBlock02 .contentsBlock > .box01 > .text01 { margin-top: 35px; text-align: center; } .functionBlock02 .contentsBlock > .box01 > .btn01 { margin-top: 35px; } .functionBlock02 .contentsBlock > .box02 > .companyList { margin-top: 30px; } .functionBlock02 .contentsBlock > .box02 > .image01 { margin-top: 30px; } .functionList01 { display: block; margin-top: 40px; } .functionList01 > li { padding: 0 5px 36px; } .functionList01.type01 > li { align-items: flex-start; } .functionList01 > li .image01 { width: 92px; margin-left: -10px; } .functionList01 > li .image01.type01 { width: 78px; margin-left: 5px; } .functionList01 > li .image01.type02 { width: 86px; margin-left: 0; } .functionList01.type01 > li > .image01 { margin-top: 10px; } .functionList01 > li > .column01 { width: calc(100% - 105px); } .functionList01 > li .title01 { margin-top: -6px; line-height: 1.33; } .functionList01 > li .text01 { margin-top: 6px; } .functionList01.type01 > li .text01 { margin-top: 10px; } .functionList02 { padding: 30px 6.66%; } .functionList02 > ul { display: block; } .functionList02 > ul > li { margin: 0; padding: 25px 6.96%; border-bottom: solid 1px #7e8799; } .functionBlock02 > li.fixed .titleBlock { position: static; } .functionList02 > ul > li:first-child { border-top: solid 1px #7e8799; } .functionList02 > ul > li dl > dt { font-size: 1.8rem; } .functionList02 > ul > li > a:hover dl > dt { text-decoration: none; } .functionList02 > ul > li dl > dd { line-height: 1.6; } .solutionBlock01 { padding-top: 15px; padding-bottom: 50px; } .solutionBlock01 > .blockIn01::before,.solutionBlock01 > .blockIn01::after { opacity: .25; } .solutionBlock01 > .blockIn01::before { top: -18.66vw; left: 0; width: 33.33vw; height: 52vw; } .solutionBlock01 > .blockIn01::after { top: 5.33vw; right: 2%; width: 24.26vw; height: 50.133vw; } .solutionBlock02 { padding-top: 60px; padding-bottom: 0; margin-bottom: -20px; } .solutionBox02 { margin-top: 80px; } .solutionBox02 > .box01 { display: block; margin-top: 60px; } .solutionBox02 > .heading06 + .box01 { margin-top: 45px; } .solutionBox02 > .box01:not(:first-child) { margin-top: 60px; } .solutionBox02 > .box01 > .image01 { width: 100%; margin-top: 30px; } .solutionBox02 > .box01 > .column01 { width: 100%; margin-top: 0; } .solutionBox02 > .box01 > .column01 > .iconBox01 > .icon01 { margin-left: -2px; } .solutionBox02 > .box01 > .column01 > .iconBox01 > .column01 > .text01 { margin-bottom: 6px; line-height: 1.33; } .solutionBox02 > .box01 > .column01 > .title01 { margin-top: 30px; } .solutionBox02 > .box01 > .column01 > .title01 > .text01 { padding: 1px 25px 4px; } .solutionBox02 > .box01 > .column01 > .title01 > .text02 { margin-top: 8px; font-size: 2.2rem; } .solutionBox02 > .box01 > .column01 > .text01 { margin-top: 18px; } .solutionBox02 > .box01 > .column01 > .text02 { margin-top: 4px; } .solutionBox02 > .box01 > .column01 > .btn03:not(.type02) { display: none; } .solutionBox02 > .box01 > .column01 > .btn03.type02 { display: block; } .solutionBox02 > .btn03 { margin-top: 40px; } .solutionBox02 .btn03 > a { width: 100%; max-width: inherit; padding-top: 10px; padding-bottom: 14px; font-size: 1.8rem; line-height: 1.33; } .articleHeading01 { font-size: 2.8rem; } .subBlock01 > .date01 { margin-right: 10px; } .subBlock01 > .category01 { margin-right: 10px; top: 0; } .subBlock01 > .category01 > li { padding-top: 1px; padding-bottom: 3px; line-height: 1.2; } .closeTxt01 { padding-left: 8px; padding-right: 8px; } .subBlock01 > .tagList01 > li:not(:last-child)::before { content: none; } .catList01 { margin-top: -10px; } .catList01 > li { padding-left: 7px; padding-right: 7px; margin-top: 10px; } .catList02 > ul { margin-top: 25px; } .catList02 > ul > li:not(:first-child) { margin-top: 15px; } .catList02 > ul > li > a:hover > .text01 { text-decoration: none; } .bnrList01 > li a:hover { opacity: 1.0; } .tagList01 > li { font-size: 1.2rem; } .newsBlock01 { display: block; } .newsBlock01 > .column01 { width: 100%; margin-top: 20px; } .newsBlock01 > .column01 > .title01 > a:hover { text-decoration: none; } .newsBlock01 > .column01 > .text01 { margin-top: 10px; } .newsBlock01 > .column02 { width: 100%; } .newsBlock01 > .column02 > .image01 > a:hover { opacity: 1.0; } .newsBlock01 > .column01 > .btn03, .newsBlock01 > .column02 > .btn03 { display: none; } .newsBlock01 > .linkTxt01 { display: block; margin-top: 50px; font-size: 1.6rem; } .newsBlock01 > .btn03 { display: table; } .newsBlock01 > .linkTxt01 .inner01::after { position: relative; display: inline-block; width: 18px; height: 19px; margin-left: 4px; bottom: -.2em; z-index: 2; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%231a237e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; content: ""; } .newsBlock02 { padding: 70px 0 80px; } .shopInfoBlock01 { margin-top: 0; } .shopInfoBlock01 > .box01 { display: block; } .shopInfoBlock01 > .box01 > .column01 { width: 100%; } .shopInfoBlock01 > .box01 > .column02 { width: 100%; margin-top: 20px; } .shopInfoBlock01 > .box01 > .column02 > dl > dt { width: 100%; padding-right: 0; margin-bottom: 2px; float: none; clear: none; font-size: 1.6rem; } .shopInfoBlock01 > .box01 > .column02 > dl > dd { margin-left: 0; margin-bottom: 24px; font-size: 1.6rem; } .shopInfoBlock01 > .box01 > .column02 > dl > dd:first-of-type { margin-top: 0; margin-bottom: 24px; } .shopInfoBlock01 > .text01 { margin-top: 10px; font-size: 1.6rem; } .shopInfoBlock02 { margin-top: 40px; } .shopInfoBlock02 > .box01 { display: block; } .shopInfoBlock02 > .box01 > .column01 { width: 100%; } .shopInfoBlock02 > .box01 > .column02 { width: 100%; margin-top: 35px; } .shopInfoBlock02 > .box01 > .column02 > .title01 { margin-top: 0; } .shopInfoBlock02 > .box01 > .column02 > dl > dt { margin-top: 25px; } .shopInfoBlock02 > .box01 > .column02 > dl > dd { font-size: 1.6rem; } .taskBlock01 { margin-top: 40px; } .taskBlock01 > .box01 { padding: 24px 5.97% 40px; } .taskBlock01 > .box01::before { bottom: -20px; border-width: 20px 19px 0 19px; } .taskBlock01 > .box01::after { bottom: -19px; border-width: 19px 18px 0 18px; } .taskBlock01 > .box02 { padding: 30px 5.97% 40px; } .taskBlock01 > .box01 > dl, .taskBlock01 > .box02 > dl { display: block; } .taskBlock01 > .box01 > dl > dt, .taskBlock01 > .box02 > dl > dt { position: relative; display: table; margin: -10px auto 10px; padding-left: 0; width: auto; } .taskBlock01 > .box01 > dl > dt::before, .taskBlock01 > .box02 > dl > dt::before { left: -40px; } .taskBlock01 > .box01 > dl > dd, .taskBlock01 > .box02 > dl > dd { width: 100%; } .taskBlock01 > .box01 > dl > dd > ul > li, .taskBlock01 > .box02 > dl > dd > ul > li { padding-left: 18px !important; font-size: 1.6rem; } .taskBlock01 > .box01 > dl > dd > ul > li:not(:first-child), .taskBlock01 > .box02 > dl > dd > ul > li:not(:first-child) { margin-top: 20px; } .taskBlock01 > .box01 > dl > dd > ul > li::before, .taskBlock01 > .box02 > dl > dd > ul > li::before { width: 13px; } .caseBlock01In { padding-top: 40px; padding-bottom: 40px; } .caseBlock01In > .title01 { line-height: 1.17 !important; } .caseBlock01In > .inner01 { display: block; } .caseBlock01In > .inner01 > .icon01 { margin-left: auto; margin-right: auto; } .caseBlock01In > .inner01 > .btn03 { margin-left: auto; margin-right: auto; margin-top: 24px; } .caseBlock01In > .inner01 > .btn03 > a:hover { color: #fff; } .caseBlock01In > .inner01 > .column01 { width: 100%; margin-top: 30px; } .caseBlock01In > .inner01 > .column01 > .text01 { margin-top: 4px; font-size: 1.6rem; } .caseBlock01In > .inner02 { display: block; max-width: 1000px; } .caseBlock01In > .inner02 > .image01 { width: 100%; margin-right: 0; } .caseBlock01In > .inner02 > .column01 { width: 100%; margin-top: 30px; } .caseBlock01In > .inner02 > .column01 > .title01 { font-size: 1.6rem; font-weight: 700; } .caseBlock01In > .inner02 > .column01 > .text01 { margin-top: 4px; } .caseBlock01In > .inner02 > .column01 > dl { overflow: hidden; } .caseBlock01In > .inner02 > .column01 > dl > dd { float: left; } .tabArea01:not(:first-child) { margin-top: 70px; } .tabList01 { display: flex; flex-wrap: wrap; } .tabList01 > li { min-width: 150px; max-width: 50%; margin-right: 0; } .tabList01 > li > a { padding-top: 11px; padding-bottom: 12px; font-size: 1.6rem; } .tabBlock01 { padding: 25px 7.462% 30px; } .tabInner01 { display: block; } .tabInner01 > .title01 { margin-bottom: 10px; } .tabInner01 > ul { display: block; width: auto; margin-left: 10px; } .tabInner01 > ul > li { width: 100%; } .tabInner01 > ul > li { margin-right: 0; } .tabInner01 > ul > li > a { font-size: 1.6rem; } .item01 > .image01 > a { display: block; overflow: hidden; } .item01 > .image01 > a > img { transition: all .3s; } .item01 > .image01 > a:hover > img { transform: scale(1.0,1.0); } .item01 > .title01 { font-size: 2.0rem; line-height: 1.4; } .item01 > .text01 { margin-top: 10px; } .colWrap01 { margin-top: 50px; } .colWrap01 > .item01 { width: 100%; } .colWrap01 > .item01:not(:first-child) { margin-left: 0; } .colWrap01 > .item01:nth-child(n+2) { margin-top: 40px; } .col01 { width: 100%; margin-top: 50px; } #download .col01:nth-child(n+2) { margin-top: 50px; } .col01:not(:nth-child(3n+1)) { margin-left: 0; } .col01 > .image01 > a:hover > img { transform: scale(1.0,1.0); } .col01 > .inner01 { padding: 20px 4.47%; } .col01 > .inner01 > .title01 > a:hover { text-decoration: none; } .frameArea01 { padding: 35px 4.4%; } .heading10 + .frameArea01 { margin-top: 30px; padding-bottom: 40px; } .frameArea01 > .title01 { margin-top: -8px; font-size: 2.5rem; } .frameArea01 > .text01 { margin-top: 15px; } .frameArea01 > .btn01 { margin-top: 25px; max-width: 300px; } .frameArea01 > .btn01 > a { padding-top: 14px; padding-bottom: 18px; font-size: 1.6rem; } .frameArea01 > .btn01 > a > .inner01 { padding-right: 24px; } .frameArea01 > .box01 { display: block; margin: 20px auto 0; width: 94%; } .frameArea01 > .box01 > .column01 { width: 100%; padding-bottom: 60px; } .frameArea01 > .box01 > .column01:last-child { padding-bottom: 0; } .frameArea01 > .box01 > .column01:nth-child(odd) { padding-right: 0; } .frameArea01 > .box01 > .column01:nth-child(even) { padding-left: 0; } .frameArea01 > .box01 > .column01 + .column01 { padding-top: 40px; border-top: solid 1px #a1a19f; border-left: none; } .frameArea01 > .box01 > .column01 > .icon01 { height: 31.866vw; } .frameArea01 > .box01 > .column01:first-child > .icon01 { margin-top: -15px; } .frameArea01 > .box01 > .column01 > .title01 { margin-top: 18px; font-size: 2.4rem; } .frameArea01 > .box01 > .column01 > .text01 { margin-top: 14px; line-height: 1.5; } .frameArea01 > .box01 + .btn01 { max-width: 300px; margin-top: 40px; } .frameArea01 > .box01 + .btn01 > a { padding-top: 8px; padding-bottom: 12px; font-size: 1.6rem; } .frameArea02 > .text01 { font-size: 1.6rem; } .cvArea01 { margin-top: 50px; padding: 25px 4.54%; } .cvArea01 > .title01 { font-size: 1.8rem; line-height: 1.27; } .cvArea01 > .title01::before,.cvArea01 > .title01::after { top: -3px; height: calc(100% + 10px); } .cvArea01 > .text01 { margin-top: 20px; font-size: 2.0rem; } .cvArea01 > .text02 { margin-top: 18px; } .cvArea01 > .btn01 { max-width: 300px; width: 100%; } .cvArea02 { margin-top: 60px; padding: 25px 4.54% 30px; } .cvArea02 > .title01 { font-size: 1.6rem; line-height: 1.875; } .cvArea02 > .text01 { margin-top: 15px; font-size: 1.6rem; } .cvArea02 > .btn01 { max-width: 415px; width: 100%; margin-top: 20px; } .cvArea03 { padding: 40px 6.66%; background-image: url(../../solution/images/bg03s.jpg); } .cvArea03 > .title01 { font-size: 2.4rem; line-height: 1.41; } .cvArea03 > .box01 { display: block; margin-top: 40px; } .cvArea03 > .btn01 { max-width: 300px; } .companyList { justify-content: space-between; margin-top: 55px; } .companyList > li { width: 48.67%; } .companyList > li:not(:nth-child(3n+1)) { margin-left: 0; } .companyList > li:nth-child(n+3) { margin-top: 10px; } .list01 > li { padding-bottom: 40px; } .list01 > li:not(:first-child) { margin-top: 40px; } .list02 { margin-top: 15px; font-size: 1.6rem; } .list03 { margin-top: 40px; } .list03 > li > .text01 { margin-left: 0; margin-top: 10px; font-size: 1.4rem; } .list03 > li > .subBlock01 > .tagList01 { max-width: inherit; width: 100%; } .list03 + .btn03 { max-width: 330px; width: 100%; margin-top: 60px; } .list03 + .btn03 > a { max-width: inherit; } .list04 { display: block; margin-top: 30px; } .list04 > li { width: 100%; padding: 25px 7.27%; border-radius: 20px; } .list04 > li:nth-child(n+2) { margin-top: 15px; } .list04 > li:not(:nth-child(3n+1)) { margin-left: 0; } .list04 > li > .text01 { padding: 0 8px 5px; } .list04 > li > .text02 { margin-top: 15px; } .list04 > li > .title01 { margin-top: 15px; font-size: 2.2rem; } .list04 > li > .icon01 { margin-top: 20px; height: 25vw; } .list04 > li > .icon02 { margin-top: 18px; height: 24vw; } .list04.type01 > li { padding: 30px 6.66% 25px; } .list04.type01 > li > .title01 { font-size: 2.1rem; } .list04.type01 > li > .text02 { max-width: 100%; margin-top: 20px; } .list05 { margin-top: 40px; } .list05 > li { width: 49%; } .list05 > li:nth-child(n+3) { margin-top: 6px; } .list06 { margin-top: 60px; display: block; } .list06 > li { width: 100%; } .list06 > li:nth-child(2), .list06 > li:nth-child(2n+3), .list06 > li:nth-child(2n+4) { margin-top: 50px; } .list06 > li:nth-child(2n+4) { padding-top: 0; } .list06 > li.is_hover > .image01 > a[href] > img { transform: scale(1.0,1.0); } .list06 > li > .button01 { margin-top: 20px; } .list06 > li > .button01 > a { padding-left: 20px; padding-bottom: 6px; } .list06 > li > .button01 > a[href]::after { right: 0; width: 36px; height: 36px; } .list06 > li.is_hover > .button01 > a[href]::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2029.42%2029.42%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M14.71%2C0A14.71%2C14.71%2C0%2C1%2C1%2C0%2C14.71%2C14.72%2C14.72%2C0%2C0%2C1%2C14.71%2C0Zm0%2C13.24H8.83v2.94h5.88V20.6l5.89-5.89L14.71%2C8.83Z%22%2F%3E%3C%2Fsvg%3E'); } .list06 > li > .button01 > a > .text01 { font-size: 2.8rem; } .list06 > li > .button01 > a > .text02 { margin-top: 3px; font-size: 1.2rem; } .list07 { display: block; margin-top: 50px; } .list07 > li { width: 100%; } .list07 > li:nth-child(1), .list07 > li:nth-child(2), .list07 > li:nth-child(3) { margin-left: 0; } .list07 > li:nth-child(n+2) { margin-top: 50px; } .list07 > li > .icon01 { width: 33%; margin-left: 8%; margin-right: 0; } .list07 > li > .text01 { display: block; width: 59%; font-size: 4.8vw; line-height: 1.5; } .list07 + .btn03 { margin-top: 50px; } .flow01 { padding: 0; margin: 90px auto; } .flow01 > li { width: 50.6%; padding-bottom: 10.66vw; margin: 0 auto; } .flow01 > li:not(:last-child)::after { position: absolute; content: ""; transform: translateY(0); left: 50%; margin-left: -1px; top: calc(100% + 5px); width: 2px; height: calc(16vw + 10px); background-color: #d85b92; } .flow01 > li:nth-child(2) { width: 51.5%; left: -.5%; } .flow01 > li:nth-child(n+2) { margin-top: 16vw; } .flow01 > li::before { width: 145%; font-size: 6.4vw; line-height: 1.4; top: inherit; bottom: 0; } .flow01 > li:not(:last-child) > .icon01:after { content: none; } .parallax01 { height: 63.8vw; } .parallax01::before { width: 45%; } .btn01.type01 { max-width: 300px; width: 100%; margin-top: 40px; } .btn01 > a { padding-top: 8px; padding-bottom: 12px; font-size: 1.6rem; box-shadow: none; } .btn01 > a:hover { color: #fff; } .btn01 > a:hover::before { content: none; } .btn01 > a > .inner01::before { width: 18px; height: 18px; } .btn01 > a > .inner01::before, .btn01 > a > .inner01::after { top: 52%; } .btn01 > a:hover > .inner01::before { background-color: #fff; } .btn01 > a > .inner01::after { width: 8px; height: 8px; bottom: .5em; right: 5px; } .btn01 > a:hover > .inner01::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2326bfa7%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .tabArea01 + .btn03, .editorArea01 + .btn03 { margin-top: 40px; } .btn03 > a { padding-left: 35px; padding-right: 35px; font-size: 1.6rem; min-width: inherit; max-width: 315px; } .btn03.type01 { max-width: 375px; width: 100%; } .btn03.type01 > a { width: 100%; font-size: 1.6rem; max-width: inherit; } .btn03 > a:hover { color: #fff; } .btn03 > a:hover::before { content: none; } .btn03 > a > .inner01 { padding-right: 22px; } .btn03 > a > .inner01::before { width: 16px; height: 16px; } .btn03 > a:hover > .inner01::before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .subText01 { margin-top: 40px; max-width: 100%; margin-right: auto; margin-left: 0; } .mainImage01 { min-width: inherit; } .mainImage01::before { min-width: inherit; left: 0; transform: translateX(0); height: 28px; min-height: inherit; background-image: url(../images/bg03s.png); background-size: 100% 100%; z-index: 1; } .mainImage01 > img { width: 100%; } .txt01 { margin-bottom: 0; font-size: 1.6rem; } .txt02 { margin-top: 50px; font-size: 2.0rem; text-align: left; letter-spacing: .07em; } .block01 .txt02 { color: #fff; } .txt03 { font-size: 1.4rem; text-align: left; } .block01 .txt03 { color: #fff; } .txt04 { font-size: 2.2rem; line-height: 1.63; letter-spacing: .02em; } .txt05 { margin-top: 30px; font-size: 1.2rem; text-align: left; } .link03 > a { font-size: 1.6rem; } .link03 > a::before { top: 5px; } .link03 > a:hover::after { opacity: 1.0; } .pagination { margin-top: 40px; } .pagination ul > li > a, .pagination ul > li > span:not(.dots) { width: 30px; height: 30px; } .pagination ul > li > a.prev:hover::before, .pagination ul > li > a.next:hover::before { border-top-color: #3e3a39; border-right-color: #3e3a39; } .pagination ul > li > a:not(.prev):not(.next):hover, .pagination ul > li > a:not(.prev):not(.next):active { background-color: #f3f3f1; color: #3e3a39; } .js_fadeIn04 > li::after { height: 0 !important; transition: height .3s .4s; } .js_fadeIn04 li.is_active::after { height: calc(16vw + 10px) !important; } } @media screen and (max-width: 360px) { .heading04 { font-size: 8.0vw; } .heading04 > .text01 { font-size: 6.133vw; } .heading05 { font-size: 6.133vw; } .heading06 { font-size: 5.866vw; } .heading08 { font-size: 6.4vw; } .heading09 > span { font-size: 5.866vw; } .heading10 { font-size: 6.4vw; } .conceptBlock01 > .title01 { font-size: 5.866vw; } .subBlock01 > .category01 > li { padding-top: 2px; padding-left: 6px; padding-right: 6px; font-size: 1.2rem; } .subBlock01 > .closeTxt01 { font-size: 1.2rem; top: 0; } .titleArea01 > .title01 { font-size: 7.466vw; } .frameArea01 > .box01 > .column01 > .title01 { font-size: 6.4vw; } .frameArea01 > .box01 > .column01 > .text01 { font-size: 5.333vw; } .solutionBox02 > .box01 > .column01 > .title01 > .text02 { font-size: 5.866vw; } .solutionBox02 > .box01 > .column01 > .iconBox01 > .column01 > .text01 { font-size: 5.6vw; } .solutionBox02 > .btn03 > a { font-size: 4.8vw; } .functionList01 > li .title01 { font-size: 5.6vw; } .tabList01 > li { min-width: 130px; } .cvArea02 > .btn01 > a { padding-left: 20px; padding-right: 20px; font-size: 1.5rem; } .cvArea03 > .title01 { font-size: 6.4vw; } .list04 > li > .text01 { font-size: 6.4vw; } .list04.type01 > li > .title01 { font-size: 5.6vw; } .txt04 { font-size: 5.866vw; } .pagination ul > li { margin: 0 2px; } .pagination ul > li > a, .pagination ul > li > span:not(.dots) { width: 28px; height: 28px; } } /*-------------------------------------------- ブロックエディタカスタムスタイル-ボタン --------------------------------------------*/ .contents01 .is-style-button02 { display: table; margin-top: 40px; } .contents01 .functionWrap01 .is-style-button02 { margin-left: auto; margin-right: auto; } .contents01 .is-style-button02 > a { position: relative; z-index: 1; display: block; min-height: 50px; padding: 9px 40px 11px; border: solid 1px #d2b46e; border-radius: 60px; background-color: #d2b46e; color: #fff; text-align: center; text-decoration: none; overflow: hidden; font-weight:700; transition: color .3s; } .contents01 .is-style-button02 > a:hover { color: #d2b46e; } .contents01 .is-style-button02 > a::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .contents01 .is-style-button02 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .contents01 .is-style-button02 > a > .inner02 { position: relative; display: initial; padding-right: 22px; } .contents01 .is-style-button02 > a > .inner02::before { position: absolute; bottom: .3em; right: 0; width: 16px; height: 16px; transition: background .3s; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; content: ""; } .contents01 .is-style-button02 > a:hover > .inner02::before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d2b46e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .contents01 .is-style-button03 { display: inline-block; margin-top: 35px; } .contents01 .is-style-button03 > a { position: relative; z-index: 1; display: block; padding: 14px 40px 18px; border: solid 3px #26bfa7; width: 100%; border-radius: 100px; color: #fff; font-weight: 700; background-color: #26bfa7; line-height: 1.4; overflow: hidden; text-align: left; text-decoration: none; } .contents01 .is-style-button03 > a:hover { color: #26bfa7; } .contents01 .is-style-button03 > a::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .contents01 .is-style-button03 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .contents01 .is-style-button03 > a > span { position: relative; display: inline-block; padding-right: 25px; } .contents01 .is-style-button03 > a > span::before, .contents01 .is-style-button03 > a > span::after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); transition: all .3s; } .contents01 .is-style-button03 > a > span::before { right: 0; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; } .contents01 .is-style-button03 > a:hover > span::before { background-color: #26bfa7; } .contents01 .is-style-button03 > a > span::after { width: 8px; height: 8px; right: 6px; z-index: 2; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2326bfa7%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } .contents01 .is-style-button03 > a:hover > span::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .contents01 .is-style-button04 { display: table; margin-top: 40px; } .contents01 .functionWrap01 .is-style-button04 { margin-left: auto; margin-right: auto; } .contents01 .is-style-button04 > a { position: relative; z-index: 1; display: block; min-width: 235px; min-height: 50px; padding: 9px 40px 11px; border: solid 1px #d2b46e; border-radius: 60px; background-color: #d2b46e; color: #fff; text-align: center; text-decoration: none; overflow: hidden; font-weight: 700; transition: color .3s; } .contents01 .is-style-button04 > a:hover { color: #d2b46e; } .contents01 .is-style-button04 > a::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .contents01 .is-style-button04 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .contents01 .is-style-button04 > a > span { position: relative; display: initial; padding-right: 24px; } .contents01 .is-style-button04 > a > span::before { position: absolute; bottom: 0; right: 0; width: 20px; height: 21px; transition: background .3s; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M3%2019h18v2H3v-2zm10-5.828L19.071%207.1l1.414%201.414L12%2017%203.515%208.515%204.929%207.1%2011%2013.17V2h2v11.172z%22%2F%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; content: ""; } .contents01 .is-style-button04 > a:hover > span::before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill%3D%22%23d2b46e%22%20d%3D%22M3%2019h18v2H3v-2zm10-5.828L19.071%207.1l1.414%201.414L12%2017%203.515%208.515%204.929%207.1%2011%2013.17V2h2v11.172z%22%2F%3E%3C%2Fsvg%3E'); } @media screen and (max-width: 767px) { .contents01 .is-style-button02 > a { min-width: inherit; padding-left: 30px; padding-right: 30px; font-size: 1.6rem; } .contents01 .is-style-button02 > a:hover { color: #ffffff; } .contents01 .is-style-button02 > a::before { content: none; } .contents01 .is-style-button02 > a > .inner02 { padding-right: 22px; } .contents01 .is-style-button02 > a > .inner02::before { width: 16px; height: 16px; } .contents01 .is-style-button02 > a:hover > .inner02::before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .contents01 .is-style-button03 > a:hover { color: #fff; } .contents01 .is-style-button03 > a::before { content: none; } .contents01 .is-style-button03 > a:hover > span::before { background-color: #fff; } .contents01 .is-style-button03 > a:hover > span::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2306c3cb%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .contents01 .is-style-button04 > a { padding-left: 30px; padding-right: 30px; } .contents01 .is-style-button04 > a:hover { color: #fff; } .contents01 .is-style-button04 > a::before { content: none; } .contents01 .is-style-button04 > a:hover > span::before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M3%2019h18v2H3v-2zm10-5.828L19.071%207.1l1.414%201.414L12%2017%203.515%208.515%204.929%207.1%2011%2013.17V2h2v11.172z%22%2F%3E%3C%2Fsvg%3E'); } } /*-------------------------------------------- ブロックエディタカスタムスタイル-テーブル --------------------------------------------*/ .contents01 .is-style-table01 table, .contents01 .is-style-table02 table { border-bottom: solid 1px #aca9a2; border-right: solid 1px #aca9a2; } .contents01 .is-style-table01 table th, .contents01 .is-style-table02 table th { background-color: #e8d9b6; } .contents01 .is-style-table01 table td, .contents01 .is-style-table02 table td { text-align: center; } .contents01 .is-style-table01 table th, .contents01 .is-style-table01 table td { padding: 10px; border-top: solid 1px #aca9a2; border-left: solid 1px #aca9a2; } .contents01 .is-style-table02 table th, .contents01 .is-style-table02 table td { padding: 10px; border-top: solid 1px #aca9a2; border-left: solid 1px #aca9a2; } .contents01 .is-style-table02 table tr > td:first-child { background-color: #e8d9b6; } .contents01 .is-style-table03 table tr { border-bottom: solid 1px #aca9a2; } .contents01 .is-style-table03 table th, .contents01 .is-style-table03 table td { padding-bottom: 20px; padding-left: 10px; padding-right: 10px; } .contents01 .is-style-table03 table tbody tr th, .contents01 .is-style-table03 table tbody tr td { padding-top: 18px; } .contents01 .is-style-table03 table td { text-align: center; } @media screen and (max-width: 767px) { .contents01 .is-style-table01 table th, .contents01 .is-style-table01 table td { padding: 4px 5px; } .contents01 .is-style-table02 table th, .contents01 .is-style-table02 table td { padding: 4px 5px; } .contents01 .is-style-table03 table th, .contents01 .is-style-table03 table td { padding-bottom: 10px; padding-left: 5px; padding-right: 5px; } .contents01 .is-style-table03 table tbody tr th, .contents01 .is-style-table03 table tbody tr td { padding-top: 6px; } .contents01 .is-style-table03 table td { text-align: center; } } /*-------------------------------------------- ブロックエディタカスタムスタイル-その他 --------------------------------------------*/ .contents01 .is-style-annotationtext01 { font-size: 1.6rem; text-align: right; } .is-style-framearea01 { padding: 30px 40px; border-radius: 20px; background-color: #f3f3f1; } .is-style-framearea01:not(:first-child) { margin-top: 60px; } .is-style-framearea01 + .is-style-framearea01 { margin-top: 40px; } .is-style-framearea01 .inner { display: flex; flex-wrap: wrap; justify-content: space-between; } .is-style-framearea01 .inner > .column01 { width: 200px; } .is-style-framearea01 .inner > .column02 { width: calc(100% - 240px); } .is-style-framearea01 .inner > .column02 > .title { font-weight: 700; font-size: 2.0rem; line-height: inherit; } .is-style-framearea01 .inner > .column02 > .title a { color: #3e3a39; text-decoration: none; } .is-style-framearea01 .inner > .column02 > .title a:hover { text-decoration: underline; } .is-style-framearea01 .inner > .column02 > .text { margin-top: 20px; line-height: inherit; } @media screen and (max-width: 1000px) { .is-style-framearea01 .inner > .column01 { width: 140px; } .is-style-framearea01 .inner > .column02 { width: calc(100% - 160px); } } @media screen and (max-width: 767px) { .contents01 .is-style-annotationtext01 { font-size: 1.4rem; text-align: left; } .is-style-framearea01 { padding-left: 7.164%; padding-right: 7.164%; } .is-style-framearea01 .inner { display: block; } .is-style-framearea01 .inner > .column01 { margin-top: 20px !important; width: 100%; } .is-style-framearea01 .inner > .column02 { width: 100%; margin-top: 15px; } .is-style-framearea01 .inner > .column02 > .title { font-size: 1.8rem; } } /*-------------------------------------------- ブロックエディタ共通スタイル --------------------------------------------*/ .wp-block { background-color: rgba(255,255,255,0); } .wp-block-columns:not(:first-child), .wp-block-media-text:not(:first-child), .wp-block-group:not(:first-child), .wp-block-gallery:not(:first-child) { margin-top: 60px; } .wp-block-image:not(:first-child) { margin-top: 30px; } .wp-block-columns { margin-bottom: 0; } .wp-block-media-text .wp-block-media-text__content { margin-top: 0; margin-bottom: 0; } .wp-block-group__inner-container:after { content: ""; display: block; clear: both; } .wp-block-image { margin-bottom: 0; } .wp-block-image.is-style-rounded img { border-radius: 20px; } .wp-block-group__inner-container .wp-block-image + * { margin-top: 0; } .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; } .wp-block-image.alignleft { margin-right: 40px; float: left; } .wp-block-image.alignright { margin-left: 40px; float: right; } .wp-block-image .alignleft { margin-right: 40px; } .wp-block-image .alignright { margin-left: 40px; } .wp-block-table .has-text-align-left { text-align: left !important; } .wp-block-table .has-text-align-right { text-align: right !important; } .wp-block-table thead { border-bottom: solid 1px #b0b0b0; } .wp-block-table td, .wp-block-table th { border: inherit; } .wp-block-separator + .is-style-annotationtext01 { margin-top: -50px; } .blocks-gallery-caption, .wp-block-embed figcaption, .wp-block-image figcaption, .wp-block-table figcaption { margin-top: .8em; margin-bottom: 0; color: #969696; font-size: inherit; text-align: center; } .wp-block-buttons { margin-top: 40px; } .wp-block-button__link { font-size: inherit; } .wp-block-buttons:first-child { margin-top: 0; } .wp-block-buttons > * { margin-top: 0 !important; } .wp-block-buttons .wp-block-button { margin-bottom: 0; margin-right: 0; display: table; } .wp-block-embed { margin-left: auto; margin-right: auto; margin-bottom: 0; text-align: center; } .wp-block-embed:not(:first-child) { margin-top: 40px; } .wp-block-embed.is-type-video { max-width: 720px; } .wp-block-embed.is-type-video .wp-block-embed__wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wp-block-embed.is-type-wp-embed .wp-block-embed__wrapper iframe { width: 100%; } .wp-block-separator { width: 100% !important; margin-top: 60px; margin-bottom: 60px; background-color: #a8a8a7; height: 1px; border: none; max-width: 100% !important; opacity: 1.0; } .wp-block-table:not(:first-child) { margin-top: 40px; } .wp-block-quote { position: relative; margin-top: 60px; padding: 30px 40px; border-radius: 20px; border: none; background-color: #f3f3f1; } .wp-block-quote cite { width: 100%; display: block; color: #969696; margin-top: 20px; text-align: right; font-size: 1.4rem; font-style: normal; } .wp-block-quote::before { position: absolute; top: -25px; left: 10px; width: 64px; height: 64px; content: ""; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D.cls-2%7Bfill%3A%23d2b46e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%201%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22%E8%BF%BD%E5%8A%A0%E5%88%86%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M0%2C0H50V50H0Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M9.55%2C36.09c-2.15-2.28-3.3-4.84-3.3-9%2C0-7.3%2C5.12-13.83%2C12.56-17.06l1.86%2C2.87c-6.94%2C3.76-8.3%2C8.63-8.84%2C11.71a7.45%2C7.45%2C0%2C0%2C1%2C4-.65%2C7.29%2C7.29%2C0%2C0%2C1-.57%2C14.56A8.08%2C8.08%2C0%2C0%2C1%2C9.55%2C36.09Zm20.83%2C0c-2.14-2.28-3.3-4.84-3.3-9%2C0-7.3%2C5.12-13.83%2C12.57-17.06l1.86%2C2.87c-6.95%2C3.76-8.31%2C8.63-8.85%2C11.71a7.48%2C7.48%2C0%2C0%2C1%2C4-.65%2C7.29%2C7.29%2C0%2C0%2C1-.57%2C14.56A8.08%2C8.08%2C0%2C0%2C1%2C30.38%2C36.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } .wp-block-quote::after { position: absolute; bottom: -25px; right: 10px; width: 64px; height: 64px; top: inherit; left: inherit; content: ""; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D.cls-2%7Bfill%3A%23d2b46e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%202%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22%E8%BF%BD%E5%8A%A0%E5%88%86%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M0%2C0H50V50H0Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M40.45%2C13.91c2.15%2C2.28%2C3.3%2C4.84%2C3.3%2C9%2C0%2C7.3-5.12%2C13.83-12.56%2C17.06l-1.86-2.87c6.94-3.76%2C8.3-8.63%2C8.84-11.71a7.45%2C7.45%2C0%2C0%2C1-4%2C.65%2C7.29%2C7.29%2C0%2C0%2C1%2C.57-14.56A8.08%2C8.08%2C0%2C0%2C1%2C40.45%2C13.91Zm-20.83%2C0c2.14%2C2.28%2C3.3%2C4.84%2C3.3%2C9%2C0%2C7.3-5.12%2C13.83-12.57%2C17.06L8.49%2C37.08c7-3.76%2C8.31-8.63%2C8.85-11.71a7.48%2C7.48%2C0%2C0%2C1-4%2C.65%2C7.29%2C7.29%2C0%2C0%2C1%2C.58-14.56%2C8.08%2C8.08%2C0%2C0%2C1%2C5.72%2C2.45Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; } .editorArea01 { padding-top: 52px; } .editorArea01.type01 { padding-top: 0; } .editorArea01 a img { transition: opacity .3s; } .editorArea01 a:hover img { opacity: .6; } .editorArea01 table { width: 100%; } .editorArea01 table th { font-weight: 700; } .editorArea01 [style*=border-width] { border-style: solid; } .editorArea01 mark { font-style: normal; font-weight: normal; } .editorArea01 p { margin-top: 35px; word-break: break-all; line-height: 1.83; } .editorArea01 p .name { font-size: 1.6rem; } .editorArea01 .eyecatch { margin-top: 60px; } .editorArea01 .eyecatch + * { margin-top: 50px !important; } .editorArea01 p + .is-style-framearea01 { margin-top: 40px; } .editorArea01 p + p { margin-top: 30px; } .editorArea01 p.contents01 .is-style-annotationtext01 { font-size: 1.4rem; text-align: right; } .editorArea01 a { color: #d85b94; } .editorArea01 a[href*="#"] { color: #3e3a39; text-decoration: none; } .editorArea01 a[href*="#"]:hover { text-decoration: underline; } .editorArea01 a > .textLinkEx { position: relative; display: initial; margin-right: 4px; } .editorArea01 a > .textLinkEx::after { position: relative; display: inline-block; width: 18px; height: 19px; margin-left: 2px; bottom: -.1em; z-index: 2; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010.5%2010.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23d85b94%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%2018-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.08%2C1.75V2.92H1.17V9.33H7.58V6.42H8.75v3.5a.58.58%2C0%2C0%2C1-.58.58H.58A.58.58%2C0%2C0%2C1%2C0%2C9.92V2.33a.58.58%2C0%2C0%2C1%2C.58-.58ZM10.5%2C0V4.67H9.33V2L4.79%2C6.54%2C4%2C5.71%2C8.51%2C1.17H5.83V0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 0 0/100%; content: ""; } .editorArea01 ul, .editorArea01 ol { margin-top: 40px; } .editorArea01 ul:not(.blocks-gallery-grid):not(.catList01):not(.caseStudyList01) > li { position: relative; padding-left: 1.0em; } .editorArea01 ul:not(.blocks-gallery-grid):not(.catList01):not(.caseStudyList01) > li::before { position: absolute; top: 0; left: 0; display: inline-block; content: "・"; } .editorArea01 ul:not(.blocks-gallery-grid):not(.catList01):not(.caseStudyList01) > li:not(:first-child) { margin-top: 12px; } .editorArea01 ul:not(.blocks-gallery-grid):not(.catList01):not(.caseStudyList01) > li ul:first-child, .editorArea01 ul:not(.blocks-gallery-grid):not(.catList01):not(.caseStudyList01) > li ol:first-child, .editorArea01 ol > li ul:first-child, .editorArea01 ol > li ol:first-child { margin-top: 20px; } .editorArea01 ol { counter-reset: li; } .editorArea01 ol > li { position: relative; padding-left: 1.3em; } .editorArea01 ol > li:not(:first-child) { margin-top: 12px; } .editorArea01 ol > li::before { position: absolute; top: 0; left: 0; counter-increment: li; content: counter(li)"."; } .editorArea01 h2 + *, .editorArea01 h3 + * { margin-top: 38px; } .editorArea01 h4 + *, .editorArea01 h5 + *, .editorArea01 h6 + * { margin-top: 30px; } .editorArea01 h4 + p, .editorArea01 h5 + p { margin-top: 24px; } .editorArea01 h6 + p { margin-top: 20px; } .editorArea01 h2 { font-size: 3.4rem; } .editorArea01 h3 { font-size: 2.8rem; } .editorArea01 h4 { font-size: 2.4rem; } .editorArea01 h5 { font-size: 2.0rem; } .editorArea01 h6 { font-size: 1.8rem; } .editorArea01 h2,.editorArea01 h3,.editorArea01 h4,.editorArea01 h5,.editorArea01 h6 { margin-top: 40px; font-weight: 700; } .editorArea01 h1:first-child, .editorArea01 h2:first-child, .editorArea01 h3:first-child, .editorArea01 h4:first-child, .editorArea01 h5:first-child, .editorArea01 h6:first-child, .editorArea01 p:first-child, .editorArea01 ul:first-child, .editorArea01 ol:first-child, .editorArea01 table:first-child, .editorArea01 blockquote:first-child { margin-top: 0 !important; } .editorArea01 .mt00 { margin-top: 0 !important; } .editorArea01 .mt05 { margin-top: 5px !important; } .editorArea01 .mt10 { margin-top: 10px !important; } .editorArea01 .mt20 { margin-top: 20px !important; } .editorArea01 .mt30 { margin-top: 30px !important; } .editorArea01 .mt40 { margin-top: 40px !important; } .editorArea01 .mt50 { margin-top: 50px !important; } .editorArea01 .mt60 { margin-top: 60px !important; } .editorArea01 .mt70 { margin-top: 70px !important; } .editorArea01 .mt80 { margin-top: 80px !important; } .editorArea01 .mt-10 { margin-top: -10px !important; } .editorArea01 .mt-20 { margin-top: -20px !important; } .editorArea01 .mt-30 { margin-top: -30px !important; } .editorArea01 .mt-40 { margin-top: -40px !important; } .editorArea01 .mt-50 { margin-top: -50px !important; } .editorArea01 .mt-60 { margin-top: -60px !important; } @media screen and (max-width: 767px) { .wp-block-columns:not(:first-child), .wp-block-media-text:not(:first-child), .wp-block-group:not(:first-child), .wp-block-gallery:not(:first-child) { margin-top: 40px; } .wp-block-columns { display: block; } .wp-block-column:nth-child(even) { margin-left: 0; } .wp-block-column + .wp-block-column { margin-top: 40px; } .wp-block-separator { margin-top: 50px; margin-bottom: 50px; } .wp-block-quote { padding-left: 7.164%; padding-right: 7.164%; } .wp-block-media-text .wp-block-media-text__content { margin-top: 20px; } .wp-block-separator + .is-style-annotationtext01 { margin-top: -40px; } .blocks-gallery-caption, .wp-block-embed figcaption, .wp-block-image figcaption, .wp-block-table figcaption { font-size: 1.4rem; } .wp-block-group__inner-container .wp-block-image + * { margin-top: 30px; } .wp-block-image .alignleft, .wp-block-image .alignright { float: none; margin-left: auto; margin-right: auto; } .wp-block-image.alignleft, .wp-block-image.alignright { float: none; margin-left: auto; margin-right: auto; } .editorArea01 { padding-top: 40px; font-size: 1.6rem; } .editorArea01 .eyecatch { margin-top: 60px; } .wp-block-quote::before,.wp-block-quote::after { width: 50px; height: 50px; } .editorArea01 a:hover img { opacity: 1.0; } .editorArea01 table th, .editorArea01 table td { font-size: 1.6rem; line-height: 1.4; } .editorArea01 h2 { font-size: 2.8rem; } .editorArea01 h3 { font-size: 2.4rem; } .editorArea01 h4 { font-size: 2.0rem; } .editorArea01 h5 { font-size: 1.8rem; } .editorArea01 h6 { font-size: 1.6rem; } .editorArea01 h2 + *, .editorArea01 h3 + * { margin-top: 30px; } .editorArea01 h4 + *, .editorArea01 h5 + *, .editorArea01 h6 + * { margin-top: 25px; } .editorArea01 h4 + p, .editorArea01 h5 + p { margin-top: 20px; } .editorArea01 h6 + p { margin-top: 18px; } .editorArea01 .is-style-reverse { display: flex; flex-direction: column-reverse; } .editorArea01 .is-style-reverse .wp-block-column { margin-top: 0; } } /*-------------------------------------------- ブロックエディタカスタムスタイル-見出し --------------------------------------------*/ .contents01 .is-style-heading01 { width: 100%; position: relative; padding-left: 26px; padding-top: 4px; padding-bottom: 10px; margin-top: 80px; font-size: 4.0rem; font-weight: 700; line-height: 1.2; } .contents01 .is-style-heading01::before { position: absolute; top: 0; left: 0; border-radius: 10px; width: 6px; height: 100%; background-color: #d85b94; content: ""; } .contents01 .is-style-heading02 { width: 100%; margin-top: 80px; font-size: 4.0rem; font-weight: 700; line-height: 1.2; } .contents01 .is-style-heading03 { width: 100%; margin-top: 50px; font-size: 3.2rem; font-weight: 700; line-height: 1.35; } .contents01 .is-style-heading04 { width: 100%; margin-top: 50px; font-size: 3.2rem; font-weight: 700; } .contents01 .is-style-framearea01 .is-style-heading04 { font-size: 2.4rem; } .contents01 .is-style-heading04 > span { padding-bottom: 2px; border-bottom: solid 1px #a8a8a7; } .contents01 .is-style-heading05 { margin-top: 40px; font-size: 2.1rem; font-weight: 700; line-height: 1.4; } .contents01 .is-style-heading06 { position: relative; padding: 5px 20px 8px; border-radius: 10px; background-color: #d85b94; display: table; margin-left: 0; font-weight: 700; color: #fff; z-index: 1; font-size: 1.8rem; line-height: 1.4; } .contents01 .is-style-framearea01 .is-style-heading06 { margin-top: 0; margin-left: -20px; top: -45px; margin-bottom: -45px; } .contents01 .is-style-heading01 + *, .contents01 .is-style-heading02 + * { margin-top: 38px; } .contents01 .is-style-heading03 + *, .contents01 .is-style-heading04 + * { margin-top: 24px; } .contents01 .is-style-heading05 + *, .contents01 .is-style-heading06 + * { margin-top: 24px; } .contents01 .editorArea01 .heading01 { margin-top: 120px; } .contents01 .editorArea01 .heading01 + * { margin-top: 38px; } @media screen and (max-width: 767px) { .contents01 .is-style-heading01 { padding-top: 2px; padding-bottom: 6px; } .contents01 .is-style-heading01, .contents01 .is-style-heading02 { margin-top: 60px; font-size: 2.8rem; } .contents01 .is-style-heading03, .contents01 .is-style-heading04 { margin-top: 40px; font-size: 2.0rem; } .is-style-framearea01 .contents01 .is-style-heading04 { font-size: 1.8rem; } .contents01 .is-style-heading05 { font-size: 1.8rem; } .contents01 .is-style-heading06 { margin-left: 0; padding-left: 10px; padding-right: 10px; font-size: 1.6rem; } .contents01 .is-style-heading01 + *, .contents01 .is-style-heading02 + * { margin-top: 32px; } .contents01 .is-style-heading03 + *, .contents01 .is-style-heading04 + * { margin-top: 20px; } .contents01 .is-style-heading05 + *, .contents01 .is-style-heading06 + * { margin-top: 20px; } .contents01 .editorArea01 .heading01 { margin-top: 80px; } } /*--------------------------------- 導入事例詳細ページ エディタエリア ---------------------------------*/ .caseEditorArea { padding-top: 0; padding-bottom: 100px; } .contents01 .caseEditorArea .heading01 + * { margin-top: 70px; } .caseEditorArea .is-style-heading03, .caseEditorArea .is-style-heading04 { margin-top: 70px; } .caseEditorArea .is-style-heading03 + *, .caseEditorArea .is-style-heading04 + * { margin-top: 40px; } .caseEditorArea p { line-height: 2.2; letter-spacing: .05em; } .caseEditorArea.editorArea01 > p { position: relative; top: -8px; margin-bottom: -8px; } @media screen and (max-width: 767px) { .contents01 .caseEditorArea .heading01 + * { margin-top: 60px; } .caseEditorArea .is-style-heading03, .caseEditorArea .is-style-heading04 { margin-top: 60px; } .caseEditorArea .is-style-heading03 + *, .caseEditorArea .is-style-heading04 + * { margin-top: 28px; } .caseEditorArea p { margin-top: 0; line-height: 2.0; } } /*-------------------------------------------- 10月末公開ティザー用追加スタイル --------------------------------------------*/ .globalNav01 > ul > li:not(.dropMenu) > a:not([href]), .globalNav01 > ul > li.teaser > a:not([href]) { opacity: .4; pointer-events: none; } .globalNav01 > ul > li.teaser > a { padding-right: 0; } .globalNav01 > ul > li.teaser > a::before { content: none; } .globalNav02 > ul > li.teaser::before { content: none; } .globalNav02 > ul > li > a:not([href]), .globalNav02 > ul > li.teaser > dl > dt { opacity: .4; pointer-events: none; } .lineTxt01 { display: table; margin-left: auto; margin-right: auto; padding: 5px 16px 8px; margin-bottom: 10px; background-color: #d85b92; color: #fff; font-size: 2.4rem; line-height: 1.2; } .topicTxt01 { margin-top: 50px; font-size: 3.2rem; font-weight: 700; color: #d85b92; text-align: center; line-height: 1.4; } .activityBlock01 { margin-bottom: 30px; } .activityBlock01 > ul { display: flex; flex-wrap: wrap; justify-content: center; } .activityBlock01 > ul > li { width: 72px; margin-left: 20px; margin-right: 20px; } .activityBlock01 > .text01 { margin-top: 20px; font-size: 2.8rem; font-weight: 700; text-align: center; color: #d85b92; line-height: 1.4; } .cvArea02.teaser { margin-bottom: 160px; } .footerNavArea01.teaser { min-height: 410px; } .footBlock01 > .inner02 > .box01 > .logo01 { width: 200px; position: relative; display: table; } .footBlock01 > .inner02 > .box01 > .logo01 > img { width: 100%; } .footBlock01 > .inner02 > .text01 { margin-top: 10px; text-align: center; font-weight: 700; } .footBlock01 > .inner02 > .text02 { font-size: 1.4rem; text-align: center; } @media screen and (max-width: 767px) { .lineTxt01 { font-size: 3.4vw; padding-left: 1vw; padding-right: 1vw; } .topicTxt01 { font-size: 2.2rem; } .activityBlock01 { margin-bottom: 20px; } .activityBlock01 > ul > li { width: 50px; margin-left: 10px; margin-right: 10px; } .activityBlock01 > .text01 { font-size: 1.8rem; } .cvArea02.teaser { margin-bottom: 100px; } .footerNavArea01.teaser { background: url(../images/bg01s.jpg) no-repeat 50% 50%/160%; } .footBlock01 > .inner02 { padding-left: 5.333%; padding-right: 5.333%; flex-direction: column-reverse; } .footBlock01 > .inner02 > .text02 { font-size: 1.2rem; } } /*-------------------------------------------- FAQページ用追加スタイル --------------------------------------------*/ .faqs dt{ background: url(../images/q.png) 0 0 no-repeat; padding: 0 15px 10px 30px; position: relative; } .faqs dt:hover{ cursor: pointer; } .faqs dd{ background: url(../images/a.png) 14px 0 no-repeat; padding: 0 15px 35px 44px; position: relative; } .faqs .hover{ color: #d85b92; text-decoration: underline; } .faq-framearea { padding: 10px 0px 0px 0px; /*border: solid 1px #d1d3e5;*/ border-radius: 10px; background-color: #f3f3f1; margin:15px auto; } .faq-framearea p{ padding-left:60px; padding-right: 70px; word-break: break-word; } .localNav01faq { height: 95px !important; } .faqnoq { background-image: url(http://japanticket.com/wp-content/uploads/2021/12/faqnoq.png.webp); background-repeat: no-repeat; padding: 20PX 0 20PX 65px; background-position: 0 11px; color: #3e3a39; font-size: 1.65em; font-weight: 100 !important; line-height: 1.25em; BACKGROUND-COLOR: #f3f3f1; background-size: 50px; } .faqlist{ display: flex; flex-wrap: wrap; width: 100%; padding: 0; margin: 0; list-style: none; } .faqlist li{ display: flex; box-sizing: border-box; margin: 0; } .faqlist li:first-child{ margin-top: 12px; } .faqlist li::before { display: none !important; } .faqlist li a{ display: flex; justify-content: nomal; align-items: center; width: 100%; padding: 10px; text-decoration: underline !important; font-size: 1.1em; } .faqlist li a:hover{ text-decoration: none !important; } /* C向けFAQページ用言語選択リンク */ .faq-langlist-box:after { content: ""; display: block; clear: both; } .faq-langlist-box:before { 　　　　content: ""; display: block; clear: both; } .faq-langlist-box { display: block; } .faq-langlist{ float: right; display: flex; padding: 0; margin: 0; list-style: none !important; } .faq-langlist li{ box-sizing: border-box; margin: 0 !important; padding-right: 10px; } @media screen and (max-width: 767px) { .localNav01faq { height: 220px !important; } ul.flexwrapbox{ display:block; } .flexwrapboxtitle { display:block; margin:2px; padding:0px; text-align:left; } .flexwrapboxtext { border-bottom:dotted 1px #333; margin-bottom:10px; padding-bottom:10px; } .faq-framearea p{ padding-right: 0px; } .faqnoq { padding: 18px 0 5PX 60px !important; min-height: 64px; } .faqnoqsingle { padding-top: 28px !important; } .faqefobottom > a { font-size: 1.6rem; } .faqs dt{ padding: 0 10px 15px 15px; } .faq-framearea p { padding-left: 30px; font-size: 1.1em; } .faqlist{ /*追加*/flex-wrap: wrap; } .faqlist li{ /*追加*/width: 50%; } .faqlist li a{ padding: 0px; } .faq-langlist{ display: inherit !important; } } /*-------------------------------------------- 2023/02/20 WEBtoリードフォーム用とお問い合わせ --------------------------------------------*/ #contact .titleArea01 { height: 100px; } #contact .titleArea01::before { content: none; } #contact .titleArea01 > .title01 { font-size: 2.4rem; top: 35%; } .contactSideCol01 { margin-top: 20px; padding: 25px 23px; background: #f3f3f1; border-radius: 20px; } .contactSideCol01 > .title01 { font-size: 2.1rem; font-weight: 700; line-height: 1.4; text-align: left; } .contactSideCol01 > .text01 { font-size: 1.4rem; margin-top: 8px; text-align: left; } .contactSideCol01 > .text02 { margin-top: 7px; } .contactSideCol01 > .text02 > a { display: inline-block; line-height: 1.1; padding-left: 30px; position: relative; font-size: 2.4rem; font-weight: 700; text-decoration: none; pointer-events: none; color: #000; } .contactSideCol01 > .text02 > a::before { position: absolute; top: 0.2em; left: 0; width: 20px; height: 24px; background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2019.99%2020.83%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%233e3a39%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22PC%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M16.17%2C18.05l-2.55-2a1.91%2C1.91%2C0%2C0%2C0-2.61.24h0a1.17%2C1.17%2C0%2C0%2C1-1.33.31c-1.09-.47-2.36-1.74-3.87-3.84S3.42%2C8.88%2C3.36%2C7.64a1.17%2C1.17%2C0%2C0%2C1%2C.63-1l1-.53a.8.8%2C0%2C0%2C0%2C.37-1L3.88.88A.81.81%2C0%2C0%2C0%2C3.42.4a.72.72%2C0%2C0%2C0-.64.06%2C5.55%2C5.55%2C0%2C0%2C0-1%2C.79h0A7%2C7%2C0%2C0%2C0%2C0%2C5.6c-.13%2C3.1.89%2C6%2C3.19%2C9.26s4.71%2C5.06%2C7.59%2C5.79a6.16%2C6.16%2C0%2C0%2C0%2C1.47.18%2C6.47%2C6.47%2C0%2C0%2C0%2C2.94-.74l.08-.05a5.75%2C5.75%2C0%2C0%2C0%2C1-.76.83.83%2C0%2C0%2C0%2C.23-.63A.81.81%2C0%2C0%2C0%2C16.17%2C18.05Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M19.19%2C7.25a11.62%2C11.62%2C0%2C0%2C0-2.44-3.86A10.88%2C10.88%2C0%2C0%2C0%2C13.08.83%2C10.54%2C10.54%2C0%2C0%2C0%2C9.7%2C0a.76.76%2C0%2C0%2C0-.8.77V.85a.78.78%2C0%2C0%2C0%2C.74.76%2C9.24%2C9.24%2C0%2C0%2C1%2C2.86.71%2C9.46%2C9.46%2C0%2C0%2C1%2C3.17%2C2.21%2C10%2C10%2C0%2C0%2C1%2C2.1%2C3.32%2C10.55%2C10.55%2C0%2C0%2C1%2C.69%2C3.38.4.4%2C0%2C0%2C0%2C.41.4h.7A.41.41%2C0%2C0%2C0%2C20%2C11.2%2C11.83%2C11.83%2C0%2C0%2C0%2C19.19%2C7.25Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M13.14%2C7.18a6.27%2C6.27%2C0%2C0%2C1%2C1.31%2C2.08A6.67%2C6.67%2C0%2C0%2C1%2C14.86%2C11a.74.74%2C0%2C0%2C0%2C.75.66h0a.78.78%2C0%2C0%2C0%2C.77-.87%2C8.48%2C8.48%2C0%2C0%2C0-.51-2.1A8%2C8%2C0%2C0%2C0%2C14.22%2C6a7.5%2C7.5%2C0%2C0%2C0-2.49-1.73%2C7%2C7%2C0%2C0%2C0-2-.52.77.77%2C0%2C0%2C0-.88.76v.08a.76.76%2C0%2C0%2C0%2C.65.75%2C5.71%2C5.71%2C0%2C0%2C1%2C1.61.42A6%2C6%2C0%2C0%2C1%2C13.14%2C7.18Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M10.61%2C9.84a2.45%2C2.45%2C0%2C0%2C1%2C.53.84%2C2.75%2C2.75%2C0%2C0%2C1%2C.17%2C1h1.54a4.36%2C4.36%2C0%2C0%2C0-.29-1.56%2C4.2%2C4.2%2C0%2C0%2C0-.87-1.37%2C3.92%2C3.92%2C0%2C0%2C0-1.3-.91%2C3.85%2C3.85%2C0%2C0%2C0-1.49-.3V9.1a2.34%2C2.34%2C0%2C0%2C1%2C.91.18A2.46%2C2.46%2C0%2C0%2C1%2C10.61%2C9.84Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; content: ""; } .contactSideCol01 > .text03 { font-size: 1.1rem; margin-top: 8px; } .leadFromArea01 > .text01 { text-align: center; margin-bottom: 10px; font-size: 1.3rem; } .leadFromArea01 > .text01 > .font01 { color: #F00; } .leadFromArea01 form .inner01 { background-color: #f5f5f5; padding: 20px; font-size: 1.4rem; } .leadFromArea01 form input[type="text"] { border: solid 1px #ccc; background-color: #fff; border-radius: 6px; font-size: 1.6rem; padding: 10px 8px; line-height: 1.4; width: 100%; } .leadFromArea01 input[type=checkbox] { width: 20px; height: 20px; margin-right: 8px; } .leadFromArea01 input[type=radio] { width: 16px; height: 16px; margin-right: 8px; } .leadFromArea01 form textarea { border: solid 1px #ccc; background-color: #fff; border-radius: 6px; font-size: 1.6rem; padding: 10px 8px; line-height: 1.4; width: 100%; } .leadFromArea01 form select { border: solid 1px #ccc; padding: 10px 8px; background-color: #fff; border-radius: 6px; font-size: 1.6rem; width: 100%; } .leadFromArea01 form .select01 { position: relative; } .leadFromArea01 form .select01::before { content: ""; position: absolute; right: 18px; top: 50%; margin-top: -7px; width: 7px; height: 7px; border-top: 1px solid #565c61; border-right: 1px solid #565c61; -webkit-transform: rotate(135deg); transform: rotate(135deg); pointer-events: none; } .leadFromArea01 form .inner01 dl:not(:first-child) { margin-top: 20px; } .leadFromArea01 form .inner01 dl { display: flex; flex-wrap: wrap; } .leadFromArea01 form .inner01 dl dt { padding-top: 10px; margin-right: 20px; width: 25%; text-align: right; } .leadFromArea01 form .inner01 dl dt .font01 { color: #F00; } .leadFromArea01 form .inner01 dl dd { width: calc(75% - 20px); } .leadFromArea01 .leadFromList01 { justify-content: space-between; } .leadFromArea01 .leadFromList01 > dd > input { width: 43% !important; } .leadFromArea01 .leadFromList01 > dd { display: flex; flex-wrap: wrap; justify-content: space-between; } .leadFromArea01 .leadFromList01 > dd > dl { width: 57%; margin-top: 0 !important; } .leadFromArea01 .leadFromList01 > dd > dl > dt { width: 20% !important; } .leadFromArea01 .leadFromList01 > dd > dl > dd { width: calc(80% - 20px) !important; } .leadFromArea01 .leadFromList02 { align-items: center; } .leadFromArea01 .leadFromList02 dt { padding-top: 0 !important; } .leadFromArea01 form .inner01 > .text01 { margin-top: 20px; text-align: center; } .leadFromArea01 form .inner01 > .text01 > a { color: #D95B94; } .leadFromArea01 form input[type=submit] { display: flex; justify-content: center; align-items: center; margin: 20px auto 0; width: 160px; height: 40px; background-color: #000; color: #fff; font-size: 2.0rem; border-radius: 60px; } @media screen and (max-width: 767px) { #contact .breadcrumbs01 { bottom: 10px; } #contact .titleArea01 > .title01 { top: 43%; } #contact .sp-reverse { flex-direction: column-reverse; } #contact .contentsWrap01 .inner02 .sp-reverse .wp-container-2 { margin-top: 0; } .contactSideCol01 > .title01 { margin-top: 0; } .leadFromArea01 form .inner01 dl:not(:first-child) { margin-top: 12px; } .leadFromArea01 form .inner01 dl { display: block; } .leadFromArea01 form .inner01 dl dt { padding-top: 0; margin-right: 0; width: 100%; text-align: left; margin-bottom: 5px; } .leadFromArea01 form .inner01 dl dd { width: 100%; } .leadFromArea01 .leadFromList01 { justify-content: space-between; } .leadFromArea01 .leadFromList01 > dd > input { width: 100% !important; } .leadFromArea01 .leadFromList01 > dd { display: block; } .leadFromArea01 .leadFromList01 > dd > dl { width: 100%; margin-top: 0 !important; } .leadFromArea01 .leadFromList01 > dd > dl > dt { width: 100% !important; margin-top: 12px; } .leadFromArea01 .leadFromList01 > dd > dl > dd { width: 100% !important; } .leadFromArea01 .leadFromList02 { align-items: center; } .leadFromArea01 .leadFromList02 dt { padding-top: 0 !important; } .leadFromArea01 form .inner01 > .text01 { margin-top: 20px; text-align: center; } .leadFromArea01 form input[type=submit] { display: flex; justify-content: center; align-items: center; margin: 20px auto 0; width: 160px; height: 40px; background-color: #000; color: #fff; font-size: 2.0rem; border-radius: 60px; } } /*-------------------------------------------- 2023/10/12 導入事例一覧ラベル追加 --------------------------------------------*/ .label01 { margin-bottom: 8px; display: flex; flex-wrap: wrap; } .label01 > li { margin-right: 10px; font-size: 1.4rem; padding: 5px 10px; line-height: 1.5; font-weight: 500; border: solid 2px #3e3a39; } .contentsWrap01#casestudy,.contentsWrap01#download { background-color: #eff0f4; } .titleArea01.type01::before { background-image: url(../images/bg06.png) } .tabBlock01.type01 { background-color: rgba(255, 255, 255, 0.562); } @media screen and (max-width: 767px) { .label01 > li { font-size: 1.2rem; } .titleArea01.type01::before { background-image: url(../images/bg06s.png) } } /*-------------------------------------------- 2023/12/05 リニューアル --------------------------------------------*/ .newsBlock03 { padding-bottom: 120px; position: relative; z-index: 1; margin-top: -25px; } .newsBlock03::before { position: absolute; background: linear-gradient(to bottom, rgba(216,91,134,1) 8%,rgba(214,197,168,1) 73%,rgba(255,255,255,1) 100%); z-index: -2; top: -100px; left: 0; width: 100%; height: 700px; content: ""; } @media screen and (min-width: 1600px) { .newsBlock03::before { top: -6vw; } } .newsBlock03::after { position: absolute; background: url(../../images/bg07.png) no-repeat 0 0/100%; z-index: -1; top: -80px; right: -180px; width: 538px; height: 439px; content: ""; } .newsBlock03 .heading11 { color: #fff; text-align: left; } .newsBlock03 .heading11 > .text01 { color: #fff; } .newsBlock03 .box01 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } .newsBlock03 .box01 > .button01 { position: relative; top: 20px; } .newsBlock03 .box01 > .button01 > a { color: #fff; text-decoration: none; font-size: 1.8rem; position: relative; display: block; padding-right: 28px; transition: color .3s; font-weight: 700; } .newsBlock03 .box01 > .button01 > a::before,.newsBlock03 .box01 > .button01 > a::after { position: absolute; top: 55%; transform: translateY(-50%); content: ""; transition: all .3s; } .newsBlock03 .box01 > .button01 > a::before { right: 0; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; } .newsBlock03 .box01 > .button01 > a::after { width: 8px; height: 8px; right: 6px; z-index: 2; background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ca5b86%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; } .newsBlock03 .box01 > .button01 > a:hover { color: #182e5c; } .newsBlock03 .box01 > .button01 > a:hover::before { background-color: #182e5c; } .newsBlock03 .subBlock01 { margin-top: 30px; } .newsBlock03 .subBlock01 .date01 { margin-right: 25px; font-family: 'Montserrat', sans-serif; } .newsBlock03 .subBlock01 .category01 > li { border-radius: 50px; } .heading11 { text-align: center; color: #d85b94; font-size: 3.6rem; font-weight: 700; line-height: 1.4; } .heading11 > .text01 { color: #c4a66e; font-size: 1.8rem; font-family: 'Montserrat', sans-serif; display: block; } .heading11.type01 { color: #fff; font-size: 3.2rem; } .heading11.type01 > .text01 { font-size: 1.4rem; color: #fff; display: table; padding-bottom: 4px; border-bottom: solid 1px #fff; margin-left: auto; margin-right: auto; margin-bottom: 6px; } .heading11.type02 { color: #d2b46e; font-size: 3.2rem; } .heading11.type02 > .text01 { font-size: 1.4rem; color: #182e5c; display: table; padding-bottom: 4px; border-bottom: solid 1px #182e5c; margin-left: auto; margin-right: auto; margin-bottom: 6px; } .slider02 { position: relative; z-index: 1; margin-top: 40px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .slider02::before { position: absolute; top: 120px; left: 30px; width: 430px; height: 374px; background: url(../../images/bg11.png) no-repeat 0 0/100%; content: ""; } .slider02 .slick-slide { margin-left: .694vw; margin-right: .694vw; width: 346px; height: 100%; } .slider02 > ul { opacity: 0; min-height: 380px; } .slider02 > ul.slick-initialized { transition: opacity .3s; opacity: 1.0; } .slider02 > ul li { height: 100%; } .slider02 > ul li a { text-decoration: none; background-color: #fff; border-radius: 16px; display: block; padding: 25px; height: 100%; font-size: 1.8rem; transition: transform .3s; } .slider02 > ul li a:hover { transform: scale(1.05,1.05) } .slider02 .slick-track { display: flex; } .slider02 .slick-slide { height: auto !important; } .slider02 .slick-list { overflow: visible; } .slider02 .slick-slide > div { height: 100%; } .slider02 ul li a > .image01 { } .slider02 ul li a > .text01 { margin-top: 12px; } .slider02 > ul li a:hover > .text01 { text-decoration: underline; } .txt06 { text-align: center; font-size: 1.8rem; margin-top: 30px; font-weight: 700; } .servicesBlock01 { counter-reset: item01; } .servicesBlock01 > .item01 { position: relative; } .servicesBlock01 > .item01:not(.type01)::before { position: absolute; bottom: -150px; left: -10px; width: 347px; height: 622px; background: url(../../images/bg08.png) no-repeat 0 0; content: ""; } .servicesBlock01 > .item01:last-child { padding-bottom: 160px; } .servicesBlock01 > .item01:last-child:not(.type01)::before { bottom: -340px; } .servicesBlock01 > .item01::after { position: absolute; z-index: -1; top: -170px; width: 347px; height: 622px; right: 0; transform: scale(-1,1); background: url(../../images/bg08.png) no-repeat 0 0/100%; content: ""; } .servicesBlock01 > .item01:first-of-type { margin-top: 80px; } @media screen and (min-width: 768px) { .servicesBlock01 > .item01:first-of-type .column01 { margin-top: 40px; } } .servicesBlock01 > .item01.type01::before,.servicesBlock01 > .item01.type01::after { position: absolute; z-index: -1; content: ""; width: 357px; height: 524px; background: url(../../images/bg09.png) no-repeat 0 0; } .servicesBlock01 > .item01.type01::before { top: 90px; right: 0; } .servicesBlock01 > .item01.type01::after { bottom: 150px; transform: scale(-1,1); left: 0; } .servicesBlock01 > .item01 > .blockIn01 { display: flex; flex-wrap: wrap; justify-content: space-between; } .servicesBlock01 > .item01.type01 > .blockIn01 { flex-direction: row-reverse; } .servicesBlock01 .column01 { width: 35.259%; } .servicesBlock01 .column02 { width: 59.444%; } .servicesBlock01 .item01.type01 { position: relative; z-index: 1; margin-top: 100px; padding-bottom: 200px; padding-top: 210px; background: linear-gradient(60deg, rgba(247,248,250,1) 0%,rgba(233,235,239,1) 100%); -webkit-mask-image: url('../../images/mask_service.svg'); mask-image: url('../../images/mask_service.svg'); -webkit-mask-size: cover; mask-size: cover; } .servicesBlock01 .item01.type01 + .item01 { -webkit-mask-image: url('../../images/mask_service.svg'); mask-image: url('../../images/mask_service.svg'); -webkit-mask-size: 100%; mask-size: 100%; padding-top: 200px; position: relative; z-index: 2; background-color: #fff; margin-top: -80px; } @media screen and (min-width: 1600px) { .servicesBlock01 .item01.type01 + .item01 { margin-top: -5vw; } } .servicesBlock01 .item01.type01 .column01 { width: 40.462%; } .servicesBlock01 .item01.type01 .column02 { width: 55.055%; } .servicesBlock01 .item01:nth-of-type(3) .column01 { width: 41.111%; } .servicesBlock01 .item01:nth-of-type(3) .column02 { width: 49.055%; } .servicesBlock01 .column01 > .inner01 { position: sticky; top: 100px; transition: top .4s; } .servicesBlock01 .column01 > .inner01 > .box01 { } .servicesBlock01 .column01 > .inner01 > .box01 > .title01 { padding-top: 40px; position: relative; color: #d85b94; font-weight: 700; font-size: 3.6rem; line-height: 1.5; } .servicesBlock01 .column01 > .inner01 > .box01 > .title01::before { position: absolute; display: table; border-bottom: solid 1px #182e5c; font-size: 1.4rem; color: #182e5c; top: 0; left: 0; padding-bottom: 5px; counter-increment: item01; content: "SERVICE 0"counter(item01); font-family: 'Montserrat', sans-serif; font-weight: 700; } .servicesBlock01 .column01 > .inner01 > .box01 > .text01 { color: #808080; font-size: 1.4rem; font-weight: 700; margin-top: 12px; } .servicesBlock01 .column01 > .inner01 > .box02 > .text01 { margin-top: 35px; line-height: 1.9; font-size: 2.1rem; font-weight: 700; } .servicesBlock01 .column01 > .inner01 > .box02 > .text02 { margin-top: 25px; line-height: 2.14; } .servicesBlock01 .column01 > .inner01 > .button01 { margin-top: 50px; display: table; width: 256px; } .servicesBlock01 .column01 > .inner01 > .button01 > a { position: relative; z-index: 1; display: flex; flex-wrap: wrap; height: 48px; width: 100%; padding-bottom: 2px; justify-content: space-between; justify-content: center; align-items: center; border: solid 3px #182e5c; background-color: #182e5c; border-radius: 100px; color: #fff; text-decoration: none; font-size: 1.8rem; font-weight: 700; overflow: hidden; line-height: 1.2; } .servicesBlock01 .column01 > .inner01 > .button01 > a:hover { color: #182e5c; } .servicesBlock01 .column01 > .inner01 > .button01 > a::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 120%; height: 102%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .servicesBlock01 .column01 > .inner01 > .button01 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .servicesBlock01 .column02 > .image01 { margin-right: calc(75% - 50vw); } .servicesBlock01 .item01.type01 .column02 > .image01 { margin-left: calc(80% - 50vw); margin-right: auto; margin-top: -90px; } .servicesBlock01 .column02 > .image02 { margin-right: -15%; margin-top: 60px; margin-left: -20%; } .servicesBlock01 .column02 > .image03 { margin-top: 40px; margin-right: -100px; } .servicesBlock01 .column02 > .image03 video { width: 100%; } .servicesBlock01 .column02 > .image04 { margin-right: -92px; } .servicesBlock01 .column02 > .title01 { margin-top: 50px; overflow: hidden; } .servicesBlock01 .column02 > .title01 > span { position: relative; display: table; margin-right: auto; margin-left: auto; font-size: 1.8rem; font-weight: 700; color: #182e5c; text-align: center; } .servicesBlock01 .column02 > .title01 > span::before,.servicesBlock01 .column02 > .title01 > span::after { position: absolute; top: 50%; width: 100vw; height: 1px; content: ""; background-color: #182e5c; } .servicesBlock01 .column02 > .title01 > span::before { right: calc(100% + 10px); } .servicesBlock01 .column02 > .title01 > span::after { left: calc(100% + 10px); } .servicesBlock01 .column02 > .frame01 { padding: 30px; margin-top: 25px; background-color: #fff; box-shadow: 1px 1px 8px rgba(0,0,0,.2); border-radius: 13px; } .servicesBlock01 .column02 > .frame01 > .title01 { font-weight: 700; color: #d85b94; display: table; margin-left: auto; margin-right: auto; border-bottom: solid 1px #d85b94; padding-bottom: 4px; line-height: 1.4; } .servicesBlock01 .column02 > .frame01 > ul { position: relative; padding-right: 20%; display: flex; flex-wrap: wrap; gap: 10px 25px; margin-top: 20px; } .servicesBlock01 .column02 > .frame01 > ul::after { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: auto; height: auto; content: "and more..."; font-size: 1.2rem; color: #182e5c; font-family: 'Montserrat', sans-serif; font-weight: 700; } .servicesBlock01 .column02 > .frame01 > ul > li img { height: 50px; width: auto; } .servicesBlock01 .column02 > .frame01 > .text01 { font-size: 1.2rem; margin-top: 20px; font-weight: 500; color: #182e5c; letter-spacing: 0; } .servicesBlock01 .column02 > .logo01 { overflow: hidden; margin-top: 60px; position: relative; } .servicesBlock01 .column02 > .logo01::before,.servicesBlock01 .column02 > .logo01::after { position: absolute; top: 0; width: 100px; height: 100%; z-index: 1; content: ""; } .servicesBlock01 .column02 > .logo01::before { left: 0; background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%); } .servicesBlock01 .column02 > .logo01::after { right: 0; background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%); } .servicesBlock01 .column02 > .logo01 > p { min-width: 150%; display: flex; justify-content: space-between; } .servicesBlock01 .column02 > .logo01 > .line01 img:nth-child(1) { animation: logoLoop01 30s -15s linear infinite; } .servicesBlock01 .column02 > .logo01 > .line01 img:nth-child(2) { animation: logoLoop02 30s linear infinite; } .servicesBlock01 .column02 > .logo01 > .line02 img:nth-child(1) { animation: logoLoop03 30s -15s linear infinite; } .servicesBlock01 .column02 > .logo01 > .line02 img:nth-child(2) { animation: logoLoop04 30s linear infinite; } .slick-prev, .slick-next { top: 50%; transform: translateY(-50%); z-index: 10; border-radius: 50%; background: rgba(0,0,0,.3); width: 40px; height: 40px; } .slick-prev { left: calc(50vw - 560px); } .slick-next { right: calc(50vw - 560px); } @media screen and (max-width: 1120px) { .slick-prev { left: calc(50vw - 48%); } .slick-next { right: calc(50vw - 48%); } } .slick-prev:hover, .slick-next:hover,.slick-prev:focus, .slick-next:focus { background: rgba(0,0,0,.3); } .slick-prev::before,.slick-next::before { position: absolute; z-index: 10; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-top: solid 1px #fff; border-right: solid 1px #fff; content: ""; } .slick-prev::before { left: 16px; transform: rotate(-135deg); } .slick-next::before { right: 18px; transform: rotate(45deg); } .slick-prev:hover::before,.slick-next:hover::before { border-color: #d85b94; } .footerNavList01 > dd > dl > dt { padding-left: 0; } .footerNavList01 > dd > dl > dt::before { content: none; } .conceptBlock01 { padding-bottom: 100px; -webkit-mask-image: url(../../images/mask_service.svg); mask-image: url(../../images/mask_service.svg); -webkit-mask-size: 100%; mask-size: 100%; background-color: #fff; padding-top: 150px; margin-top: -120px; } @media screen and (min-width: 1600px) { .conceptBlock01 { margin-top: -8vw; } } .conceptBlock01::before { content: none; } .conceptBlock01 > .title01 > .logo01 { width: 420px; margin-bottom: 50px; left: 0; } .conceptBlock01 > .title01 { font-size: 3.2rem; } .conceptBlock01 > .txt02 { font-size: 1.8rem; margin-top: 40px; } .conceptBlock01 > .image01 { max-width: 1120px; margin-left: auto; margin-right: auto; margin-top: -10px; position: relative; z-index: -1; } .conceptBlock01 > .image01 video { width: 100%; } .conceptBlock01 > .text01 { text-align: center; font-size: 2.0rem; font-weight: 700; margin-top: 20px; line-height: 2.0; } .featureBlock02 { } .featureBlock02 .leadBlock01 { padding: 70px 20px 80px; background: linear-gradient(to bottom, rgba(216,91,134,1) 8%,rgba(240,222,192,1) 100%); } .featureBlock02 .heading11,.featureBlock02 .heading11 > .text01 { color: #fff; } .featureBlock02 .leadBlock01 > ul { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 40px; } .featureBlock02 .leadBlock01 > ul > li { width: 48.666%; overflow: hidden; border-radius: 18px; background-color: rgba(255,255,255,.8); } .featureBlock02 .leadBlock01 > ul > li > .row01 { padding: 30px 20px 20px; } .featureBlock02 .leadBlock01 > ul > li > .row01 > .text01 { font-family: 'Montserrat', sans-serif; font-weight: 700; text-align: center; color: #182e5c; } .featureBlock02 .leadBlock01 > ul > li > .row01 > .icon01 { width: 200px; margin: 5px auto 0; } .featureBlock02 .leadBlock01 > ul > li > .row01 > .icon01 img { width: 100%; } .featureBlock02 .leadBlock01 > ul > li > .row01 > .title01 { color: #182e5c; font-weight: 700; text-align: center; font-size: 2.1rem; line-height: 1.5; } .featureBlock02 .leadBlock01 > ul > li > .row02 { background-color: #fff; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a { display: block; padding: 23px 50px 27px; text-decoration: none; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a > span { font-size: 1.4rem; display: inline-block; position: relative; padding-right: 50px; width: 100%; line-height: 1.85; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a > span::before,.featureBlock02 .leadBlock01 > ul > li > .row02 > a > span::after { position: absolute; top: 55%; transform: translateY(-50%); content: ""; transition: all .3s; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a > span::before { right: 0; width: 25px; height: 25px; background-color: #182e5c; border-radius: 50%; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a > span::after { width: 10px; height: 10px; right: 7px; z-index: 2; transition: all .3s; transform: rotate(90deg); margin-top: -5px; background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a:hover > span { text-decoration: underline; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a:hover > span::before { background-color: #c6ae77; } .featureBlock02 > .section01 { } .featureBlock02 > .section01 > .title01 { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1120px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } .featureBlock02 > .section01 > .title01::before { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background-color: #182e5c; content: ""; } .featureBlock02 > .section01 > .title01 > .column01 { width: 51%; padding-top: 60px; padding-bottom: 120px; } .featureBlock02 > .section01 > .title01 > .column01 > h2 { width: 100%; } .featureBlock02 > .section01 > .title01 > .column01 > h2 > .font01 { color: #c6ae77; font-family: 'Montserrat', sans-serif; font-size: 1.4rem; font-weight: 700; padding-bottom: 5px; border-bottom: solid 1px #fff; margin-bottom: 20px; display: inline-block; } .featureBlock02 > .section01 > .title01 > .column01 > h2 > .font02 { display: flex; flex-wrap: wrap; align-items: center; } .featureBlock02 > .section01 > .title01 > .column01 > h2 > .font02 img { display: block; width: 90px; margin-right: 15px; } .featureBlock02 > .section01 > .title01 > .column01 > h2 > .font02 > span { color: #fff; font-size: 3.2rem; font-weight: 700; display: block; width: calc(100% - 105px); line-height: 1.5; } .featureBlock02 > .section01 > .title01 > .column01 > .text01 { color: #fff; margin-top: 16px; line-height: 1.85; } .featureBlock02 > .section01 > .title01 > .column02 { margin-right: calc(50% - 50vw); width: 46vw; } .featureBlock02 > .section01 > .title01 > .column02 > .image01 { height: 102%; position: relative; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); } .featureBlock02 > .section01 > .title01 > .column02 > .image01 img { object-fit: cover; width: 100%; height: 100%; } .featureBlock02 > .section01 > .title01 + .box01 { position: relative; z-index: 1; margin-top: -75px; -webkit-mask-image: url(../../images/mask_service.svg); mask-image: url(../../images/mask_service.svg); -webkit-mask-size: cover; mask-size: cover; padding-top: 150px !important; } .featureBlock02 > .section01 > .title01 + .box01::before { position: absolute; z-index: -1; top: -20px; right: 0; width: 343px; height: 531px; background: url(../images/bg07.png) no-repeat 0 0/100%; content: ""; } .featureBlock02 > .section01 > .box01:nth-of-type(2):not(.type01)::before { position: absolute; z-index: -1; top: -260px; left: 0; width: 335px; height: 623px; background: url(../images/bg08.png) no-repeat 0 0/100%; content: ""; } .featureBlock02 > .section01 > .box01.type01 + .box01:nth-of-type(2):not(.type01)::before { content: none; } .featureBlock02 > .section01 > .box01.type01 + .box01:nth-of-type(2):not(.type01) + .box01 { z-index: 1; } .featureBlock02 > .section01 > .box01.type01 + .box01:nth-of-type(2):not(.type01) + .box01::before { position: absolute; z-index: -1; top: -260px; left: 0; width: 335px; height: 623px; background: url(../images/bg08.png) no-repeat 0 0/100%; content: ""; } .featureBlock02 > .section01 > .box01:last-child::before,.featureBlock02 > .section01 > .box01:last-child::after { position: absolute; z-index: -1; content: ""; } .featureBlock02 > .section01:last-child > .box01:last-child::before { top: 0; right: 0; width: 333px; height: 366px; background: url(../images/bg09.png) no-repeat 0 0/100%; } .featureBlock02 > .section01:last-child > .box01:last-child::after { bottom: 0; left: 0; width: 333px; height: 357px; background: url(../images/bg10.png) no-repeat 0 0/100%; } @media screen and (min-width: 1600px) { .featureBlock02 > .section01 > .title01 + .box01 { margin-top: -5vw; } } .featureBlock02 > .section01 > .box01 { position: relative; z-index: 2; padding-top: 100px; padding-left: 20px; padding-right: 20px; background-color: #f1f3f5; } .featureBlock02 > .section01 > .box01.type01 { background-color: #fff; padding-bottom: 110px; padding-top: 80px; } .featureBlock02 > .section01 > .box01.type01 + .box01 { padding-bottom: 70px; } .featureBlock02 > .section01 > .box01:last-child { padding-bottom: 140px !important; } .featureBlock02 > .section01 > .box01 > .image01 { position: absolute; min-width: 1600px; left: 50%; margin-left: -800px; top: 140px; } .featureBlock02 > .section01 > .box01 > .frame01 { background-color: #fff; margin-left: auto; margin-right: auto; margin-top: 20px; padding: 40px; max-width: 1080px; border-radius: 20px; box-shadow: 1px 1px 8px rgba(0,0,0,.1); } .featureBlock02 > .section01 > .box01.type01 > .frame01 { background-color: #f1f3f5; box-shadow: none; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 { display: flex; flex-wrap: wrap; justify-content: space-between; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 { width: 48.4%; display: flex; flex-wrap: wrap; justify-content: space-between; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .image01 { width: 39.2%; margin-left: -3%; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .column02 { width: 63%; margin-top: 20px; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .column02 > .title01 { font-size: 1.8rem; color: #182e5c; font-weight: 700; padding-bottom: 4px; border-bottom: solid 1px #182e5c; display: table; letter-spacing: -.01em; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .column02 > .text01 { font-size: 1.4rem; margin-top: 15px; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .column02 > .text02 { margin-top: 8px; font-size: 1.2rem; color: #182e5c; font-weight: 700; } .featureBlock02 > .section01 > .box01 > .title01,.featureBlock02 > .section01 > .box01 > .inner01 > .title01 { color: #d85b94; text-align: center; font-weight: 700; font-size: 2.8rem; line-height: 1.57; } .featureBlock02 > .section01 > .box01 > .title01 > span,.featureBlock02 > .section01 > .box01 > .inner01 > .title01 > span { font-size: 5.2rem; font-family: 'Montserrat', sans-serif; font-weight: 700; display: inline-block; margin-right: 5px; position: relative; top: 3px; line-height: 1.0; } .featureBlock02 > .section01 > .box01 > .title01.type01 { display: table; margin-left: auto; margin-right: auto; position: relative; } .featureBlock02 > .section01 > .box01 > .title01.type01::before,.featureBlock02 > .section01 > .box01 > .title01.type01::after { position: absolute; top: 50%; width: 55px; height: 1px; background-color: #d85b94; content: ""; } .featureBlock02 > .section01 > .box01 > .title01.type01::before { left: calc(100% + 10px); } .featureBlock02 > .section01 > .box01 > .title01.type01::after { right: calc(100% + 10px); } .featureBlock02 > .section01 > .box01 > .title01.type02 { margin-top: -40px; } .featureBlock02 > .section01 > .box01 > .title02 { color: #182e5c; font-weight: 700; font-size: 2.4rem; position: relative; display: table; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } .featureBlock02 > .section01 > .box01.js_trigger01 > .title02 > span { opacity: 0; transform: matrix(1, 0, 0, 1, 0, 100); } .featureBlock02 > .section01 > .box01.js_trigger01 > .title02.is_show > span { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1.0; } .featureBlock02 > .section01 > .box01 > .title02::before,.featureBlock02 > .section01 > .box01 > .title02::after { position: absolute; top: 55%; width: 1px; height: 38px; background-color: #182e5c; content: ""; } .featureBlock02 > .section01 > .box01 > .title02::before { left: 20px; transform: translateY(-50%) rotate(-25deg); } .featureBlock02 > .section01 > .box01 > .title02::after { right: 20px; transform: translateY(-50%) rotate(25deg); } .featureBlock02 > .section01 > .box01 > .text01,.featureBlock02 > .section01 > .box01 > .inner01 > .text01 { font-size: 1.4rem; text-align: center; margin-top: 10px; } .featureBlock02 > .section01 > .box01 > .text02 { text-align: center; font-weight: 700; margin-top: 40px; font-size: 1.8rem; } .featureBlock02 > .section01 > .box01 > .text03 { text-align: center; margin-top: 40px; } .featureBlock02 > .section01 > .box01 > .button01 { width: 380px; margin-top: 50px; margin-left: auto; margin-right: auto; } .featureBlock02 > .section01 > .box01 > .button01 > a { display: block; width: 100%; padding: 7px 20px 9px; border: solid 2px #182e5c; border-radius: 60px; text-decoration: none; background-color: #182e5c; color: #fff; text-align: center; font-size: 1.8rem; font-weight: 700; position: relative; z-index: 1; overflow: hidden; transition: color .3s; } .featureBlock02 > .section01 > .box01 > .button01 > a::before { position: absolute; top: 0; left: 0; z-index: -1; border: none; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .featureBlock02 > .section01 > .box01 > .button01 > a:hover { color: #182e5c; } .featureBlock02 > .section01 > .box01 > .button01 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .featureBlock02 > .section01 > .box01 > .button02 { display: table; margin-left: auto; margin-right: auto; margin-top: 40px; } .featureBlock02 > .section01 > .box01 > .button02 > a { display: block; position: relative; font-size: 1.8rem; font-weight: 700; color: #182e5c; text-decoration: none; padding-bottom: 12px; transition: all .3s; padding-right: 32px; border-bottom: solid 1px #182e5c; } .featureBlock02 > .section01 > .box01 > .button02 > a::before,.featureBlock02 > .section01 > .box01 > .button02 > a::after { position: absolute; top: 40%; transform: translateY(-50%); content: ""; transition: all .3s; } .featureBlock02 > .section01 > .box01 > .button02 > a::before { right: 0; width: 25px; height: 25px; background-color: #182e5c; border-radius: 50%; } .featureBlock02 > .section01 > .box01 > .button02 > a::after { width: 10px; height: 10px; right: 7px; z-index: 2; transition: all .3s; background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; } .featureBlock02 > .section01 > .box01 > .button02 > a:hover { color: #ba9c6e; border-color: #ba9c6e; } .featureBlock02 > .section01 > .box01 > .button02 > a:hover::before { background-color: #ba9c6e; } .featureBlock02 > .section01 > .box01 > .button03 { display: block; width: 320px; margin: 30px auto 0; } .featureBlock02 > .section01 > .box01 > .button03 > a { padding: 12px 30px 14px; position: relative; z-index: 1; display: block; border: solid 3px #c8aa6e; width: 100%; height: auto; min-height: inherit; border-radius: 100px; color: #fff; font-size: 1.8rem; font-weight: 700; background-color: #c8aa6e; text-align: center; line-height: 1.4; overflow: hidden; text-decoration: none; box-shadow: none; } .featureBlock02 > .section01 > .box01 > .button03 > a:hover { color: #c8aa6e; } .featureBlock02 > .section01 > .box01 > .button03 > a::before { position: absolute; top: 0; left: 0; z-index: -1; border: none; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .featureBlock02 > .section01 > .box01 > .button03 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .featureBlock02 > .section01 > .box01 > .button03 > a > .inner01 { position: relative; display: inline-block; padding-right: 30px; } .featureBlock02 > .section01 > .box01 > .button03 > a > .inner01::before, .featureBlock02 > .section01 > .box01 > .button03 > a > .inner01::after { position: absolute; top: 52%; transform: translateY(-50%); content: ""; transition: all .3s; } .featureBlock02 > .section01 > .box01 > .button03 > a > .inner01::before { right: 0; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; } .featureBlock02 > .section01 > .box01 > .button03 > a > .inner01::after { width: 8px; height: 8px; right: 6px; z-index: 2; background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c8aa6e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat 0 0/100%; } .featureBlock02 > .section01 > .box01 > .button03 > a:hover > .inner01::before { background-color: #c8aa6e; } .featureBlock02 > .section01 > .box01 > .button03 > a:hover > .inner01::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .featureBlock02 > .section01 > .box01 .companyList { max-width: 930px; margin-top: 30px; } .featureBlock02 > .section01 > .box01 .companyList > li { width: 26%; } .featureBlock02 > .section01 > .box01 .companyList > li:not(:nth-child(3n+1)) { margin-left: 0; } .featureBlock02 > .section01 > .box01 .companyList > li:not(:nth-child(4n+1)) { margin-left: -1.6%; } .featureBlock02 > .section01 > .box01 .companyList > li:nth-child(n+4) { margin-top: 0; } .featureBlock02 > .section01 > .box01 .companyList > li:nth-child(n+5) { margin-top: -1.6%; } .featureList01 { display: flex; flex-wrap: wrap; gap: 0 13%; } .featureList01 > li { width: 15%; position: relative; } .featureList01 > li > .image01 { margin-left: -13%; margin-right: -13%; } .featureList01 > li > .title01 { border-radius: 50px; color: #fff; text-align: center; width: 100%; background-color: #182e5c; font-size: 1.4rem; font-weight: 700; padding: 6px 10px 8px; line-height: 1.2; } .featureList01 > li:first-child > .title01 { background-color: #d85b94; } .featureList01 > li > .text01 { position: absolute; } .featureList01 > li:nth-child(1) > .text01 { width: 84.666%; top: 5%; left: 102%; } .featureList01 > li:nth-child(2) > .text01 { width: 68%; top: 5%; left: 107%; } .featureList01 > li:nth-child(3) > .text01 { width: 67.333%; top: 10%; left: 107%; } .featureList02 { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 30px; margin-top: 40px; padding-bottom: 40px; margin-bottom: 30px; } .featureList02::before { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: auto; height: auto; font-family: 'Montserrat', sans-serif; font-size: 1.4rem; font-weight: 700; color: #182e5c; content: "and more..."; } .featureList02 > li { height: 52px; position: relative; } .featureList02 > li img { height: 100%; width: auto; } .featureList03 { margin-top: 30px; display: flex; flex-wrap: wrap; max-width: 1080px; margin-left: auto; margin-right: auto; gap: 0 1.85%; } .featureList03 > li { background-color: #fff; border-radius: 18px; padding: 30px 25px 40px; width: 32%; box-shadow: 1px 1px 8px rgba(0,0,0,.1); } .featureList03 > li > .title01 { font-size: 1.8rem; font-weight: 700; color: #182e5c; text-align: center; line-height: 1.55; } .featureList03 > li > .title01 > span { background-color: #182e5c; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700; display: table; width: 120px; margin-left: auto; margin-right: auto; border-radius: 30px; padding: 5px 10px; line-height: 1.2; margin-bottom: 16px; } .featureList03 > li > .icon01 { width: 100px; height: 77px; margin: 25px auto 0; display: flex; align-items: center; justify-content: center; } .featureList03 > li > .text01 { font-size: 1.4rem; margin-top: 20px; line-height: 1.85; } .priceBlock01 { background-color: rgba(246,241,232,.4); padding-top: 70px; } .priceBlock01:last-child { padding-bottom: 100px; margin-bottom: -80px; } .priceBlock01 .heading11 { color: #182e5c; } .priceBlock01 .frame01 { position: relative; background-color: #f6f1e8; padding: 25px 40px; border-radius: 25px; margin-top: 40px; } .priceBlock01 .frame01 > .title01 { padding-top: 50px; font-size: 3.9rem; line-height: 1.1; font-weight: 700; display: table; padding-left: 40px; padding-right: 40px; position: relative; text-align: center; } .priceBlock01 .frame01 > .title01::before,.priceBlock01 .frame01 > .title01::after { position: absolute; top: 73%; width: 2px; height: 60%; background-color: #3e3a39; content: ""; } .priceBlock01 .frame01 > .title01::before { left: 15px; transform: translateY(-50%) rotate(-18deg); } .priceBlock01 .frame01 > .title01::after { right: 15px; transform: translateY(-50%) rotate(18deg); } .priceBlock01 .frame01 > .title01 .text01 { font-size: 2.1rem; font-weight: 700; display: block; margin-top: 15px; } .priceBlock01 .frame01 > .title01 .bogus { position: relative; } .priceBlock01 .frame01 > .title01 .bogus::before { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: #d85b94; content: ""; } .priceBlock01 .frame01 > .text01 { width: calc(100% - 520px); right: 30px; top: 50%; transform: translateY(-50%); position: absolute; } .priceBlock01 .frame01 > .btn01 { display: table; margin-top: 30px; margin-left: 40px; margin-right: auto; margin-bottom: 50px; } .priceBlock01 .frame01 > .btn01 > a { box-shadow: none; font-size: 1.8rem; } .featureTabBlock01 { max-width: 1080px; margin-left: auto; margin-right: auto; margin-top: 80px; } .featureTabBlock01 .thumbnail { width: 100%; } .featureTabBlock01 .thumbnail .slick-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.01%; width: 100% !important; transform: translate3d(0px, 0px, 0px) !important; } .featureTabBlock01 .thumbnail .slick-track::before { content: none; } .featureTabBlock01 .thumbnail .slick-list { overflow: visible; } .featureTabBlock01 .thumbnail .slick-slide { float: none; width: 19.07%; height: auto !important; } .featureTabBlock01 .thumbnail .slick-slide > div { height: 100%; } .featureTabBlock01 .thumbnail li { height: 100%; } .featureTabBlock01 .thumbnail li > a { border-radius: 15px; background-color: #fff; box-shadow: 1px 1px 8px rgba(0,0,0,.1); text-decoration: none; display: block; padding: 20px; height: 100%; transition: transform .3s; } .featureTabBlock01 .thumbnail li > a > .icon01 { height: 70px; margin-left: auto; margin-right: auto; margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; } .featureTabBlock01 .thumbnail li > a > .icon01 img { transition: opacity .3s; } .featureTabBlock01 .thumbnail li > a > .icon01::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; content: ""; } .featureTabBlock01 .thumbnail .slick-slide:nth-child(1) li > a > .icon01 { width: 52px; } .featureTabBlock01 .thumbnail .slick-slide:nth-child(1) li > a > .icon01::before { background: url(../../inbound-tickets/images/ic05on.png) no-repeat 0 50%/100%; } .featureTabBlock01 .thumbnail .slick-slide:nth-child(2) li > a > .icon01 { width: 50px; } .featureTabBlock01 .thumbnail .slick-slide:nth-child(2) li > a > .icon01::before { background: url(../../inbound-tickets/images/ic06on.png) no-repeat 0 50%/100%; } .featureTabBlock01 .thumbnail .slick-slide:nth-child(3) li > a > .icon01 { width: 55px; } .featureTabBlock01 .thumbnail .slick-slide:nth-child(3) li > a > .icon01::before { background: url(../../inbound-tickets/images/ic07on.png) no-repeat 0 50%/100%; } .featureTabBlock01 .thumbnail .slick-slide:nth-child(4) li > a > .icon01 { width: 70px; } .featureTabBlock01 .thumbnail .slick-slide:nth-child(4) li > a > .icon01::before { background: url(../../inbound-tickets/images/ic08on.png) no-repeat 0 50%/100%; } .featureTabBlock01 .thumbnail .slick-slide:nth-child(5) li > a > .icon01 { width: 60px; } .featureTabBlock01 .thumbnail .slick-slide:nth-child(5) li > a > .icon01::before { background: url(../../inbound-tickets/images/ic09on.png) no-repeat 0 50%/100%; } .featureTabBlock01 .contents { margin-top: 35px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .featureTabBlock01 .contents .slick-slide { width: 1080px; margin-left: 30px; margin-right: 30px; } .featureTabBlock01 .contents .item01 { border-radius: 20px; background-color: #fff; padding: 50px; display: flex !important; flex-wrap: wrap; justify-content: space-between; } .featureTabBlock01 .contents .item01 > .image01 { width: 48.979%; } .featureTabBlock01 .contents .item01 > .column01 { width: 45.918%; } .featureTabBlock01 .contents .item01 > .column01 > .js_button01 { display: none; } .featureTabBlock01 .contents .item01 > .column01 > .title01 { display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .icon01 { width: 60px; margin-right: 15px; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01 { width: calc(100% - 75px); line-height: 1.4; font-weight: 700; font-size: 2.8rem; color: #182e5c; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01 > strong { font-size: 2.1rem; display: block; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01 > em { font-size: 1.8rem; font-weight: 700; display: inline-block; margin-left: 10px; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01 > span { font-size: 1.2rem; display: block; margin-top: 5px; color: #808080; } .featureTabBlock01 .contents .item01 > .column01 > .box01 { margin-top: 30px; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .text01 { font-size: 1.4rem; font-weight: 700; color: #182e5c; overflow: hidden; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .text01 > span { position: relative; display: inline-block; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .text01 > span::before { position: absolute; top: 50%; left: calc(100% + 10px); width: 100vw; height: 1px; background-color: #182e5c; content: ""; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .text02 { font-size: 1.4rem; margin-top: 20px; letter-spacing: .02em; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .image01 { margin-top: 20px; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .title01 { font-weight: 700; margin-top: 20px; font-size: 2.1rem; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .button01 { width: 310px; margin-top: 30px; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .button01 > a { display: block; width: 100%; padding: 6px 20px 8px; border: solid 2px #182e5c; border-radius: 60px; text-decoration: none; background-color: #182e5c; color: #fff; text-align: center; font-size: 1.8rem; font-weight: 700; position: relative; z-index: 1; overflow: hidden; transition: color .3s; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .button01 > a::before { position: absolute; top: 0; left: 0; z-index: -1; border: none; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .button01 > a:hover { color: #182e5c; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .button01 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .box02 { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 25px; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .box02 > .image01 { width: 38.222%; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .box02 > .column01 { width: 56.666%; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .box02 > .column01 > .title01 { font-weight: 700; font-size: 2.1rem; letter-spacing: .01em; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .box02 > .column01 > .text01 { font-size: 1.4rem; margin-top: 20px; } .featureTabBlock01 .thumbnail .slick-current li > a { pointer-events: none; } .featureTabBlock01 .thumbnail .slick-current li > a img { opacity: 0; } .featureTabBlock01 .thumbnail .slick-current li > a > .icon01::before { opacity: 1.0; } .featureTabBlock01 .thumbnail .slick-current li > a > .title01 { color: #182e5c; } .featureTabBlock01 .thumbnail .slick-current li > a > .text01 { color: #3e3a39; } .featureTabBlock01 .thumbnail li > a > .title01 { font-size: 1.7rem; color: #ababac; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; line-height: 1.2; border-bottom: solid 1px #ababac; margin-left: auto; margin-right: auto; margin-top: 20px; font-weight: 700; padding-bottom: 10px; transition: color .3s; } .featureTabBlock01 .thumbnail li:nth-child(2) > a > .title01 { margin-top: 6px; } .featureTabBlock01 .thumbnail li > a > .title01 > span { font-size: 1.2rem; display: block; } .featureTabBlock01 .thumbnail li > a > .text01 { color: #ababac; font-size: 1.2rem; font-weight: 700; text-align: center; margin-top: 10px; line-height: 1.4; transition: color .3s; } .titleArea03 { min-height: 640px; height: 44.4444vw; position: relative; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; } .titleArea03 > .title01 { font-size: 4.5rem; font-weight: 700; text-align: center; color: #fff; width: 100%; } .titleArea03 > .text01 { font-size: 2.1rem; display: block; font-weight: 700; text-align: center; margin-bottom: 10px; color: #fff; margin-top: -30px; } .titleArea03 > .btn01 { margin-top: 50px; } .titleArea03::before { position: absolute; top: 0; left: 0; width: 100%; height: 182px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); content: ""; } .sectionBlock01 { padding-top: 70px; background-color: #fff; position: relative; } .sectionBlock01:not(:last-child) { padding-bottom: 80px; } .sectionBlock01:first-child { padding-top: 120px; margin-top: -115px; -webkit-mask-image: url(../../images/mask_service.svg); mask-image: url(../../images/mask_service.svg); -webkit-mask-size: 100%; mask-size: 100%; z-index: 2; } .sectionBlock01::before { position: absolute; z-index: -1; top: 10px; right: 0; width: 343px; height: 531px; background: url(../images/bg07.png) no-repeat 0 0/100%; content: ""; } .sectionBlock01::after { position: absolute; z-index: -1; bottom: -200px; left: 0; width: 335px; height: 623px; background: url(../images/bg08.png) no-repeat 0 0/100%; content: ""; } .illustBlock02 { margin-top: 30px; background-color: #f3f4f7; border-radius: 30px; position: relative; z-index: 1; box-shadow: 1px 1px 12px rgba(0,0,0,.2); } .illustBlock02::before { position: absolute; width: 102.8%; height: 78px; top: 100%; left: -1.4%; z-index: -1; background: url(../../inbound-tickets/lp-restaurants/images/bg02.png) no-repeat 0 0/100%; content: ""; } .illustBlock02 > .box01 { width: 16.66%; margin-left: auto; margin-right: auto; height: 27.77vw; max-height: 340px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; } .illustBlock02 > .box01 > .text01 { text-align: center; font-weight: 700; font-size: 1.4rem; color: #182e5c; } .illustBlock02 > .box01 > .image01 { margin-top: 10px; } .illustBlock02 > ul > li { position: absolute; opacity: 0; } .illustBlock02 > ul > li:nth-child(1) { width: 39.444%; right: 2.77%; top: 6%; } .illustBlock02 > ul > li:nth-child(2) { width: 35.92%; right: 6.01%; top: 34%; } .illustBlock02 > ul > li:nth-child(3) { width: 36.11%; right: 6.01%; top: 72%; } .illustBlock02 > ul > li:nth-child(4) { width: 38.51%; left: 3.77%; top: 6%; } .illustBlock02 > ul > li:nth-child(5) { width: 33.79%; left: 7.01%; top: 34%; } .illustBlock02 > ul > li:nth-child(6) { width: 34.44%; left: 7.01%; top: 72%; } .illustBlock02.is_show > ul > li:nth-child(1),.illustBlock02.is_show > ul > li:nth-child(2),.illustBlock02.is_show > ul > li:nth-child(3) { animation: popupRight 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .illustBlock02.is_show > ul > li:nth-child(4),.illustBlock02.is_show > ul > li:nth-child(5),.illustBlock02.is_show > ul > li:nth-child(6) { animation: popupLeft 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .illustBlock02.is_show > ul > li:nth-child(1) { animation-delay: .3s; } .illustBlock02.is_show > ul > li:nth-child(2) { animation-delay: .5s; } .illustBlock02.is_show > ul > li:nth-child(3) { animation-delay: .7s; } .illustBlock02.is_show > ul > li:nth-child(4) { animation-delay: .2s; } .illustBlock02.is_show > ul > li:nth-child(5) { animation-delay: .4s; } .illustBlock02.is_show > ul > li:nth-child(6) { animation-delay: .6s; } @media screen and (min-width: 1440px) { .sectionBlock01:first-child { padding-top: 8vw; margin-top: -8vw; } } .sectionBlock02 { padding-top: 70px; position: relative; z-index: 1; } .sectionBlock02:not(:last-child) { padding-bottom: 80px; } .sectionBlock02::before { position: absolute; background: linear-gradient(to bottom, rgba(216,91,134,1) 8%,rgba(214,197,168,1) 73%,rgba(255,255,255,1) 100%); z-index: -2; top: 0; left: 0; width: 100%; height: 700px; content: ""; } .sectionBlock02::after { position: absolute; background: url(../../images/bg07.png) no-repeat 0 0/100%; z-index: -1; top: 90px; right: -130px; width: 538px; height: 439px; content: ""; } .sectionBlock02 > .blockIn01 { position: relative; z-index: 1; } .sectionBlock02 > .blockIn01::before { position: absolute; background: url(../../images/bg07.png) no-repeat 0 0/100%; z-index: -1; top: 340px; left: -400px; width: 538px; height: 439px; content: ""; } .heading12 { font-size: 3.2rem; text-align: center; font-weight: 700; color: #d85b94; } .heading13 { color: #fff; font-weight: 700; line-height: 1.4; font-size: 3.2rem; text-align: center; } .heading13 > span { color: #fff; font-weight: 700; display: block; font-size: 2.1rem; margin-bottom: 5px; } .sectionBlockColumn01 { margin-top: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; } .sectionBlockColumn01 > .column01 { width: 49.07%; background-color: #fff; border-radius: 20px; padding: 20px 25px 12px; box-shadow: 1px 1px 12px rgba(0,0,0,.2); } .sectionBlockColumn01 > .column01 > .image01 { } .sectionBlockColumn01 > .column01 > .row01 { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; } .sectionBlockColumn01 > .column01 > .row01 > .logo01 { width: 32%; margin-left: -2.5%; margin-top: -10px; } .sectionBlockColumn01 > .column01 > .row01 > .column01 { width: 68.75%; } .sectionBlockColumn01 > .column01 > .row01 > .column01 > .title01 { font-size: 2.0rem; font-weight: 700; color: #182e5c; } .sectionBlockColumn01 > .column01 > .row01 > .column01 > .text01 { font-size: 1.4rem; margin-top: 12px; } .txt07 { font-size: 2.4rem; color: #d85b94; text-align: center; line-height: 2.2; margin-top: 80px; } .txt07 > span { border-bottom: solid 1px #d85b94; font-weight: 700; position: relative; padding-bottom: 8px; } .txt07.type01 > span { border: none; position: relative; } .txt07.type01 > span::before { position: absolute; bottom: 0; left: 0; width: 0; height: 1px; transition: width .5s; transition-delay: .3s; background-color: #d85b94; content: ""; } .txt07.type01.is_show > span::before { width: 100%; } .txt08 { text-align: center; margin-top: 40px; } .sectionBlock02 .txt08 { color: #fff; } .txt09 { margin-top: 50px; color: #182e5c; } .txt09 > dt { border-bottom: solid 1px #182e5c; display: table; margin-left: auto; margin-right: auto; padding-bottom: 8px; font-weight: 700; font-size: 2.8rem; } .txt09 > dd { margin-top: 10px; text-align: center; font-weight: 700; font-size: 1.8rem; } .txt10 { text-align: center; margin-top: 40px; } .txt11 { color: #d85b94; text-align: center; font-weight: 700; margin-top: 50px; font-size: 2.8rem; } .illustBlock03 { margin-top: 60px; position: relative; } .illustBlock03 > .box01 { display: none; } .illustBlock03 > .column01 { position: absolute; width: 13.148%; left: 13.4%; top: 24.62%; } .illustBlock03 > .column01 > .text01 { width: 87.412%; margin-left: auto; margin-right: auto; margin-bottom: 10px; } .illustBlock03 > .column02 { position: absolute; width: 13.148%; right: 13.4%; top: 24.62%; } .illustBlock03 > .column02 > .text01 { width: 87.412%; margin-left: auto; margin-right: auto; margin-bottom: 10px; } .illustBlock03 > .column01 > .text01,.illustBlock03 > .column02 > .text01 { overflow: hidden; } .illustBlock03 > .column01 > .text01 img,.illustBlock03 > .column02 > .text01 img { opacity: 0; display: block; transform: matrix(1, 0, 0, 1, 0, 100); transition: all .4s ease; } .illustBlock03.is_finished > .column01 > .text01 img,.illustBlock03.is_finished > .column02 > .text01 img { opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); transition-delay: 1.0s; } .illustBlock03 > .column01 > .text02,.illustBlock03 > .column02 > .text02 { overflow: hidden; display: block; } .illustBlock03 > .column01 > .text02 img,.illustBlock03 > .column02 > .text02 img { opacity: 0; display: block; transform: matrix(1, 0, 0, 1, 0, 100); transition: all .4s ease; } .illustBlock03.is_finished > .column01 > .text02 img,.illustBlock03.is_finished > .column02 > .text02 img { opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); transition-delay: .6s; } .illustBlock03 > .column01 > .icon01, .illustBlock03 > .column02 > .icon01 { position: absolute; top: 57%; height: 28%; display: flex; flex-wrap: wrap; width: 94%; left: 3%; align-content: space-between; overflow: hidden; } .illustBlock03 > .column01 > .icon01 div,.illustBlock03 > .column02 > .icon01 div{ transition: transform .6s; } .illustBlock03 > .column01 > .icon01 div:nth-child(1), .illustBlock03 > .column02 > .icon01 div:nth-child(1) { transform: translateX(-100%); } .illustBlock03 > .column01 > .icon01 div:nth-child(2), .illustBlock03 > .column02 > .icon01 div:nth-child(2) { transform: translateX(100%); } .illustBlock03.is_finished > .column01 > .icon01 div:nth-child(1), .illustBlock03.is_finished > .column02 > .icon01 div:nth-child(1) { transform: translateX(0); } .illustBlock03.is_finished > .column01 > .icon01 div:nth-child(2), .illustBlock03.is_finished > .column02 > .icon01 div:nth-child(2) { transform: translateX(0); } .leadFromArea01:not(:first-child) { margin-top: 50px; } .titleArea01.type02::before{ content: none; } .conceptBlock02 { -webkit-mask-image: url(../../images/mask_service.svg); mask-image: url(../../images/mask_service.svg); -webkit-mask-size: 100%; mask-size: 100%; background-color: #fff; padding-top: 80px; margin-top: -120px; padding-bottom: 50px; position: relative; } @media screen and (min-width: 1600px) { .conceptBlock02 { margin-top: -8vw; } } .conceptBlock02::before { position: absolute; z-index: -1; top: -240px; right: 0; width: 343px; height: 531px; background: url(../images/bg07.png) no-repeat 0 0/100%; content: ""; } .conceptBlock02::after { position: absolute; z-index: -1; top: 110px; left: 0; width: 335px; height: 623px; background: url(../images/bg08.png) no-repeat 0 0/100%; content: ""; } .conceptBlock02 > .blockIn01 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .conceptBlock02 > .blockIn01 > .image01 { width: 50%; margin-left: 5%; position: relative; } @media screen and (min-width: 1025px) { .conceptBlock02 > .blockIn01 > .image01 { left: 4%; } } .conceptBlock02 > .blockIn01 > .text01 { width: 45%; font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; } .conceptBlock02 > .blockIn01 > .text02 { text-align: center; width: 100%; line-height: 1.91; font-size: 2.4rem; font-weight: 700; margin-top: 50px; margin-bottom: 50px; } .conceptBlock02 > .blockIn01 > .box01 { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 70px; margin-bottom: 50px; } .conceptBlock02 > .blockIn01 > .box01 > .line01 { display: flex; justify-content: space-between; width: 115%; } .conceptBlock02 > .blockIn01 > .box01 > .line01 img:nth-child(1) { animation: logoLoop03 50s -25s linear infinite; } .conceptBlock02 > .blockIn01 > .box01 > .line01 img:nth-child(2) { animation: logoLoop04 50s linear infinite; } .conceptBlock02 > .blockIn01 > .box01 > .line02 { display: flex; justify-content: space-between; width: 115%; } .conceptBlock02 > .blockIn01 > .box01 > .line02 img:nth-child(1) { animation: logoLoop01 50s -25s linear infinite; } .conceptBlock02 > .blockIn01 > .box01 > .line02 img:nth-child(2) { animation: logoLoop02 50s linear infinite; } .sectionBlock03 { padding-top: 90px; padding-bottom: 100px; position: relative; z-index: 1; } .sectionBlock03:not(.type01):not(.type02):not(.type03)::before { position: absolute; z-index: -1; top: -80px; right: -10px; width: 348px; height: 2155px; background: url(../images/bg13.png) no-repeat 0 0/100%; content: ""; } .sectionBlock03:not(.type01):not(.type02):not(.type03)::after { position: absolute; z-index: -1; top: 694px; left: 0; width: 335px; height: 623px; background: url(../images/bg08.png) no-repeat 0 0/100%; content: ""; } .sectionBlock03.type01 { background: linear-gradient(to bottom, rgba(216,91,134,1) 2%,rgba(240,222,192,1) 100%); padding-bottom: 70px; padding-top: 70px; z-index: 2; } .sectionBlock03.type02 { background-color: #f1f3f5; } .sectionBlock03.type02 .heading11.type01 { color: #d85b94; } .sectionBlock03.type02 .heading11.type01 > .text01 { color: #c6a66e; border-color: #c6a66e; } .sectionBlock03.type02 .txt12 { color: #3e3a39; font-size: 1.8rem; margin-top: 20px; } .sectionBlock03.type03 { background-color: #182e5c; padding-bottom: 160px; } .sectionBlock03.type03::before,.sectionBlock03.type03::after { position: absolute; z-index: -1; content: ""; } .sectionBlock03.type03::before { top: 0; right: 0; width: 390px; height: 1510px; background: url(../images/bg11.png) no-repeat 0 0/100%; } .sectionBlock03.type03::after { bottom: 580px; left: 0; width: 359px; height: 441px; background: url(../images/bg12.png) no-repeat 0 0/100%; } .sectionBlock03.type03 + .sectionBlock03 { -webkit-mask-image: url(../../images/mask_service.svg); mask-image: url(../../images/mask_service.svg); -webkit-mask-size: 100%; mask-size: 100%; margin-top: -80px; padding-top: 110px; background-color: #fff; } @media screen and (min-width: 1601px) { .sectionBlock03.type03 + .sectionBlock03 { margin-top: -5vw; padding-top: 6.875vw; } } .sectionBlock03.type03 .heading11 { color: #d2b46e; } .sectionBlock03.type03 .heading11 > .text01 { color: #fff; } .sectionBlock03:last-child { margin-bottom: -80px; } .txt12 { text-align: center; color: #fff; font-size: 2.1rem; font-weight: 700; margin-top: 30px; } .txt13 { text-align: center; color: #fff; font-size: 1.8rem; font-weight: 700; margin-top: 25px; } .mediaBlock01 { margin-top: 50px; } .mediaBlock01 > .title01 { overflow: hidden; } .mediaBlock01 > .title01 > span { display: table; margin-left: auto; margin-right: auto; font-size: 1.8rem; color: #182e5c; font-weight: 700; position: relative; } .mediaBlock01 > .title01 > span::before,.mediaBlock01 > .title01 > span::after { position: absolute; top: 50%; width: 100vw; background-color: #182e5c; height: 1px; content: ""; } .mediaBlock01 > .title01 > span::before { left: calc(100% + 10px); } .mediaBlock01 > .title01 > span::after { right: calc(100% + 10px); } .mediaBlock01 > ul { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 1.11%; } .mediaBlock01 > ul > li { width: 24.07%; border-radius: 15px; background-color: #fff; padding: 25px 20px 20px; } /*0250602 カラム調整 .mediaBlock01 > ul > li:nth-child(5),.mediaBlock01 > ul > li:nth-child(6),.mediaBlock01 > ul > li:nth-child(7) { width: 21.666%; } .mediaBlock01 > ul > li:nth-child(5) > .text01,.mediaBlock01 > ul > li:nth-child(6) > .text01,.mediaBlock01 > ul > li:nth-child(7) > .text01 { font-size: 1.2rem; }*/ .mediaBlock01 > ul > li:nth-child(5),.mediaBlock01 > ul > li:nth-child(6),.mediaBlock01 > ul > li:nth-child(7),.mediaBlock01 > ul > li:nth-child(8) { width: 21.666%; } .mediaBlock01 > ul > li:nth-child(5) > .text01,.mediaBlock01 > ul > li:nth-child(6) > .text01,.mediaBlock01 > ul > li:nth-child(7) > .text01,.mediaBlock01 > ul > li:nth-child(8) > .text01 { font-size: 1.2rem; } .mediaBlock01 > ul > li > .logo01 { height: 110px; display: flex; justify-content: center; align-items: center; border-bottom: solid 1px #3e3a39; } .mediaBlock01 > ul > li > .title01 { font-size: 2.1rem; text-align: center; font-weight: 700; margin-top: 20px; } .mediaBlock01 > ul > li > .text01 { line-height: 1.85; margin-top: 8px; font-size: 1.4rem; } .mediaBlock01 > ul > li > .btn04 { width: 100%; margin-top: 20px; max-width: 150px; } .mediaBlock01 > ul > li > .btn04 > a { font-size: 1.3rem; padding: 4px 20px 6px; } .btn04 { width: 320px; margin-top: 50px; margin-left: auto; margin-right: auto; } .btn04 > a { display: block; width: 100%; padding: 7px 20px 9px; border: solid 2px #182e5c; border-radius: 60px; text-decoration: none; background-color: #182e5c; color: #fff; text-align: center; font-size: 1.8rem; font-weight: 700; position: relative; z-index: 1; overflow: hidden; transition: color .3s; } .btn04 > a::before { position: absolute; top: 0; left: 0; z-index: -1; border: none; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .btn04 > a:hover { color: #182e5c; } .btn04 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .slider01 { opacity: 0; } .slider01.slick-initialized { opacity: 1.0; transition: opacity .3s; } .slider01 .slick-list,.slider01 .slick-track { height: 100%; } .slider01 .slick-slide > div { font-size: 0; height: 100%; } .slider01 .slick-slide > div > .item01 { font-size: 0; height: 100%; display: block !important; } .servicesBlock02 { display: flex; flex-wrap: wrap; justify-content: space-between; } .servicesBlock02 > .column01 { width: 37.037%; } .servicesBlock02 > .column01 .heading11.type01 { margin-top: 40px; color: #d85b94; text-align: left; } .servicesBlock02 > .column01 .heading11.type01 > .text01 { color: #c6a66e; border-color: #c6a66e; margin-left: 0; } .servicesBlock02 > .column01 > .text01 { font-size: 1.8rem; font-weight: 700; margin-top: 35px; } .servicesBlock02 > .image01 { width: 57.4%; } .list09 { display: flex; flex-wrap: wrap; gap: 0 1.85%; margin-top: 45px; } .list09 > li { width: 32.037%; padding: 30px 25px 50px; border-radius: 18px; background-color: #fff; box-shadow: 3px 3px 8px rgba(0,0,0,.2); } .list09 > li > .image01 { width: 76.01%; margin: 40px auto 0; height: min(9.72vw,140px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .list09 > li > .title01 { color: #182e5c; font-size: 1.8rem; text-align: center; line-height: 1.55; font-weight: 700; margin-top: 30px; } .list09 > li > .text01 { width: 120px; color: #fff; text-align: center; font-size: 1.3rem; background-color: #182e5c; border-radius: 60px; padding: 4px 10px; line-height: 1.2; font-family: 'Montserrat', sans-serif; font-weight: 700; margin-left: auto; margin-right: auto; } .list09 > li > .text02 { margin-top: 25px; font-size: 1.4rem; } .caseBlock02 { max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 40px; width: 100%; } .caseBlock02 > .title01 { overflow: hidden; } .caseBlock02 > .title01 > span { display: table; margin-left: auto; margin-right: auto; font-size: 1.8rem; color: #182e5c; font-weight: 700; position: relative; } .caseBlock02 > .title01 > span::before,.caseBlock02 > .title01 > span::after { position: absolute; top: 50%; width: 100vw; background-color: #182e5c; height: 1px; content: ""; } .caseBlock02 > .title01 > span::before { left: calc(100% + 10px); } .caseBlock02 > .title01 > span::after { right: calc(100% + 10px); } .caseBlock02 > ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 30px; } .caseBlock02 > ul > li { box-shadow: 3px 3px 8px rgba(0,0,0,.2); width: 48.88%; background-color: #fff; border-radius: 16px; padding: 20px; } .caseBlock02 > ul > li > .image01 { } .caseBlock02 > ul > li > .row01 { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; } .caseBlock02 > ul > li > .row01 > .text01 { color: #182e5c; font-weight: 700; font-size: 2.4rem; width: calc(100% - 130px); } .caseBlock02 > ul > li > .row01 > .text01 > span { font-size: 1.4rem; font-weight: 700; display: block; } .caseBlock02 > ul > li > .row01 > ul { display: flex; flex-wrap: wrap; max-width: 120px; gap: 0 13px; } .caseBlock02 > ul > li > .row01 > ul > li { width: 50px; } .caseBlock02 > ul + .txt07 { margin-top: 40px; } .servicesBlock03 { position: relative; margin-top: 30px; } .servicesBlock03 > .image01 { max-width: 798px; margin-left: auto; margin-right: -60px; width: 73.88%; } .servicesBlock03 > .text01,.servicesBlock03 > .text02,.servicesBlock03 > .text03,.servicesBlock03 > .text04 { position: absolute; opacity: 0; } .servicesBlock03 > .text01 { width: 10.09%; right: 41.41%; top: 43.54%; } .servicesBlock03 > .text02 { width: 11.11%; right: 10.64%; top: 14.516%; } .servicesBlock03 > .text03 { width: 17.59%; right: 26.11%; top: 2.25%; } .servicesBlock03 > .text04 { width: 35.55%; left: 2.03%; top: 0; } .servicesBlock03.is_finished > .text01 { animation: zoomIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .servicesBlock03.is_finished > .text02 { animation: zoomIn 0.6s 0.1s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .servicesBlock03.is_finished > .text03 { animation: zoomIn 0.6s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .servicesBlock03.is_finished > .text04 { animation: fadeup 0.6s 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .servicesBlock04 { position: relative; margin-left: 8.33%; } .servicesBlock04 > .text01 { line-height: 2.2; margin-top: 20px; width: 73.3%; } .servicesBlock04 > .text01 > span { color: #182e5c; font-size: 2.4rem; font-weight: 700; border-bottom: solid 1px #182e5c; padding-bottom: 5px; } .servicesBlock04 > .image01 { position: absolute; right: 0; top: -120px; width: 23.03%; } .servicesBlock04 > .box01 { margin-top: 15px; width: 73.3%; } .servicesBlock04 > .box01 > dt { color: #182e5c; font-size: 1.4rem; font-weight: 700; } .servicesBlock04 > .box01 > dd { padding: 20px; background-color: #fff; border-radius: 10px; margin-top: 5px; box-shadow: 1px 1px 8px rgba(0,0,0,.2); } .servicesBlock05 { margin-top: 130px; position: relative; } .servicesBlock05 > .image01 { max-width: 915px; margin-left: auto; margin-right: auto; width: 84.722%; } .servicesBlock05 > .icon01,.servicesBlock05 > .icon02,.servicesBlock05 > .icon03,.servicesBlock05 > .icon04,.servicesBlock05 > .icon05,.servicesBlock05 > .icon06 { position: absolute; opacity: 0; } .servicesBlock05.is_finished > .icon01,.servicesBlock05.is_finished > .icon02,.servicesBlock05.is_finished > .icon03,.servicesBlock05.is_finished > .icon04,.servicesBlock05.is_finished > .icon05,.servicesBlock05.is_finished > .icon06 { animation: zoomIn 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .servicesBlock05 > .text01,.servicesBlock05 > .text02,.servicesBlock05 > .text03 { position: absolute; opacity: 0; } .servicesBlock05.is_finished > .text01,.servicesBlock05.is_finished > .text02,.servicesBlock05.is_finished > .text03 { animation: fadeup 0.4s 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .servicesBlock05 > .icon01 { width: 14.259%; right: 39.81%; top: 8.36%; } .servicesBlock05 > .icon02 { width: 14.259%; right: 39.81%; top: 57.74%; } .servicesBlock05 > .icon03 { width: 12.962%; bottom: -11.73%; right: 23.14%; } .servicesBlock05 > .icon04 { width: 14.259%; right: 4.62%; top: 57.74%; } .servicesBlock05 > .icon05 { width: 14.259%; right: 4.62%; top: 8.36%; } .servicesBlock05 > .icon06 { width: 12.962%; top: -14.73%; right: 23.14%; } .servicesBlock05 > .text01 { width: 23.981%; top: 37.23%; right: 49.7%; } .servicesBlock05 > .text02 { width: 38.518%; right: -3%; top: -12.82%; } .servicesBlock05 > .text03 { width: 25.555%; right: -4.62%; top: 0; } .flowBlock01 { margin-top: 110px; max-width: 900px; margin-left: auto; margin-right: auto; } .flowBlock01 > ol { display: flex; margin-top: 16px; width: calc(100% + 18px); } .flowBlock01 > ol > li { height: min(26vw,250px); } .flowBlock01 > ol > li img { height: 100%; width: auto; } .flowBlock01 > .title01 { overflow: hidden; } .flowBlock01 > .title01 > span { display: table; margin-left: auto; margin-right: auto; font-size: 1.8rem; color: #d2b46e ; font-weight: 700; position: relative; } .flowBlock01 > .title01 > span::before,.flowBlock01 > .title01 > span::after { position: absolute; top: 50%; width: 100vw; background-color: #d2b46e; height: 1px; content: ""; } .flowBlock01 > .title01 > span::before { left: calc(100% + 10px); } .flowBlock01 > .title01 > span::after { right: calc(100% + 10px); } .flowBlock01 + .btn01 { margin-top: 40px; } .txt14 { font-size: 1.8rem; font-weight: 700; text-align: center; margin-top: 30px; } .txt14 + .txt14 { margin-top: 10px; } .txt14.type01 { color: #182e5c; } .caseBlock03 { margin-top: 70px; background-color: #f1f3f5; border-radius: 20px; padding: 50px; box-shadow: 3px 3px 8px rgba(0,0,0,.2); display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse; } .caseBlock03 > .image01 { width: 46.632%; } .caseBlock03 > .column01 { width: 47.959%; } .caseBlock03 > .column01 > .title01 { font-size: 1.4rem; font-weight: 700; color: #182e5c; overflow: hidden; margin-top: 40px; } .caseBlock03 > .column01 > .title01 span { position: relative; display: inline-block; font-weight: 700; } .caseBlock03 > .column01 > .title01 span::before { position: absolute; top: 50%; left: calc(100% + 10px); width: 100vw; height: 1px; background-color: #182e5c; content: ""; } .caseBlock03 > .column01 > .title02 { font-weight: 700; font-size: 2.1rem; margin-top: 30px; letter-spacing: .01em; line-height: 1.61; } .caseBlock03 > .column01 > .text01 { margin-top: 35px; font-size: 1.4rem; line-height: 1.85; } .caseBlock03 > .column01 > .button01 { width: 310px; margin-top: 30px; } .caseBlock03 > .column01 > .button01 > a { display: block; width: 100%; padding: 6px 20px 8px; border: solid 2px #182e5c; border-radius: 60px; text-decoration: none; background-color: #182e5c; color: #fff; text-align: center; font-size: 1.8rem; font-weight: 700; position: relative; z-index: 1; overflow: hidden; transition: color .3s; } .caseBlock03 > .column01 > .button01 > a::before { position: absolute; top: 0; left: 0; z-index: -1; border: none; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .caseBlock03 > .column01 > .button01 > a:hover { color: #182e5c; } .caseBlock03 > .column01 > .button01 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } @media screen and (max-width: 1200px) { .servicesBlock05 { margin-left: -5%; margin-right: 5%; } } @media screen and (max-width: 1120px) { .featureBlock02 > .section01 > .title01 > .column01 > h2 > .font02 > span { font-size: 2.4rem; } .featureBlock02 > .section01 > .title01 > .column01 > h2 > .font02 > span > br { display: none; } .priceBlock01 .frame01 { padding-left: 30px; padding-right: 20px; } .priceBlock01 .frame01 > .title01 { margin-top: 40px; font-size: 3.0rem; padding-left: 30px; padding-right: 30px; } .priceBlock01 .frame01 > .title01 > .text01 { font-size: 1.8rem; } .priceBlock01 .frame01 > .text01 { width: calc(100% - 370px); max-width: 540px; right: 10px; } .priceBlock01 .frame01 > .btn01 { margin-left: 10px; margin-bottom: 40px; } } @media screen and (max-width: 1000px) { .footerNavArea01 > .inner01 > .globalNav02 { background-position: 50% 100%; background-color: #0C376B; } .globalNav02 > ul > li > dl > dd > dl > dt { position: relative; font-size: 1.6rem; font-weight: 700; padding: 9px 25px; background: rgba(2,24,56,.8); color: #fff; border-top: solid 1px #e4e4e2; } #headNavArea02 .globalNav02 > ul > li > dl > dd > dl > dt { background-color: #E1E2E5; color: #3E3A39; } #headNavArea02 .globalNav02 > ul > li > dl > dd > dl > dt::before { border-color: #3e3a39; } .globalNav02 > ul > li > dl > dd > dl > dt::before { position: absolute; right: 26px; width: 7px; height: 7px; top: 15px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(135deg); pointer-events: none; content: ""; } .globalNav02 > ul > li > dl > dd > dl > dt.open::before { transform: rotate(-45deg); top: 20px; } .globalNav02 > ul > li > dl > dd > dl > dd { display: none; font-size: 1.4rem; } .globalNav02 > ul > li > dl > dd > dl > dd > a { display: block; background-color: #fff; border-top: solid 1px #E4E4E2; padding: 12px 20px; text-decoration: none; font-weight: 700; } .globalNav02 > ul > li.dropMenu > dl.navList02 > dd > span { background-color: #E4E4E2; display: block; padding: 8px 20px; font-weight: 700; font-size: 1.4rem; } .globalNav02 > ul > li.dropMenu > dl.navList02 > dd > a > span { position: relative; display: inline-block; padding-left: 18px; } .globalNav02 > ul > li.dropMenu > dl.navList02 > dd > a > span::before { position: absolute; left: 0; width: 6px; height: 6px; top: 8px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); pointer-events: none; content: ""; } } @media screen and (min-width: 768px) { .featureTabBlock01 .thumbnail li > a:hover { transform: translateY(-10px); } .featureTabBlock01 .thumbnail li > a:hover img { opacity: 0; } .featureTabBlock01 .thumbnail li > a:hover > .icon01::before { opacity: 1.0; } .featureTabBlock01 .thumbnail li > a:hover > .title01 { color: #182e5c; } .featureTabBlock01 .thumbnail li > a:hover > .text01 { color: #3e3a39; } } @media screen and (max-width: 767px) { .titleArea01.type02 { height: 88vw; min-height: 330px; } .titleArea01.type02 > .title01 { font-size: 3.0rem; padding-top: 5vw; } .titleArea01.type02 .breadcrumbs01 { bottom: 8vw; } .titleArea01.type02 + .contentsWrap01 { padding-top: 10.66vw; } .newsBlock03 { padding-bottom: 95px; overflow: hidden; margin-top: -8.33vw; padding-top: 16.33vw; } .newsBlock03::before { height: 150vw; max-height: 750px; top: 0; } .newsBlock03::after { background: url(../../images/bg07s.png) no-repeat 0 0/100%; top: 35px; right: 50%; transform: translate(50%); width: 129vw; height: 141.33vw; } .newsBlock03 .heading11 { text-align: center; width: 100%; } .newsBlock03 .box01 { display: block; } .newsBlock03 .box01 > .button01 { display: none; } .newsBlock03 .subBlock01 { margin-top: 25px; } .newsBlock03 .subBlock01 .date01 { margin-right: 10px; font-size: 1.2rem; } .newsBlock03 .subBlock01 .category01 li { font-size: 1.2rem; } .heading11 { font-size: 3.0rem; } .heading11 > .text01 { font-size: 1.4rem; } .slider02 { margin-top: 30px; } .slider02::before { content: none; } .slider02 .slick-slide { margin-left: 1.6vw; margin-right: 1.6vw; width: auto; } .slider02 > ul { opacity: 0; min-height: 92.533vw; } .slider02 > ul li a { padding: 20px 6.66%; font-size: 1.6rem; box-shadow: 1px 1px 8px rgba(0,0,0,.2); } .slider02 > ul li a:hover { transform: scale(1.0,1.0) } .slider02 ul li a > .text01 { margin-top: 14px; } .slider02 > ul li a:hover > .text01 { text-decoration: none; } .txt06 { font-size: 1.6rem; line-height: 2.0; margin-top: 24px; } .servicesBlock01 { overflow: hidden; } .servicesBlock01 > .item01:last-child { padding-bottom: 28vw; } .servicesBlock01 > .item01:first-of-type { margin-top: 60px; } .servicesBlock01 > .item01 > .blockIn01 { display: block; } .servicesBlock01 > .item01:not(.type01)::before { bottom: -100px; width: 46vw; height: 82.66vw; background: url(../../images/bg08.png) no-repeat 0 0/100%; } .servicesBlock01 > .item01:nth-of-type(1):not(.type01)::after { position: absolute; top: 80vw; width: 46vw; height: 82.66vw; right: -10px; transform: scale(-1,1); background: url(../../images/bg08.png) no-repeat 0 0/100%; content: ""; } .servicesBlock01 > .item01:last-child:not(.type01)::before { bottom: -100px; } .servicesBlock01 > .item01::after { top: 80vw; right: -15px; width: 46vw; height: 82.66vw; background: url(../../images/bg08.png) no-repeat 0 0/100%; } .servicesBlock01 > .item01.type01::before,.servicesBlock01 > .item01.type01::after { content: none; } .servicesBlock01 .column01 { width: 100%; } .servicesBlock01 .column02 { width: 100%; } .servicesBlock01 .item01.type01 { margin-top: 100px; padding-bottom: 160px; padding-top: 50px; -webkit-mask-image: url('../../images/mask_service_sp.svg'); mask-image: url('../../images/mask_service_sp.svg'); -webkit-mask-size: 100vw; mask-size: 100vw; } .servicesBlock01 .item01.type01 + .item01 { -webkit-mask-image: url('../../images/mask_service_sp.svg'); mask-image: url('../../images/mask_service_sp.svg'); -webkit-mask-size: 100vw; mask-size: 100vw; padding-top: 80px; } .servicesBlock01 .item01.type01 .column01 { width: 100%; } .servicesBlock01 .item01.type01 .column02 { width: 100%; } .servicesBlock01 .item01:nth-of-type(3) .column01 { width: 100%; } .servicesBlock01 .item01:nth-of-type(3) .column02 { width: 100%; } .servicesBlock01 .column01 > .inner01 { display: flex; flex-wrap: wrap; } .servicesBlock01 .column01 > .inner01 > .box01 { width: 100%; order: 1; } .servicesBlock01 .column01 > .inner01 > .box01 > .title01 { text-align: center; font-size: 2.4rem; } .servicesBlock01 .column01 > .inner01 > .box01 > .title01::before { font-size: 1.2rem; left: 50%; transform: translateX(-50%); } .servicesBlock01 .column01 > .inner01 > .box01 > .text01 { font-size: 1.2rem; margin-top: 2px; text-align: center; } .servicesBlock01 .column01 > .inner01 > .box02 { width: 100%; order: 3; } .servicesBlock01 .column01 > .inner01 > .box02 > .image01 { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 35px; } .servicesBlock01 .column01 > .inner01 > .box02 > .image02 { margin-top: 45px; } .servicesBlock01 .column01 > .inner01 > .box02 > .text01 { line-height: 1.8; font-size: 2.0rem; margin-top: 40px; } .servicesBlock01 .column01 > .inner01 > .box02 > .text02 { margin-top: 40px; } .servicesBlock01 .column01 > .inner01 > .button01 { margin-top: 20px; display: block; width: 100%; order: 2; } .servicesBlock01 .column01 > .inner01 > .button01 > a { height: 40px; font-size: 1.6rem; max-width: 300px; margin-left: auto; margin-right: auto; } .servicesBlock01 .column01 > .inner01 > .button01 > a:hover { color: #fff; } .servicesBlock01 .column01 > .inner01 > .button01 > a::before { content: none; } .servicesBlock01 .column02 > .button01 { margin-top: 40px; display: block; max-width: 300px; width: 100%; margin-left: auto; margin-right: auto; } .servicesBlock01 .column02 > .button01 > a { position: relative; z-index: 1; display: flex; flex-wrap: wrap; height: 40px; width: 100%; padding-bottom: 2px; justify-content: space-between; justify-content: center; align-items: center; border: solid 3px #182e5c; background-color: #182e5c; border-radius: 100px; color: #fff; text-decoration: none; font-size: 1.6rem; font-weight: 700; overflow: hidden; line-height: 1.2; } .servicesBlock01 .column02 > .image01, .servicesBlock01 .item01.type01 .column02 > .image01, .servicesBlock01 .column02 > .image04 { display: none; } .servicesBlock01 .column02 > .image02 { margin-right: -10%; margin-top: 40px; margin-left: -4%; margin-bottom: -40px; } .servicesBlock01 .column02 > .image03 { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .servicesBlock01 .column02 > .title01 { margin-top: 70px; } .servicesBlock01 .column02 > .title01 > span { font-size: 1.6rem; } .servicesBlock01 .column02 > .title01 > span::before,.servicesBlock01 .column02 > .title01 > span::after { content: none; } .servicesBlock01 .column02 > .frame01 { padding: 25px 4%; margin-top: 25px; border-radius: 15px; text-align: center; } .servicesBlock01 .column02 > .frame01 > .title01 { display: table; border-bottom: none; padding-bottom: 0; } .servicesBlock01 .column02 > .frame01 > .title01 > span { border-bottom: solid 1px #d85b94; padding-bottom: 2px; line-height: 1.8; } .servicesBlock01 .column02 > .frame01 > ul { padding-bottom: 20px; justify-content: center; gap: 20px 0; margin-top: 25px; padding-left: 2%; padding-right: 2%; } .servicesBlock01 .column02 > .frame01 > ul::after { top: 100%; transform: translate(50%,0); right: 50%; } .servicesBlock01 .column02 > .frame01 > ul > li { width: calc(100% / 3); } .servicesBlock01 .column02 > .frame01 > ul > li img { height: 13.33vw; } .servicesBlock01 .column02 > .frame01 > .text01 { font-size: 1.2rem; margin-top: 40px; line-height: 2.0; } .servicesBlock01 .column02 > .logo01 { margin-top: 50px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .servicesBlock01 .column02 > .logo01::before,.servicesBlock01 .column02 > .logo01::after { content: none; } .servicesBlock01 .column02 > .logo01 > p { min-width: 300vw; } .servicesBlock01 .column02 > .logo01 > .line01 img:nth-child(1) { animation: logoLoop01 30s -15s linear infinite; } .servicesBlock01 .column02 > .logo01 > .line01 img:nth-child(2) { animation: logoLoop02 30s linear infinite; } .servicesBlock01 .column02 > .logo01 > .line02 img:nth-child(1) { animation: logoLoop03 30s -15s linear infinite; } .servicesBlock01 .column02 > .logo01 > .line02 img:nth-child(2) { animation: logoLoop04 30s linear infinite; } .conceptBlock01 { padding-bottom: 50px; -webkit-mask-image: url(../../images/mask_service_sp.svg); mask-image: url(../../images/mask_service_sp.svg); padding-top: 22vw; margin-top: -16vw; } .conceptBlock01 > .title01 > .logo01 { width: 100%; max-width: 320px; left: 0; margin-bottom: 40px; } .conceptBlock01 > .title01 { font-size: 2.3rem; } .conceptBlock01 > .txt02 { font-size: 1.6rem; line-height: 1.81; } .conceptBlock01 > .image01 { margin-left: -10%; margin-right: -10%; margin-top: 20px; } .conceptBlock01 > .text01 { font-size: 1.6rem; margin-top: 40px; } .featureBlock02 .leadBlock01 { padding: 30px 6.66% 100px; } .featureBlock02 .heading11 > .text01 { padding-bottom: 4px; border-bottom: solid 1px #fff; display: table; margin: 0 auto 8px; } .featureBlock02 .leadBlock01 > ul { display: block; } .featureBlock02 .leadBlock01 > ul > li { width: 100%; border-radius: 15px; } .featureBlock02 .leadBlock01 > ul > li + li { margin-top: 40px; } .featureBlock02 .leadBlock01 > ul > li > .row01 { padding: 20px 3.07%; } .featureBlock02 .leadBlock01 > ul > li > .row01 > .text01 { font-size: 1.2rem; } .featureBlock02 .leadBlock01 > ul > li > .row01 > .icon01 { width: 48.9%; } .featureBlock02 .leadBlock01 > ul > li > .row01 > .title01 { font-size: 1.6rem; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a { padding: 15px 7.69%; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a br { display: none; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a > span { line-height: 1.57; padding-left: 2%; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a > span::before { width: 30px; height: 30px; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a > span::after { width: 12px; height: 12px; right: 9px; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a:hover > span { text-decoration: mone; } .featureBlock02 .leadBlock01 > ul > li > .row02 > a:hover > span::before { background-color: #182e5c; } .featureBlock02 > .section01 > .title01 { flex-direction: column-reverse; padding-left: 6.66%; padding-right: 6.66%; } .featureBlock02 > .section01 > .title01::before { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background-color: #182e5c; content: ""; } .featureBlock02 > .section01 > .title01 > .column01 { width: 100%; padding-top: 25px; padding-bottom: 120px; } .featureBlock02 > .section01 > .title01 > .column01 > h2 > .font02 { justify-content: space-between; } .featureBlock02 > .section01 > .title01 > .column01 > h2 > .font02 img { width: 30%; } .featureBlock02 > .section01 > .title01 > .column01 > h2 > .font02 > span { font-size: 5.833vw; width: 64%; line-height: 1.43; } .featureBlock02 > .section01 > .title01 > .column01 > h2 > .font02 > span > br { display: block; } .featureBlock02 > .section01 > .title01 > .column01 > .text01 { margin-top: 30px; } .featureBlock02 > .section01 > .title01 > .column02 { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; } .featureBlock02 > .section01 > .title01 > .column02 > .image01 { clip-path: none; } .featureBlock02 > .section01 > .title01 + .box01 { margin-top: -70px; -webkit-mask-image: url(../../images/mask_service_sp.svg); mask-image: url(../../images/mask_service_sp.svg); padding-top: 80px !important; } .featureBlock02 > .section01 > .box01 { padding-top: 70px; padding-left: 6.66%; padding-right: 6.66%; } .featureBlock02 > .section01 > .box01:last-child { padding-bottom: 100px !important; } .featureBlock02 > .section01 > .box01 > .image01 { position: static; min-width: inherit; transform: translateX(0); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 40px; } .featureBlock02 > .section01 > .box01 > .frame01 { padding: 35px 8%; border-radius: 15px; } .featureBlock02 > .section01 > .box01 > .frame01.type01 { max-width: 86.153%; padding-bottom: 60px; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 { width: 100%; display: contents; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .image01 { width: 33%; margin-left: -2%; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .column02 { display: contents; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .column02 > .title01 { border-bottom: none; width: 66%; margin-top: 13px; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .column02 > .text01 { padding-top: 15px; margin-top: 8px; border-top: solid 1px #182e5c; margin-bottom: 30px; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .column02 > .text02 { margin-top: -20px; } .featureBlock02 > .section01 > .box01 > .title01,.featureBlock02 > .section01 > .box01 > .inner01 > .title01 { font-size: 2.1rem; } .featureBlock02 > .section01 > .box01 > .title01 > span,.featureBlock02 > .section01 > .box01 > .inner01 > .title01 > span { font-size: 3.4rem; margin-right: 2px; } .featureBlock02 > .section01 > .box01 > .title01.type01::before,.featureBlock02 > .section01 > .box01 > .title01.type01::after { content: none; } .featureBlock02 > .section01 > .box01 > .title01.type01 { margin-top: -20px; } .featureBlock02 > .section01 > .box01 > .title01.type02 { margin-left: -3%; margin-right: -3%; letter-spacing: 0; } .featureBlock02 > .section01 > .box01 > .title01.type01,.featureBlock02 > .section01 > .box01 > .title01.type02 { font-size: 2.4rem; } .featureBlock02 > .section01 > .box01 > .title02 { font-size: 2.0rem; padding-left: 30px; padding-right: 30px; margin: -20px auto 0; text-align: center; letter-spacing: 0; } .featureBlock02 > .section01 > .box01 > .title02::before,.featureBlock02 > .section01 > .box01 > .title02::after { height: 24px; } .featureBlock02 > .section01 > .box01 > .title02 > span { letter-spacing: 0; } .featureBlock02 > .section01 > .box01 > .text02 { font-size: 1.6rem; } .featureBlock02 > .section01 > .box01 > .text03 { margin-top: 30px; font-size: 1.4rem; } .featureBlock02 > .section01 > .box01 > .button01 { max-width: 300px; } .featureBlock02 > .section01 > .box01 > .button01 > a { padding: 4px 20px 6px; font-size: 1.6rem; } .featureBlock02 > .section01 > .box01 > .button01 > a::before { content: none; } .featureBlock02 > .section01 > .box01 > .button01 > a:hover { color: #fff; } .featureBlock02 > .section01 > .box01 > .button02 > a { font-size: 1.5rem; padding-bottom: 8px; padding-right: 22px; } .featureBlock02 > .section01 > .box01 > .button02 > a::before,.featureBlock02 > .section01 > .box01 > .button02 > a::after { top: 40%; } .featureBlock02 > .section01 > .box01 > .button02 > a::before { width: 15px; height: 15px; } .featureBlock02 > .section01 > .box01 > .button02 > a::after { width: 7px; height: 7px; right: 4px; z-index: 2; } .featureBlock02 > .section01 > .box01 > .button02 > a:hover { color: #182e5c; border-color: #182e5c; } .featureBlock02 > .section01 > .box01 > .button02 > a:hover::before { background-color: #182e5c; } .featureBlock02 > .section01 > .box01 > .button03 { max-width: 300px; } .featureBlock02 > .section01 > .box01 > .button03 > a { padding: 6px 30px 9px; font-size: 1.6rem; } .featureBlock02 > .section01 > .box01 > .button03 > a:hover { color: #fff; } .featureBlock02 > .section01 > .box01 > .button03 > a::before { content: none; } .featureBlock02 > .section01 > .box01 > .button03 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .featureBlock02 > .section01 > .box01 > .button03 > a > .inner01::before, .featureBlock02 > .section01 > .box01 > .button03 > a > .inner01::after { top: 54%; } .featureBlock02 > .section01 > .box01 > .button03 > a > .inner01::before { width: 15px; height: 15px; } .featureBlock02 > .section01 > .box01 > .button03 > a > .inner01::after { width: 7px; height: 7px; right: 4px; } .featureBlock02 > .section01 > .box01 > .button03 > a:hover > .inner01::before { background-color: #ffffff; } .featureBlock02 > .section01 > .box01 > .button03 > a:hover > .inner01::after { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.4%206.4%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c8aa6e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ECTA%E3%83%9C%E3%82%BF%E3%83%B3-80%20%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22SP%22%3E%3Cg%20id%3D%22CTA%E3%83%9C%E3%82%BF%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M3.2%2C2.4H0V4H3.2V6.4L6.4%2C3.2%2C3.2%2C0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .featureBlock02 > .section01 > .box01 .companyList { margin-top: 50px; margin-left: -2%; margin-right: -3%; } .featureBlock02 > .section01 > .box01 .companyList > li { width: 34.2%; } .featureBlock02 > .section01 > .box01 .companyList > li:not(:nth-child(3n+1)) { margin-left: 0; } .featureBlock02 > .section01 > .box01 .companyList > li:nth-child(n+4) { margin-left: 0; } .featureBlock02 > .section01 > .box01 .companyList > li:not(:nth-child(3n+1)) { margin-left: -2.5%; } .featureBlock02 > .section01 > .box01 .companyList > li:nth-child(n+3) { margin-top: 0; } .featureBlock02 > .section01 > .box01 .companyList > li:nth-child(n+4) { margin-top: -2%; } .featureList01 { display: flex; flex-wrap: wrap; gap: 0 13%; } .featureList01 > li { width: 100%; } .featureList01 > li > .image01 { width: 78%; margin-left: auto; margin-right: auto; } .featureList01 > li > .title01 { max-width: 140px; margin-left: auto; margin-right: auto; } .featureList01 > li > .text01 { position: static; } .featureList01 > li:nth-child(1) > .text01 { width: 84.666%; margin: 20px auto 5px; } .featureList01 > li:nth-child(2) > .text01 { width: 85%; margin: 20px auto 5px; } .featureList01 > li:nth-child(3) > .text01 { width: 90.869%; margin: 20px auto 5px; } .featureList02 { gap: 20px 2%; margin-bottom: 40px; padding-bottom: 45px; } .featureList02::before { font-size: 4vw; } .featureList02 > li { height: 17.33vw; width: 30%; text-align: left; } .featureList02 > li img { display: block; margin-left: auto; margin-right: auto; } .featureList03 { margin-top: 40px; display: block; } .featureList03 > li { border-radius: 12px; padding: 30px 6.66%; width: 100%; } .featureList03 > li + li { margin-top: 15px; } .featureList03 > li > .title01 > span { font-size: 1.4rem; width: 125px; margin-bottom: 12px; padding: 4px 10px; } .featureList03 > li > .icon01 { width: 120px; height: auto; margin: 20px auto 0; } .priceBlock01 { padding-top: 40px; } .priceBlock01:last-child { padding-bottom: 60px; } .priceBlock01 .frame01 { padding: 35px 3.07% 55px ; border-radius: 14px; margin-top: 30px; } .priceBlock01 .frame01 > .title01 { padding-top: 10px; margin-top: 10px; font-size: 2.4rem; font-weight: 700; padding-left: 30px; padding-right: 30px; margin-left: auto; margin-right: auto; } .priceBlock01 .frame01 .title01::before,.priceBlock01 .frame01 .title01::after { width: 1px; } .priceBlock01 .frame01 > .title01 .text01 { font-size: 1.4rem; margin-top: 10px; } .priceBlock01 .frame01 > .title01 .bogus::before { top: -5px; width: 5px; height: 5px; } .priceBlock01 .frame01 > .text01 { width: 102%; transform: translateY(0); position: static; margin-top: 20px; } .priceBlock01 .frame01 > .btn01 { margin-left: auto; margin-bottom: 0; } .priceBlock01 .frame01 > .btn01 > a { box-shadow: none; font-size: 1.6rem; } .featureTabBlock01 .thumbnail { display: none; } .featureTabBlock01 .contents { margin-top: -30px; margin-left: auto; margin-right: auto; } .featureTabBlock01 .contents .item01 { border-radius: 15px; padding: 20px 6.15% 40px ; display: block; } .featureTabBlock01 .contents .item01 + .item01 { margin-top: 15px; } .featureTabBlock01 .contents .item01 > .image01 { width: 100%; } .featureTabBlock01 .contents .item01 > .column01 { width: 100%; } .featureTabBlock01 .contents .item01 > .column01 > .title01 { margin-top: 15px; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .icon01 { width: 20.92%; margin-right: 3%; margin-left: 3.79%; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01 { width: 72%; font-size: 2.4rem; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01.type01 { font-size: 2.0rem; letter-spacing: 0; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01 > strong { font-size: 1.4rem; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01 > em { font-size: 1.5rem; display: block; margin-left: 0; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01 > span { margin-top: 8px; letter-spacing: 0; } .featureTabBlock01 .contents .item01 > .column01 > .js_button01 { display: block; margin-top: 20px; width: 94%; margin-left: auto; margin-right: auto; } .featureTabBlock01 .contents .item01 > .column01 > .js_button01 > a { font-size: 1.3rem; color: #102f5f; border-radius: 3px; border: solid 1px #102f5f; display: block; padding: 5px 10px; line-height: 1.4; text-decoration: none; text-align: center; } .featureTabBlock01 .contents .item01 > .column01 > .box01 { display: none; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .image01 { margin-top: 15px; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .button01 { max-width: 280px; width: 100%; margin-left: auto; margin-right: auto; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .button01 > a { font-size: 1.6rem; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .button01 > a::before { content: none; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .box02 { display: block; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .box02 > .image01 { width: 100%; } .featureTabBlock01 .contents .item01 > .column01 > .box01 > .box02 > .column01 { width: 100%; margin-top: 20px; } .featureBlock02 > .section01 > .title01 + .box01::before { top: 32.66vw; width: 46vw; height: 82.66vw; background: url(../images/bg07s.png) no-repeat 0 0/100%; } .featureBlock02 > .section01:last-child > .title01 + .box01::before { content: none; } .featureBlock02 > .section01 > .box01:nth-of-type(2):not(.type01)::before { top: 9.344vw; width: 46vw; height: 82.66vw; background: url(../images/bg07s.png) no-repeat 0 0/100%; transform: scale(-1,1); } .featureBlock02 > .section01 > .box01.type01 { padding-bottom: 65px; } .featureBlock02 > .section01 > .box01.type01 + .box01:nth-of-type(2):not(.type01)::before { content: none; } .featureBlock02 > .section01 > .box01.type01 + .box01:nth-of-type(2):not(.type01) + .box01 { z-index: 1; } .featureBlock02 > .section01 > .box01.type01 + .box01:nth-of-type(2):not(.type01) + .box01::before { top: -56vw; right: 0; left: inherit; width: 46vw; height: 82.66vw; background: url(../images/bg07s.png) no-repeat 0 0/100%; } .featureBlock02 > .section01 > .box01.type01 + .box01:nth-of-type(2):not(.type01) + .box01::after { top: 98.666vw; content: ""; left: 0; z-index: -1; position: absolute; width: 46vw; height: 82.66vw; transform: scale(-1,1); background: url(../images/bg07s.png) no-repeat 0 0/100%; } .featureBlock02 > .section01:last-child > .box01:last-child::before { top: 35.666vw; width: 40vw; height: 49.866vw; background: url(../images/bg09s.png) no-repeat 0 0/100%; } .featureBlock02 > .section01:last-child > .box01:last-child::after { bottom: inherit; top: 264vw; width: 40vw; height: 49.866vw; transform: scale(-1,1); background: url(../images/bg09s.png) no-repeat 0 0/100%; } .titleArea03 { height: 88vw; margin-top: 44px; min-height: 330px; } .titleArea03 + .contentsWrap01 { padding-top: 10.66vw; } .titleArea03 > .title01 { font-size: 3.1rem; line-height: 1.4; } .titleArea03 > .text01 { font-size: 1.4rem; margin-bottom: 10px; margin-top: -20px; } .titleArea03 > .btn01 { margin-top: 30px; } .titleArea03::before { content: none; } .sectionBlock01 { padding-top: 70px; background-color: #fff; } .sectionBlock01:first-child { padding-top: 18.66vw; margin-top: -16vw; -webkit-mask-image: url(../../images/mask_service_sp.svg); mask-image: url(../../images/mask_service_sp.svg); } .sectionBlock01::before { top: -45vw; width: 46vw; height: 82.66vw; background: url(../images/bg07s.png) no-repeat 0 0/100%; } .sectionBlock01::after { bottom: 296.666vw; top: inherit; width: 46vw; height: 82.66vw; transform: scale(-1,1); background: url(../images/bg07s.png) no-repeat 0 0/100%; } .illustBlock02 { margin-top: 45px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; padding: 45px 5.33% 40px; box-shadow: none; } .illustBlock02::before { width: 110%; height: 70px; left: -5%; background: url(../../inbound-tickets/lp-restaurants/images/bg02.png) no-repeat 0 0/100% 100%; } .illustBlock02 > .box01 { width: 53.73%; height: auto; max-height: auto; } .illustBlock02 > .box01 > .image01 { margin-top: 0; } .illustBlock02 > ul > li { position: static; opacity: 1.0; width: 100% !important; animation-delay: none !important; } .illustBlock02.is_show > ul > li:nth-child(1),.illustBlock02.is_show > ul > li:nth-child(2),.illustBlock02.is_show > ul > li:nth-child(3) { animation: none; } .illustBlock02.is_show > ul > li:nth-child(4),.illustBlock02.is_show > ul > li:nth-child(5),.illustBlock02.is_show > ul > li:nth-child(6) { animation: none; } .sectionBlock02 { padding-top: 70px; position: relative; z-index: 1; } .sectionBlock02::after { background: url(../../images/bg10s.png) no-repeat 0 0/100%; top: 0; right: 0; width: 100vw; height: 136.4vw; } .sectionBlock02:not(:last-child) { padding-bottom: 80px; } .sectionBlock02::before { height: 329vw; } .sectionBlock02 > .blockIn01::before { content: none; } .heading12 { font-size: 3.0rem; line-height: 1.4; } .heading13 { font-size: 3.0rem; letter-spacing: 0; } .heading13 > span { font-size: 1.8rem; margin-bottom: 5px; } .sectionBlockColumn01 { margin-top: 30px; display: block; } .sectionBlockColumn01 > .column01 { width: 100%; border-radius: 12px; padding: 12px 4.61% 20px; } .sectionBlockColumn01 > .column01 + .column01 { margin-top: 30px; } .sectionBlockColumn01 > .column01 > .row01 { margin-top: 10px; } .sectionBlockColumn01 > .column01 > .row01 > .logo01 { width: 30%; margin-left: -2%; margin-top: 0; } .sectionBlockColumn01 > .column01 > .row01 > .column01 > .title01 { font-size: 1.4rem; } .sectionBlockColumn01 > .column01 > .row01 > .column01 > .text01 { margin-top: 5px; } .txt07 { font-size: 2.0rem; line-height: 2.2; margin-top: 90px; } .txt07 > span { padding-bottom: 6px; } .txt08 { line-height: 2.0; margin-top: 20px; } .txt09 { margin-top: 35px; text-align: center; } .txt09 > dt { font-size: 2.3rem; text-align: center; display: inline; padding-bottom: 2px; } .txt09 > dd { margin-top: 20px; font-size: 1.6rem; } .txt10 { font-size: 1.6rem; margin-top: 50px; } .txt11 { font-size: 2.3rem; } .illustBlock03 { margin-top: 45px; } .illustBlock03 > .box01 { display: block; } .illustBlock03 > .image01,.illustBlock03 > .column01,.illustBlock03 > .column02 { display: none; } .illustBlock03 > .box01 > .text02 { margin-top: 8vw; margin-bottom: 8vw; position: relative; } .illustBlock03 > .box01 > .text02 > p { overflow: hidden; } .illustBlock03 > .box01 > .text02 > p img { opacity: 0; display: block; transform: matrix(1, 0, 0, 1, 0, 100); transition: all .4s ease; transition-delay: .6s; } .illustBlock03 > .box01 > .text02.is_show > p img { opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); } .illustBlock03 > .box01 > .text02 > .icon01 { transform: rotate(-90deg); position: absolute; left: 31%; top: 50%; width: 29.333vw; height: 14vw; margin-top: -9vw; } .illustBlock03 > .box01 > .text02 > .icon01 > div { overflow: hidden; width: 100%; height: 50%; } .illustBlock03 > .box01 > .text02 > .icon01 > div img { display: block; } .illustBlock03 > .box01 > .text02 > .icon01 > div:nth-child(1) img { transform: translateX(-100%); } .illustBlock03 > .box01 > .text02 > .icon01 > div:nth-child(2) img { transform: translateX(100%); } .illustBlock03 > .box01 > .text02.is_show > .icon01 > div:nth-child(1) img, .illustBlock03 > .box01 > .text02.is_show > .icon01 > div:nth-child(2) img { transition: all .6s; } .illustBlock03 > .box01 > .text02.is_show > .icon01 > div:nth-child(1) img { transform: translateX(0); } .illustBlock03 > .box01 > .text02.is_show > .icon01 > div:nth-child(2) img { transform: translateX(0); } .conceptBlock02 { -webkit-mask-image: url(../../images/mask_service_sp.svg); mask-image: url(../../images/mask_service_sp.svg); padding-top: 10vw; margin-top: -16vw; padding-bottom: 80px; } .conceptBlock02::before { top: -34vw; width: 46vw; height: 82.66vw; background: url(../images/bg07s.png) no-repeat 0 0/100%; } .conceptBlock02::after { bottom: -30vw; top: inherit; width: 46vw; height: 82.66vw; transform: scale(-1,1); background: url(../images/bg07s.png) no-repeat 0 0/100%; } .conceptBlock02.type01::before,.conceptBlock02::after { content: none; } .conceptBlock02 > .blockIn01 { display: block; } .conceptBlock02 > .blockIn01 > .image01 { width: 110%; margin-left: 0; margin-top: 5vw; } .conceptBlock02 > .blockIn01 > .text01 { width: 100%; margin-top: 20px; margin-bottom: 0; text-align: center; } .conceptBlock02 > .blockIn01 > .text02 { line-height: 2.22; font-size: 1.8rem; margin-top: 40px; margin-bottom: 40px; } .conceptBlock02 > .blockIn01 > .box01 { margin-bottom: 0; margin-top: 60px; } .conceptBlock02 > .blockIn01 > .box01 > .line01 { min-width: 230vw; } .conceptBlock02 > .blockIn01 > .box01 > .line02 { min-width: 230vw; } .conceptBlock02 > .blockIn01 > .btn01 { margin-top: 35px; max-width: 280px; width: 100%; } .sectionBlock03 { padding-top: 60px; padding-bottom: 70px; } .sectionBlock03:not(.type01):not(.type02):not(.type03)::before { top: -32vw; width: 46vw; height: 82.66vw; background: url(../images/bg07s.png) no-repeat 0 0/100%; } .sectionBlock03:not(.type01):not(.type02):not(.type03)::after { top: 170vw; width: 46vw; height: 82.66vw; transform: scale(-1,1); background: url(../images/bg07s.png) no-repeat 0 0/100%; } .sectionBlock03 .heading11.type01 { font-size: 3.0rem; letter-spacing: 0; } .sectionBlock03 .heading11.type01 > .text01 { margin-bottom: 15px; } .sectionBlock03 .heading11.type01 > .text01.type01 { font-size: 1.2rem; } .sectionBlock03 .heading11.type02 { font-size: 3.0rem; letter-spacing: 0; } .sectionBlock03 .heading11.type02 > .text01 { margin-bottom: 15px; font-size: 1.2rem; } .sectionBlock03.type02 .txt12 { font-size: 1.8rem; } .sectionBlock03.type03 { padding-bottom: 160px; } .sectionBlock03.type03::before { width: 100%; height: 629.86vw; background: url(../images/bg11s.png) no-repeat 0 0/100%; } .sectionBlock03.type03::after { content: none; } .sectionBlock03.type03 + .sectionBlock03 { -webkit-mask-image: url(../../images/mask_service_sp.svg); mask-image: url(../../images/mask_service_sp.svg); margin-top: -70px; padding-top: 80px; } .txt12 { letter-spacing: 0; } .txt13 { font-size: 1.4rem; line-height: 2.07; } .mediaBlock01 { margin-top: 70px; } .mediaBlock01 > ul { margin-top: 30px; display: block; } .mediaBlock01 > ul > li { width: 100%; border-radius: 18px; padding: 30px 7.69% 25px; } .mediaBlock01 > ul > li:not(:first-child) { margin-top: 15px; } /*0250602 カラム調整 .mediaBlock01 > ul > li:nth-child(5),.mediaBlock01 > ul > li:nth-child(6),.mediaBlock01 > ul > li:nth-child(7) { width: 100%; } .mediaBlock01 > ul > li:nth-child(5) > .text01, .mediaBlock01 > ul > li:nth-child(6) > .text01, .mediaBlock01 > ul > li:nth-child(7) > .text01 { font-size: 1.4rem; }*/ .mediaBlock01 > ul > li:nth-child(5),.mediaBlock01 > ul > li:nth-child(6),.mediaBlock01 > ul > li:nth-child(7),.mediaBlock01 > ul > li:nth-child(8) { width: 100%; } .mediaBlock01 > ul > li:nth-child(5) > .text01, .mediaBlock01 > ul > li:nth-child(6) > .text01, .mediaBlock01 > ul > li:nth-child(7) > .text01, .mediaBlock01 > ul > li:nth-child(8) > .text01 { font-size: 1.4rem; } .mediaBlock01 > ul > li > .logo01 { height: 37.333vw; } .mediaBlock01 > ul > li > .title01 { margin-top: 15px; } .mediaBlock01 > ul > li > .btn04 { max-width: inherit; } .mediaBlock01 > ul > li > .btn04 > a { font-size: 1.6rem; padding: 6px 20px 10px; } .btn04 { max-width: 280px; width: 100%; margin-top: 45px; } .btn04 > a { font-size: 1.6rem; } .btn04 > a::before { content: none; } .btn04 > a:hover { color: #fff; } .servicesBlock02 > .column01 { display: contents; } .servicesBlock02 > .column01 .heading11.type01 { margin-top: 0; text-align: center; order: 0; width: 100%; } .servicesBlock02 > .column01 .heading11.type01 > .text01 { margin-left: auto; } .servicesBlock02 > .column01 > .text01 { text-align: center; order: 2; width: 100%; } .servicesBlock02 > .image01 { width: 100%; order: 1; margin-top: 40px; } .list09 { display: block; margin-top: 50px; position: relative; z-index: 1; } .list09::before { position: absolute; bottom: 10%; z-index: -1; left: -8.4%; width: 46vw; height: 82.66vw; transform: scale(-1,1); background: url(../images/bg07s.png) no-repeat 0 0/100%; content: ""; } .list09::after { position: absolute; top: 100%; z-index: -1; right: -8.4%; width: 46vw; height: 82.66vw; background: url(../images/bg07s.png) no-repeat 0 0/100%; content: ""; } .list09 > li { width: 100%; padding: 30px 7.69% 40px; } .list09 > li:not(:first-child) { margin-top: 15px; } .list09 > li > .image01 { width: 81.81%; margin-top: 30px; height: 38vw; } .list09 > li > .title01 { margin-top: 18px; } .list09 > li > .text01 { width: 125px; font-size: 1.4rem; } .list09 > li > .text02 { margin-top: 18px; } .caseBlock02 { position: relative; z-index: 1; } .caseBlock02::before { position: absolute; top: 90%; z-index: -1; right: -8.4%; width: 46vw; height: 82.66vw; background: url(../images/bg07s.png) no-repeat 0 0/100%; content: ""; } .caseBlock02::after { position: absolute; top: 46%; z-index: -1; left: -8.4%; width: 46vw; height: 82.66vw; transform: scale(-1,1); background: url(../images/bg07s.png) no-repeat 0 0/100%; content: ""; } .caseBlock02 > ul { display: block; margin-top: 25px; } .caseBlock02 > ul > li { width: 100%; border-radius: 16px; padding: 15px 4.61% 20px;; } .caseBlock02 > ul > li + li { margin-top: 20px; } .caseBlock02 > ul > li > .row01 > .text01 { font-size: 2.0rem; width: 70%; } .caseBlock02 > ul > li > .row01 > .text01 > span { font-size: 1.2rem; } .caseBlock02 > ul > li > .row01 > ul { max-width: 27.11%; gap: 0 7%; margin-top: 5px; justify-content: flex-end; } .caseBlock02 > ul > li > .row01 > ul > li { width: 46.25%; } .caseBlock02 > ul + .txt07 + .txt07 { margin-top: 30px; } .servicesBlock03 { margin-top: 40px; } .servicesBlock03 > .image01 { max-width: inherit; margin-left: -20%; width: 141%; } .servicesBlock03 > .text01 { width: 24.464%; right: 69.41%; top: 42.54%; } .servicesBlock03 > .text02 { width: 27.522%; right: 7.64%; top: 5.516%; } .servicesBlock03 > .text03 { width: 39.755%; right: 36.11%; top: -15.25%; } .servicesBlock03 > .text04 { top: 100%; width: 97%; } .servicesBlock04 { margin-top: 77vw; margin-left: 0; } .servicesBlock04 > .text01 { margin-top: 0; width: 100%; } .servicesBlock04 > .text01 > span { font-size: 5.33vw; } .servicesBlock04 > .image01 { right: -5%; top: 23.33vw; width: 52%; } .servicesBlock04 > .box01 { margin-top: 30vw; width: 100%; } .servicesBlock04 > .box01 > dt { font-size: 1.8rem; text-align: center; } .servicesBlock04 > .box01 > dd { padding: 30px 8.46%; border-radius: 18px; margin-top: 15px; } .servicesBlock05 { margin-top: 40px; margin-left: 0; margin-right: 0; } .servicesBlock05 > .image01 { max-width: 100%; width: 80vw; } .servicesBlock05 > .icon01 { width: 27.066vw; right: inherit; left: 0; top: inherit; bottom: 46.66vw; } .servicesBlock05 > .icon02 { width: 27.066vw; right: inherit; left: 0; top: inherit; bottom: 8vw; } .servicesBlock05 > .icon03 { width: 25.2vw; bottom: -8.66vw; right: 30.66vw; } .servicesBlock05 > .icon04 { width: 27.066vw; right: 0; top: inherit; bottom: 8vw; } .servicesBlock05 > .icon05 { width: 27.066vw; right: 0; top: inherit; bottom: 46.66vw; } .servicesBlock05 > .icon06 { width: 25.2vw; top: inherit; right: 30.66vw; bottom: 60.66vw; } .servicesBlock05 > .text01 { width: 37.5vw; margin-right: -19vw; right: 50%; top: 37.156vw; } .servicesBlock05 > .text02 { width: 32.4vw; left: 1.33vw; right: 1.33vw; top: inherit; bottom: -18.66vw; } .servicesBlock05 > .text03 { width: 33.6vw; right: 0; top: inherit; bottom: -18.66vw; } .flowBlock01 { width: 91.74%; margin-top: 37.33vw; } .flowBlock01 > ol { display: block; width: 100%; } .flowBlock01 > ol > li { height: auto; } .flowBlock01 > ol > li:not(:first-child) { margin-top: -5vw; } .flowBlock01 > ol > li img { height: auto; width: 100%; } .flowBlock01 > .title01 { overflow: hidden; } .flowBlock01 > .title01 > span { font-size: 2.0rem; } .flowBlock01 > ol + .txt13 { font-size: 1.8rem; line-height: 1.77; margin-top: 35px; } .flowBlock01 + .btn01 { width: 280px; } .txt14 { font-size: 1.4rem; margin-top: 20px; } .txt14 + .txt14 { margin-top: 30px; } .caseBlock03 { margin-top: 50px; border-radius: 15px; padding: 25px 4.61% 50px ; } .caseBlock03 > .image01 { order: 2; margin-top: 30px; width: 100%; } .caseBlock03 > .column01 { display: contents; } .caseBlock03 > .column01 > .title01 { text-align: center; width: 100%; order: 0; margin-top: -10px; } .caseBlock03 > .column01 > .title01 span { display: table; margin-left: auto; margin-right: auto; } .caseBlock03 > .column01 > .title01 span::after { position: absolute; top: 50%; right: calc(100% + 10px); width: 100vw; height: 1px; background-color: #182e5c; content: ""; } .caseBlock03 > .column01 > .title02 { font-size: 1.8rem; margin-top: 15px; text-align: center; order: 1; width: 100%; line-height: 1.8; } .caseBlock03 > .column01 > .text01 { margin-top: 30px; line-height: 2.0; order: 3; } .caseBlock03 > .column01 > .button01 { max-width: 280px; width: 100%; margin-left: auto; margin-right: auto; margin-top: 40px; order: 4; } .caseBlock03 > .column01 > .button01 > a { padding: 6px 20px 8px; font-size: 1.6rem; } .caseBlock03 > .column01 > .button01 > a::before { content: none; } .caseBlock03 > .column01 > .button01 > a:hover { color: #fff; } } @keyframes logoLoop01 { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } } @keyframes logoLoop02 { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-200%, 0, 0); } } @keyframes logoLoop03 { 0% { transform: translate3d(-100%, 0, 0); } 100% { transform: translate3d(100%, 0, 0); } } @keyframes logoLoop04 { 0% { transform: translate3d(-200%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes popupRight { 0% { transform: translateX(40px) scale(0.8); opacity: 0; } 100% { transform: translateY(0) scale(1.0); } 80%, 100% { opacity: 1; } } @keyframes popupLeft { 0% { transform: translateX(-40px) scale(0.8); opacity: 0; } 100% { transform: translateY(0) scale(1.0); } 80%, 100% { opacity: 1; } } @keyframes zoomIn { 0% { transform: scale(0.6); opacity: 0; } 100% { opacity: 1; transform: scale(1); } } /*-------------------------------------------- 2023/12/12 リニューアル大衆点評 --------------------------------------------*/ .globalNav03 { position: absolute; z-index: -1; top: 70px; background-color: #fff; left: 0; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-shadow: 0px 1px 6px 0 rgba(0,0,0,0.2) inset; } .globalNav03 > nav { max-width: 1000px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; padding-top: 17px; padding-bottom: 17px; display: flex; flex-wrap: wrap; align-items: center; } .globalNav03 > nav > ul { display: flex; flex-wrap: wrap; gap: 0 18px; width: calc(100% - 65px); } .globalNav03 > nav > ul > li { } .globalNav03 > nav > ul > li > a { text-decoration: none; display: block; position: relative; color: #ababac; padding-bottom: 1px; transition: color .3s; overflow: hidden; font-weight: 700; } .globalNav03 > nav > ul > li > a:hover { color: #3e3a39; } .globalNav03 > nav > ul > li > a::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; content: ""; transition: transform .3s; background-color: #ed6f43; transform: translateX(-100%); } .globalNav03 > nav > ul > li > a:hover::before { transform: translateX(0); } .globalNav03 > nav > .logo01 { width: 38px; margin-right: 25px; } .titleArea01.type03 { margin-top: 142px; height: 420px; } .titleArea01.type03 + .contentsWrap01 { padding-top: 0; } .titleArea01.type03::before { content: none; } .titleArea01.type03 > .title01 { margin-top: -25px; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8); } .titleArea01.type03 > .title01 > span { width: 580px; display: block; margin-left: auto; margin-right: auto; margin-top: 20px; } .dianpingFooterBlock01 { padding: 70px 6.4%; background-color: #f1f3f5; } .dianpingFooterBlock01 > .inner01 { max-width: 730px; margin-left: auto; margin-right: auto; } .dianpingFooterBlock01 > .inner01 > .title01 { display: table; margin-left: auto; margin-right: auto; } .dianpingFooterBlock01 > .inner01 > .title01 > span { display: block; position: relative; font-size: 2.8rem; font-weight: 700; padding-left: 40px; padding-right: 40px; } .dianpingFooterBlock01 > .inner01 > .title01 > span::before,.dianpingFooterBlock01 > .inner01 > .title01 > span::after { position: absolute; top: 55%; width: 2px; height: 38px; background-color: #3e3a39; content: ""; } .dianpingFooterBlock01 > .inner01 > .title01 > span::before { left: 20px; transform: translateY(-50%) rotate(-25deg); } .dianpingFooterBlock01 > .inner01 > .title01 > span::after { right: 20px; transform: translateY(-50%) rotate(25deg); } .dianpingFooterBlock01 > .inner01 > .logo01 { width: 388px; margin: 30px auto 0; } .dianpingFooterBlock01 > .inner01 > .text01 { font-size: 1.4rem; line-height: 2.0; margin-top: 15px; padding-left: 20px; padding-right: 20px; } .dianpingFooterBlock01 > .inner01 > .box01 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-top: solid 1px #3e3a39; padding-top: 30px; margin-top: 50px; padding-left: 20px; padding-right: 20px; } .dianpingFooterBlock01 > .inner01 > .box01 > .logo01 { width: 295px; } .dianpingFooterBlock01 > .inner01 > .box01 > .text01 { max-width: calc(100% - 200px); color: #ed6f43; font-size: 1.4rem; font-weight: 700; } .dianpingFooterBlock01 > .inner01 > .btn01 { margin-top: 35px; } .dianpingFooterBlock01 > .inner01 > .btn01 > a { font-size: 1.8rem; } .dianpingFooterBlock02 { padding: 35px 6.4%; } .dianpingFooterBlock02 > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 27px; } .dianpingFooterBlock02 > ul > li > a { font-weight: 700; } .dianpingSection01 { position: relative; padding-top: 130px; padding-bottom: 110px; background-color: #fff; z-index: 1; } .dianpingSection01:first-of-type { padding-bottom: 180px; -webkit-mask-image: url(../../images/mask_service.svg); mask-image: url(../../images/mask_service.svg); -webkit-mask-size: 100%; mask-size: 100%; margin-top: -75px; } .dianpingSection01:last-child { margin-bottom: -80px; } .dianpingSection01:first-of-type + .dianpingSection01 { margin-top: -80px; } .dianpingSection01.type01 { padding-top: 100px; padding-bottom: 130px; background-color: #fdeee8; -webkit-mask-image: url(../../images/mask_service.svg); mask-image: url(../../images/mask_service.svg); -webkit-mask-size: 100%; mask-size: 100%; } .dianpingSection01.type01 + .dianpingSection01 { margin-top: -80px; padding-top: 160px; -webkit-mask-image: url(../../images/mask_service.svg); mask-image: url(../../images/mask_service.svg); -webkit-mask-size: 100%; mask-size: 100%; } .dianpingSection01.type02 { padding-top: 80px; background: url(../../inbound-promotion/dianping/images/bg02.jpg) no-repeat 50% 0/cover; } .dianpingSection01::before,.dianpingSection01::after { position: absolute; content: ""; z-index: -1; } .dianpingSection01:not(.type01):not(.type02)::before { top: -120px; right: 0; width: 357px; background: url(../../inbound-promotion/dianping/images/bg03.png) no-repeat 0 0/100%; height: 1914px; } .dianpingSection01:not(.type01):not(.type02)::after { top: 320px; left: 0; width: 357px; height: 1772px; background: url(../../inbound-promotion/dianping/images/bg04.png) no-repeat 0 0/100%; } .dianpingSection01:nth-child(3):not(.type01):not(.type02)::after { top: 770px; } .dianpingSection01:nth-child(5):not(.type01):not(.type02)::before { top: -200px; } .dianpingSection01:nth-child(5):not(.type01):not(.type02)::after { content: none; } .dianpingFrameArea02 + .dianpingSection01::before { background: url(../../inbound-promotion/dianping/about/images/bg06.png) no-repeat 0 0/100% !important; } @media screen and (min-width: 768px) { .dianpingSection01.type05 { padding-bottom: 200px; } .dianpingSection01.type05 + * { margin-top: -80px; } } @media screen and (min-width: 1601px) { .titleArea01.type03 { height: 26.25vw; } .dianpingSection01 { padding-top: 8.125vw; padding-bottom: 6.875vw; } .dianpingSection01:first-of-type { margin-top: -8vw; padding-top: 8vw; } .dianpingSection01.type01 { padding-top: 6.25vw; padding-bottom: 8.125vw; } .dianpingSection01.type01 + .dianpingSection01 { margin-top: -5vw; } } .dianpingSection01.type02 .dianpingHeading01 { color: #fff; } .dianpingSection01.type02 .dianpingHeading01 > .text02 { font-size: 2.0rem; margin-top: 10px; } .dianpingSection01 .blockIn01 > .title01 { max-width: 620px; margin-left: auto; margin-right: auto; font-size: 2.4rem; font-weight: 700; color: #ed6f43; text-align: center; } .dianpingSection01 .blockIn01 > .title01 > .logo01 { margin-bottom: 20px; display: block; } .dianpingSection01 .blockIn01 > .btn01 { margin-top: 40px; width: 320px; } .dianpingSection01 .blockIn01 > .btn01 > a { font-size: 1.8rem; box-shadow: none; } .dianpingSection01 .blockIn01 > .text01 { text-align: center; margin-top: 30px; line-height: 2.0; font-size: 1.8rem; } .dianpingSection01 .blockIn01 > .text02 { text-align: center; color: #808080; margin-top: 20px; font-weight: 700; } .dianpingSection01 .blockIn01 > .text03 { margin-top: 60px; text-align: center; font-size: 1.8rem; } .dianpingSection01 .blockIn01 > .text04 { text-align: center; margin-top: 20px; margin-bottom: -20px; } .dianpingSection01 .blockIn01 > .box01 { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px; } .dianpingSection01 .blockIn01 > .box01 > .column01 { width: 62%; position: relative; } .dianpingSection01 .blockIn01 > .box01 > .column01 > .icon01 { position: absolute; width: 154px; left: 0; top: -70px; } .dianpingSection01 .blockIn01 > .box01 > .column01 > .image01 { margin-left: -7%; margin-right: -26%; margin-top: -13%; margin-bottom: -80px; } .dianpingSection01 .blockIn01 > .box01 > .column02 { width: 32%; margin-top: 10px; } .dianpingSection01 .blockIn01 > .box01 > .column02 > .logo01 { width: 92.48%; } .dianpingSection01 .blockIn01 > .box01 > .column02 > .text01 { margin-top: 30px; } .dianpingSection01 .blockIn01 > .box02 { margin-left: 49%; position: relative; margin-right: 7%; margin-top: 60px; margin-bottom: 40px; } .dianpingSection01 .blockIn01 > .box02 .dianpingHeading01 { text-align: left; border-bottom: solid 1px #3e3a39; padding-bottom: 20px; letter-spacing: 0; } .dianpingSection01 .blockIn01 > .box02 > .image01 { position: absolute; right: 88%; top: 10px; width: 125%; } .dianpingSection01 .blockIn01 > .box02 > .text01 { line-height: 2.2; margin-top: 15px; } .dianpingSection01 .blockIn01 > .box02 > .dianpingBtn01 { margin-left: 0; margin-top: 40px; } @media screen and (max-width: 1120px) { .dianpingSection01 .blockIn01 > .box02 { margin-right: 0; } .dianpingSection01 .blockIn01 > .box02 > .image01 { right: 94%; width: 113%; } } .dianpingSection01 .blockIn01 > .box03 { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px; } .dianpingSection01 .blockIn01 > .box03 > .column01 { color: #fff; width: 32%; } .dianpingSection01 .blockIn01 > .box03 > .column01 > .title01 { font-weight: 700; font-size: 2.4rem; color: #c6a66e; line-height: 1.5; } .dianpingSection01 .blockIn01 > .box03 > .column01 > .title01 span { font-weight: 700; font-size: 1.4rem; color: #fff; display: block; margin-top: 5px; } .dianpingSection01 .blockIn01 > .box03 > .column01 > .text01 { font-size: 1.4rem; margin-top: 30px; line-height: 2.0; } .dianpingSection01 .blockIn01 > .box03 > .column01 > .text02 { font-size: 1.2rem; margin-top: 60px; line-height: 1.83; } .dianpingSection01 .blockIn01 > .box03 > .column02 { width: 57.4%; } .dianpingSection01 .blockIn01 > .box03 > .column02 .movieWrap01 { overflow: hidden; border-radius: 22px; position: relative; padding-bottom: 56.25%; } .dianpingSection01 .blockIn01 > .box03 > .column02 .movieWrap01 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .dianpingBtn01 { width: 320px; margin-top: 30px; margin-left: auto; margin-right: auto; } .dianpingBtn01 > a { display: block; width: 100%; padding: 7px 20px 9px; border: solid 2px #182e5c; border-radius: 60px; text-decoration: none; background-color: #182e5c; color: #fff; text-align: center; font-size: 1.8rem; font-weight: 700; position: relative; z-index: 1; overflow: hidden; transition: color .3s; } .dianpingBtn01 > a::before { position: absolute; top: 0; left: 0; z-index: -1; border: none; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .dianpingBtn01 > a:hover { color: #182e5c; } .dianpingBtn01 > a:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .dianpingHeading01 { font-size: 3.6rem; text-align: center; line-height: 1.4; font-weight: 700; } .dianpingHeading01 > .text01 { color: #c6a166; font-size: 1.8rem; font-weight: 700; display: block; font-family: 'Montserrat', sans-serif; margin-bottom: 5px; } .dianpingHeading01 > .text01.type01 { margin-bottom: 15px; } .dianpingHeading01 > .text02 { font-size: 2.4rem; display: block; } .dianpingFrameArea01 { border-radius: 8px; background-color: #fff; padding: 15px 16px 20px; margin-top: 20px; } .dianpingHeading02 { font-size: 2.1rem; border-bottom: solid 1px #3e3a39; padding-bottom: 8px; text-align: center; line-height: 1.4; font-weight: 700; margin-top: 40px; } .dianpingHeading02:nth-of-type(1) { margin-top: 60px; } .dianpingFrameArea01 > .title01 { font-weight: 700; } .dianpingFrameArea01 > .title01 > span { display: inline-block; border-radius: 4px; background-color: #ed6f43; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 1.2rem; padding: 3px 5px 1px; line-height: 1.2; margin-right: 5px; position: relative; top: -2px; } .dianpingList01 { counter-reset: li; margin-top: 10px; } .dianpingList01 > li { display: table; position: relative; color: #ed6f43; padding-bottom: 4px; border-bottom: solid 1px #ed6f43; font-size: 1.4rem; } .dianpingList01 > li::before { counter-increment: li; color: #ed6f43; content: counter(li)"."; font-family: 'Montserrat', sans-serif; } .dianpingList01 > li:not(:first-child) { margin-top: 4px; } .dianpingList02 { margin-top: 90px; } .dianpingList02 > li { position: relative; padding-top: 150px; min-height: max(525px,36.45vw) } .dianpingList02 > li:not(:first-child) { margin-top: 60px; } .dianpingList02 > li:nth-child(odd) { padding-left: 57.4%; } .dianpingList02 > li:nth-child(even) { padding-right: 57.4%; } .dianpingList02 > li > .title01 { color: #ed6f43; line-height: 1.6; font-size: 2.8rem; font-weight: 700; } .dianpingList02 > li > .title01 span { display: block; margin-bottom: 20px; padding-bottom: 15px; color: #162f5c; position: relative; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.6rem; } .dianpingList02 > li > .title01 span::before { position: absolute; bottom: 0; right: 0; width: 100vw; height: 1px; background-color: #ccc; content: ""; } .dianpingList02 > li:nth-child(even) > .title01 span::before { right: inherit; left: 0; } .dianpingList02 > li > .text01 { line-height: 2.2; margin-top: 30px; } .dianpingList02 > li > .image01 { position: absolute; left: calc(50% - 50vw); z-index: 2; width: 49vw; top: 0; overflow: hidden; height: 100%; } .dianpingList02 > li > .image01 img { object-fit: cover; width: 100%; height: 100%; } .dianpingList02 > li:nth-child(odd) > .image01 { border-radius: 0 24px 24px 0; } .dianpingList02 > li:nth-child(even) > .image01 { right: calc(50% - 50vw); left: inherit; border-radius: 24px 0 0 24px; } .dianpingList03 { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 2%; margin-top: 20px; } .dianpingList03 > li { width: 18.333%; } .dianpingSection01 .blockIn01 > .box04 { max-width: 900px; margin-left: auto; margin-right: auto; position: relative; margin-top: 100px; min-height: min(58.58vw,570px) } .dianpingSection01 .blockIn01 > .box04 > .column01 { width: 54.32%; } .dianpingSection01 .blockIn01 > .box04 > .column01 .dianpingHeading01 { text-align: left; max-width: 400px; border-bottom: solid 1px #3f3a39; padding-bottom: 14px; } .dianpingSection01 .blockIn01 > .box04 > .column01 > .text01 { margin-top: 30px; font-size: 1.8rem; line-height: 2.0; } .dianpingSection01 .blockIn01 > .box04 > .column01 > .text01 > strong { color: #ea5400; font-weight: normal; } .dianpingSection01 .blockIn01 > .box04 > .column01 > .logo01 { margin-top: 35px; } .dianpingSection01 .blockIn01 > .box04 > .column01 > .btn01 { margin-left: 0; margin-top: 30px; } .dianpingSection01 .blockIn01 > .box04 > .column01 > .btn01 > a { font-size: 1.8rem; box-shadow: none; } .dianpingSection01 .blockIn01 > .box04 > .image01 { position: absolute; left: 50%; width: 42%; top: -100px; } .dianpingFrameArea02 { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; background-color: #fef5f0; padding-top: 70px; padding-bottom: 80px; position: relative; z-index: 2; } .dianpingSection01:first-of-type + .dianpingFrameArea02 { margin-top: -160px; margin-bottom: -50px; } .dianpingFrameArea02 > .image01 { max-width: 880px; margin-left: auto; margin-right: auto; } .dianpingSection01.type03:not(.type01):not(.type02)::before { top: 10px; } .dianpingSection01.type03:not(.type01):not(.type02)::after { top: 390px; } .dianpingHeading01 > .font01 { font-size: 5.6rem; line-height: 1.0; } .dianpingList04 { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1060px; margin-left: auto; margin-right: auto; margin-top: 80px; } .dianpingList04 > li { width: 48.169%; display: flex; flex-wrap: wrap; justify-content: space-between; } .dianpingList04 > li:nth-child(even) { flex-direction: row-reverse; } .dianpingList04 > li:nth-child(2) { margin-top: 120px; } .dianpingList04 > li:nth-child(2n+3) { margin-top: -60px; } .dianpingList04 > li:nth-child(2n+4) { margin-top: 50px; } .dianpingList04 > li > .image01 { width: 48%; } .dianpingList04 > li > .column01 { width: 42%; margin-top: 50px; } .dianpingList04 > li:nth-child(even) > .column01 { margin-top: 90px; } .dianpingList04 > li > .column01 > .title01 { color: #ea5400; line-height: 1.4; font-size: 2.3rem; font-weight: 700; } .dianpingList04 > li > .column01 > .title01 > span { display: block; margin-bottom: 15px; padding-bottom: 8px; color: #162f5c; position: relative; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.6rem; } .dianpingList04 > li > .column01 > .title01 > span::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #3f3a39; content: ""; } .dianpingList04 > li > .column01 > .title01 > span::after { position: absolute; bottom: 0; left: 100%; transform: rotate(55deg); transform-origin: left top; width: 60px; height: 1px; background-color: #3f3a39; content: ""; } .dianpingList04 > li:nth-child(even) > .column01 > .title01 > span::after { position: absolute; bottom: 0; left: inherit; right: 100%; transform: rotate(-55deg); transform-origin: right top; width: 60px; height: 1px; background-color: #3f3a39; content: ""; } .dianpingList04 > li > .column01 > .text01 { line-height: 1.86; margin-top: 10px; font-size: 1.4rem; } .dianpingList05 { margin-top: 80px; padding-right: 30px; padding-left: 30px; display: flex; flex-wrap: wrap; gap: 20px 2.15%; } .dianpingList05 > li { width: 31.764%; } .dianpingList05 > li > .text01 { font-size: 1.3rem; color: #ec651e; margin-top: 5px; letter-spacing: 0; } .dianpingList05 > li > .box01 { border-radius: 10px; overflow: hidden; padding-top: 24px; background-color: rgba(255,255,255,.6); } .dianpingList05 > li > .box01 > .title01 { font-weight: 700; font-size: 1.8rem; display: table; margin-left: auto; margin-right: auto; line-height: 1.4; padding-bottom: 8px; border-bottom: solid 1px #ec651a; } .dianpingList05 > li > .box01 > .icon01 { width: 150px; margin: 15px auto; } .dianpingList05 > li > .box01 > .text01 { background-color: #fff; padding: 20px; font-size: 2.2rem; font-weight: 700; color: #ec651e; text-align: center; } .dianpingList05 > li > .box01 > .text01 > .font01 { line-height: 1.0; font-size: 4.5rem; font-weight: 700; letter-spacing: -.02em; } .dianpingFrameArea03 { margin-top: 120px; padding-top: 120px; padding-bottom: 220px; background: url(../../inbound-promotion/dianping/about/images/bg01.jpg) no-repeat 50% 0/cover; } .dianpingFrameArea03 > .box01 { max-width: 900px; margin-left: auto; margin-right: auto; color: #fff; padding-left: 24.33%; position: relative; width: 66%; } @media screen and (min-width: 1401px) { .dianpingFrameArea03 > .box01 { padding-left: 350px; } } @media screen and (max-width: 1100px) { .dianpingFrameArea03 > .box01 { max-width: 100%; padding-left: 32%; width: 88%; } } .dianpingFrameArea03 > .box01 > .text01 { font-size: 1.4rem; margin-top: 20px; } .dianpingFrameArea03 > .box01 > .column01 { } .dianpingFrameArea03 > .box01 > .column01 > .image01 { position: absolute; width: 30%; left: 0; top: 0; } .dianpingFrameArea03 > .box01 > .column01 > .title01 { line-height: 1.7; font-weight: 700; padding-bottom: 22px; border-bottom: solid 2px #fff; font-size: 2.3rem; } .dianpingList06 { display: flex; flex-wrap: wrap; gap: 15px 5%; margin-top: 20px; } .dianpingList06 > li { width: calc(80% / 5); } .dianpingList06 > li > .icon01 { height: 75px; text-align: center; } .dianpingList06 > li > .icon01 img { width: auto; height: 100%; } .dianpingList06 > li > .text01 { font-size: 1.4rem; color: #fff; text-align: center; letter-spacing: 0; } .dianpingFrameArea02 + .dianpingSection01::before { top: 60px !important; } .dianpingFrameArea02 + .dianpingSection01::after { top: 580px !important; } .dianpingSection02 { background-color: #e7e7e7; padding-top: 130px; -webkit-mask-image: url(../../images/mask_service.svg); mask-image: url(../../images/mask_service.svg); -webkit-mask-size: 100%; mask-size: 100%; position: relative; z-index: 1; } .dianpingSection02 + .dianpingSection01 { -webkit-mask-image: url(../../images/mask_service.svg); mask-image: url(../../images/mask_service.svg); -webkit-mask-size: 100%; mask-size: 100%; margin-top: -80px; } @media screen and (min-width: 1601px) { .dianpingSection02 + .dianpingSection01 { margin-top: -5vw; } .dianpingFrameArea03 { padding-bottom: 12vw; } } .dianpingSection02::before,.dianpingSection02::after { position: absolute; content: ""; z-index: -1; } .dianpingSection02::before { top: -100px; left: 0; width: 348px; height: 2060px; background: url(../../inbound-promotion/dianping/about/images/bg04.png) no-repeat 0 0/100%; } .dianpingSection02::after { top: 760px; right: 0; width: 350px; height: 2060px; background: url(../../inbound-promotion/dianping/about/images/bg05.png) no-repeat 0 0/100%; } .dianpingSection02.type01::before { top: -60px; background: url(../../inbound-promotion/dianping/about/images/bg02.png) no-repeat 0 0/100%; } .dianpingSection02.type01::after { top: 650px; background: url(../../inbound-promotion/dianping/about/images/bg03.png) no-repeat 0 0/100%; } .dianpingSection02 + .dianpingSection01::before { top: 740px !important; } .dianpingSection02 + .dianpingSection01::after { top: -90px !important; content: "" !important; } .dianpingSection02.type01 + .dianpingSection01::before { top: 240px !important; } .dianpingSection02.type01 { background: linear-gradient(120deg, rgba(240, 135, 77, 1), rgba(234, 84, 0, 1)); padding-bottom: 200px; margin-top: -100px; } .dianpingSection01.type04 { padding-bottom: 200px; } .dianpingSection02.type02 { margin-top: -80px; } .dianpingSection02.type01 .dianpingHeading01 { color: #fff; } .dianpingSection02.type01 .dianpingHeading01 > .text01 { color: #fff; } .dianpingSection02 > .image01 { max-width: 1088px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; margin-top: 90px; } .dianpingSection02 > .image01 + .image01 { margin-top: 24px; } .leadFromArea01.type01 form input[type=submit] { width: 320px; position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 10px 30px 14px; border: solid 3px #26bfa7; border-radius: 100px; color: #fff; height: 56px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; background-color: #26bfa7; text-align: center; line-height: 1.0; font-size: 1.8rem; overflow: hidden; text-decoration: none; margin-top: 30px; transition: all .3s; } .leadFromArea01.type01 form input[type=submit]:hover { background-color: #fff; color: #26bfa7; } @media screen and (max-width: 1400px) { .titleArea01.type03 > .title01 { margin-top: 0; } } @media screen and (max-width: 1000px) { .globalNav03 { display: none; } .titleArea01.type03 { margin-top: 44px; } } @media screen and (max-width: 767px) { .titleArea01.type03 { height: 88vw; } .titleArea01.type03 .breadcrumbs01 { bottom: 8vw; } .titleArea01.type03 > .title01 { font-size: 3.5rem; top: 46%; } .titleArea01.type03 > .title01 > span { width: 94%; margin-top: 20px; max-width: 580px; } .dianpingFooterBlock01 { padding: 40px 6.4% 60px; } .dianpingFooterBlock01 > .inner01 { max-width: 100%; } .dianpingFooterBlock01 > .inner01 > .title01 { line-height: 1.3; } .dianpingFooterBlock01 > .inner01 > .title01 > span { font-size: 2.1rem; text-align: center; } .dianpingFooterBlock01 > .inner01 > .title01 > span::before,.dianpingFooterBlock01 > .inner01 > .title01 > span::after { height: 50px; } .dianpingFooterBlock01 > .inner01 > .logo01 { width: 289px; } .dianpingFooterBlock01 > .inner01 > .text01 { line-height: 1.8; padding-left: 0; padding-right: 0; } .dianpingFooterBlock01 > .inner01 > .box01 { display: block; padding-top: 35px; margin-top: 40px; padding-left: 0; padding-right: 0; } .dianpingFooterBlock01 > .inner01 > .box01 > .logo01 { width: 278px; margin-left: auto; margin-right: auto; } .dianpingFooterBlock01 > .inner01 > .box01 > .text01 { max-width: 100%; text-align: center; margin-top: 27px; } .dianpingFooterBlock01 > .inner01 > .box01 > .text01 strong { font-weight: 700; display: block; text-align: center; font-size: 3.7rem; line-height: 1.0; margin-bottom: -12px; margin-top: 5px; } .dianpingFooterBlock01 > .inner01 > .btn01 { margin-top: 30px; } .dianpingFooterBlock01 > .inner01 > .btn01 > a { font-size: 1.4rem; padding-bottom: 10px; padding-top: 9px; } .dianpingFooterBlock02 { padding: 35px 6.4% 45px; } .dianpingFooterBlock02 > ul { display: block; } .dianpingFooterBlock02 > ul > li > a { display: block; text-decoration: none; position: relative; } .dianpingFooterBlock02 > ul > li > a::before { position: absolute; top: 50%; margin-top: -5px; right: 8px; width: 8px; height: 8px; border-top: solid 2px #3f3a39; border-right: solid 2px #3f3a39; transform: rotate(45deg); content: ""; } .dianpingFooterBlock02 > ul > li { border-bottom: solid 1px #3f3a39; padding-bottom: 5px; } .dianpingFooterBlock02 > ul > li:not(:first-child) { margin-top: 22px; } .dianpingSection01 { padding-top: 80px; padding-bottom: 80px; } .dianpingSection01:first-of-type { padding-bottom: 160px; -webkit-mask-image: url(../../images/mask_service_sp.svg); mask-image: url(../../images/mask_service_sp.svg); margin-top: -5.2vw; padding-top: 16vw; } .dianpingSection01:last-child { margin-bottom: -80px; } .dianpingSection01.type01 { padding-top: 50px; padding-bottom: 150px; -webkit-mask-image: url(../../images/mask_service_sp.svg); mask-image: url(../../images/mask_service_sp.svg); } .dianpingSection01.type01 + .dianpingSection01 { padding-top: 80px; -webkit-mask-image: url(../../images/mask_service_sp.svg); mask-image: url(../../images/mask_service_sp.svg); } .dianpingSection01.type02 { background: url(../../inbound-promotion/dianping/images/bg02s.jpg) no-repeat 50% 0/cover; } .dianpingSection01:not(.type01):not(.type02)::before { top: -12.44vw; width: 41.333vw; height: 462.26vw; background: url(../../inbound-promotion/dianping/images/bg03s.png) no-repeat 0 0/100%; } .dianpingSection01:not(.type01):not(.type02)::after { top: inherit; bottom: 4.56vw; width: 41.333vw; height: 60.933vw; background: url(../../inbound-promotion/dianping/images/bg04s.png) no-repeat 0 0/100%; } .dianpingSection01:nth-child(3):not(.type01):not(.type02)::after { top: inherit; bottom: -24.44vw; } .dianpingSection01:nth-child(5):not(.type01):not(.type02)::before { top: -32vw; } .dianpingSection01:nth-child(5):not(.type01):not(.type02)::after { content: ""; bottom: -18.44vw; } .dianpingSection01.type02 .dianpingHeading01 > .text02 { font-size: 1.6rem; margin-top: 5px; } .dianpingSection01 .blockIn01 > .title01 { font-size: 2.2rem; line-height: 1.63; } .dianpingSection01 .blockIn01 > .title01 > .logo01 { margin-bottom: 25px; } .dianpingSection01 .blockIn01 > .btn01 { margin-top: 35px; width: 240px; } .dianpingSection01 .blockIn01 > .btn01 > a { font-size: 1.4rem; padding: 10px 20px 11px; } .dianpingSection01 .blockIn01 > .text01 { margin-top: 28px; line-height: 1.875; font-size: 1.6rem; } .dianpingSection01 .blockIn01 > .text03 { margin-top: 30px; font-size: 1.5rem; } .dianpingSection01 .blockIn01 > .text04 { font-size: 1.2rem; } .dianpingSection01 .blockIn01 > .box01 { display: block; margin-top: 25px; } .dianpingSection01 .blockIn01 > .box01 > .column01 { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .dianpingSection01 .blockIn01 > .box01 > .column01 > .icon01 { position: relative; width: 100%; top: 0; background-color: #ed6f43; padding-top: 25px; padding-bottom: 13.33vw; } .dianpingSection01 .blockIn01 > .box01 > .column01 > .icon01 img { width: 60.533vw; display: block; margin-left: auto; margin-right: auto; } .dianpingSection01 .blockIn01 > .box01 > .column01 > .image01 { margin-left: -1%; margin-right: -13%; margin-top: -23vw; margin-bottom: 0; position: relative; z-index: 1; } .dianpingSection01 .blockIn01 > .box01 > .column02 { width: 100%; margin-top: 0; } .dianpingSection01 .blockIn01 > .box01 > .column02 > .logo01 { width: 80%; margin-left: auto; margin-right: auto; } .dianpingSection01 .blockIn01 > .box01 > .column02 > .text01 { margin-top: 20px; } .dianpingSection01 .blockIn01 > .box02 { margin: 0; } .dianpingSection01 .blockIn01 > .box02 .dianpingHeading01 { text-align: center; border-bottom: none; padding-bottom: 0; } .dianpingSection01 .blockIn01 > .box02 > .image01 { position: static; width: 102%; margin-left: 4%; margin-top: 30px; } .dianpingSection01 .blockIn01 > .box02 > .text01 { line-height: 1.96; margin-top: 30px; } .dianpingSection01 .blockIn01 > .box02 > .dianpingBtn01 { margin-left: auto; margin-top: 32px; } .dianpingSection01 .blockIn01 > .box03 { margin-top: 40px; } .dianpingSection01 .blockIn01 > .box03 > .column01 { color: #fff; width: 100%; margin-top: 35px; } .dianpingSection01 .blockIn01 > .box03 > .column01 > .title01 { font-size: 2.2rem; } .dianpingSection01 .blockIn01 > .box03 > .column01 > .text02 { margin-top: 40px; } .dianpingSection01 .blockIn01 > .box03 > .column02 { width: 100%; order: -1; } .dianpingSection01 .blockIn01 > .box03 > .column02 .movieWrap01 { border-radius: 10px; } .dianpingBtn01 { max-width: 240px; } .dianpingBtn01 > a { padding: 5px 20px 7px; font-size: 1.4rem; } .dianpingBtn01 > a::before { content: none; } .dianpingBtn01 > a:hover { color: #fff; } .dianpingHeading01 { font-size: 3.0rem; } .dianpingHeading01 > .text01 { font-size: 1.4rem; margin-bottom: 5px; } .dianpingHeading01 > .text02 { font-size: 2.2rem; margin-top: 12px; } .dianpingHeading02 { font-size: 1.8rem; padding-bottom: 10px; } .dianpingHeading02:nth-of-type(1) { margin-top: 40px; } .dianpingFrameArea01 { border-radius: 4px; padding: 20px 5.55% 25px; margin-top: 10px; } .dianpingFrameArea01 > .title01 { font-size: 1.6rem; } .dianpingFrameArea01 > .title01 > span { font-size: 1.1rem; padding: 2px 5px; } .dianpingList02 { margin-top: 60px; } .dianpingList02 > li { display: flex; flex-wrap: wrap; padding-top: 0; min-height: inherit; } .dianpingList02 > li:not(:first-child) { margin-top: 60px; } .dianpingList02 > li:nth-child(odd) { padding-left: 0; } .dianpingList02 > li:nth-child(even) { padding-right: 0; } .dianpingList02 > li > .title01 { font-size: 2.1rem; width: 100%; } .dianpingList02 > li > .title01 span { padding-bottom: 8px; font-size: 1.5rem; } .dianpingList02 > li > .text01 { line-height: 1.9; margin-top: 15px; width: 100%; } .dianpingList02 > li > .image01 { position: static; width: 94%; order: -1; margin-left: calc(50% - 50vw); margin-bottom: 25px; } .dianpingList02 > li:nth-child(odd) > .image01 { border-radius: 0 10px 10px 0; } .dianpingList02 > li:nth-child(even) > .image01 { margin-right: calc(50% - 50vw); margin-left: auto; border-radius: 10px 0 0 10px; } .dianpingList02 > li:nth-child(even) > .title01 { text-align: right; } .dianpingList02 > li:nth-child(even) > .title01 span::before { left: 0; right: inherit; } .dianpingList03 { gap: 20px .5%; margin-top: 15px; } .dianpingList03 > li { width: 32.94%; } .dianpingSection01 .blockIn01 > .box04 { margin-top: 0; min-height: inherit; display: flex; flex-wrap: wrap; } .dianpingSection01 .blockIn01 > .box04 > .column01 { display: contents; } .dianpingSection01 .blockIn01 > .box04 > .column01 .dianpingHeading01 { text-align: center; max-width: 100%; order: -1; padding-bottom: 0; border: none; width: 100%; } .dianpingSection01 .blockIn01 > .box04 > .column01 > .text01 { margin-top: 20px; font-size: 1.6rem; line-height: 1.87; } .dianpingSection01 .blockIn01 > .box04 > .column01 > .logo01 { margin-top: 15px; padding-top: 25px; border-top: solid 1px #403a39; } .dianpingSection01 .blockIn01 > .box04 > .column01 > .btn01 { margin-left: auto; margin-top: 40px; } .dianpingSection01 .blockIn01 > .box04 > .column01 > .btn01 > a { font-size: 1.4rem; padding: 8px 20px 9px; } .dianpingSection01 .blockIn01 > .box04 > .image01 { position: relative; width: 62%; left: -3%; margin-top: 10px; top: 0; margin-left: auto; margin-right: auto; order: -1; } .dianpingFrameArea02 { padding-top: 50px; padding-bottom: 50px; } .dianpingSection01:first-of-type + .dianpingFrameArea02 { margin-top: -100px; margin-bottom: 0; } .dianpingFrameArea02 > .image01 { width: 86.133%; } .dianpingSection01.type03:not(.type01):not(.type02)::before { top: -2.66vw; } .dianpingSection01.type03:not(.type01):not(.type02)::after { top: 182.66vw; } .dianpingHeading01 > .font01 { font-size: 4.5rem; } .dianpingList04 { display: flex; flex-wrap: nowrap; margin-top: 0; padding-top: 45px; } .dianpingList04 > li { min-width: 100%; justify-content: flex-end; flex-direction: column-reverse; flex-wrap: nowrap; } .dianpingList04 > li.is_show { animation: none; opacity: 1.0; transform: translateY(0); } .dianpingList04 > li:nth-child(even) { flex-direction: column-reverse; } .dianpingList04 > li:nth-child(2) { margin-top: 0; } .dianpingList04 > li:nth-child(2n+3) { margin-top: 0; } .dianpingList04 > li:nth-child(2n+4) { margin-top: 0; } .dianpingList04 > li > .image01 { width: 67.692%; margin-left: auto; margin-right: auto; } .dianpingList04 > li > .column01 { width: 90%; margin-left: auto; margin-right: auto; margin-top: 15px; } .dianpingList04 > li:nth-child(even) > .column01 { margin-top: 15px; } .dianpingList04 > li > .column01 > .title01 { font-size: 2.6rem; } .dianpingList04 > li > .column01 > .title01 br { display: none; } .dianpingList04 > li > .column01 > .title01 > span { margin-bottom: 10px; padding-bottom: 10px; font-size: 2.0rem; } .dianpingList04 > li > .column01 > .title01 > span::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #3f3a39; content: ""; } .dianpingList04 > li > .column01 > .title01 > span::after { content: none; } .dianpingList04 > li:nth-child(even) > .column01 > .title01 > span::after { content: none; } .dianpingList04 > li > .column01 > .text01 { line-height: 1.85; } .dianpingSection02 { padding-top: 70px; -webkit-mask-image: url(../../images/mask_service_sp.svg); mask-image: url(../../images/mask_service_sp.svg); } .dianpingSection02 + .dianpingSection01 { -webkit-mask-image: url(../../images/mask_service_sp.svg); mask-image: url(../../images/mask_service_sp.svg); } .dianpingList05 { margin-top: 50px; padding-right: 0; padding-left: 0; justify-content: space-between; gap: 10px 0; } .dianpingList05 > li { width: 48.46%; } .dianpingList05 > li > .text01 { font-size: 1.1rem; line-height: 1.4; } .dianpingList05 > li > .box01 { border-radius: 8px; padding-top: 15px; } .dianpingList05 > li > .box01 > .title01 { font-size: 1.4rem; width: calc(100% - 35px); height: 12.8vw; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between; justify-content: center; align-items: center; } .dianpingList05 > li > .box01 > .icon01 { width: calc(100% - 40px); } .dianpingList05 > li > .box01 > .text01 { padding: 10px; font-size: 1.4rem; } .dianpingList05 > li > .box01 > .text01 > .font01 { font-size: 2.5rem; } .dianpingFrameArea03 { margin-top: 80px; padding-top: 30px; padding-bottom: 140px; padding-left: 6.4%; padding-right: 6.4%; background: url(../../inbound-promotion/dianping/about/images/bg01s.jpg) no-repeat 50% 0/cover; } .dianpingFrameArea03 > .box01 { max-width: 100%; padding-left: 0; width: 100%; } .dianpingFrameArea03 > .box01 > .text01 { font-size: 1.6rem; margin-top: 30px; text-align: center; } .dianpingFrameArea03 > .box01 > .column01 { display: flex; flex-wrap: wrap; justify-content: space-between; border-bottom: solid 1px #fff; padding-bottom: 30px; align-items: center; } .dianpingFrameArea03 > .box01 > .column01 > .image01 { position: static; width: 32%; margin-left: -1.5%; } .dianpingFrameArea03 > .box01 > .column01 > .title01 { padding-bottom: 0; border-bottom: none; font-size: 5.6vw; width: 65%; } .dianpingList06 { gap: 20px 4%; margin-top: 25px; justify-content: center; } .dianpingList06 > li { width: calc(92% / 3); } .dianpingList06 > li > .icon01 { height: 20vw; } .dianpingList06 > li > .text01 { margin-top: 5px; } .dianpingSection02.type01 { background: linear-gradient(120deg, rgba(253, 125, 77, 1), rgba(252, 69, 0, 1)); padding-bottom: 140px; } .dianpingSection02 > .image01 { width: 86.66%; margin-top: 65px; padding-left: 0; padding-right: 0; } .dianpingSection02 > .image01 + .image01 { margin-top: 18px; } .dianpingSection02::before { top: -740px; width: 38.266vw; height: 313.73vw; } .dianpingSection02::after { top: 46%; width: 38.266vw; height: 340.66vw; } .dianpingSection02.type01::before { top: 170vw; } .dianpingSection02.type01::after { top: 430vw; } .dianpingSection01 .blockIn01 > .text02 { line-height: 1.86; } .dianpingSection01 .blockIn01 > .box01 > .column02 > .text01 { line-height: 1.96; } .servicesBlock01 .column01 > .inner01 > .box02 > .text02, .featureBlock02 > .section01 > .title01 > .column01 > .text01, .txt08, .dianpingSection01 .blockIn01 > .text02, .dianpingSection01 .blockIn01 > .box01 > .column02 > .text01, .dianpingList02 > li > .text01, .dianpingSection01 .blockIn01 > .box02 > .text01 { font-size: 1.4rem; } .leadFromArea01.type01 { margin-top: 25px; } .leadFromArea01.type01 form input[type=submit] { width: 280px; height: 48px; font-size: 1.6rem; margin-top: 40px; } .leadFromArea01.type01 form input[type=submit]:hover { background-color: #26bfa7; color: #fff; } .dianpingSection01 .blockIn01 > .box03 > .column01 > .text01 { margin-top: 20px; } .dianpingFrameArea02 + .dianpingSection01::before { top: -80px !important; } .dianpingSection02.type02 { margin-top: -40px; } .dianpingFrameArea02 + .dianpingSection01::before { background: url(../../inbound-promotion/dianping/about/images/bg06s.png) no-repeat 0 0/100% !important; width: 100vw !important; height: 287vw !important; } .dianpingFrameArea02 + .dianpingSection01::after { bottom: -80px !important; top: inherit !important; left: inherit !important; right: 0 !important; transform: scale(-1,1); } .dianpingSection01.type04::before { top: -64px !important; } .dianpingSection01.type04::after { bottom: 30px !important; top: inherit !important; } .dianpingSection02.type01::before { background: url(../../inbound-promotion/dianping/about/images/bg02s.png) no-repeat 0 0/100%; height: 616vw; width: 100vw; top: 34.66vw; } .dianpingSection02.type01::after { content: none; } } @media screen and (max-width: 360px) { .servicesBlock01 .column01 > .inner01 > .box02 > .text01 { font-size: 1.9rem; } .featureBlock02 > .section01 > .title01 > .column01 > .text01 { font-size: 1.3rem; } .featureBlock02 > .section01 > .box01 > .text02 { letter-spacing: 0; } .conceptBlock01 > .text01 { font-size: 1.5rem; } .featureBlock02 > .section01 > .box01 > .frame01 > .inner01 > .column01 > .column02 > .title01 { font-size: 1.7rem; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01 { font-size: 2.3rem; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01 > strong { font-size: 1.3rem; } .featureTabBlock01 .contents .item01 > .column01 > .title01 > .text01.type01 { font-size: 1.8rem; } .heading13 { font-size: 2.9rem; } .sectionBlock02 .txt08 { font-size: 1.3rem; } .txt11 { font-size: 2.2rem; } .contactArea01>.inner01>.box02>.column01> .btn01 > a { font-size: 1.5rem; } .dianpingList01 > li { font-size: 1.3rem; } .dianpingHeading01 { font-size: 2.9rem; } .dianpingList05 > li > .box01 > .text01 > .font01 { font-size: 2.4rem; } .dianpingSection01 .blockIn01 > .box01 > .column02 > .text01 { letter-spacing: 0; } } @media screen and (max-width: 340px) { .dianpingList04 > li > .image01 { width: 52%; } .dianpingList04 > li > .column01 > .title01 { font-size: 2.2rem; } .dianpingList04 > li > .column01 > .title01 br { display: none; } .dianpingList04 > li > .column01 > .title01 > span { margin-bottom: 8px; padding-bottom: 8px; font-size: 1.6rem; } } @media print{ .header01.fixed { position: relative; } .header01.active { position: relative; } .slider02 > ul { opacity: 1.0; } .servicesBlock01 .column01 > .inner01 { position: relative; top: 0; } .js_fadeIn01 { opacity: 1.0; } img.js_fadeIn01 { opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); } .js_fadeIn01 { opacity: 1.0; } .js_fadeIn01 > span { opacity: 1.0; transform: matrix(1, 0, 0, 1, 0, 0); } .js_fadeIn02, .js_fadeIn03, .js_fadeIn04 > li, .js_fadeIn04 .is_active { opacity: 1.0; } .js_fadeIn04 > li > .icon01::after { width: 100% !important; } .js_fadeIn04 .is_active > .icon01::after { width: 100% !important; } } /*-------------------------------------------- 2024/03/14 導入事例、資料ダウンロード改修 --------------------------------------------*/ .col01:nth-child(-n+3) { margin-top: 30px; } .col01:nth-child(n+4) { margin-top: 50px; } .btn03:has(a.js-modal) { display: table; margin-left: auto; margin-right: 0; margin-top: 0; } .btn03:has(a.js-modal):not(:first-child) { margin-top: 40px; } .btn03 > a.js-modal { min-width: inherit; min-height: 50px; padding: 9px 30px 10px; border: solid 1px #CDB577; background-color: #CDB577; } .btn03 > a.js-modal:hover { color: #CDB577; } .btn03 > a.js-modal::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .btn03 > a.js-modal:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .modalContents01 { position: fixed; z-index: 9999; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; transition: visibility .3s,opacity .3s; } .modalContents01.is-open { opacity: 1.0; visibility: visible; } .modalArea01 { width: 100%; max-width: 1050px; position: fixed; top: 50%; left: 50%; border-radius: 20px; transform: translate(-50%,-50%); box-shadow: 0 3px 6px rgba(0,0,0,0.25); } .modalArea01 .button01 { position: absolute; width: 36px; height: 36px; top: -13px; right: -12px; } .modalArea01 .button01 > a { display: block; width: 100%; height: 100%; border-radius: 50%; background-color: #737373; } .modalArea01 .button01 > a::before, .modalArea01 .button01 > a::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 20px; background: #fff; } .modalArea01 .button01 > a::before { transform: translate(-50%,-50%) rotate(45deg); } .modalArea01 .button01 > a::after { transform: translate(-50%,-50%) rotate(-45deg); } .modalArea01 > .title01 { text-align: center; background-color: #E5D9BA; padding: 10px 20px; font-weight: 700; border: solid 3px #ABABAC; border-radius: 20px 20px 0 0; line-height: 1.48; } .modalArea01 > .inner01 { border: solid 3px #ABABAC; border-top: solid 1px #ABABAC; background-color: #fff; padding: 20px 40px 40px; border-radius: 0 0 20px 20px; max-height: 800px; overflow: auto; margin-top: -1px; } .modalArea01 > .inner01 > .title01 { font-weight: 700; line-height: 1.48; } .modalArea01 > .inner01 > .title01:not(:first-child) { margin-top: 30px; } .modalArea01 > .inner01 > ul { margin-top: 8px; margin-left: 30px; display: flex; flex-wrap: wrap; gap: 16px 44px; } .modalArea01 > .inner01 > ul > li { line-height: 1.48; } .label01 > li { font-size: 1.2rem; line-height: 1.48; padding: 4px 8px; } .linkBlock01 { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-bottom: 20px; } .link01 { display: block; height: 100%; } .linkBlock01 > .btn03:has(.js-modal) { margin-left: 30px; margin-top: 0 !important; } #download .heading02:first-of-type { margin-top: 30px; } #download .heading02 { margin-top: 120px; } #download .wrap01.dl_white-papers > .col01:nth-child(n+7) { display: none; } @media screen and (max-width: 1140px) { .modalArea01 { width: 90%; max-width: 1050px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } } @media screen and (max-width: 767px) { .col01:nth-child(-n+1) { margin-top: 50px; } .col01:nth-child(n+2) { margin-top: 50px; } .btn03:has(a.js-modal) { margin-right: auto; } .btn03 > a.js-modal { min-width: inherit; min-height: 50px; padding: 9px 30px 10px; border: solid 1px #CDB577; background-color: #CDB577; } .btn03 > a.js-modal:hover { color: #CDB577; } .btn03 > a.js-modal::before { position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 120%; height: 100%; background: #fff; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; } .btn03 > a.js-modal:hover::before { transform-origin: left top; transform: skewX(-30deg) scale(1, 1); } .modalArea01 { width: 85.33%; max-height: 80svh; } .modalArea01 .button01 { top: -15px; right: -10px; } .modalArea01 > .title01 { height: 45px; } .modalArea01 > .inner01 { background-color: #fff; padding: 20px 6.25% 50px; max-height: inherit; height: calc(100% - 45px); } .modalArea01 > .inner01 > ul { display: block; margin-left: 6px; } .modalArea01 > .inner01 > ul > li:not(:first-child) { margin-top: 14px; } .linkBlock01 { justify-content: space-between; margin-bottom: 30px; } .link01 { width: 48%; font-size: 1.4rem; } .linkBlock01 > .btn03:has(.js-modal) { margin-left: 0; margin-right: 0; width: 48%; margin-top: 0 !important; } .linkBlock01 > .btn03:has(.js-modal) > a { font-size: 1.4rem; padding-left: 5px; padding-right: 5px; line-height: 1.48; display: flex; align-items: center; justify-content: center; } #download .heading02 { margin-top: 100px; } #download .wrap01.dl_white-papers > .col01:nth-child(n+4) { display: none; } } @media screen and (max-width: 360px) { .link01 { font-size: 1.3rem; } .linkBlock01 > .btn03:has(.js-modal) > a { font-size: 1.3rem; } } /*-------------------------------------------- 2024/07/19 フッターリンク修正 --------------------------------------------*/ .footBlock01 > .inner02 > .column02 > .box01 > ul { display: flex; flex-wrap: wrap; margin-top: 5px; gap: 0 10px; } .footBlock01 > .inner02 > .column02 > .box01 > ul > li { font-size: 1.4rem; } @media screen and (max-width: 767px) { .footBlock01 > .inner02 > .column02 > .box01 > ul > li > a.link01 { width: 100%; } } /*-------------------------------------------- 2025/01/21 お知らせエリア任意選択、英語ページへの導線作成 --------------------------------------------*/ .slider02 ul li a > .image01 { aspect-ratio: 40 / 21; } .slider02 ul li a > .image01 img { width: 100%; height: 100%; object-fit: cover; } .newsBlock03 .subBlock01 .category01 { display: flex; flex-wrap: wrap; gap: 8px 8px; } .subBlock01 > .category01 > li + li { margin-left: 0; } .headBlock01 { width: 330px; } .headBlock01 > .icon01 { width: 26px; height: 26px; } .headBlock01 > .icon01 a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; } .headBlock01 > .icon01 a svg { width: 100%; height: 100%; } .header01.lower .headBlock01 > .icon01 a svg path, .header01.fixed .headBlock01 > .icon01 a svg path { fill: #3e3a39; } .footBlock01 > .inner02 > .column02 { position: relative; } .footBlock01 > .inner02 > .column02 > .icon01 { width: 30px; height: 30px; position: absolute; top: 0; right: 0; } .footBlock01 > .inner02 > .column02 > .icon01 a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; } .footBlock01 > .inner02 > .column02 > .icon01 a svg { width: 100%; height: 100%; } .newsBlock03 .subBlock01 { grid-row-gap: 8px; } @media screen and (max-width: 1200px) { #headNavArea01 { right: 380px; max-width: calc(100% - 500px); } .globalNav01 > ul > li { height: auto; } } @media screen and (max-width: 1000px) { .headBlock01 { width: auto; right: 60px; } .header01 .headBlock01 > .icon01 a svg path { fill: #3e3a39; } }