body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック", "Hiragino Sans", "Noto Sans JP", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #333; line-height: 1.4; letter-spacing: 0.1em; } body.fixed { overflow: hidden; height: 100%; } a { transition: 0.5s; } a:hover { opacity: 0.7; } input[type=text], input[type=email], input[type=tel], textarea { width: 100%; padding: 17px; border: none; font-size: 16px; border-radius: 0; } :-ms-input-placeholder { color: #ccc; letter-spacing: 0.1em; } ::-webkit-input-placeholder { color: #ccc; letter-spacing: 0.1em; } ::-ms-input-placeholder { color: #ccc; letter-spacing: 0.1em; } ::placeholder { color: #ccc; letter-spacing: 0.1em; } select { padding: 20px; border: none; font-size: 16px; border-radius: 0; border: none; color: #333; background-color: #fff; } .c-btn { background: linear-gradient(#ff684f, #fab226); color: #fff; text-align: center; padding: 10px; display: block; position: relative; } .c-btn:before { content: ""; display: inline-block; position: absolute; left: 15px; bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); width: 10px; height: 10px; background: url(../img/ico-yajirushi.png) center center no-repeat; background-size: contain; } .c-bg-btn { background: linear-gradient(90deg, #fab226, #ff684f); color: #fff; text-align: center; padding: 10px; display: block; position: relative; } .c-bg-btn:before { content: ""; display: inline-block; position: absolute; left: 15px; bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); width: 10px; height: 10px; background: url(../img/ico-yajirushi.png) center center no-repeat; background-size: contain; } .c-bg-btn02 { background: linear-gradient(90deg, #fab226, #ff684f); color: #fff; text-align: center; padding: 10px; display: block; position: relative; } .c-bg-btn02:before { content: ""; display: inline-block; position: absolute; left: 15px; bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); width: 10px; height: 10px; background: url(../img/ico-yajirushi.png) center center no-repeat; background-size: contain; } .c-square-btn { display: block; position: relative; color: #fff; background-color: #d0c292; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; font-size: 26px; text-align: center; padding: 30px 10px; line-height: 1; letter-spacing: 0.25em; } .c-square-btn--bk { background-color: #333; } .c-bg { position: relative; } .c-bg:before { content: ""; display: inline-block; width: 10px; height: 10px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); } .c-bg02 { position: relative; } .c-bg02:before { content: ""; display: inline-block; width: 10px; height: 10px; background-position: center center; background-repeat: no-repeat; background-size: contain; vertical-align: -2px; } .c-dot { display: inline-block; position: relative; } .c-dot:before { content: ""; position: absolute; display: inline-block; top: -6px; right: 50%; -webkit-transform: translatex(50%); transform: translatex(50%); width: 4px; height: 4px; border-radius: 50%; background-color: #000; } .c-sec { padding: 100px 0 200px; position: relative; } .c-sec__inner { position: relative; z-index: 20; max-width: 1040px; margin: 0 auto; padding: 0 20px; margin-top: 280px; } @media screen and (max-width: 710px) { .c-sec__inner { margin-top: 0px; } } .c-sec__inner--min { max-width: 840px; } .c-sec__inner--lg { max-width: 1200px; } .c-sec__ttl { margin-bottom: 70px; text-align: center; line-height: 1.25; } .c-sec__ttl .sub-ttl { display: block; font-size: 14px; letter-spacing: 0.15em; } .c-sec__ttl .main-ttl { display: block; font-size: 60px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; color: #e6d58c; letter-spacing: 0.05em; } .c-sec__flex { display: flex; flex-direction: row-reverse; justify-content: space-between; } .c-sec__left { width: 17%; } .cat__ttl { font-size: 20px; color: #cccccc; border-bottom: 1px solid #cccccc; padding-bottom: 5px; text-align: center; letter-spacing: 0.15em; margin-bottom: 12px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .c-sec__left .all { font-size: 16px; font-family: "Lato", sans-serif; display: block; margin-bottom: 13px; } .c-sec__left .cate { font-size: 14px; margin-bottom: 8px; } .c-sec__right { width: 68%; } .p-archInfo-list__item .flex { display: flex; } .p-archInfo-list__item .c-cat { font-size: 14px; font-weight: bold; color: #7ccac8; margin-left: 15px; } .c-sec__inner .single_flex { display: flex; } .c-sec__inner .single_flex .cate { font-size: 14px; font-weight: bold; color: #7ccac8; margin-left: 15px; } .current-term { color: #7ccac8; font-weight: bold; } #toc_container p.toc_title { font-size: 18px; text-align: center; font-weight: 700; font-family: "Lato", sans-serif; margin: 0; padding: 0; } div#toc_container { padding: 30px; border: none; } div#toc_container a { display: block; border-bottom: 1px solid #aaa; padding-top: 20px; padding-bottom: 20px; } .toc_toggle a { display: inline-block !important; border-bottom: none !important; font-weight: bold; color: #0693e3; } .toc_list li a { font-size: 18px; } .toc_list li ul li a { font-size: 16px; } .toc_list li ul li ul li a { font-size: 14px; } .cate a { text-decoration: none !important; } @media screen and (max-width: 600px) { .c-sec { padding: 60px 0; } .c-sec__ttl { margin-bottom: 45px; } .c-sec__ttl .main-ttl { font-size: 36px; } .c-sec__ttl .sub-ttl { margin-bottom: 10px; } .c-sec__flex { display: block; } .c-sec__left { width: 100%; } .c-sec__right { width: 100%; } .cat__ttl { margin-top: 50px; } } @media screen and (max-width: 374px) { .c-sec__ttl { font-size: 20px; } } .c-sec-bg-top { position: relative; } .c-sec-bg-bottom { position: relative; } .c-sec-bg-top-re { position: relative; } .c-sec-bg-bottom-re { position: relative; } .c-sec-bg-top:before { content: ""; display: inline-block; background: url(../img/common/bg-wave.png) left bottom no-repeat; background-size: 100%; position: absolute; right: 0; top: -149px; width: 100%; height: 150px; } .c-sec-bg-bottom:after { content: ""; display: inline-block; background: url(../img/common/bg-wave.png) left bottom no-repeat; background-size: contain; position: absolute; right: 0; bottom: -149px; z-index: 1; width: 100%; height: 150px; } .c-sec-bg-top-re:before { content: ""; display: inline-block; background: url(../img/common/bg-wave.png) right bottom no-repeat; background-size: 100%; position: absolute; left: 0; top: -149px; width: 100%; height: 150px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .c-sec-bg-bottom-re:after { content: ""; display: inline-block; background: url(../img/common/bg-wave.png) right bottom no-repeat; background-size: contain; position: absolute; left: 0; bottom: -149px; z-index: 1; width: 100%; height: 150px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .c-sec-bg-top--white:before { background-image: url(../img/common/bg-wave-w.png); } .c-sec-bg-bottom--white:after { background-image: url(../img/common/bg-wave-w.png); } @media screen and (max-width: 450px) { .c-sec-bg-top:before { background-image: url(../img/common/bg-wave-sp.png); } .c-sec-bg-bottom:after { background-image: url(../img/common/bg-wave-sp.png); } .c-sec-bg-top-re:before { background-image: url(../img/common/bg-wave-sp.png); } .c-sec-bg-bottom-re:after { background-image: url(../img/common/bg-wave-sp.png); } .c-sec-bg-top--white:before { background-image: url(../img/common/bg-wave-sp-w.png); } .c-sec-bg-bottom--white:after { background-image: url(../img/common/bg-wave-sp-w.png); } } .c-flex { display: flex; flex-wrap: wrap; } .c-col { display: flex; flex-wrap: wrap; margin: 0 -20px; } .c-col__item { width: 50%; padding: 0 20px; } .c-col__item--3 { width: 33.33333%; } .c-col__item--4 { width: 25%; } @media screen and (max-width: 1300px) { .c-col { margin: 0 -20px; } .c-col__item { padding: 0 20px; } } @media screen and (max-width: 600px) { .c-col__item { width: 100%; } } .c-indent-list li { text-indent: -1em; padding-left: 1em; } @media screen and (max-width: 600px) { .c-indent-list li { font-size: 12px; } } .c-dot-list li { list-style-type: none; position: relative; padding-left: 0.6em; } .c-dot-list li:before { border-radius: 50%; width: 5px; height: 5px; display: block; position: absolute; left: 0; top: 0.6em; content: ""; background: #000; } .c-square-list li { position: relative; padding-left: 25px; font-weight: bold; } .c-square-list li:not(:last-child) { margin-bottom: 15px; } .c-square-list li:before { content: ""; display: inline-block; position: absolute; left: 0; top: 2px; background-color: #e6d58c; width: 16px; height: 16px; } @media screen and (max-width: 768px) { .c-square-list li { font-size: 14px; } } .c-fukidashi { position: relative; } .c-fukidashi:before { content: ""; display: inline-block; position: absolute; } .c-fukidashi--right:before { border-top: 10px solid #000; border-left: 10px solid transparent; border-right: 10px solid transparent; } .c-fukidashi--bottom:before { border-top: 10px solid #000; border-left: 10px solid transparent; border-right: 10px solid transparent; } .c-modal { opacity: 0; visibility: hidden; margin: 0 auto; padding: 0 20px; position: fixed; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 500; transition: 0.5s; pointer-events: none; } .c-modal.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .c-modal-close { opacity: 0; visibility: hidden; position: fixed; right: 20px; top: 0px; width: 30px; height: 30px; color: #fff; cursor: pointer; z-index: 2000; transition: 0.5s; } .c-modal-close__line { position: absolute; width: 100%; height: 1px; right: 0; background-color: #333; transition: all 0.5s; top: 15px; } .c-modal-close__line--1 { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .c-modal-close__line--2 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .c-modal-close.is-active { opacity: 1; visibility: visible; } .overlay { opacity: 0; visibility: hidden; background: rgba(255, 255, 255, 0.95); width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 400; transition: 0.5s; } .overlay.is-active { opacity: 1; visibility: visible; } .p-arrow-btn { display: block; max-width: 200px; padding: 5px 0; padding-right: 20px; border-bottom: 1px solid #333; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; letter-spacing: 0.15em; } .p-arrow-btn:before { background: url(../img/common/ico-arrow.png) center center no-repeat; background-size: contain; width: 15px; height: 9px; left: auto; right: 0; } .p-dl-btn { display: block; position: relative; color: #fff; background-color: #333; font-size: 16px; text-align: center; padding: 25px 10px; line-height: 1; } .p-dl-btn span { padding-right: 50px; } .p-dl-btn span:before { background-image: url(../img/guide/ico-dl.png); width: 24px; height: 24px; left: auto; right: 0; } .p-dl-btn-wrap { margin-top: 45px; } .p-dl-btn-wrap .sup-txt { margin-top: 15px; font-weight: bold; } @media screen and (max-width: 600px) { .p-dl-btn-wrap { margin-top: 30px; } .p-dl-btn-wrap .sup-txt { font-size: 14px; } .p-dl-btn { padding: 22px 10px; } .p-dl-btn span { padding-right: 25px; } .p-dl-btn span:before { width: 20px; height: 20px; } } @media screen and (max-width: 374px) { .p-dl-btn { font-size: 14px; } } .p-readMore-wrap { position: relative; z-index: 20; margin: 75px auto 0; } .p-readMore-wrap .p-arrow-btn { margin: 0 auto; } .p-sns-list { align-items: center; } .p-sns-list li { max-width: 25px; margin-right: 30px; } .p-sns-list li:last-child { margin-right: 0px; } .p-sns-list a { display: block; } .p-sns-list img { width: 100%; } .p-tel-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; line-height: 1; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-tel-btn .main-txt { display: flex; align-items: center; margin-bottom: 15px; font-size: 28px; letter-spacing: 0.1em; } .p-tel-btn .main-txt:before { background-image: url(../img/common/ico-tel-lg.png); width: 19px; height: 29px; margin-right: 10px; vertical-align: -2px; } .p-tel-btn .sub-txt { display: block; font-size: 14px; letter-spacing: 0.15em; } .p-top-txt p { font-size: 14px; line-height: 2; margin-bottom: 30px; } .p-top-txt p:last-child { margin-bottom: 0; } .p-header:after { background: url(../img/common/bg-wave-top.png) left top no-repeat; background-size: contain; } .p-header .logo { max-width: 490px; } .p-header .logo img { width: 100%; } .p-header .logo a { display: block; } .p-header nav { padding-right: 80px; } .p-header__inner { justify-content: space-between; padding: 30px 40px 10px; background-color: #7ccac8; } .p-sns-list--header { margin-top: 20px; } .p-sns-list--header li { margin-right: 20px; } .p-headerNav-list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: absolute; left: 40px; bottom: -55px; display: flex; width: 485px; z-index: 20; } .p-headerNav-list .p-tel-btn .main-txt { margin-bottom: 10px; font-size: 24px; } .p-headerNav-list .p-tel-btn .main-txt:before { background-image: url(../img/common/ico-tel-lg.png); width: 17px; height: 24px; } .p-headerNav-list .p-tel-btn .sub-txt { font-size: 14px; } .p-headerNav-list__item.tel { width: 45%; } .p-headerNav-list__item.mail { width: 51%; } .p-headerNav-list__item.mail .c-square-btn { padding: 18px 10px; font-size: 16px; } @media screen and (max-width: 1200px) { .p-header .logo { max-width: 350px; } .p-header__inner { padding: 20px 20px 10px; } .p-headerNav-list { max-width: 400px; left: 10px; } .p-headerNav-list .p-tel-btn .main-txt { font-size: 20px; } .p-headerNav-list .p-tel-btn .main-txt:before { margin-right: 5px; } } @media screen and (max-width: 1024px) { .p-header .logo { max-width: 280px; margin-bottom: -20px; position: relative; z-index: 30; } .p-header nav { display: none; } .p-headerNav-list { display: none; } } @media screen and (max-width: 600px) { .p-header .logo { max-width: 205px; margin-bottom: -10px; } .p-header__inner { padding: 10px 20px 0px; } } .hamburger { position: fixed; right: 40px; top: 40px; width: 40px; height: 40px; cursor: pointer; z-index: 300; } .hamburger__line { position: absolute; right: 50%; background-color: #333; width: 100%; height: 1px; -webkit-transform: translateX(50%); transform: translateX(50%); transition: all 0.5s; } .hamburger__line--1 { top: 7px; } .hamburger__line--2 { top: 20px; } .hamburger__txt { position: absolute; right: 50%; top: 31px; -webkit-transform: translateX(50%); transform: translateX(50%); font-size: 12px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; letter-spacing: 0; transition: all 0.5s; } .open .hamburger__line--1 { -webkit-transform: translateX(50%) rotate(-20deg); transform: translateX(50%) rotate(-20deg); top: 20px; } .open .hamburger__line--2 { -webkit-transform: translateX(50%) rotate(20deg); transform: translateX(50%) rotate(20deg); top: 20px; } @media screen and (max-width: 1024px) { .hamburger { right: 20px; top: 20px; } } @media screen and (max-width: 600px) { .hamburger { right: 20px; top: 10px; width: 30px; height: 40px; } .hamburger__line { width: 30px; } .hamburger__txt { font-size: 10px; } .hamburger__line--1 { top: 5px; } .hamburger__line--2 { top: 11px; } .hamburger__txt { top: 17px; font-size: 10px; } .open .hamburger__line--1 { top: 11px; } .open .hamburger__line--2 { top: 11px; } } .sp-nav { position: fixed; top: -150%; left: 0; width: 100%; background-color: #7ccac8; transition: top 0.5s; z-index: 100; height: 80vh; } .open .sp-nav { top: 0; } .sp-nav__inner { padding: 105px 0px 70px; overflow-y: auto; height: 100%; } @media screen and (max-width: 1023px) { } @media screen and (max-width: 600px) { .sp-nav { height: 100vh; } .sp-nav__inner { padding-top: 65px; } } .sp-nav-menu { display: flex; flex-wrap: wrap; } .sp-nav-menu__item { padding-top: 15px; padding-bottom: 15px; } .sp-nav-menu__item--page { width: 43%; padding-right: 50px; border-right: 1px solid #499c9a; } .sp-nav-menu__item--menu { width: 57%; padding-left: 80px; } .sp-nav-list-wrap { } .sp-nav-list { display: flex; flex-wrap: wrap; margin: 0 -10px 25px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; font-size: 18px; } .sp-nav-list li { width: 50%; margin-bottom: 55px; padding: 0 10px; } .sp-nav-list a { display: block; position: relative; } .sp-nav-list a:after { content: ""; display: block; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); width: 8px; height: 8px; border-top: 1px solid #333; border-left: 1px solid #333; } .p-headerrNavList .p-tel-btn { flex-direction: row; } .p-headerrNavList .p-tel-btn .main-txt { margin-bottom: 0; font-size: 24px; } .p-headerrNavList .p-tel-btn .main-txt:before { width: 17px; height: 24px; margin-right: 5px; } .p-headerrNavList .p-tel-btn .sub-txt { letter-spacing: 0; } .p-headerrNavList .p-tel-btn .sub-txt .sp { display: none; } .p-headerrNavList .c-square-btn { font-size: 16px; padding: 18px 10px; } .p-headerrNavList__item.tel { margin-bottom: 20px; } .p-sns-list--sp-nav { margin-top: 20px; } .p-sns-list--sp-nav li { max-width: 21px; margin-right: 20px; } .p-headerMenu:not(:last-child) { margin-bottom: 80px; } .p-headerMenu .ttl { padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #333; font-size: 18px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-headerMenu .ttl a { display: block; position: relative; } .p-headerMenu .ttl a:after { content: ""; display: block; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); width: 8px; height: 8px; border-top: 1px solid #333; border-left: 1px solid #333; } .p-headerMenu-list { display: flex; flex-wrap: wrap; margin: 0 -20px; } .p-headerMenu-list li { width: 50%; padding: 0 20px; margin-bottom: 10px; } .p-headerMenu-list a { display: inline-block; position: relative; padding-left: 1em; font-size: 14px; } .p-headerMenu-list a:before { content: "-"; position: absolute; left: 0; } @media screen and (max-width: 1023px) { .p-headerMenu:not(:last-child) { margin-bottom: 45px; } .sp-nav-menu { max-width: 700px; margin: 0 auto; } .sp-nav-menu__item { padding: 0px; } .sp-nav-menu__item--page { display: flex; flex-direction: column; width: 100%; padding-right: 0px; border-right: none; } .sp-nav-menu__item--menu { width: 100%; padding-left: 0px; } .sp-nav-list-wrap { order: 2; justify-content: flex-start; } .sp-nav-list { margin-bottom: 25px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; font-size: 14px; } .sp-nav-list li { margin-bottom: 20px; } .sp-nav-list a:after { top: 48%; width: 6px; height: 6px; } .sp-nav-contactArea { order: 1; max-width: 400px; margin: 0 auto 45px; } .p-headerrNavList .p-tel-btn { flex-direction: column; } .p-headerrNavList .p-tel-btn .main-txt { margin-bottom: 15px; } .p-headerrNavList .p-tel-btn .sub-txt .sp { display: inline; } .p-headerrNavList .p-tel-btn .sub-txt .pc { display: none; } .p-headerrNavList .c-square-btn { font-size: 16px; padding: 18px 10px; } } @media screen and (max-width: 600px) { .p-headerrNavList .p-tel-btn .main-txt { font-size: 22px; } .p-headerMenu-list li { width: 100%; } } .black-bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 5; background-color: #000; opacity: 0; visibility: hidden; transition: all 0.5s; cursor: pointer; z-index: 100; } .open .black-bg { opacity: 0.3; visibility: visible; } .p-page-header { padding: 85px 0 5%; background: url(../img/common/bg-page-header.jpg) center center no-repeat; background-size: cover; } .p-page-header .ttl { margin-bottom: 55px; font-size: 35px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; letter-spacing: 0.1em; text-align: right; } .p-page-header .en-ttl { position: relative; z-index: 20; margin-left: auto; } .p-page-header .en-ttl img { width: auto; height: 40px; margin-left: auto; } .p-page-header--care { background-image: url(../img/agingcare/bg-page-header--care.jpg); } .p-page-header--surg { background-image: url(../img/surgery/bg-page-header--surg.jpg); } @media screen and (max-width: 600px) { .p-page-header { padding: 40px 0 22px; } .p-page-header .ttl { margin-bottom: 15px; font-size: 20px; } .p-page-header .en-ttl img { width: auto; height: 23px; margin-left: auto; } .p-page-header--care { background-position: right 26% center; } .p-page-header--surg { background-position: right 45% center; } } @media screen and (max-width: 374px) { .p-page-header .ttl { font-size: 18px; letter-spacing: 0.05em; } } @-webkit-keyframes bg { 0% { opacity: 0; width: 0; } 100% { width: 100%; opacity: 1; } } @keyframes bg { 0% { opacity: 0; width: 0; } 100% { width: 100%; opacity: 1; } } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } #samplecode { padding: 3em 2em; color: #37b507; background-color: #ececec; } .typewritertext { width: 19em; margin: 0 auto; border-right: 2px solid #37b507; font-weight: bold; text-align: center; white-space: nowrap; overflow: hidden; } .typewriteranime { -webkit-animation: typewriter 3s steps(19) 1s 1 normal both, blinkCursor 500ms steps(19) infinite normal; animation: typewriter 3s steps(19) 1s 1 normal both, blinkCursor 500ms steps(19) infinite normal; } @-webkit-keyframes typewriter { from { width: 0; } to { width: 19em; } } @keyframes typewriter { from { width: 0; } to { width: 19em; } } @-webkit-keyframes blinkCursor { from { border-right-color: #37b507; } to { border-right-color: transparent; } } @keyframes blinkCursor { from { border-right-color: #37b507; } to { border-right-color: transparent; } } .p-fv-img { padding: 195px 0 380px; background: url(../img/common/fv-img.png) center center no-repeat; background-size: cover; } .p-fvTop-cont { max-width: 615px; margin-left: auto; } .p-line-txt { font-size: 30px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-line-txt__item { position: relative; display: block; padding: 5px 10px; color: #fff; } .p-line-txt__item:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; -webkit-transform-origin: left center; transform-origin: left center; background: #333; -webkit-animation: bg 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation: bg 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; box-shadow: 1px 1px 10px 0px rgba(78, 82, 85, 0.4); } .p-line-txt__item:not(:last-child) { margin-bottom: 12px; } .p-line-txt__item .inn { position: relative; z-index: 1; -webkit-transform: skewX(-5deg); transform: skewX(-5deg); color: #fff; display: inline-block; -webkit-animation: fade 1s both; animation: fade 1s both; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .p-fv-en-txt { margin-top: 35px; font-family: "Lato", sans-serif; letter-spacing: 0.25em; line-height: 1.875; } .p-fv-dr-wrap { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .slidein01:before { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .slidein01 .inn { -webkit-animation-delay: 1s; animation-delay: 1s; } .slidein02:before { -webkit-animation-delay: 1s; animation-delay: 1s; } .slidein02 .inn { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .slidein03:before { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .slidein03 .inn { -webkit-animation-delay: 2s; animation-delay: 2s; } .slidein04:before { -webkit-animation-delay: 2s; animation-delay: 2s; } .slidein04 .inn { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } @media screen and (max-width: 768px) { .p-fv-img { padding: 195px 0 150px; background: url(../img/common/fv-img.png) center center no-repeat; background-size: cover; } .p-fvTop-cont { max-width: 420px; } .p-line-txt { font-size: 22px; } } @media screen and (max-width: 600px) { .p-fv-img { padding: 230px 0 45px; background-image: url(../img/common/fv-img-sp.jpg); } .p-fvTop-cont { margin-right: -20px; max-width: 310px; } .p-line-txt { font-size: 15px; } .p-fv-en-txt { margin-top: 15px; font-size: 12px; letter-spacing: 0.25em; line-height: 1.66666; } } .p-sec-fvBottom { background: #7ccac8; padding: 125px 0 90px; } .p-fv-txt { max-width: 690px; position: absolute; top: -180px; left: 0; } .p-fvMsg-box { position: relative; max-width: 450px; margin-left: 140px; z-index: 20; } .p-fvMsg-box .txt { font-size: 14px; line-height: 2.5; letter-spacing: 0.1em; } .p-fvMsg-box .signature { font-size: 24px; text-align: right; letter-spacing: 0.2em; } .p-fvMsg-box .signature span { font-size: 16px; } .p-fvBottom-dr { position: absolute; right: 0; bottom: -80px; max-width: 500px; overflow: hidden; } .p-fvBottom-dr .name { display: inline-block; position: absolute; right: -160px; bottom: 110px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left; transform-origin: left; font-size: 12px; font-family: "Lato", sans-serif; letter-spacing: 0.2em; } .p-fvMsg-btn-wrap { margin-top: 50px; } .p-fvMsg-btn-wrap .p-arrow-btn { margin: 0; } .p-fvMsg-btn-wrap .p-arrow-btn:not(:last-child) { margin-bottom: 35px; } @media screen and (max-width: 1200px) { .p-fv-txt { max-width: 60%; } .p-fvBottom-dr { bottom: -95px; } } @media screen and (max-width: 1023px) { .p-fv-txt { max-width: 60%; top: -100px; left: 20px; } .p-fvBottom-dr { bottom: -95px; max-width: 50%; } .p-fvBottom-dr .name { display: inline-block; position: absolute; right: -160px; bottom: 110px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left; transform-origin: left; font-size: 12px; font-family: "Lato", sans-serif; letter-spacing: 0.2em; } .p-fvMsg-box { max-width: 55%; margin-left: 0; } .p-fvMsg-box .signature { text-align: left; margin-top: 25px; } } @media screen and (max-width: 600px) { .p-sec-fvBottom { background: #7ccac8; padding: 115px 0 50px; overflow: hidden; } .p-fvMsg-box { max-width: 74%; } .p-fvMsg-box .txt { line-height: 1.875; letter-spacing: 0; } .p-fvMsg-box .signature { font-size: 20px; } .p-fvMsg-box .signature span { font-size: 14px; } .p-fvBottom-dr { bottom: -42px; max-width: 260px; right: -100px; } .p-fv-txt { top: -85px; } .p-fvMsg-btn-wrap { margin-top: 35px; } .p-fvMsg-btn-wrap .p-arrow-btn { margin: 0; max-width: 155px; font-size: 14px; } .p-fvMsg-btn-wrap .p-arrow-btn:not(:last-child) { margin-bottom: 20px; } } @media screen and (max-width: 450px) { .p-fv-txt { max-width: 71%; top: -65px; } .p-fvBottom-dr { bottom: -50px; right: -115px; } } .p-sec-cam .c-sec__ttl { margin-bottom: 40px; } .p-sec-cam .p-readMore-wrap { margin: 30px auto 0; } @media screen and (max-width: 600px) { .p-sec-cam { padding: 60px 0 100px; } .p-sec-cam .c-sec__ttl { margin-bottom: 15px; } } .p-sec-cam__list { display: flex; justify-content: center; gap: 80px; margin: 0 0 100px; } @media screen and (max-width: 1023px) { .p-sec-cam__list { gap: 40px; margin-bottom: 50px; } } @media screen and (max-width: 767px) { .p-sec-cam__list { flex-direction: column; gap: 40px; margin-bottom: 40px; } } .p-sec-cam__item { width: calc(50% - 40px); } @media screen and (max-width: 767px) { .p-sec-cam__item { width: auto; } } .p-sec-cam-item__link { display: block; line-height: 1.2; font-family: "Noto Sans JP", sans-serif; } .p-sec-cam-item__image { display: block; margin: 0; } .p-sec-cam-item__image img { width: 100%; } .p-sec-cam-item__body { padding: 20px; background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); margin: -30px 20px 0; position: relative; } @media screen and (max-width: 767px) { .p-sec-cam-item__body { margin: -30px 10px 0; } } .p-sec-cam-item__title { font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; font-size: 12px; font-weight: 600; position: relative; text-align: center; } .p-sec-cam-item__title::after { display: block; content: ""; width: 56px; height: 1px; background-color: #968059; margin: 8px auto 20px; } .p-sec-cam-item__type { font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; color: #968059; margin: 0 0 16px; min-height: 36px; } @media screen and (max-width: 767px) { .p-sec-cam-item__type { min-height: unset; } } .p-sec-cam-item__price { font-size: 14px; font-weight: bold; line-height: 1.5; text-align: center; letter-spacing: 0.2em; margin: 0 0 16px; } .p-sec-cam-item__price .line { text-decoration: line-through; } .p-sec-cam-item__price .unit { color: #F05874; } .p-sec-cam-item__price .price { font-size: 20px; color: #F05874; } .p-sec-cam-item__more { font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; font-size: 12px; line-height: 1.8; letter-spacing: 0.2em; max-width: 200px; margin: 0 auto; color: #B8922E; background: transparent url(../img/common/ico-arrow-gold.svg) no-repeat right center/32px auto; border-bottom: 1px solid #D0C292; } .p-cam-slider__img { display: block; margin: 0; } .p-sec-menu { padding: 100px 0 50px; background-color: #7ccac8; } .p-topMenu-list { position: relative; z-index: 20; margin: 0 -40px; } .p-topMenu-list__item { padding: 0 40px; } .p-topMenu-list__bg { display: block; } .p-topMenu-list__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 100%; padding: 185px 10px; color: #fff; text-align: center; box-shadow: 1px 1px 30px 0px rgba(78, 82, 85, 0.5); } .p-topMenu-list__inner .sub-txt { position: relative; margin-bottom: 10px; font-family: "Lato", sans-serif; font-size: 14px; letter-spacing: 0.2em; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .p-topMenu-list__inner .main-txt { position: relative; font-size: 28px; font-weight: bold; letter-spacing: 0.2em; line-height: 1.6; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .p-topMenu-list__inner small { font-size: 20px; } .p-topMenu-list__inner:hover { opacity: 1; } .p-topMenu-list__inner:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); transition: 0.5s; } .p-topMenu-list__inner:hover:before { background-color: rgba(0, 0, 0, 0.5); } .p-topMenu-list__inner.surg { background: url(../img/common/menu-surg.png) center center no-repeat; background-size: cover; } .p-topMenu-list__inner.care { background: url(../img/common/menu-care.png) center center no-repeat; background-size: cover; } @media screen and (max-width: 1200px) { .p-topMenu-list { margin: 0 -20px; } .p-topMenu-list__item { padding: 0 20px; } } @media screen and (max-width: 600px) { .p-sec-menu { padding: 60px 0 100px; } .p-topMenu-list__inner.surg { background: url(../img/price/menu-surg.jpg) center center no-repeat; background-size: cover; } .p-topMenu-list__inner.care { background: url(../img/price/menu-care.jpg) center center no-repeat; background-size: cover; } .p-topMenu-list__item:not(:last-child) { margin-bottom: 30px; } .p-topMenu-list__inner { min-height: 155px; padding: 20px 10px; } .p-topMenu-list__inner .main-txt { font-size: 24px; } } .p-sec-case .p-readMore-wrap { margin-top: 30px; } .p-case-box__item { margin-bottom: 45px; } .p-case-box__item a { display: block; } .p-case-box__item img { width: 100%; height: 260px; -o-object-fit: cover; object-fit: cover; font-family: "object-fit: cover;"; box-shadow: 1px 1px 30px 1px rgba(78, 82, 85, 0.5); transition: box-shadow 0.5s; } .p-case-box__item .txt { margin-top: 25px; font-size: 14px; letter-spacing: 0.1em; transition: opacity 0.5s; } @media screen and (max-width: 1200px) { .p-case-box { margin: 0 -10px; } .p-case-box__item { padding: 10px; } .p-case-box__item img { width: 100%; height: 22.5vw; } } @media screen and (max-width: 1024px) { .p-case-box__item { width: 33.33333%; } .p-case-box__item img { height: 30vw; } } @media screen and (max-width: 600px) { .p-case-box__item { width: 50%; margin-bottom: 40px; } .p-case-box__item img { height: 45vw; } .p-case-box__item .txt { margin-top: 15px; font-size: 12px; } } .p-sec-info { background-color: #7ccac8; padding: 40px 0 100px; } .p-sec-info .c-sec__ttl { text-align: left; } .p-sec-info .p-readMore-wrap { margin-top: 50px; } .p-sec-info .p-arrow-btn { margin: 0; } .p-info-box { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 10; } .p-info-box__item { width: 45%; } .p-info-list li:first-child { border-top: 1px solid #499c9a; } .p-info-list li { border-bottom: 1px solid #499c9a; } .p-info-list a { display: flex; flex-wrap: wrap; align-items: center; padding: 38px 10px; font-size: 14px; } .p-info-list .time { max-width: 100px; margin-right: 30px; color: #499c9a; letter-spacing: 0.15em; } .p-info-list .ttl { letter-spacing: 0.15em; } .p-sec-news { margin-top: 110px; } .p-covid-news a { display: block; margin-bottom: 50px; padding: 20px 10px; background-color: #333; color: #fff; text-align: center; letter-spacing: 0.1em; } @media screen and (max-width: 1024px) { .p-sec-info { padding: 20px 0 100px; } } @media screen and (max-width: 768px) { .p-sec-info { padding: 150px 0 100px; } .p-sec-info .c-sec__ttl { margin-bottom: 30px; } .p-info-box { justify-content: flex-start; } .p-info-box__item { width: 100%; } .p-info-box__item:not(:last-child) { margin-bottom: 80px; } .p-sec-news { margin-top: 0; } } @media screen and (max-width: 600px) { .p-sec-info { padding: 100px 0 60px; } .p-info-list a { padding: 20px 0px; } .p-info-list .time { max-width: 100%; width: 100%; margin-right: 0px; margin-bottom: 10px; letter-spacing: 0.1em; } .p-info-list .ttl { letter-spacing: 0.1em; } .p-sec-info .p-readMore-wrap { margin-top: 30px; } } .p-sec-ig { padding: 170px 0 30px; } .p-sec-ig .c-sec__ttl { margin-bottom: 30px; text-align: left; } .p-ig-wrap { margin: 0 -20px; } .ig-link { font-size: 14px; letter-spacing: 0.1em; } #sb_instagram { padding-bottom: 0 !important; } #sb_instagram .sbi_photo_wrap { box-shadow: 1px 1px 15px 0px rgba(0, 0, 0, 0.3); } #sb_instagram .sbi_photo { transition: 0.5s; } #sb_instagram .sbi_photo:hover { opacity: 0.7 !important; } @media screen and (max-width: 1024px) { #sb_instagram #sbi_images .sbi_item { width: 33.3333% !important; } } @media screen and (max-width: 600px) { .p-sec-ig { padding: 100px 0 60px; } .p-sec-ig .c-sec__ttl { margin-bottom: 30px; text-align: left; } .p-ig-wrap { margin: 0 -10px; } #sb_instagram #sbi_images .sbi_item { width: 50% !important; } #sb_instagram .sbi_photo_wrap { box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3); } } .breadcrumbs-wrap { background-color: #7ccac8; } .breadcrumbs-wrap--white { background-color: #fff; } .breadcrumbs-inner { max-width: 1200px; margin: 0 auto; padding: 0px 20px; } .breadcrumbs { display: flex; position: absolute; z-index: 20; bottom: -20px; } .breadcrumbs li { position: relative; font-size: 10px; letter-spacing: 0.1em; } .breadcrumbs li:not(:last-child) { margin-right: 25px; } .breadcrumbs li:before { content: ""; display: inline-block; position: absolute; right: -16px; bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); background-color: #333; width: 8px; height: 1px; } .breadcrumbs li:last-child:before { content: none; } .breadcrumbs a { text-decoration: underline; } @media screen and (max-width: 1200px) { .breadcrumbs { padding-bottom: 10px; position: static; overflow-x: auto; word-break: keep-all; white-space: nowrap; } } .p-archBottom { padding: 40px 0 0px; } .p-archBottom__inner { padding-bottom: 150px; } .p-arch-list { margin: 0 -50px; } .p-arch-list__item { margin-bottom: 50px; padding: 0 50px; } .p-arch-list__item a { display: block; } .p-arch-list__item .ttl { margin-top: 25px; font-size: 14px; line-height: 1.714; } .p-arch-list__item .image { box-shadow: 1px 1px 30px 0px rgba(0, 0, 0, 0.3); } .p-archBottom { background-color: #7ccac8; } .p-arch-pager { color: #fff; } .nav-links { display: flex; align-items: center; justify-content: center; letter-spacing: 0.2em; } .page-numbers { margin: 0 15px; font-family: "Lato", sans-serif; } a.page-numbers:hover { opacity: 1; color: #e6d58c; } .page-numbers.current { color: #e6d58c; } .page-numbers.prev { position: relative; } .page-numbers.next { position: relative; } .page-numbers.prev:before { content: ""; background: url(../img/common/ico-slideNav-w.png) center center no-repeat; background-size: contain; width: 15px; height: 9px; position: absolute; left: -20px; -webkit-transform: translateY(50%) scale(-1, 1); transform: translateY(50%) scale(-1, 1); bottom: 50%; transition: 0.5s; } .page-numbers.next:before { content: ""; background: url(../img/common/ico-slideNav-w.png) center center no-repeat; background-size: contain; width: 15px; height: 9px; position: absolute; right: -20px; -webkit-transform: translateY(50%); transform: translateY(50%); bottom: 50%; transition: 0.5s; } .page-numbers.next:hover:before { background: url(../img/common/ico-slideNav-gold.png) center center no-repeat; background-size: contain; } .page-numbers.prev:hover:before { background: url(../img/common/ico-slideNav-gold.png) center center no-repeat; background-size: contain; } @media screen and (max-width: 1300px) { .p-arch-list { margin: 0 -20px; } .p-arch-list__item { padding: 0 20px; } .p-archBottom__inner { padding-bottom: 0px; } } @media screen and (max-width: 1200px) { .p-arch-pager { margin-bottom: 150px; } } @media screen and (max-width: 1024px) { .p-arch-list { margin: 0 -10px; } .p-arch-list__item { padding: 0 10px; } } @media screen and (max-width: 600px) { .p-arch-list__item { margin-bottom: 30px; width: 50%; } .p-arch-list__item .ttl { margin-top: 15px; font-size: 12px; } .p-arch-pager { margin-bottom: 80px; font-size: 14px; } .page-numbers { margin: 0 5px; } } .p-arch-info { padding: 100px 0 210px; } .p-arch-info .p-arrow-btn { margin: 40px 0 0; } .p-archInfo-list .time { margin-bottom: 5px; font-size: 14px; font-family: "Lato", sans-serif; color: #ccc; letter-spacing: 0.2em; } .p-archInfo-list .ttl { margin-bottom: 20px; font-size: 28px; font-weight: bold; line-height: 1.57; letter-spacing: 0.1em; } .p-archInfo-list .txt { margin-bottom: 35px; font-size: 14px; line-height: 1.714; letter-spacing: 0.1em; } .p-archInfo-list__item { margin-bottom: 100px; } .p-archInfo-list__item:last-child { margin-bottom: 0; } @media screen and (max-width: 600px) { .p-arch-info { padding: 60px 0 100px; } .p-archInfo-list .ttl { margin-bottom: 10px; font-size: 22px; } .p-archInfo-list .txt { margin-bottom: 20px; font-size: 14px; line-height: 1.714; letter-spacing: 0.1em; } .p-archInfo-list .p-arrow-btn { margin-top: 0px; } .p-archInfo-list__item { margin-bottom: 60px; } } .p-single .time { margin-bottom: 5px; font-size: 14px; font-family: "Lato", sans-serif; color: #ccc; letter-spacing: 0.2em; } .p-single .ttl { border-bottom: 1px solid #ccc; margin-bottom: 40px; padding-bottom: 30px; font-size: 28px; font-weight: bold; line-height: 1.57; letter-spacing: 0.1em; } .p-single a { text-decoration: underline; } .p-single .thumb { margin-bottom: 35px; } .p-single h2 { margin-top: 60px; margin-bottom: 35px; font-size: 22px; font-weight: bold; letter-spacing: 0.1em; } .p-single h2:first-child { margin-top: 0px; } .p-single h3 { margin-top: 35px; margin-bottom: 35px; font-size: 18px; font-weight: bold; line-height: 1.4; letter-spacing: 0.1em; } .p-single h2 + h3 { margin-top: 0; } .p-single h4 { position: relative; margin-top: 40px; margin-bottom: 20px; padding-left: 25px; font-size: 16px; font-weight: bold; letter-spacing: 0.1em; } .p-single h2 + h4, .p-single h3 + h4 { margin-top: 0; } .p-single h4:before { content: ""; display: inline-block; position: absolute; left: 0; bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); background-color: #e6d58c; width: 16px; height: 16px; } .p-single__txt p { margin-bottom: 2em; font-size: 14px; line-height: 2; letter-spacing: 0.1em; } .p-single__txt p:last-child { margin-bottom: 0; } @media screen and (max-width: 600px) { .p-single .ttl { margin-bottom: 30px; padding-bottom: 15px; font-size: 20px; } .p-single .thumb { margin-bottom: 35px; } .p-single h2 { margin-top: 50px; margin-bottom: 25px; font-size: 20px; } .p-single h3 { margin-top: 25px; margin-bottom: 25px; font-size: 16px; } .p-single h4 { font-size: 14px; } .p-single__txt p { line-height: 1.714; } .p-single__txt p:last-child { margin-bottom: 0; } } .p-single-pager { display: flex; align-items: center; justify-content: space-between; max-width: 380px; margin: 0 auto; letter-spacing: 0.2em; } .p-single-pager__item { color: #fff; font-family: "Lato", sans-serif; } .p-single-pager__item a:hover { opacity: 1; color: #e6d58c; } .p-single-pager__item--prev, .p-single-pager__item--next { min-width: 75px; } .p-single-pager__item--prev a { position: relative; padding-left: 20px; } .p-single-pager__item--next a { position: relative; padding-right: 20px; } .p-single-pager__item--prev a:before { content: ""; background: url(../img/common/ico-slideNav-w.png) center center no-repeat; background-size: contain; width: 15px; height: 9px; position: absolute; left: 0px; -webkit-transform: translateY(50%) scale(-1, 1); transform: translateY(50%) scale(-1, 1); bottom: 50%; transition: 0.5s; } .p-single-pager__item--next a:before { content: ""; background: url(../img/common/ico-slideNav-w.png) center center no-repeat; background-size: contain; width: 15px; height: 9px; position: absolute; right: 0px; -webkit-transform: translateY(50%); transform: translateY(50%); bottom: 50%; transition: 0.5s; } .p-single-pager__item--next a:hover:before { background: url(../img/common/ico-slideNav-gold.png) center center no-repeat; background-size: contain; } .p-single-pager__item--prev a:hover:before { background: url(../img/common/ico-slideNav-gold.png) center center no-repeat; background-size: contain; } .p-sns-list--single { margin: 0; } .p-sns-list--single li { width: 50px; max-width: none; height: 50px; margin-right: 20px; } .p-sns-list--single a { display: flex; justify-content: center; align-items: center; height: 100%; border: 1px solid #333; border-radius: 50%; } .p-sns-list--single img { max-width: 25px; } .p-share-area { margin-top: 100px; align-items: center; } .p-share-area .txt { margin-left: 30px; font-size: 14px; font-family: "Lato", sans-serif; letter-spacing: 0.2em; } @media screen and (max-width: 1200px) { .p-single-pager { margin-bottom: 150px; } } @media screen and (max-width: 600px) { .p-single-pager { margin-bottom: 60px; max-width: 280px; } } @media screen and (max-width: 374px) { .p-sns-list--single { margin: 0; } .p-sns-list--single li { margin-right: 10px; } .p-sns-list--single img { max-width: 25px; } .p-share-area { margin-top: 80px; } .p-share-area .txt { margin-left: 15px; font-size: 12px; letter-spacing: 0.1em; } } .p-guide-rsv { padding: 100px 0; } .p-guide-rsv p { font-size: 14px; line-height: 2; margin-bottom: 30px; } .p-guide-rsv .c-square-btn { margin-top: 45px; padding: 25px 10px; } .p-guide-flow { padding: 200px 0 140px; background-color: #7ccac8; } .p-flow-list .image { position: relative; width: 46%; box-shadow: 1px 1px 30px 0px rgba(78, 82, 85, 0.5); } .p-flow-list .image img { width: 100%; } .p-flow-list .image:before { content: ""; display: inline-block; position: absolute; left: -40px; bottom: -40px; width: 100%; height: 100%; background: #9ad5d3; z-index: -1; } .p-flow-list .cont { width: 54%; padding-left: 60px; } .p-flow-list__item { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 100px; } .p-flow-list__item:last-child { margin-bottom: 0; } .p-flow-list__ttl { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 25px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-flow-list__ttl .num { margin-right: 10px; font-size: 52px; line-height: 1; letter-spacing: 0.1; } .p-flow-list__ttl .main-txt { font-size: 32px; line-height: 1; } .p-flow-list__txt p { margin-bottom: 1em; font-size: 14px; line-height: 2; letter-spacing: 0.1em; } .p-flow-list__txt p:last-child { margin-bottom: 0; } .p-guide-pay { padding: 200px 0 100px; } .p-guide-pay .p-top-txt { margin-bottom: 35px; line-height: 1.875; } .p-pay-list-wrap { max-width: 570px; margin: 0 auto; } .p-pay-list { display: flex; flex-wrap: wrap; margin: 0 20px; } .p-pay-list li { padding: 0 20px; width: 33.33333%; } .p-guide-under { background-color: #7ccac8; padding: 200px 0 100px; } .p-guide-under .p-top-txt p { margin-bottom: 30px; } @media screen and (max-width: 1024px) { .p-flow-list .image { margin-left: 20px; width: calc(46% - 20px); } .p-flow-list .image:before { left: -20px; bottom: -20px; } .p-flow-list .cont { padding-left: 30px; } .p-flow-list__ttl .num { font-size: 46px; } .p-flow-list__ttl .main-txt { font-size: 28px; } } @media screen and (min-width: 601px) { .p-guide-pay .p-top-txt p { text-align: center; } .p-guide-under .p-top-txt p { text-align: center; } .p-guide-under .p-top-txt p.under_age_txt { text-align: left; } } @media screen and (max-width: 600px) { .p-guide-rsv { padding: 60px 0; } .p-guide-rsv p { line-height: 1.871; margin-bottom: 20px; } .p-guide-rsv .c-square-btn { margin-top: 30px; padding: 20px 10px; font-size: 20px; } .p-guide-flow { padding: 100px 0 60px; } .p-flow-list .image { width: 100%; margin-left: 20px; } .p-flow-list .image:before { left: -20px; bottom: -20px; } .p-flow-list .cont { width: 100%; padding-left: 0px; margin-top: 40px; } .p-flow-list__item { margin-bottom: 60px; } .p-flow-list__ttl { margin-bottom: 10px; } .p-flow-list__ttl .num { margin-right: 10px; font-size: 30px; } .p-flow-list__ttl .main-txt { font-size: 22px; line-height: 1; } .p-guide-pay { padding: 100px 0 60px; } .p-pay-list { margin: 0 -7px; } .p-pay-list li { padding: 0 7px; } .p-guide-under { background-color: #7ccac8; padding: 100px 0 60px; } } .p-faq-search-form { margin-bottom: 30px; display: flex; gap: 10px; } .p-faq-search-form input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } .p-faq-search-form button { padding: 10px 20px; background-color: #7ccac8; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .p-faq-search-form button:hover { background-color: #499c9a; } .p-faq-category-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media screen and (max-width: 500px) { .p-faq-category-buttons { grid-template-columns: repeat(2, 1fr); } } .p-faq-category-buttons .p-faq-category-button { align-items: center; border: 1px solid #cccccc; border-radius: 4px; display: flex; font-size: 16px; justify-content: center; padding: 16px; line-height: 1.3; text-align: center; } @media screen and (max-width: 768px) { .p-faq-category-buttons .p-faq-category-button { font-size: 14px; padding: 10px; } } @media screen and (max-width: 768px) { .p-faq-category-buttons .p-faq-category-button { padding: 16px 10px; } } .p-faq-category-buttons .p-faq-category-button.is-active { background-color: #ececec; } .p-faq-list { margin-top: 30px; } .p-faq-item { margin-bottom: 10px; padding: 16px 20px; position: relative; transition: background-color 0.3s; } @media screen and (max-width: 768px) { .p-faq-item { padding: 10px 10px 10px 16px; } } .p-faq-item.even { background-color: #f1fafa; } .p-faq-item.odd { background-color: #def4f4; } .p-faq-item .p-faq-item__question { align-items: center; cursor: pointer; color: #499c9a; display: flex; font-size: 16px; font-weight: bold; list-style: none; outline: none; padding: 10px 40px 10px 10px; position: relative; width: 100%; } @media screen and (max-width: 768px) { .p-faq-item .p-faq-item__question { font-size: 14px; padding: 10px 40px 10px 0; } } .p-faq-item .p-faq-item__question .p-faq-item__question-toggle { position: absolute; height: 20px; width: 20px; right: 0; top: 0; bottom: 0; margin: auto; } @media screen and (max-width: 768px) { .p-faq-item .p-faq-item__question .p-faq-item__question-toggle { height: 16px; width: 16px; } } .p-faq-item .p-faq-item__question .p-faq-item__question-toggle::before, .p-faq-item .p-faq-item__question .p-faq-item__question-toggle::after { background-color: #7ccac8; content: ""; display: block; position: absolute; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .p-faq-item .p-faq-item__question .p-faq-item__question-toggle::before { height: 2px; margin: auto; top: 0; bottom: 0; width: 20px; } @media screen and (max-width: 768px) { .p-faq-item .p-faq-item__question .p-faq-item__question-toggle::before { width: 16px; } } .p-faq-item .p-faq-item__question .p-faq-item__question-toggle::after { height: 20px; left: 0; right: 0; margin: auto; width: 2px; } @media screen and (max-width: 768px) { .p-faq-item .p-faq-item__question .p-faq-item__question-toggle::after { height: 16px; } } .p-faq-item .p-faq-item__question-mark, .p-faq-item .p-faq-item__answer-mark { font-size: 20px; font-weight: 700; width: 40px; flex-shrink: 0; } @media screen and (max-width: 768px) { .p-faq-item .p-faq-item__question-mark, .p-faq-item .p-faq-item__answer-mark { width: 28px; font-size: 16px; } } .p-faq-item .p-faq-item__answer { align-items: center; color: #333; display: flex; font-size: 16px; margin-top: 10px; border-top: 1px solid #b4d0cf; padding: 20px 10px 10px 10px; position: relative; width: 100%; } @media screen and (max-width: 768px) { .p-faq-item .p-faq-item__answer { font-size: 14px; padding: 16px 0 10px 0; } } .p-faq-item[open] .p-faq-item__question-toggle::before { height: 2px; margin: auto; top: 0; bottom: 0; width: 20px; } @media screen and (max-width: 768px) { .p-faq-item[open] .p-faq-item__question-toggle::before { width: 16px; } } .p-faq-item[open] .p-faq-item__question-toggle::after { opacity: 0; } .p-clinic-dr { padding: 160px 0 140px; overflow: hidden; } .p-dr-box__ttl { margin-bottom: 15px; font-size: 48px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; letter-spacing: 0.25em; } .p-dr-box__ttl span { font-size: 32px; margin-right: 5px; } .p-dr-box__enttl { margin-bottom: 20px; font-size: 14px; font-weight: lighter; letter-spacing: 0.2em; } .p-bio-list .inner { display: flex; flex-wrap: wrap; font-size: 14px; line-height: 2.5; } .p-bio-list dt { width: 60px; padding-right: 10px; font-family: "Lato", sans-serif; } .p-sns-list--dr { margin-bottom: 40px; } .p-dr-img { position: absolute; bottom: -285px; max-width: 525px; right: 45px; } .p-clinic-gree { padding: 70px 0 50px; background-color: #7ccac8; } .p-clinic-gree p { margin-bottom: 35px; font-size: 14px; line-height: 2.5; } .p-clinic-gree p:last-child { margin-bottom: 0; } .p-clinic-gree__ttl { position: absolute; top: -150px; left: -30px; } .p-dr-img-wrap { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .p-clinic-info { padding: 200px 0 70px; } .p-clinic-info .c-sec__ttl { margin-bottom: 30px; } .p-border-list .inner { display: flex; flex-wrap: wrap; border-bottom: 1px solid #ccc; padding: 30px 20px; font-size: 14px; } .p-border-list .inner:not(:last-child) { border-bottom: 1px solid #ccc; } .p-border-list dt { width: 120px; padding-right: 10px; } .p-border-list dd { width: calc(100% - 120px); } .p-clinic-gallery { padding: 200px 0 110px; background-color: #7ccac8; } .p-gallery-list__item { margin-bottom: 40px; } .p-gallery-list__item img { box-shadow: 1px 1px 30px 0px rgba(78, 82, 85, 0.5); } @media screen and (max-width: 1024px) { .p-clinic-gree__ttl { top: -140px; left: 20px; } } @media screen and (max-width: 850px) { .p-dr-box__ttl { font-size: 36px; } .p-dr-box__ttl span { font-size: 24px; } .p-dr-img { right: -100px; } } @media screen and (max-width: 650px) { .p-dr-img { right: -170px; max-width: 500px; } .p-dr-box__enttl { font-size: 12px; } .p-clinic-gree__ttl { top: -120px; max-width: 150px; } } @media screen and (max-width: 600px) { .p-clinic-info { padding: 100px 0 60px; } .p-clinic-gallery { padding: 100px 0 60px; } .p-border-list .inner { padding: 20px 0px; } .p-border-list dt { width: 100%; margin-bottom: 10px; padding-right: 0; font-weight: bold; } .p-border-list dd { width: 100%; } .p-gallery-list__item { margin-bottom: 30px; } } @media screen and (max-width: 500px) { .p-clinic-dr { padding: 100px 0 140px; } .p-dr-img { max-width: 450px; } } @media screen and (max-width: 450px) { .p-clinic-dr { padding: 60px 0 100px; } .p-dr-box__ttl { margin-bottom: 10px; font-size: 30px; } .p-dr-box__ttl span { font-size: 20px; } .p-dr-img { max-width: 400px; bottom: -150px; right: -150px; } .p-dr-box__enttl { margin-bottom: 20px; } .p-bio-list .inner { margin-bottom: 10px; line-height: 2; } .p-bio-list dt { width: 100%; padding-right: 0px; } .p-sns-list--dr { margin-bottom: 30px; } } @media screen and (max-width: 400px) { .p-dr-img { max-width: 370px; } } @media screen and (max-width: 374px) { .p-dr-img { max-width: 320px; right: -140px; } } .p-access-top { padding: 100px 0 200px; } .p-access-box { display: flex; flex-wrap: wrap; } .p-access-box__item.cont { width: 44%; padding-right: 20px; } .p-access-box__item.map { width: 56%; } .p-access-box__item.map .map-wrap { box-shadow: 1px 1px 30px 0px rgba(0, 0, 0, 0.3); } .p-access-box__item.map iframe { width: 100%; vertical-align: middle; } .p-access-box__ttl { line-height: 2; font-size: 14px; } .p-access-box__ttl .lg { font-size: 16px; font-weight: bold; } .p-access-list { font-size: 14px; } .p-access-list li { margin-bottom: 5px; padding-left: 15px; line-height: 1.66666; letter-spacing: 0.05em; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .p-mapMore-wrap { margin-top: 30px; } .c-youtube_wrap { max-width: 800px; margin: 0 auto -185px; padding: 0 20px; position: relative; z-index: 10; } .c-youtube { width: 100%; aspect-ratio: 16/9; } .c-youtube iframe { width: 100%; height: 100%; } @media screen and (max-width: 600px) { .c-youtube_wrap { margin-bottom: -20vw !important; } } .p-access-route { padding: 280px 0 70px; background-color: #7ccac8; } .p-access-route__subttl { margin-bottom: 55px; font-size: 32px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; letter-spacing: 0.1em; } .p-route-list { margin: 0 -50px; } .p-route-list img { display: block; width: 100%; height: 240px; -o-object-fit: cover; object-fit: cover; font-family: "object-fit: cover;"; box-shadow: 1px 1px 30px 1px rgba(0, 0, 0, 0.3); transition: 0.5s; } .p-route-list .txt { position: relative; margin-top: 35px; padding-left: 50px; font-size: 14px; line-height: 2; } .p-route-list .num { position: absolute; left: 0; top: 0; font-size: 28px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; letter-spacing: 0.05em; line-height: 1; } .p-route-list__item { margin-bottom: 80px; padding: 0 50px; } @media screen and (max-width: 1300px) { .p-route-list { margin: 0 -20px; } .p-route-list__item { padding: 0 20px; } } @media screen and (max-width: 1024px) { .p-access-box__ttl { margin-bottom: 20px; } .p-access-box__item.cont { width: 50%; } .p-access-box__item.map { width: 50%; } .p-mapMore-wrap { margin-top: 20px; } } @media screen and (max-width: 768px) { .p-route-list__item { width: 50%; } } @media screen and (max-width: 767px) { .p-access-box__item.cont { width: 100%; padding-right: 0px; padding-left: 0px; margin-bottom: 60px; } .p-access-box__item.map { width: 100%; } } @media screen and (max-width: 600px) { .p-access-top { padding: 60px 0 100px; } .p-access-route { padding: 30vw 0 15px; } .p-access-route__subttl { margin-bottom: 30px; font-size: 18px; } .p-route-list .txt { margin-top: 20px; padding-left: 40px; } .p-route-list .num { font-size: 26px; } .p-route-list__item { width: 100%; margin-bottom: 45px; } } .tab-area { display: flex; flex-wrap: wrap; margin: 0 -10px; background-color: #7ccac8; } .tab-area .tab { margin-bottom: 20px; padding: 0 10px; width: 25%; text-align: center; cursor: pointer; } .tab-area .tab__inner { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; background-color: #7ccac8; color: #fff; border: 2px solid #fff; padding: 10px; font-weight: bold; font-size: 24px; transition: 0.5s; } .tab-area .tab__inner small { font-size: 16px; margin-bottom: 5px; } .tab-area .tab__inner:hover { background-color: #fff; color: #7ccac8; } .tab-area .tab.active .tab__inner { background-color: #fff; color: #7ccac8; } .content-area .tab-content { display: none; } .content-area .tab-content.show { margin-top: 50px; display: block; } @media screen and (max-width: 1024px) { .tab-area .tab { width: 33.33333%; } } @media screen and (max-width: 768px) { .tab-area .tab__inner { font-size: 20px; } .tab-area .tab__inner small { margin-bottom: 0; font-size: 14px; } } @media screen and (max-width: 768px) { .tab-area { margin: 0 -5px; } .tab-area .tab { margin-bottom: 10px; padding: 0 5px; width: 50%; text-align: center; cursor: pointer; } .tab-area .tab__inner { font-size: 18px; } .tab-area .tab__inner small { font-size: 12px; } .content-area .tab-content.show { margin-top: 20px; } } @media screen and (max-width: 374px) { .tab-area .tab__inner { padding: 5px; font-size: 16px; } .tab-area .tab__inner small { font-size: 11px; } } .mw_wp_form .error { margin-top: 10px; } .p-contact-top { padding: 100px 0 200px; } .p-contact-top p { margin-bottom: 35px; line-height: 2; } .p-contact-top p:last-child { margin-bottom: 0; } .p-contact-top .ttl { font-size: 16px; font-weight: bold; } .p-contact-top .txt { font-size: 14px; letter-spacing: 0.05em; } .p-contact-top a { text-decoration: underline; } .p-contact-form { padding: 100px 0 150px; background-color: #7ccac8; } .p-form-list .item { margin-bottom: 50px; } .p-form-list .item:last-child { margin-bottom: 0px; } .p-form-list dt { margin-bottom: 20px; font-size: 14px; letter-spacing: 0.1em; } .require { background-color: #dd6c64; margin-left: 10px; font-size: 12px; padding: 5px 4px; letter-spacing: 0.15em; color: #fff; } .pp-area { margin-top: 60px; } .pp-cont { padding: 25px 15px 25px 30px; background-color: #9ad5d3; font-size: 14px; line-height: 2; } .pp-cont__inner { padding-right: 15px; max-height: 190px; overflow: auto; } .pp-check { margin-top: 30px; font-size: 14px; text-align: center; } input[type=submit].p-submit-btn { width: 100%; max-width: 400px; margin: 100px auto 0; padding: 24px 10px; background-color: #d0c292; font-size: 24px; transition: 0.5s; } input[type=submit].p-submit-btn:hover { opacity: 0.7; } .p-tel-area { margin-top: 100px; } .p-tel-area .txt { margin-bottom: 30px; font-size: 14px; text-align: center; } .p-tel-area .fax { margin-top: 15px; text-align: center; font-size: 16px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-tel-btn--contact { flex-direction: row; } .p-tel-btn--contact .main-txt { margin-bottom: 0; margin-right: 10px; font-size: 24px; } .p-tel-btn--contact .main-txt:before { width: 17px; height: 24px; margin-right: 5px; } .p-contact-thanks { padding: 100px 0 200px; } .p-contact-thanks p { margin-bottom: 35px; line-height: 2; text-align: center; } .p-contact-thanks p:last-child { margin-bottom: 0; } .p-top-btn { background-color: #333; max-width: 300px; margin: 0 auto; font-size: 20px; padding: 20px 10px; } @media screen and (max-width: 600px) { .p-contact-top { padding: 80px 0 80px; } .p-contact-top p { margin-bottom: 20px; } .p-form-list .item { margin-bottom: 40px; } .p-form-list dt { margin-bottom: 10px; } .p-contact-form { padding: 80px 0 80px; } .pp-cont { font-size: 12px; } .pp-area { margin-top: 40px; } .pp-check { margin-top: 20px; } input[type=submit].p-submit-btn { margin: 30px auto 0; padding: 17px 10px; font-size: 22px; } .p-tel-area { margin-top: 60px; } .p-tel-area .txt { margin-bottom: 20px; } .p-tel-area .fax { margin-top: 20px; } .p-tel-btn--contact { flex-direction: column; } .p-tel-btn--contact .main-txt { margin-bottom: 10px; margin-right: 0px; font-size: 24px; } .p-contact-thanks p { font-size: 14px; text-align: left; } } .p-price-top { padding: 100px 0 200px; } .p-priceMenu-list { position: relative; z-index: 20; margin: 0 -30px 0px; } .p-priceMenu-list__item { padding: 0 30px; margin-bottom: 50px; height: 200px; } .p-priceMenu-list__bg { display: block; } .p-priceMenu-list__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 100%; padding: 52px 10px; color: #fff; text-align: center; box-shadow: 1px 1px 30px 0px rgba(78, 82, 85, 0.5); } .p-priceMenu-list__inner .sub-txt { position: relative; margin-bottom: 10px; font-family: "Lato", sans-serif; font-size: 14px; letter-spacing: 0.2em; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .p-priceMenu-list__inner .main-txt { position: relative; font-size: 28px; font-weight: bold; letter-spacing: 0.2em; line-height: 1.6; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .p-priceMenu-list__inner small { font-size: 20px; } .p-priceMenu-list__inner:hover { opacity: 1; } .p-priceMenu-list__inner:before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); transition: 0.5s; } .p-priceMenu-list__inner.surg { background: url(../img/price/menu-surg.jpg) center center no-repeat; background-size: cover; } .p-priceMenu-list__inner.care { background: url(../img/price/menu-care.jpg) center center no-repeat; background-size: cover; } .p-priceMenu-list__inner.common { background: url(../img/price/menu-common.jpg) center center no-repeat; background-size: cover; } .p-priceMenu-list__inner.other { background: url(../img/price/menu-other.jpg) center center no-repeat; background-size: cover; } @media screen and (min-width: 1025px) { .p-priceMenu-list__inner:hover:before { background-color: rgba(0, 0, 0, 0.5); } } @media screen and (max-width: 1200px) { .p-priceMenu-list { margin: 0 -20px 0px; } .p-priceMenu-list__item { padding: 0 20px; } } @media screen and (max-width: 600px) { .p-price-top { padding: 60px 0 100px; } .p-price-blephaloplasty { padding: 60px 0 100px; } .p-priceMenu-list { margin: 0 -20px 0px; } .p-priceMenu-list__item { height: 160px; } .p-priceMenu-list__item:not(:last-child) { margin-bottom: 30px; } .p-priceMenu-list__inner { padding: 30px 10px; min-height: 155px; } .p-priceMenu-list__inner .sub-txt { font-size: 14px; } .p-priceMenu-list__inner .main-txt { font-size: 24px; } .p-priceMenu-list__inner small { font-size: 14px; } } .p-price-area .p-top-txt { margin-bottom: 50px; font-size: 14px; line-height: 1.875; } .p-price-common { padding-top: 30px; } .p-price-common .p-top-txt { margin-bottom: 30px; text-align: center; } .p-price-blephaloplasty { background-color: #7ccac8; } .p-price-care { padding: 100px 0 200px; } .p-price-other { background-color: #7ccac8; } .p-price-list__ttl { margin-bottom: 20px; font-size: 28px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-price-list__item { margin-bottom: 60px; } .p-price-list__item .sup-txt { font-size: 14px; margin-top: 20px; text-align: right; line-height: 1.714; } .p-price-list__item:last-child { margin-bottom: 0; } .p-price-ttlArea { display: flex; justify-content: flex-end; margin: 0 -5px; } .p-price-ttlArea .txt { padding: 5px; font-weight: bold; font-size: 14px; text-align: center; } .p-price-ttlArea .item { width: 36.5%; padding: 0 5px; } .p-price-ttlArea .item.special .txt { background-color: #fff; color: #7ccac8; } .p-price-ttlArea .item.normal .txt { background-color: #333; color: #fff; } .p-price-ttlArea--care .item.special .txt { background-color: #7ccac8; color: #fff; } .p-price-ttlArea--care .item.normal .txt { background-color: #333; color: #fff; } .p-price-cont { font-size: 14px; } .p-price-cont__row { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -5px; padding: 15px 0; border-bottom: 1px solid #499c9a; } .p-price-cont__row .item { padding: 0 5px; letter-spacing: 0.05em; } .p-price-cont__row .item.ttl { width: 60%; } .p-price-cont__row .item.ttl .inner { justify-content: flex-start; line-height: 1.875; } .p-price-cont__row .inner { display: flex; justify-content: center; align-items: center; } .p-price-cont__row .item.price { font-weight: bold; text-align: center; width: 40%; } .p-price-cont__row .price-inner { display: flex; align-items: center; } .p-price-cont__row .price-inner:not(:last-child) { margin-bottom: 10px; } .p-price-cont__row .price-inner.normal { font-size: 16px; } .p-price-cont__row .price-inner.special { color: #fff; font-size: 20px; } .p-price-cont__row .tax { font-size: 12px; font-weight: normal; } .p-price-cont__row .string { font-size: 14px; color: #333; } .p-price-cont__row--care .price-inner.special { color: #7ccac8; } .price-label { display: block; background: #333; padding: 5px; font-size: 14px; color: #fff; text-align: center; min-width: 100px; letter-spacing: 0; margin-right: 10px; } .price-label--special { background: #fff; color: #7ccac8; } .price-label--care-special { background: #7ccac8; color: #fff; } .price-label--no { background: transparent; } @media screen and (max-width: 768px) { .p-price-cont__row .item.ttl { width: 57%; } .p-price-cont__row .item.price { width: 43%; } } @media screen and (max-width: 767px) { .p-price-list__ttl { margin-bottom: 10px; font-size: 20px; } .p-price-list__item .sup-txt { font-size: 12px; margin-top: 10px; text-align: left; } .p-price-ttlArea { display: none; } .p-price-cont__row .item { width: 100%; } .p-price-cont__row .item.ttl { width: 100%; margin-bottom: 10px; } .p-price-cont__row .inner { justify-content: flex-start; border-bottom: none; padding: 0; } .p-price-cont__row .item.price { width: 100%; text-align: left; } .p-price-cont__row .item.price:first-of-type { } .p-price-cont__row .item.special .inner { border-bottom: none; } .p-price-cont__row--care { border-bottom: 1px solid #333; } .price-label { padding: 3px; font-size: 12px; min-width: 80px; } .price-label--special { background: #fff; color: #7ccac8; } .price-label--care-special { background: #7ccac8; color: #fff; } .price-label--no { display: none; } } @media screen and (max-width: 600px) { .p-price-common .p-top-txt { text-align: left; } .p-price-care { padding: 60px 0 100px; } } .p-masui-listWrap { max-width: 570px; margin: 0 auto 100px; } .p-masui-list { display: flex; flex-wrap: wrap; margin: 0 -20px; } .p-masui-list li { width: 33.33333%; padding: 0 20px; } .p-masui-list img { width: 100%; } @media screen and (max-width: 600px) { .p-masui-listWrap { margin: 0 auto 80px; } .p-masui-list { display: flex; flex-wrap: wrap; margin: 0 -10px; } .p-masui-list li { padding: 0 10px; } } .p-surg-worries .c-sec__ttl { margin-bottom: 100px; } .p-surg-worries .p-top-txt { margin-bottom: 35px; font-weight: bold; text-align: center; line-height: 1.875; } .p-care-worries .c-sec__ttl { margin-bottom: 100px; } .p-worries-listWrap { position: relative; } .p-worries-listWrap:before { content: ""; display: inline-block; background-color: #9ad5d3; position: absolute; top: -30px; width: 40%; height: 280px; z-index: -1; } .p-worries-list { display: flex; flex-wrap: wrap; max-width: 1040px; margin: 0 auto; padding: 0 20px; } .p-worries-listWrap:not(:last-child) .p-worries-list { margin-bottom: 150px; } .p-worries-list__item.img { width: 46%; } .p-worries-list__item.img figure { box-shadow: 1px 1px 30px 0px rgba(0, 0, 0, 0.3); } .p-worries-list__item.cont { width: 54%; } .p-worries-listWrap:nth-of-type(even):before { left: 0; } .p-worries-listWrap:nth-of-type(even) .p-worries-list__item.cont { padding-left: 55px; } .p-worries-listWrap:nth-of-type(odd):before { right: 0; } .p-worries-listWrap:nth-of-type(odd) .p-worries-list__item.img { order: 2; } .p-worries-listWrap:nth-of-type(odd) .p-worries-list__item.cont { order: 1; padding-right: 55px; } .p-worries-list__ttl { font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; font-size: 32px; } .p-worries-list__subttl { margin-top: 25px; font-size: 14px; line-height: 1.871; } .p-worries-inlist { display: flex; flex-wrap: wrap; margin-top: 45px; margin-left: -20px; margin-right: -20px; } .p-worries-inlist__item { padding: 0 20px; margin-bottom: 25px; width: 50%; } .p-worries-inlist__item .p-arrow-btn { display: flex; align-items: center; height: 100%; max-width: 100%; } @media screen and (min-width: 1500px) { .p-worries-list { max-width: 1200px; } } @media screen and (max-width: 768px) { .p-worries-listWrap:before { width: 80%; } .p-worries-listWrap:not(:last-child) .p-worries-list { margin-bottom: 80px; } .p-worries-list { display: block; } .p-worries-list__item.img { width: 70%; } .p-worries-list__item.cont { margin-top: 30px; width: 82%; } .p-worries-listWrap:nth-of-type(even) .p-worries-list__item.img { margin-left: 50px; } .p-worries-listWrap:nth-of-type(odd) .p-worries-list__item.img { margin-right: 50px; margin-left: auto; } .p-worries-listWrap:nth-of-type(odd) .p-worries-list__item.cont { margin-left: auto; } } @media screen and (max-width: 600px) { .p-surg-worries .c-sec__ttl { margin-bottom: 60px; } .p-surg-worries .p-top-txt { margin-bottom: 35px; font-weight: bold; text-align: center; line-height: 1.875; } .p-worries-listWrap:before { width: calc(100% - 20px); top: -20px; height: 52vw; } .p-worries-listWrap:not(:last-child) .p-worries-list { margin-bottom: 80px; } .p-worries-list__item.img { width: 100%; } .p-worries-list__item.cont { width: 100%; } .p-worries-listWrap:nth-of-type(even) .p-worries-list__subttl { padding-right: 40px; } .p-worries-listWrap:nth-of-type(even) .p-worries-list__item.img { padding-right: 40px; padding-left: 0; margin: 0; } .p-worries-listWrap:nth-of-type(even) .p-worries-list__item.cont { padding-left: 0px; } .p-worries-listWrap:nth-of-type(odd) .p-worries-list__subttl { padding-left: 40px; } .p-worries-listWrap:nth-of-type(odd) .p-worries-list__item.img { padding-right: 0; padding-left: 40px; margin: 0; } .p-worries-listWrap:nth-of-type(odd) .p-worries-list__item.cont { padding-right: 0px; } .p-worries-list__ttl { font-size: 24px; } .p-worries-list__subttl { margin-top: 20px; line-height: 1.714; } .p-worries-inlist { margin-top: 20px; margin-left: 0px; margin-right: 0px; } .p-worries-inlist__item { width: 100%; margin-bottom: 20px; padding: 0; } .p-worries-inlist__item .p-arrow-btn { font-size: 14px; } .p-worries-listWrap:nth-of-type(even) .p-worries-inlist__item { padding-right: 40px; } .p-worries-listWrap:nth-of-type(odd) .p-worries-list__ttl { padding-left: 40px; } .p-worries-listWrap:nth-of-type(odd) .p-worries-inlist__item { padding-left: 40px; } } @media screen and (max-width: 450px) { .p-worries-listWrap:before { height: 49vw; } } .p-treMenu-list { padding: 100px 0 115px; background-color: #7ccac8; } .p-care-list__ttl { margin-bottom: 45px; font-size: 32px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-machine-area { margin-bottom: 50px; } .p-machine-list { display: flex; flex-wrap: wrap; margin: 0 -35px; } .p-machine-list__item { margin-bottom: 45px; padding: 0 35px; width: 33.33333%; } .p-machine-list__item img { box-shadow: 1px 1px 30px 0px rgba(0, 0, 0, 0.3); width: 100%; height: 220px; -o-object-fit: cover; object-fit: cover; font-family: "object-fit: cover;"; transition: 0.5s; } .p-machine-list__item .ttl { margin-top: 15px; font-size: 14px; line-height: 1.714; } .p-menu-list { display: flex; flex-wrap: wrap; margin: 0 -35px; } .p-menu-list__item { margin-bottom: 35px; padding: 0 35px; width: 33.33333%; } .p-menu-list__item .p-arrow-btn { display: flex; align-items: center; max-width: 100%; height: 100%; } .p-menu-list__item span.p-arrow-btn { border-bottom: none; } .p-menu-list__item .p-border-txt { display: block; padding: 5px 0; padding-right: 20px; border-bottom: 1px solid #333; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; letter-spacing: 0.15em; } @media screen and (max-width: 1200px) { .p-menu-list { margin: 0 -20px; } .p-menu-list__item { margin-bottom: 30px; padding: 0 20px; } .p-machine-list { margin: 0 -20px; } .p-machine-list__item { padding: 0 20px; } } @media screen and (min-width: 1025px) { .p-machine-list__item img:hover { box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3); } } @media screen and (max-width: 1024px) { .p-machine-list { margin: 0 -10px; } .p-machine-list__item { padding: 0 10px; } } @media screen and (max-width: 600px) { .p-machine-area { margin-bottom: 20px; } .p-treMenu-list { padding: 80px 0 80px; background-color: #7ccac8; } .p-menu-list { margin: 0 -10px; } .p-menu-list__item { padding: 0 10px; margin-bottom: 20px; width: 100%; letter-spacing: 0.05em; } .p-menu-list__item .p-arrow-btn { font-size: 14px; } .p-machine-list__item { width: 50%; margin-bottom: 30px; } .p-machine-list__item .ttl { margin-top: 10px; font-size: 12px; letter-spacing: 0.05em; } .p-machine-list__item img { height: 34vw; } .p-care-list__ttl { margin-bottom: 30px; font-size: 24px; } } @media screen and (max-width: 374px) { .p-surg-worries .p-top-txt { font-size: 14px; } } .p-menu-single { padding: 100px 0 0; } .p-menu-single-topArea { display: flex; flex-wrap: wrap; align-items: center; position: relative; max-width: 1500px; margin: 0 auto; margin-bottom: 60px; z-index: 10; } .p-menu-single-topArea .image { width: 50%; } .p-menu-single-topArea .thumb { box-shadow: 1px 1px 30px 0px rgba(78, 82, 85, 0.4); } .p-menu-single-topArea .thumb img { -o-object-fit: cover; object-fit: cover; font-family: "object-fit: cover;"; width: 100%; height: 425px; } .p-menu-single-topArea .cont { width: 50%; padding-left: 120px; padding-right: 70px; } .p-menu-single .ttl { font-size: 40px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-menu-single__txt { margin-top: 40px; } .p-menu-single__txt p { font-size: 14px; line-height: 2; } .p-menu-single-cont { background-color: #7ccac8; padding: 70px 0 150px; } .p-menu-single-cont .ttl { margin-bottom: 35px; padding-bottom: 5px; font-size: 32px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; border-bottom: 1px solid #333; } .p-menu-single-cont__item p { font-size: 14px; line-height: 2; } .p-menu-single-cont__item:not(:last-child) { margin-bottom: 110px; } .p-method-list__item { margin-bottom: 40px; } .p-method-list__item img { box-shadow: 1px 1px 30px 0px rgba(0, 0, 0, 0.3); } .p-method-list__item .txt { margin-top: 20px; } .c-bgTtl-list .inner { display: flex; flex-wrap: wrap; align-items: flex-start; line-height: 1.714; } .c-bgTtl-list .inner:not(:last-child) { margin-bottom: 20px; } .c-bgTtl-list__ttl { max-width: 200px; width: 100%; padding: 12px; font-size: 14px; background-color: #333; color: #fff; text-align: center; } .c-bgTtl-list__txt { width: calc(100% - 200px); padding-left: 40px; padding-top: 13px; font-size: 14px; } .p-menu-supTxt { border-top: 1px solid #499c9a; padding-top: 35px; margin-top: 40px; } .p-menu-supTxt p { font-size: 14px; line-height: 1.714; } .p-price-topTxt { border-bottom: 1px solid #499c9a; padding-bottom: 35px; font-size: 14px; line-height: 1.714; } .p-pageprice-list .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-bottom: 1px solid #499c9a; padding: 15px 0px; font-size: 14px; } .p-pageprice-list__name { width: 70%; padding-right: 10px; font-size: 14px; } .p-pageprice-list__num { width: 30%; font-size: 16px; font-weight: bold; text-align: right; } .p-pageprice-list__num .tax { font-size: 12px; font-weight: normal; } .p-price-supTxt { margin-top: 20px; font-size: 14px; text-align: right; line-height: 1.714 !important; } .p-dot-list { font-size: 14px; line-height: 1.871; } .p-dot-list li { margin-bottom: 25px; padding-left: 1em; } .p-dot-list li:before { top: 0.75em; } .p-faq-list .inner { padding: 0 20px 30px; margin-bottom: 30px; border-bottom: 1px solid #499c9a; } .p-faq-list .inner:last-child { margin-bottom: 0; } .p-faq-list__ttl { margin-bottom: 15px; font-weight: bold; } .p-faq-list__ttl:before { content: "Q"; margin-right: 2px; font-size: 24px; letter-spacing: 0; vertical-align: -1px; } .p-faq-list__txt { font-size: 14px; line-height: 1.714; } @media screen and (min-width: 1500px) { .p-menu-single-topArea .image { width: 40%; } .p-menu-single-topArea .cont { width: 60%; } } @media screen and (max-width: 1300px) { .p-menu-single-topArea .thumb img { width: 100%; height: 30.4vw; } .cont { padding-left: 60px; padding-right: 60px; } } @media screen and (max-width: 1024px) { .p-menu-single { padding: 100px 0 30px; } .p-menu-single-topArea .image { width: 50%; padding-left: 30px; } .p-menu-single-topArea .cont { width: 50%; padding-left: 20px; } .p-menu-single .ttl { font-size: 28px; } .p-menu-single__txt { margin-top: 25px; } } @media screen and (max-width: 768px) { .p-method-list__item { width: 50%; } } @media screen and (max-width: 600px) { .p-menu-single { padding: 60px 0 100px; } .p-menu-single-topArea { margin-bottom: 0; } .p-menu-single-topArea .image { width: 100%; margin-top: 30px; padding-left: 60px; } .p-menu-single-topArea .cont { width: 100%; padding-left: 20px; padding-right: 20px; } .p-menu-single-topArea .thumb img { height: 50vw; } .p-menu-single .ttl { font-size: 24px; } .p-menu-single__txt { margin-top: 15px; } .p-menu-single-cont { padding: 80px 0; } .p-menu-single-cont .ttl { margin-bottom: 30px; padding-bottom: 5px; font-size: 20px; } .p-menu-single-cont__item p { font-size: 14px; line-height: 2; } .p-menu-single-cont__item:not(:last-child) { margin-bottom: 80px; } .p-menu-single-footnotes ol.footnotes { width: 90%; margin: 0 auto; } .p-method-list { margin: 0 -5px; } .p-method-list__item { padding: 0 5px; } .p-method-list__item .txt { margin-top: 15px; font-size: 12px; } .c-bgTtl-list .inner { margin-bottom: 35px; } .c-bgTtl-list__ttl { max-width: 100%; padding: 5px 10px; font-size: 12px; } .c-bgTtl-list__txt { width: 100%; padding-left: 0px; padding-top: 15px; } .p-dot-list { line-height: 1.714; } .p-dot-list li { margin-bottom: 10px; } .p-faq-list .inner { padding: 0px 0px 20px; margin-bottom: 20px; } .p-faq-list__ttl { margin-bottom: 10px; } .p-faq-list__ttl:before { content: "Q"; font-size: 20px; } .p-faq-list__txt { font-size: 14px; } .p-pageprice-list__name { padding-right: 0px; width: 100%; } .p-pageprice-list__name span { display: block; margin-bottom: 15px; } .p-pageprice-list__num { width: 100%; } .p-pageprice-list__num .tax { font-size: 12px; font-weight: normal; } .p-menu-supTxt { padding-top: 30px; margin-top: 30px; } .p-menu-supTxt p { font-size: 12px; } .p-price-supTxt { text-align: left; font-size: 12px !important; } } .p-select-box { margin-bottom: 75px; } .p-tax-select-wrap { position: relative; max-width: 400px; margin: 0 auto; } .p-tax-select-wrap:before { content: ""; display: inline-block; position: absolute; right: 10px; top: 7px; width: 15px; height: 8px; background: url(../img/common/ico-arrow-down.png) center center no-repeat; background-size: contain; } .p-tax-select { width: 100%; padding: 0 0 10px; border-bottom: 1px solid #333; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-case-list__item { margin-bottom: 75px; } _::-webkit-full-page-media, _:future, :root .p-tax-select-wrap:before { top: 11px; } .p-case-modal { padding: 0; } .p-case-modal-close--pc { position: absolute; } .p-case-list__item { margin-bottom: 40px; } .p-case-modal__scroll { height: 100%; width: 100%; padding: 120px 0; overflow-y: auto; } .p-case-modal__inner { position: relative; max-width: 1040px; padding: 0 20px; margin: 0 auto; } .p-case-modal-box__image { width: 45%; } .p-case-modal-box { display: flex; flex-wrap: wrap; } @media all and (-ms-high-contrast: none) { .p-case-modal-box { padding-bottom: 120px; } } .p-case-modal-box__cont { width: 55%; padding-left: 80px; padding-right: 35px; } .p-case-modal-box__ttl { margin-bottom: 35px; font-size: 32px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-case-modal-box__txt p { font-size: 14px; line-height: 1.714; } .p-case-modal-box__txt p:not(:last-child) { margin-bottom: 2em; } .p-case-modal-box__txt a { text-decoration: underline; } .p-case-modal-close--sp { display: none; } @media screen and (max-width: 1023px) { .p-case-box__cont { padding-left: 30px; } .p-case-modal-close--pc { display: none; } .p-case-modal-close--sp { display: block; right: 20px; top: 20px; } .p-case-modal-box__cont { padding-right: 0px; } } @media screen and (max-width: 600px) { .p-case-modal__scroll { display: block; padding: 60px 0; } .p-case-modal__inner { position: relative; max-width: 1040px; padding: 0 20px; margin: 0 auto; } .p-case-modal__inner { max-width: 400px; margin: 0 auto; } .p-case-modal-box__image { width: 100%; } .p-case-modal-box__cont { width: 100%; margin-top: 30px; padding-left: 0; } .p-case-modal-box__ttl { margin-bottom: 25px; font-size: 24px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", "Sawarabi Mincho", serif; } .p-case-modal-box__txt p { font-size: 14px; line-height: 1.714; } .p-case-modal-box__txt p:not(:last-child) { margin-bottom: 1em; } } .no-txt { text-align: center; } .p-footer-contact { padding: 180px 0 120px; background: url(../img/common/bg-footer.png) center center/cover no-repeat; } .c-sec__inner--fc { max-width: 880px; } .p-footerNavList { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -20px; } @media screen and (max-width: 600px) { .p-footerNavList { flex-direction: column-reverse; gap: 30px; } } @media screen and (max-width: 600px) { .p-footer-contact { padding: 80px 0 60px; } .p-footer-contact .c-sec__ttl { margin-bottom: 60px; } .p-footerNavList__item.mail .c-square-btn { font-size: 20px; padding: 20px 10px; max-width: 400px; margin: 0 auto; } } .footer { padding-top: 55px; background-color: #333; color: #fff; } .p-footerCont-list__item--info { width: 30%; padding-right: 20px; } .p-footerCont-list__item--info .logo { max-width: 240px; margin-bottom: 30px; } .p-footerCont-list__item--info .logo img { width: 100%; } .p-footerCont-list__item--info .txt { margin-bottom: 25px; font-size: 14px; line-height: 1.714; letter-spacing: 0.1em; } .p-footerCont-list__item--info .txt:last-child { margin-bottom: 0; } .p-footer-sns-list { margin-bottom: 25px; align-items: center; } .p-footer-sns-list li { max-width: 25px; margin-right: 30px; } .p-footer-sns-list li:last-child { margin-right: 0px; } .p-footer-sns-list img { width: 100%; } .p-footerCont-list__item--menu { justify-content: space-between; width: 70%; } .p-foooterMenu { width: 32%; } .p-foooterMenu .ttl { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #fff; font-size: 14px; } .p-foooterMenu .ttl a { display: block; position: relative; } .p-foooterMenu .ttl a:after { content: ""; display: block; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); width: 8px; height: 8px; border-top: 1px solid #fff; border-left: 1px solid #fff; } .p-foooterMenu-list li { margin-bottom: 5px; } .p-foooterMenu-list a { color: #aaa; font-size: 14px; } .p-foooterMenu-list a:hover { opacity: 1; color: #fff; } .p-foooterPageMenu-list li { margin-bottom: 15px; } .p-foooterPageMenu-list li.sp { display: none; } .p-foooterPageMenu-list li:last-child { margin-bottom: 15px; } .p-foooterPageMenu-list a { font-weight: bold; } .google-map { margin-top: 55px; } .google-map iframe { width: 100%; } @media screen and (max-width: 1023px) { .p-foooterPageMenu-list li.sp { display: block; } .p-foooterPageMenu-list li.pc { display: none; } } @media screen and (max-width: 374px) { .p-footerCont-list__item--info .txt { font-size: 12px; } } .copyright { padding: 45px 10px; color: #aaa; background-color: #333; font-size: 12px; font-family: "Lato", sans-serif; text-align: center; } @media screen and (max-width: 1200px) { .p-footerCont-list__item--info { width: 35%; } .p-footerCont-list__item--menu { width: 65%; } } @media screen and (max-width: 1023px) { .p-footerCont-list__item--info { width: 100%; padding: 0; margin-bottom: 50px; text-align: center; } .p-footerCont-list__item--info .logo { margin: 0 auto 30px; } .p-footer-sns-list { justify-content: center; } .p-footerCont-list__item--menu { width: calc(100% + 40px); margin: 0 -20px; } .p-foooterMenu { padding: 0 20px; width: 50%; } .p-foooterPageMenu { padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; width: 50%; margin: 50px auto 0; } .p-foooterPageMenu-list { width: 50%; } } @media screen and (max-width: 600px) { .footer { padding-top: 40px; } .p-footerCont-list__item--info { text-align: left; } .p-footerCont-list__item--info .logo { margin-left: 0; margin-right: 0; max-width: 160px; } .p-footer-sns-list { justify-content: flex-start; } .p-foooterMenu { width: 100%; } .p-foooterMenu { margin-bottom: 50px; } .p-foooterMenu-list li { margin-bottom: 10px; font-size: 12px; } .p-foooterPageMenu { width: 100%; text-align: left; margin-top: 0; } .google-map { margin-top: 35px; } .google-map iframe { height: 200px; } .copyright { padding: 27px 10px; } } .contact-sp { display: none; position: fixed; bottom: 0; width: 100%; background-color: #fff; padding-bottom: env(safe-area-inset-bottom); z-index: 90; transition: opacity, 0.5s; } .contact-sp .c-square-btn { padding: 15px 10px; font-size: 16px; margin-right: 5px; } .contact-sp.hidden { opacity: 0; visibility: hidden; } .contact-sp__inner { border-top: 1px solid #eee; padding: 10px 10px; } .sp-fixed-list { display: flex; align-items: center; justify-content: space-between; } .sp-fixed-list > li { width: 70%; } .sp-sns-list { width: 30%; display: flex; align-items: center; margin: 0 -10px; } .sp-sns-list li { width: 50%; padding: 0 10px; } .sp-sns-list a { display: block; max-width: 30px; margin: 0 auto; } .sp-sns-list .tel a { max-width: 22px; margin: 0 auto; } .reserve { width: 50%; } @media screen and (max-width: 768px) { .contact-sp { display: block; } } .simplebar-track.simplebar-vertical { width: 8px; } .simplebar-scrollbar.simplebar-visible:before { opacity: 0.3; } .bold { font-weight: bold; } .under-link { text-decoration: underline; } .italic { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); display: inline-block; } .sp, .tb { display: none; } @media screen and (max-width: 600px) { .pc { display: none; } .sp { display: block; } } .ib { display: inline-block; } .pc-br { display: inline; } .tb-br { display: none; } .pc-tb-br { display: inline; } .tb-sp-br { display: none; } .sp-br { display: none; } .se-br { display: none; } @media screen and (max-width: 768px) { .pc-br { display: none; } .tb-br { display: inline; } .tb-sp-br { display: inline; } } @media screen and (max-width: 600px) { .pc-tb-br { display: none; } .tb-br { display: none; } .sp-br { display: inline; } } @media screen and (max-width: 374px) { .se-br { display: inline; } } @media screen and (min-width: 1024px) { .u-lg-hide { display: none !important; } } @media screen and (max-width: 1023px) { .u-md-hide { display: none !important; } } @media screen and (max-width: 767px) { .u-sm-hide { display: none !important; } } @media screen and (min-width: 768px) { .u-sm-show { display: none !important; } } @media screen and (min-width: 1024px) { .u-md-show { display: none !important; } } .u-fit-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .u-fw-200 { font-weight: 200; } .u-fw-300 { font-weight: 300; } .u-fw-400 { font-weight: 400; } .u-fw-500 { font-weight: 500; } .u-fw-600 { font-weight: 600; } .u-fw-700 { font-weight: 700; } .u-fw-800 { font-weight: 800; } .u-mt-0 { margin-top: 0px; } .u-pt-0 { padding-top: 0px; } @media screen and (min-width: 1024px) { .u-lg-mt-0 { margin-top: 0px !important; } .u-lg-pt-0 { padding-top: 0px !important; } } .u-mt-5 { margin-top: 5px; } .u-pt-5 { padding-top: 5px; } @media screen and (min-width: 1024px) { .u-lg-mt-5 { margin-top: 5px !important; } .u-lg-pt-5 { padding-top: 5px !important; } } .u-mt-10 { margin-top: 10px; } .u-pt-10 { padding-top: 10px; } @media screen and (min-width: 1024px) { .u-lg-mt-10 { margin-top: 10px !important; } .u-lg-pt-10 { padding-top: 10px !important; } } .u-mt-15 { margin-top: 15px; } .u-pt-15 { padding-top: 15px; } @media screen and (min-width: 1024px) { .u-lg-mt-15 { margin-top: 15px !important; } .u-lg-pt-15 { padding-top: 15px !important; } } .u-mt-20 { margin-top: 20px; } .u-pt-20 { padding-top: 20px; } @media screen and (min-width: 1024px) { .u-lg-mt-20 { margin-top: 20px !important; } .u-lg-pt-20 { padding-top: 20px !important; } } .u-mt-30 { margin-top: 30px; } .u-pt-30 { padding-top: 30px; } @media screen and (min-width: 1024px) { .u-lg-mt-30 { margin-top: 30px !important; } .u-lg-pt-30 { padding-top: 30px !important; } } .u-mt-40 { margin-top: 40px; } .u-pt-40 { padding-top: 40px; } @media screen and (min-width: 1024px) { .u-lg-mt-40 { margin-top: 40px !important; } .u-lg-pt-40 { padding-top: 40px !important; } } .u-mt-60 { margin-top: 60px; } .u-pt-60 { padding-top: 60px; } @media screen and (min-width: 1024px) { .u-lg-mt-60 { margin-top: 60px !important; } .u-lg-pt-60 { padding-top: 60px !important; } } .u-mt-80 { margin-top: 80px; } .u-pt-80 { padding-top: 80px; } @media screen and (min-width: 1024px) { .u-lg-mt-80 { margin-top: 80px !important; } .u-lg-pt-80 { padding-top: 80px !important; } } .u-mt-90 { margin-top: 90px; } .u-pt-90 { padding-top: 90px; } @media screen and (min-width: 1024px) { .u-lg-mt-90 { margin-top: 90px !important; } .u-lg-pt-90 { padding-top: 90px !important; } } .u-mt-100 { margin-top: 100px; } .u-pt-100 { padding-top: 100px; } @media screen and (min-width: 1024px) { .u-lg-mt-100 { margin-top: 100px !important; } .u-lg-pt-100 { padding-top: 100px !important; } } .u-mt-120 { margin-top: 120px; } .u-pt-120 { padding-top: 120px; } @media screen and (min-width: 1024px) { .u-lg-mt-120 { margin-top: 120px !important; } .u-lg-pt-120 { padding-top: 120px !important; } } .u-mt-150 { margin-top: 150px; } .u-pt-150 { padding-top: 150px; } @media screen and (min-width: 1024px) { .u-lg-mt-150 { margin-top: 150px !important; } .u-lg-pt-150 { padding-top: 150px !important; } } .u-mt-180 { margin-top: 180px; } .u-pt-180 { padding-top: 180px; } @media screen and (min-width: 1024px) { .u-lg-mt-180 { margin-top: 180px !important; } .u-lg-pt-180 { padding-top: 180px !important; } } .u-mt-240 { margin-top: 240px; } .u-pt-240 { padding-top: 240px; } @media screen and (min-width: 1024px) { .u-lg-mt-240 { margin-top: 240px !important; } .u-lg-pt-240 { padding-top: 240px !important; } } .u-mt-300 { margin-top: 300px; } .u-pt-300 { padding-top: 300px; } @media screen and (min-width: 1024px) { .u-lg-mt-300 { margin-top: 300px !important; } .u-lg-pt-300 { padding-top: 300px !important; } } .u-mb-0 { margin-bottom: 0px; } .u-pb-0 { padding-bottom: 0px; } @media screen and (min-width: 1024px) { .u-lg-mb-0 { margin-bottom: 0px !important; } .u-lg-pb-0 { padding-bottom: 0px !important; } } .u-mb-5 { margin-bottom: 5px; } .u-pb-5 { padding-bottom: 5px; } @media screen and (min-width: 1024px) { .u-lg-mb-5 { margin-bottom: 5px !important; } .u-lg-pb-5 { padding-bottom: 5px !important; } } .u-mb-10 { margin-bottom: 10px; } .u-pb-10 { padding-bottom: 10px; } @media screen and (min-width: 1024px) { .u-lg-mb-10 { margin-bottom: 10px !important; } .u-lg-pb-10 { padding-bottom: 10px !important; } } .u-mb-15 { margin-bottom: 15px; } .u-pb-15 { padding-bottom: 15px; } @media screen and (min-width: 1024px) { .u-lg-mb-15 { margin-bottom: 15px !important; } .u-lg-pb-15 { padding-bottom: 15px !important; } } .u-mb-20 { margin-bottom: 20px; } .u-pb-20 { padding-bottom: 20px; } @media screen and (min-width: 1024px) { .u-lg-mb-20 { margin-bottom: 20px !important; } .u-lg-pb-20 { padding-bottom: 20px !important; } } .u-mb-30 { margin-bottom: 30px; } .u-pb-30 { padding-bottom: 30px; } @media screen and (min-width: 1024px) { .u-lg-mb-30 { margin-bottom: 30px !important; } .u-lg-pb-30 { padding-bottom: 30px !important; } } .u-mb-40 { margin-bottom: 40px; } .u-pb-40 { padding-bottom: 40px; } @media screen and (min-width: 1024px) { .u-lg-mb-40 { margin-bottom: 40px !important; } .u-lg-pb-40 { padding-bottom: 40px !important; } } .u-mb-60 { margin-bottom: 60px; } .u-pb-60 { padding-bottom: 60px; } @media screen and (min-width: 1024px) { .u-lg-mb-60 { margin-bottom: 60px !important; } .u-lg-pb-60 { padding-bottom: 60px !important; } } .u-mb-80 { margin-bottom: 80px; } .u-pb-80 { padding-bottom: 80px; } @media screen and (min-width: 1024px) { .u-lg-mb-80 { margin-bottom: 80px !important; } .u-lg-pb-80 { padding-bottom: 80px !important; } } .u-mb-90 { margin-bottom: 90px; } .u-pb-90 { padding-bottom: 90px; } @media screen and (min-width: 1024px) { .u-lg-mb-90 { margin-bottom: 90px !important; } .u-lg-pb-90 { padding-bottom: 90px !important; } } .u-mb-100 { margin-bottom: 100px; } .u-pb-100 { padding-bottom: 100px; } @media screen and (min-width: 1024px) { .u-lg-mb-100 { margin-bottom: 100px !important; } .u-lg-pb-100 { padding-bottom: 100px !important; } } .u-mb-120 { margin-bottom: 120px; } .u-pb-120 { padding-bottom: 120px; } @media screen and (min-width: 1024px) { .u-lg-mb-120 { margin-bottom: 120px !important; } .u-lg-pb-120 { padding-bottom: 120px !important; } } .u-mb-150 { margin-bottom: 150px; } .u-pb-150 { padding-bottom: 150px; } @media screen and (min-width: 1024px) { .u-lg-mb-150 { margin-bottom: 150px !important; } .u-lg-pb-150 { padding-bottom: 150px !important; } } .u-mb-180 { margin-bottom: 180px; } .u-pb-180 { padding-bottom: 180px; } @media screen and (min-width: 1024px) { .u-lg-mb-180 { margin-bottom: 180px !important; } .u-lg-pb-180 { padding-bottom: 180px !important; } } .u-mb-240 { margin-bottom: 240px; } .u-pb-240 { padding-bottom: 240px; } @media screen and (min-width: 1024px) { .u-lg-mb-240 { margin-bottom: 240px !important; } .u-lg-pb-240 { padding-bottom: 240px !important; } } .u-mb-300 { margin-bottom: 300px; } .u-pb-300 { padding-bottom: 300px; } @media screen and (min-width: 1024px) { .u-lg-mb-300 { margin-bottom: 300px !important; } .u-lg-pb-300 { padding-bottom: 300px !important; } } .u-ta-center { text-align: center !important; } .u-ta-left { text-align: left !important; } .u-ta-right { text-align: right !important; } @media screen and (max-width: 767px) { .u-sm-ta-center { text-align: center !important; } } @media screen and (max-width: 767px) { .u-sm-ta-left { text-align: left !important; } } @media screen and (max-width: 767px) { .u-sm-ta-right { text-align: right !important; } } @media screen and (max-width: 1023px) { .u-md-ta-center { text-align: center !important; } } @media screen and (max-width: 1023px) { .u-md-ta-left { text-align: left !important; } } @media screen and (max-width: 1023px) { .u-md-ta-right { text-align: right !important; } } @media screen and (min-width: 1024px) { .u-lg-ta-center { text-align: center !important; } } @media screen and (min-width: 1024px) { .u-lg-ta-left { text-align: left !important; } } @media screen and (min-width: 1024px) { .u-lg-ta-right { text-align: right !important; } } .u-over-inner { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } @media screen and (max-width: 1023px) { .u-md-over-inner { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } @media screen and (max-width: 767px) { .u-sm-over-inner { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } .l-inner { max-width: 540px; margin: 0 auto; width: calc(100% - 32px); } @media screen and (min-width: 768px) { .l-inner { width: calc(100% - 96px); } } @media screen and (min-width: 1024px) { .l-inner { max-width: 1140px; } } .l-inner.m-p-relative { position: relative; } @media screen and (min-width: 1024px) { .u-lg-hide { display: none !important; } } @media screen and (max-width: 1023px) { .u-md-hide { display: none !important; } } @media screen and (max-width: 767px) { .u-sm-hide { display: none !important; } } @media screen and (min-width: 768px) { .u-sm-show { display: none !important; } } @media screen and (min-width: 1024px) { .u-md-show { display: none !important; } } .u-fit-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .u-fw-200 { font-weight: 200; } .u-fw-300 { font-weight: 300; } .u-fw-400 { font-weight: 400; } .u-fw-500 { font-weight: 500; } .u-fw-600 { font-weight: 600; } .u-fw-700 { font-weight: 700; } .u-fw-800 { font-weight: 800; } .u-mt-0 { margin-top: 0px; } .u-pt-0 { padding-top: 0px; } @media screen and (min-width: 1024px) { .u-lg-mt-0 { margin-top: 0px !important; } .u-lg-pt-0 { padding-top: 0px !important; } } .u-mt-5 { margin-top: 5px; } .u-pt-5 { padding-top: 5px; } @media screen and (min-width: 1024px) { .u-lg-mt-5 { margin-top: 5px !important; } .u-lg-pt-5 { padding-top: 5px !important; } } .u-mt-10 { margin-top: 10px; } .u-pt-10 { padding-top: 10px; } @media screen and (min-width: 1024px) { .u-lg-mt-10 { margin-top: 10px !important; } .u-lg-pt-10 { padding-top: 10px !important; } } .u-mt-15 { margin-top: 15px; } .u-pt-15 { padding-top: 15px; } @media screen and (min-width: 1024px) { .u-lg-mt-15 { margin-top: 15px !important; } .u-lg-pt-15 { padding-top: 15px !important; } } .u-mt-20 { margin-top: 20px; } .u-pt-20 { padding-top: 20px; } @media screen and (min-width: 1024px) { .u-lg-mt-20 { margin-top: 20px !important; } .u-lg-pt-20 { padding-top: 20px !important; } } .u-mt-30 { margin-top: 30px; } .u-pt-30 { padding-top: 30px; } @media screen and (min-width: 1024px) { .u-lg-mt-30 { margin-top: 30px !important; } .u-lg-pt-30 { padding-top: 30px !important; } } .u-mt-40 { margin-top: 40px; } .u-pt-40 { padding-top: 40px; } @media screen and (min-width: 1024px) { .u-lg-mt-40 { margin-top: 40px !important; } .u-lg-pt-40 { padding-top: 40px !important; } } .u-mt-60 { margin-top: 60px; } .u-pt-60 { padding-top: 60px; } @media screen and (min-width: 1024px) { .u-lg-mt-60 { margin-top: 60px !important; } .u-lg-pt-60 { padding-top: 60px !important; } } .u-mt-80 { margin-top: 80px; } .u-pt-80 { padding-top: 80px; } @media screen and (min-width: 1024px) { .u-lg-mt-80 { margin-top: 80px !important; } .u-lg-pt-80 { padding-top: 80px !important; } } .u-mt-90 { margin-top: 90px; } .u-pt-90 { padding-top: 90px; } @media screen and (min-width: 1024px) { .u-lg-mt-90 { margin-top: 90px !important; } .u-lg-pt-90 { padding-top: 90px !important; } } .u-mt-100 { margin-top: 100px; } .u-pt-100 { padding-top: 100px; } @media screen and (min-width: 1024px) { .u-lg-mt-100 { margin-top: 100px !important; } .u-lg-pt-100 { padding-top: 100px !important; } } .u-mt-120 { margin-top: 120px; } .u-pt-120 { padding-top: 120px; } @media screen and (min-width: 1024px) { .u-lg-mt-120 { margin-top: 120px !important; } .u-lg-pt-120 { padding-top: 120px !important; } } .u-mt-150 { margin-top: 150px; } .u-pt-150 { padding-top: 150px; } @media screen and (min-width: 1024px) { .u-lg-mt-150 { margin-top: 150px !important; } .u-lg-pt-150 { padding-top: 150px !important; } } .u-mt-180 { margin-top: 180px; } .u-pt-180 { padding-top: 180px; } @media screen and (min-width: 1024px) { .u-lg-mt-180 { margin-top: 180px !important; } .u-lg-pt-180 { padding-top: 180px !important; } } .u-mt-240 { margin-top: 240px; } .u-pt-240 { padding-top: 240px; } @media screen and (min-width: 1024px) { .u-lg-mt-240 { margin-top: 240px !important; } .u-lg-pt-240 { padding-top: 240px !important; } } .u-mt-300 { margin-top: 300px; } .u-pt-300 { padding-top: 300px; } @media screen and (min-width: 1024px) { .u-lg-mt-300 { margin-top: 300px !important; } .u-lg-pt-300 { padding-top: 300px !important; } } .u-mb-0 { margin-bottom: 0px; } .u-pb-0 { padding-bottom: 0px; } @media screen and (min-width: 1024px) { .u-lg-mb-0 { margin-bottom: 0px !important; } .u-lg-pb-0 { padding-bottom: 0px !important; } } .u-mb-5 { margin-bottom: 5px; } .u-pb-5 { padding-bottom: 5px; } @media screen and (min-width: 1024px) { .u-lg-mb-5 { margin-bottom: 5px !important; } .u-lg-pb-5 { padding-bottom: 5px !important; } } .u-mb-10 { margin-bottom: 10px; } .u-pb-10 { padding-bottom: 10px; } @media screen and (min-width: 1024px) { .u-lg-mb-10 { margin-bottom: 10px !important; } .u-lg-pb-10 { padding-bottom: 10px !important; } } .u-mb-15 { margin-bottom: 15px; } .u-pb-15 { padding-bottom: 15px; } @media screen and (min-width: 1024px) { .u-lg-mb-15 { margin-bottom: 15px !important; } .u-lg-pb-15 { padding-bottom: 15px !important; } } .u-mb-20 { margin-bottom: 20px; } .u-pb-20 { padding-bottom: 20px; } @media screen and (min-width: 1024px) { .u-lg-mb-20 { margin-bottom: 20px !important; } .u-lg-pb-20 { padding-bottom: 20px !important; } } .u-mb-30 { margin-bottom: 30px; } .u-pb-30 { padding-bottom: 30px; } @media screen and (min-width: 1024px) { .u-lg-mb-30 { margin-bottom: 30px !important; } .u-lg-pb-30 { padding-bottom: 30px !important; } } .u-mb-40 { margin-bottom: 40px; } .u-pb-40 { padding-bottom: 40px; } @media screen and (min-width: 1024px) { .u-lg-mb-40 { margin-bottom: 40px !important; } .u-lg-pb-40 { padding-bottom: 40px !important; } } .u-mb-60 { margin-bottom: 60px; } .u-pb-60 { padding-bottom: 60px; } @media screen and (min-width: 1024px) { .u-lg-mb-60 { margin-bottom: 60px !important; } .u-lg-pb-60 { padding-bottom: 60px !important; } } .u-mb-80 { margin-bottom: 80px; } .u-pb-80 { padding-bottom: 80px; } @media screen and (min-width: 1024px) { .u-lg-mb-80 { margin-bottom: 80px !important; } .u-lg-pb-80 { padding-bottom: 80px !important; } } .u-mb-90 { margin-bottom: 90px; } .u-pb-90 { padding-bottom: 90px; } @media screen and (min-width: 1024px) { .u-lg-mb-90 { margin-bottom: 90px !important; } .u-lg-pb-90 { padding-bottom: 90px !important; } } .u-mb-100 { margin-bottom: 100px; } .u-pb-100 { padding-bottom: 100px; } @media screen and (min-width: 1024px) { .u-lg-mb-100 { margin-bottom: 100px !important; } .u-lg-pb-100 { padding-bottom: 100px !important; } } .u-mb-120 { margin-bottom: 120px; } .u-pb-120 { padding-bottom: 120px; } @media screen and (min-width: 1024px) { .u-lg-mb-120 { margin-bottom: 120px !important; } .u-lg-pb-120 { padding-bottom: 120px !important; } } .u-mb-150 { margin-bottom: 150px; } .u-pb-150 { padding-bottom: 150px; } @media screen and (min-width: 1024px) { .u-lg-mb-150 { margin-bottom: 150px !important; } .u-lg-pb-150 { padding-bottom: 150px !important; } } .u-mb-180 { margin-bottom: 180px; } .u-pb-180 { padding-bottom: 180px; } @media screen and (min-width: 1024px) { .u-lg-mb-180 { margin-bottom: 180px !important; } .u-lg-pb-180 { padding-bottom: 180px !important; } } .u-mb-240 { margin-bottom: 240px; } .u-pb-240 { padding-bottom: 240px; } @media screen and (min-width: 1024px) { .u-lg-mb-240 { margin-bottom: 240px !important; } .u-lg-pb-240 { padding-bottom: 240px !important; } } .u-mb-300 { margin-bottom: 300px; } .u-pb-300 { padding-bottom: 300px; } @media screen and (min-width: 1024px) { .u-lg-mb-300 { margin-bottom: 300px !important; } .u-lg-pb-300 { padding-bottom: 300px !important; } } .u-ta-center { text-align: center !important; } .u-ta-left { text-align: left !important; } .u-ta-right { text-align: right !important; } @media screen and (max-width: 767px) { .u-sm-ta-center { text-align: center !important; } } @media screen and (max-width: 767px) { .u-sm-ta-left { text-align: left !important; } } @media screen and (max-width: 767px) { .u-sm-ta-right { text-align: right !important; } } @media screen and (max-width: 1023px) { .u-md-ta-center { text-align: center !important; } } @media screen and (max-width: 1023px) { .u-md-ta-left { text-align: left !important; } } @media screen and (max-width: 1023px) { .u-md-ta-right { text-align: right !important; } } @media screen and (min-width: 1024px) { .u-lg-ta-center { text-align: center !important; } } @media screen and (min-width: 1024px) { .u-lg-ta-left { text-align: left !important; } } @media screen and (min-width: 1024px) { .u-lg-ta-right { text-align: right !important; } } .u-over-inner { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } @media screen and (max-width: 1023px) { .u-md-over-inner { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } @media screen and (max-width: 767px) { .u-sm-over-inner { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } .campaign-template-template-lp-kumatori { font-family: "Noto Sans JP"; font-size: 14px; line-height: 2; letter-spacing: 0.01em; font-weight: 300; } @media screen and (min-width: 1024px) { .campaign-template-template-lp-kumatori { font-size: 15px; } } .campaign-template-template-lp-kumatori .contact-sp { display: none; } .campaign-template-template-lp-kumatori .p-kumatori-contact-sp { position: fixed; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; } .campaign-template-template-lp-kumatori .p-kumatori-contact-sp a { -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; background: #d0c292; color: #000; border: solid 2px #000; font-size: 14px; letter-spacing: 4px; display: block; padding: 18px 14px; height: -webkit-max-content; height: max-content; width: -webkit-max-content; width: max-content; } @media screen and (min-width: 768px) { .campaign-template-template-lp-kumatori .p-kumatori-contact-sp { display: none; } } .campaign-template-template-lp-kumatori .p-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; } @media screen and (min-width: 768px) { .campaign-template-template-lp-kumatori .p-header { display: flex; align-items: center; justify-content: space-between; background-color: rgba(255, 255, 255, 0.46); } } .campaign-template-template-lp-kumatori .p-header::after { content: none; } .campaign-template-template-lp-kumatori .p-header__inner { padding: 15px 16px 15px; background-color: rgba(255, 255, 255, 0.46); } @media screen and (min-width: 768px) { .campaign-template-template-lp-kumatori .p-header__inner { padding: 20px 40px 23px; } } @media screen and (min-width: 360px) { .campaign-template-template-lp-kumatori .p-header__inner nav { padding-right: 0; position: absolute; top: 50%; right: 96px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .campaign-template-template-lp-kumatori .p-header__inner nav > ul { margin-top: 0; } } .campaign-template-template-lp-kumatori .p-header .logo { width: clamp(120px, 13.8888888889vw, 200px); margin: 0; } @media screen and (min-width: 1024px) { .campaign-template-template-lp-kumatori .p-headerNav-list { position: static; margin-right: 186px; } } @media screen and (min-width: 1024px) { .campaign-template-template-lp-kumatori .hamburger { top: 20px; } } @media screen and (min-width: 768px) { .campaign-template-template-lp-kumatori .hamburger { top: 14px; } } @media screen and (min-width: 360px) { .campaign-template-template-lp-kumatori .hamburger { top: 17px; } } .campaign-template-template-lp-kumatori .p-kumatori-mv { position: relative; z-index: 1; background: #d2e6e6; } @media screen and (min-width: 768px) { .campaign-template-template-lp-kumatori .p-kumatori-mv { padding-bottom: 53px; } } .campaign-template-template-lp-kumatori .p-kumatori-mv__image img { width: 100%; } .campaign-template-template-lp-kumatori .p-kumatori-mv__container { position: relative; z-index: 1; padding-top: 40px; padding-left: 26px; padding-right: 26px; padding-bottom: 44px; display: none; } @media screen and (min-width: 768px) { .campaign-template-template-lp-kumatori .p-kumatori-mv__container { display: flex; justify-content: space-between; flex-direction: column; gap: 44px; padding-left: 5vw; padding-top: 0; padding-bottom: 0; margin-top: -6vw; flex-direction: row; } } .campaign-template-template-lp-kumatori .p-kumatori-mv__image-2 { max-width: 100%; } @media screen and (min-width: 768px) { .campaign-template-template-lp-kumatori .p-kumatori-mv__image-2 { width: 602px; } } .campaign-template-template-lp-kumatori .p-kumatori-mv__box { background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 12px; min-height: 161px; width: 100%; max-width: 100%; } @media screen and (min-width: 768px) { .campaign-template-template-lp-kumatori .p-kumatori-mv__box { width: 379px; min-height: 0; } } .campaign-template-template-lp-kumatori .p-kumatori-mv__box-text { font-size: 14px; font-weight: 350; line-height: 2; letter-spacing: 0.1em; } .campaign-template-template-lp-kumatori .p-kumatori-mv__box-button { font-size: 16px; display: flex; align-items: center; justify-content: center; width: 247px; height: 52px; letter-spacing: 0.25em; background: #d0c292; color: #000; border: solid 2px #000; } .campaign-template-template-lp-kumatori .p-kumatori-mv__side-text { position: absolute; left: -0.5vw; bottom: -150px; line-height: 1; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; color: #fff; font-family: "Noto Serif JP"; font-size: 7vw; font-style: normal; font-weight: 600; letter-spacing: 0.1em; display: none; } @media screen and (min-width: 768px) { .campaign-template-template-lp-kumatori .p-kumatori-mv__side-text { display: block; } } .campaign-template-template-lp-kumatori .p-kumatori-mv__side-scroll { position: absolute; right: 11px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; color: #aaa; font-family: "Noto Serif JP"; font-size: 12px; font-style: normal; font-weight: 600; line-height: 150%; letter-spacing: 2.8px; padding-left: 15px; height: 115px; display: none; } @media screen and (min-width: 768px) { .campaign-template-template-lp-kumatori .p-kumatori-mv__side-scroll { display: block; } } .campaign-template-template-lp-kumatori .p-kumatori-mv__side-scroll:before { content: ""; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; -webkit-animation: circlemove 2s ease-in-out infinite, cirlemovehide 2s ease-out infinite; animation: circlemove 2s ease-in-out infinite, cirlemovehide 2s ease-out infinite; } @-webkit-keyframes circlemove { 0% { top: 2%; } 100% { top: 90%; } } @keyframes circlemove { 0% { top: 2%; } 100% { top: 90%; } } @-webkit-keyframes cirlemovehide { 0% { opacity: 0; } 50% { opacity: 1; } 80% { opacity: 0.9; } 100% { opacity: 0; } } @keyframes cirlemovehide { 0% { opacity: 0; } 50% { opacity: 1; } 80% { opacity: 0.9; } 100% { opacity: 0; } } .campaign-template-template-lp-kumatori .p-kumatori-mv__side-scroll:after { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: currentColor; } .p-kumatori-sec1 { background: #f5f5f5; padding-top: 80px; padding-bottom: 80px; overflow: clip; position: relative; } .p-kumatori-sec1__container { max-width: 1172px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } .p-kumatori-sec1__inner { position: relative; background: #fff; } @media screen and (min-width: 768px) { .p-kumatori-sec1__inner { background: unset; } .p-kumatori-sec1__inner::after { content: ""; position: absolute; bottom: 0; width: 100%; height: calc(100% - 50px); background: #fff; } } .p-kumatori-sec1__box { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--worry { flex-direction: row; } } .p-kumatori-sec1__box--worry .p-kumatori-sec1__sentense { padding-bottom: 96px; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--worry .p-kumatori-sec1__sentense { padding-bottom: 49px; } } .p-kumatori-sec1__box--worry .p-kumatori-sec1__sentense::before { right: 0; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--worry .p-kumatori-sec1__sentense::before { right: -10px; } } .p-kumatori-sec1__box--worry .p-kumatori-sec1__image { margin-top: -80px; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--worry .p-kumatori-sec1__image { margin-top: 0; } } .p-kumatori-sec1__box--about { z-index: 2; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--about { margin-top: -30px; flex-direction: row-reverse; } } .p-kumatori-sec1__box--about .p-kumatori-sec1__sentense { padding-top: 40px; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--about .p-kumatori-sec1__sentense { padding-top: 49px; } } .p-kumatori-sec1__box--about .p-kumatori-sec1__sentense::before { rotate: 180deg; left: 0; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--about .p-kumatori-sec1__sentense::before { left: -30px; } } .p-kumatori-sec1__box--about .p-kumatori-sec1__image { margin-top: 30px; width: 90%; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--about .p-kumatori-sec1__image { width: 530px; margin-top: 0; } } .p-kumatori-sec1__box--osusume { margin-top: -60px; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--osusume { flex-direction: row; margin-top: 0; } } .p-kumatori-sec1__box--osusume .p-kumatori-sec1__sentense { padding-top: 111px; padding-left: 0; padding-right: 0; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--osusume .p-kumatori-sec1__sentense { padding-top: 49px; padding-left: 49px; padding-right: 49px; margin-top: 55px; } } .p-kumatori-sec1__box--osusume .p-kumatori-sec1__sentense::before { right: 0; } @media screen and (min-width: 768px) { .p-kumatori-sec1__box--osusume .p-kumatori-sec1__sentense::before { right: -20px; } } .p-kumatori-sec1__sentense { position: relative; padding: 20px; width: 100%; } @media screen and (min-width: 768px) { .p-kumatori-sec1__sentense { background: none; padding: 49px; width: 610px; } } .p-kumatori-sec1__sentense::before { content: ""; position: absolute; top: 0; bottom: 0; width: 100vw; height: 100%; background: linear-gradient(73deg, #d2e6e6 0%, #e1f0f0 100%); } .p-kumatori-sec1__sentense-inner { position: relative; z-index: 1; } .p-kumatori-sec1__image { position: relative; z-index: 1; } @media screen and (min-width: 768px) { .p-kumatori-sec1__image { width: 530px; } } .p-kumatori-sec1__title { color: #333; font-family: "Shippori Mincho"; font-size: 22px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 1px; margin-bottom: 32px; } @media screen and (min-width: 768px) { .p-kumatori-sec1__title { font-size: 26px; } } .p-kumatori-sec1__list { display: flex; flex-direction: column; gap: 16px; } .p-kumatori-sec1__list-item { display: flex; gap: 8px; color: #333; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 28px; letter-spacing: 1.4px; } @media screen and (min-width: 768px) { .p-kumatori-sec1__list-item { font-size: 16px; } } .p-kumatori-sec1__list-item::before { content: ""; width: 24px; height: 1lh; background: url(../img/lp/kumatori/sec1_check.png) no-repeat center/contain; } .p-kumatori-sec1__text { color: #333; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 350; line-height: 40px; letter-spacing: 1.4px; } .p-kumatori-sec1__side-text { position: absolute; top: 0; right: -8vw; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; color: #fff; font-family: "Noto Serif JP"; font-size: 64px; font-style: normal; font-weight: 600; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-kumatori-sec1__side-text { right: -4vw; z-index: 2; top: 130px; font-size: 7vw; } } .p-kumatori-cv { background: url(../img/lp/kumatori/cv_bg.jpg) center/cover no-repeat; padding: 60px 16px; text-align: center; } @media screen and (min-width: 768px) { .p-kumatori-cv { padding-top: 80px; padding-bottom: 80px; } } .p-kumatori-cv__link { display: inline-flex; width: 400px; height: 86px; max-width: 100%; align-items: center; justify-content: center; background: #d0c292; color: #000; border: solid 2px #000; text-align: center; font-family: "Noto Serif JP"; font-size: 22px; font-style: normal; font-weight: 400; line-height: 26px; letter-spacing: 6.5px; } @media screen and (min-width: 768px) { .p-kumatori-cv__link { font-size: 26px; } } .p-kumatori-warning { overflow: clip; padding-left: 16px; padding-right: 16px; } .p-kumatori-warning__inner { position: relative; padding-top: 80px; padding-bottom: 80px; max-width: 1140px; margin-left: auto; margin-right: auto; } @media screen and (min-width: 768px) { .p-kumatori-warning__inner { padding-left: 100px; padding-right: 50px; } } .p-kumatori-warning__inner::after { content: ""; position: absolute; top: 0; bottom: 0; right: 20px; width: 200vw; height: 100%; background: linear-gradient(90deg, #f9f3eb 0%, #f9f3eb 100%); } @media screen and (min-width: 768px) { .p-kumatori-warning__inner::after { right: -40px; } } .p-kumatori-warning__contents { position: relative; z-index: 1; } .p-kumatori-warning__title { display: flex; flex-direction: column; align-items: center; color: #000; font-family: "Shippori Mincho"; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 1px; } @media screen and (min-width: 768px) { .p-kumatori-warning__title { font-size: 26px; } } .p-kumatori-warning__title::after { content: ""; display: block; width: 334px; height: 30px; background: url(../img/lp/kumatori/warning_title_deco.png) no-repeat center/contain; max-width: 100%; } .p-kumatori-warning__list { margin-top: 40px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 38px; } @media screen and (min-width: 768px) { .p-kumatori-warning__list { grid-template-columns: repeat(2, 1fr); } } .p-kumatori-warning__list-item { background: #fff; padding: 20px; } .p-kumatori-warning__list-item:nth-child(2) { position: relative; } .p-kumatori-warning__list-item:nth-child(2)::after { content: "No!"; position: absolute; color: #7ccac8; font-family: "Shippori Mincho"; font-size: 56px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 1px; bottom: 98%; right: 9%; rotate: 8.465deg; } @media screen and (min-width: 768px) { .p-kumatori-warning__list-item:nth-child(2)::after { bottom: calc(100% + 10px); } } .p-kumatori-warning__list-item-title { color: #000; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 38.4px; } @media screen and (min-width: 768px) { .p-kumatori-warning__list-item-title { font-size: 20px; } } .p-kumatori-warning__list-item-title strong { color: #7ccac8; } .p-kumatori-warning__list-item-text { color: #000; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 38.4px; } @media screen and (min-width: 768px) { .p-kumatori-warning__list-item-text { font-size: 16px; } } .p-kumatori-warning__box { margin-top: 80px; } @media screen and (min-width: 768px) { .p-kumatori-warning__box { display: flex; align-items: flex-start; } } .p-kumatori-warning__box-sentense { background: #aaa; color: #fff; padding: 20px 10px; } @media screen and (min-width: 768px) { .p-kumatori-warning__box-sentense { padding: 40px; width: calc(50% + 20px); flex-shrink: 0; } } .p-kumatori-warning__box-title { display: flex; flex-direction: column; align-items: center; color: #fff; font-family: "Shippori Mincho"; font-size: 22px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 1px; margin-bottom: 20px; } @media screen and (min-width: 768px) { .p-kumatori-warning__box-title { font-size: 24px; margin-bottom: 40px; } } .p-kumatori-warning__box-title::after { content: ""; display: block; width: 334px; height: 30px; background: url(../img/lp/kumatori/warning_subtitle_deco.png) no-repeat center/contain; max-width: 100%; } .p-kumatori-warning__box-text { margin-top: 16px; color: #fff; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 350; line-height: 28px; letter-spacing: 1.4px; } @media screen and (min-width: 768px) { .p-kumatori-warning__box-text { font-size: 16px; } } .p-kumatori-warning__box-text strong { font-size: 16px; font-weight: 700; } @media screen and (min-width: 768px) { .p-kumatori-warning__box-text strong { font-size: 18px; } } .p-kumatori-warning__box-image { margin-top: 45px; } @media screen and (min-width: 768px) { .p-kumatori-warning__box-image { width: 50%; flex-shrink: 0; margin-left: -20px; } } .p-kumatori-warning__box-image img { width: 100%; } .p-kumatori-progress { background: #d2e6e6; padding: 80px 16px; } .p-kumatori-progress__inner { max-width: 1020px; margin-left: auto; margin-right: auto; } .p-kumatori-progress__title { color: #000; font-family: "Shippori Mincho"; font-size: 22px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 1px; border-bottom: 1px solid #000; margin-bottom: 40px; padding-bottom: 5px; } @media screen and (min-width: 768px) { .p-kumatori-progress__title { font-size: 26px; } } .p-kumatori-progress__text { color: #333; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 350; line-height: 24px; letter-spacing: 1.6px; } .p-kumatori-progress__text span { display: inline-block; } .p-kumatori-price { padding: 60px 16px; background: url(../img/lp/kumatori/price_bg.jpg) center/cover no-repeat; } @media screen and (min-width: 768px) { .p-kumatori-price { padding-top: 80px; padding-bottom: 80px; } } .p-kumatori-price__inner { max-width: -webkit-max-content; max-width: max-content; margin-left: auto; margin-right: auto; } .p-kumatori-price__heading-text { color: #3e3e3e; text-align: right; font-family: "Shippori Mincho"; font-size: 24px; font-style: normal; font-weight: 600; line-height: normal; } .p-kumatori-price__heading-text strong { color: #3e3e3e; font-family: YuGothic; font-size: 26px; font-style: normal; font-weight: 700; line-height: normal; text-decoration-line: line-through; } .p-kumatori-price__heading-title { color: #3e3e3e; font-family: "Shippori Mincho"; font-size: 32px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: 1px; text-align: right; } @media screen and (min-width: 768px) { .p-kumatori-price__heading-title { text-align: left; } } .p-kumatori-price__heading-title strong { color: #f05874; font-family: "DIN Alternate"; font-size: 80px; font-style: normal; font-weight: 700; line-height: normal; display: block; } @media screen and (min-width: 768px) { .p-kumatori-price__heading-title strong { margin-left: 16px; display: inline; } } .p-kumatori-price__heading-title strong span { font-size: 49px; } .p-kumatori-price__text { color: #3e3e3e; text-align: center; font-family: "Noto Serif JP"; font-size: 14px; font-style: normal; font-weight: 600; line-height: 28px; letter-spacing: 2.8px; } @media screen and (min-width: 768px) { .p-kumatori-price__text { font-size: 16px; } } .p-kumatori-photo { padding-top: 40px; padding-bottom: 40px; } @media screen and (min-width: 768px) { .p-kumatori-photo { padding-left: 24px; padding-right: 24px; } } .p-kumatori-photo .swiper-slide { width: -webkit-max-content; width: max-content; } .p-kumatori-photo .swiper-slide img { width: 100%; } @media screen and (min-width: 768px) { .p-kumatori-photo__slides { display: none; } } .p-kumatori-photo__pc-images { justify-content: center; gap: 24px; display: none; } @media screen and (min-width: 768px) { .p-kumatori-photo__pc-images { display: flex; } } .p-kumatori-photo__pc-images img { max-height: 375px; min-width: 0; } .p-kumatori-photo__title { color: #666; font-family: "Noto Serif JP"; font-size: 30px; font-style: normal; font-weight: 600; line-height: 150%; letter-spacing: 2.8px; text-align: center; margin-bottom: 24px; } .p-kumatori-doctor { padding: 80px 16px 100px; position: relative; } @media screen and (min-width: 768px) { .p-kumatori-doctor { padding-top: 160px; padding-bottom: 140px; } } .p-kumatori-doctor__inner { max-width: 350px; margin-left: auto; margin-right: auto; } @media screen and (min-width: 768px) { .p-kumatori-doctor__inner { max-width: 800px; } } .p-kumatori-doctor__profile { position: relative; z-index: 1; } .p-kumatori-doctor__name-jp { color: #333; font-family: "Noto Serif JP"; font-size: 20px; font-style: normal; font-weight: 400; line-height: 44.8px; letter-spacing: 12px; } @media screen and (min-width: 768px) { .p-kumatori-doctor__name-jp { font-size: 32px; } } .p-kumatori-doctor__name-jp strong { margin-left: 4.5px; color: #333; font-family: "Noto Serif JP"; font-size: 30px; font-style: normal; font-weight: 400; line-height: 67.2px; letter-spacing: 12px; } @media screen and (min-width: 768px) { .p-kumatori-doctor__name-jp strong { font-size: 48px; } } .p-kumatori-doctor__name-en { margin-top: 11px; color: #333; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 100; line-height: 19.6px; letter-spacing: 2.8px; } @media screen and (min-width: 768px) { .p-kumatori-doctor__name-en { margin-top: 14px; font-size: 14px; } } .p-kumatori-doctor__info { margin-top: 20px; display: flex; flex-direction: column; gap: 30px; } @media screen and (min-width: 768px) { .p-kumatori-doctor__info { gap: 40px; } } .p-kumatori-doctor__sns-link svg { width: 25px; } .p-kumatori-doctor__career { display: flex; flex-direction: column; gap: 10px; } @media screen and (min-width: 768px) { .p-kumatori-doctor__career { gap: 0; } } .p-kumatori-doctor__career-item { color: #333; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; line-height: 2; font-weight: 350; letter-spacing: 1.6px; } @media screen and (min-width: 768px) { .p-kumatori-doctor__career-item { display: grid; gap: 20px; grid-template-columns: auto 1fr; line-height: 35px; } } .p-kumatori-doctor__career-year { font-weight: 400; font-family: Lato; } .p-kumatori-doctor__img { position: absolute; bottom: 0; width: 220px; right: 0; } @media screen and (min-width: 768px) { .p-kumatori-doctor__img { right: auto; left: 50%; width: 525px; } } .p-kumatori-info { background: #e1f0f0; padding: 80px 16px; } .p-kumatori-info__inner { max-width: 840px; margin-left: auto; margin-right: auto; display: flex; align-items: center; flex-direction: column; } @media screen and (min-width: 768px) { .p-kumatori-info__inner { flex-direction: row; gap: 50px; } } @media screen and (min-width: 768px) { .p-kumadori-info__sentense { width: -webkit-max-content; width: max-content; flex-shrink: 0; } } .p-kumadori-info__heading { margin-bottom: 30px; } .p-kumadori-info__title-en { color: #e6d58c; text-align: center; font-family: "Noto Serif JP"; font-size: 30px; font-style: normal; font-weight: 400; line-height: 75px; letter-spacing: 3px; } @media screen and (min-width: 768px) { .p-kumadori-info__title-en { font-size: 60px; } } .p-kumadori-info__title-jp { color: #000; text-align: center; font-family: "Noto Serif JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 1.3; letter-spacing: 6.5px; } .p-kumadori-info__text { color: #000; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 350; line-height: 19.6px; letter-spacing: 1.6px; max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; margin-inline: auto; padding-bottom: 4px; border-bottom: 1px solid #000; } .p-kumatori-info__img { margin-top: 24px; width: 306px; max-width: 100%; } @media screen and (min-width: 768px) { .p-kumatori-info__img { margin-top: 0; } } .p-kumatori-info__img img { box-shadow: 1px 1px 30px 0px rgba(78, 82, 85, 0.5); } .p-kumatori-cv2 { padding: 80px 16px; background: url(../img/lp/kumatori/cv2_bg.jpg) center/cover no-repeat; text-align: center; } .p-kumatori-cv2__text { color: #000; font-family: "Noto Serif JP"; font-size: 15px; font-style: normal; font-weight: 400; line-height: 28px; letter-spacing: 2.8px; margin-bottom: 24px; } @media screen and (min-width: 768px) { .p-kumatori-cv2__text { font-size: 20px; } } .p-kumatori-cv2__link { background: #00b900; width: 400px; max-width: 100%; height: 86px; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-align: center; font-family: "Noto Serif JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 26px; letter-spacing: 6.5px; } .p-kumatori-faq { background: #f5f5f5; padding: 80px 16px; } .p-kumatori-faq__inner { max-width: 860px; margin-left: auto; margin-right: auto; } .p-kumatori-faq__heading { text-align: center; margin-bottom: 48px; } .p-kumatori-faq__title-en { display: block; color: #d2e6e6; font-family: "Noto Serif JP", serif; font-size: 48px; font-weight: 600; letter-spacing: 0.1em; line-height: 1; margin-bottom: 8px; } @media screen and (min-width: 768px) { .p-kumatori-faq__title-en { font-size: 72px; } } .p-kumatori-faq__title-jp { display: inline-block; color: #333; font-family: "Shippori Mincho", serif; font-size: 18px; font-weight: 500; letter-spacing: 4px; border-bottom: 1px solid #333; padding-bottom: 4px; } @media screen and (min-width: 768px) { .p-kumatori-faq__title-jp { font-size: 22px; } } .p-kumatori-faq__list { display: flex; flex-direction: column; gap: 12px; } .p-kumatori-faq__item { background: #fff; border: 1px solid #d2e6e6; } .p-kumatori-faq__item[open] { border-color: #7ccac8; } .p-kumatori-faq__question { display: flex; align-items: center; gap: 16px; padding: 20px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; } .p-kumatori-faq__question::-webkit-details-marker { display: none; } .p-kumatori-faq__question::marker { display: none; } @media screen and (min-width: 768px) { .p-kumatori-faq__question { padding: 24px 28px; } } .p-kumatori-faq__item[open] .p-kumatori-faq__question { background: linear-gradient(73deg, #d2e6e6 0%, #e1f0f0 100%); } .p-kumatori-faq__q-label { flex-shrink: 0; width: 36px; height: 36px; background: #d2e6e6; color: #333; font-family: "Noto Serif JP", serif; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; } @media screen and (min-width: 768px) { .p-kumatori-faq__q-label { width: 42px; height: 42px; font-size: 16px; } } .p-kumatori-faq__q-text { flex: 1; color: #333; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0.08em; } @media screen and (min-width: 768px) { .p-kumatori-faq__q-text { font-size: 16px; } } .p-kumatori-faq__icon { flex-shrink: 0; width: 20px; height: 20px; position: relative; margin-left: 8px; } .p-kumatori-faq__icon::before, .p-kumatori-faq__icon::after { content: ""; position: absolute; background: #7ccac8; border-radius: 1px; transition: transform 0.3s ease, opacity 0.3s ease; } .p-kumatori-faq__icon::before { width: 16px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .p-kumatori-faq__icon::after { width: 2px; height: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .p-kumatori-faq__item[open] .p-kumatori-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .p-kumatori-faq__answer { display: flex; gap: 16px; padding: 0 20px 20px; border-top: 1px solid #d2e6e6; animation: faqOpen 0.3s ease; } @media screen and (min-width: 768px) { .p-kumatori-faq__answer { padding: 0 28px 24px; gap: 20px; } } .p-kumatori-faq__a-label { flex-shrink: 0; width: 36px; height: 36px; background: #7ccac8; color: #fff; font-family: "Noto Serif JP", serif; font-size: 16px; font-weight: 600; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; margin-top: 20px; } @media screen and (min-width: 768px) { .p-kumatori-faq__a-label { width: 42px; height: 42px; font-size: 18px; margin-top: 24px; } } .p-kumatori-faq__a-text { flex: 1; color: #333; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 350; line-height: 1.9; letter-spacing: 0.07em; padding-top: 20px; } @media screen and (min-width: 768px) { .p-kumatori-faq__a-text { font-size: 15px; padding-top: 24px; } } @keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .aile-lp-optimized .p-kumatori-contact-sp a { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; } .aile-lp-optimized .p-kumatori-mv__image img { height:auto; display:block; } .p-kumatori-photo .swiper-wrapper { display:block; } .p-kumatori-photo .swiper-slide { width:90%; margin-inline:auto; margin-bottom:24px; } .p-kumatori-photo .swiper-slide:nth-child(n+4) { display:none; } @media (prefers-reduced-motion: reduce) { .aile-lp-optimized *, .aile-lp-optimized *::before, .aile-lp-optimized *::after { animation:none!important; scroll-behavior:auto!important; } }