@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; -o-object-fit: cover; object-fit: cover; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { all: revert; -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* custom */ .video-wrapper { aspect-ratio: 16/9; } /* * HTML * ------------------------------------------------------------------- */ html { font-size: 62.5%; } body { font-family: "YakuHanJP_Noto", "Noto Serif JP", "Hiragino Mincho ProN", YuMincho, serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.4rem; line-height: 1.8; letter-spacing: 0.05em; color: #333; } a { text-decoration: none; outline: none; } /* * wrapper * ------------------------------------------------------------------- */ .wrapper { display: block; margin: 0px auto; padding: 0px; min-height: 100vh; } main { overflow: hidden; } /* header */ #sp-nav { /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/ position: fixed; z-index: -1; opacity: 0; /*はじめは透過0*/ /*ナビの位置と形状*/ top: 0; width: 100%; height: 100vh; /*ナビの高さ*/ background: #f5f5f5; /*動き*/ -webkit-transition: all 0.3s; transition: all 0.3s; } /*アクティブクラスがついたら透過なしにして最前面へ*/ #sp-nav.panelactive { opacity: 1; z-index: 100; } /*ナビゲーションの縦スクロール*/ #sp-nav.panelactive #sp-nav-list { /*ナビの数が増えた場合縦スクロール*/ position: relative; z-index: 999; width: 100%; height: 100vh; /*表示する高さ*/ overflow: auto; -webkit-overflow-scrolling: touch; } /*ナビゲーション*/ #sp-nav ul { display: none; /*ナビゲーション天地中央揃え*/ position: absolute; inset: 10%; } #sp-nav.panelactive ul { display: block; width: min(80%, 400px); margin: 0 auto; } /*リストのレイアウト設定*/ #sp-nav li { list-style: none; text-align: center; } #sp-nav li a { color: #333; text-decoration: none; padding: 10px; display: block; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; font-size: 1.8rem; } #sp-nav .tel { margin-top: 2rem; } #sp-nav .tel a { border-radius: 6px; color: white; background-color: #5c5c5c; } /*========= ボタンのためのCSS ===============*/ .btn-nav { cursor: pointer; width: 50px; height: 50px; position: relative; z-index: 1000; border-radius: 8px; background-color: #656464; } /*×に変化*/ .btn-nav span { display: inline-block; -webkit-transition: all 0.4s; transition: all 0.4s; position: absolute; left: 14px; height: 2px; border-radius: 2px; background-color: #fff; width: 45%; } .btn-nav span:nth-of-type(1) { top: 15px; } .btn-nav span:nth-of-type(2) { top: 23px; } .btn-nav span:nth-of-type(3) { top: 31px; } .btn-nav.active span:nth-of-type(1) { top: 18px; left: 18px; -webkit-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg); width: 30%; } .btn-nav.active span:nth-of-type(2) { opacity: 0; } .btn-nav.active span:nth-of-type(3) { top: 30px; left: 18px; -webkit-transform: translateY(-6px) rotate(45deg); transform: translateY(-6px) rotate(45deg); width: 30%; } .header { width: min(100%, 1280px); margin: 0 auto; padding: 10px 15px; } .header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header__inner h1 { width: 160px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 10px; } .header__inner nav { display: none; } @media (1080px <= width) { .header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .header__inner h1 { width: 240px; margin-right: auto; } .header__inner nav { display: block; } .header__inner nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 40px; } .header__inner nav ul li { text-align: center; font-size: 1.4rem; font-weight: bold; } .header__inner nav ul li span { display: block; font-weight: normal; font-size: 1.1rem; } } .header__cta { display: none; } @media (1080px <= width) { .header__cta { display: block; } .header__cta .cta__inner { width: min(100%, 260px); margin: 0 auto; padding: 10px; background-color: #fff; border-radius: 10px; text-align: center; letter-spacing: 0; } .header__cta .cta__inner h3 { font-size: clamp(2rem, 1vw, 2.4rem); } .header__cta .cta__inner h3 span { font-size: 3rem; color: #0DA26C; font-weight: bold; display: block; } } @media screen and (1080px <= width) and (min-width: 1025px) { .header__cta .cta__inner h3 span { display: inline-block; } } @media (1080px <= width) { .header__cta .cta__inner p { font-size: 1.2rem; font-weight: bold; } .header__cta .cta__inner p:nth-child(2) { background-color: #656464; color: white; } .header__cta .cta__inner a { font-weight: bold; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; place-items: center; font-size: clamp(2rem, 1vw, 2rem); } .header__cta .cta__inner a span { width: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; } } /* footer */ footer { margin-bottom: 120px; } @media screen and (min-width: 1025px) { footer { margin-bottom: 0; } } .footer .cta { width: 100%; background-image: url("../images/main_img_bg.webp"); background-repeat: no-repeat; background-size: cover; padding: 60px 15px; } .footer .cta__inner { width: min(100%, 640px); margin: 0 auto; padding: clamp(20px, 4vw, 40px); background-color: #fff; border-radius: 10px; text-align: center; } .footer .cta__inner h3 { font-size: clamp(2rem, 1vw, 2.4rem); } .footer .cta__inner h3 span { font-size: 3rem; color: #0DA26C; font-weight: bold; display: block; } @media screen and (min-width: 1025px) { .footer .cta__inner h3 span { display: inline-block; } } .footer .cta__inner p { font-size: clamp(2.2rem, 1vw, 2.6rem); font-weight: bold; } .footer .cta__inner p:nth-child(3) { background-color: #eeeeee; max-width: 340px; margin: 15px auto 0; } .footer .cta__inner a { font-weight: bold; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; place-items: center; font-size: clamp(3rem, 1vw, 3.8rem); } .footer .cta__inner a span { display: -webkit-box; display: -ms-flexbox; display: flex; } #copy { width: 100%; padding: 4px; text-align: center; font-size: 1.2rem; background-color: #ddd; } .footer_nav { width: min(100%, 1280px); margin: 0 auto; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; gap: 15px; } @media screen and (min-width: 1025px) { .footer_nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 30px; } .footer_nav div { width: 100%; max-width: 260px; } } .footer_nav h2 { text-align: center; } @media screen and (min-width: 1025px) { .footer_nav h2 { width: 380px; text-align: left; } } .footer_nav ul { width: 100%; } @media screen and (min-width: 1025px) { .footer_nav ul { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } } .footer_nav ul li { font-size: 1.4rem; padding: 10px; border-top: 1px solid #ddd; } @media screen and (min-width: 1025px) { .footer_nav ul li { border-top: none; } } .footer_fix { position: fixed; z-index: 100; bottom: 0%; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); width: 100%; padding-top: 4px; background-color: rgba(134, 134, 134, 0.6901960784); } @media screen and (min-width: 1025px) { .footer_fix { display: none; } } .footer_fix ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: min(100%, 480px); margin: 0 auto; padding: 0 4px; gap: 4px; } .footer_fix ul li { width: 100%; } .footer_fix ul li img { width: 100%; } /* MV */ @media screen and (min-width: 1025px) { .mv { margin-top: 0px; } } .mv__inner { width: 100%; max-width: 1280px; margin: 0 auto; position: relative; } .mv__inner-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 30px; } .mv h2 { font-size: 3rem; letter-spacing: 0.5em; text-align: center; position: absolute; z-index: 100; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* aside */ /* nav */ /* breadcrumbs */ .breadcrumbs { width: min(100%, 1280px); margin: 0 auto; font-size: 1.1rem; padding: 5px 15px; overflow: hidden; } .breadcrumbs ol { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; list-style: none; overflow-x: scroll; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } .breadcrumbs ol li:not(:last-of-type)::after { content: ">"; margin: 0 0.6em; color: #777; font-weight: bold; } .breadcrumbs ol a { color: inherit; text-decoration: none; font-weight: bold; } /* * load * ------------------------------------------------------------------- */ .loader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff; width: 100vw; height: 100vh; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 9999; } .loader::after { -webkit-animation: loader 0.5s linear infinite; animation: loader 0.5s linear infinite; border: 1px solid #000; border-radius: 50%; border-right: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2); content: ""; height: 70px; width: 70px; } .swiper { /*スライダーの幅と高さを調整*/ width: 100%; } .swiper-slide { /*スライド要素の幅と高さを調整*/ width: 100%; } .swiper-slide img { width: 100%; } @-webkit-keyframes menu-container-appeared { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes menu-container-appeared { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } /* * load * ------------------------------------------------------------------- */ @-webkit-keyframes loader { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .table { width: 100%; line-height: 1.8; text-align: left; } .table tr { border-bottom: 1px solid #B9B388; } .table tr th { width: 11rem; padding: 0.8rem; vertical-align: top; } @media screen and (min-width: 1025px) { .table tr th { width: 16rem; } } .table tr td { width: calc(100% - 12rem); padding: 0.8rem 1.6rem; vertical-align: top; } @media screen and (min-width: 1025px) { .table tr td { width: calc(100% - 16rem); } } /*ContactForm7カスタマイズ*/ table.CF7_table { width: min(100%, 920px); margin: 0 auto; border: 1px solid #DDDDDD; } table.CF7_table input[type=email], table.CF7_table input[type=text], table.CF7_table textarea { width: 100%; background: #f8f8f8; display: block; font-size: 16px; padding: 12px 15px; -webkit-transition: 0.8s; transition: 0.8s; border-radius: 0; box-sizing: border-box; -moz-box-sizing: border-box; /* Firefox */ -webkit-box-sizing: border-box; /* Chrome, Safari */ } table.CF7_table tr { border-top: 1px solid #DDDDDD; } .single .entry-content table.CF7_table, .page .entry-content table.CF7_table { display: table; } /*入力欄*/ .CF7_table input, .CF7_table textarea { border: 1px solid #d8d8d8; } .CF7_table ::-webkit-input-placeholder { color: #797979; } .CF7_table ::-moz-placeholder { color: #797979; } .CF7_table :-ms-input-placeholder { color: #797979; } .CF7_table ::-ms-input-placeholder { color: #797979; } .CF7_table ::placeholder { color: #797979; } /*「必須」文字*/ .CF7_req { font-size: 0.9em; padding: 5px; background: #0DA26C; color: #fff; border-radius: 3px; margin-right: 1em; } /*「任意」文字*/ .CF7_unreq { font-size: 0.9em; padding: 5px; background: #bdbdbd; color: #fff; border-radius: 3px; margin-right: 1em; } .CF7_table th { background-color: #fafafa; } .CF7_table th, .CF7_table td { padding: 15px; } /* タイトル列 */ @media (min-width: 768px) { .CF7_table th { vertical-align: middle; width: 30%; /*横幅*/ } } /* レスポンシブ */ @media (max-width: 768px) { table.CF7_table { width: 95%; } .CF7_table tr, .CF7_table td, .CF7_table th { display: block; width: 100%; line-height: 2.5em; } .wpcf7-list-item { display: block; } } /* 「送信する」ボタン */ .wpcf7 input.wpcf7-submit { width: 260px; padding: 14px; background-color: #F7D210; border: 0; color: #000; font-size: 2rem; font-weight: bold; margin: 0 auto; } .CF7_btn { text-align: center; margin-top: 20px; position: relative; } .wpcf7-spinner { width: 0; margin: 0; position: absolute !important; } .contact__inner .wpcf7 form.invalid .wpcf7-response-output, .contact__inner .wpcf7 form.unaccepted .wpcf7-response-output, .contact__inner .wpcf7 form.payment-required .wpcf7-response-output { border-color: #ff5700; } /* TOP */ .top_sectitle { width: 100%; text-align: center; padding: 60px 15px 20px; } .top_sectitle h2 { font-size: 2.8rem; letter-spacing: 0.1em; margin-bottom: 10px; } .top_sectitle h2 span { display: block; font-size: 1.4rem; position: relative; margin-bottom: 10px; } .top_sectitle h2 span::after { content: ""; width: 80px; height: 1px; display: inline-block; background-color: #d3c5b5; position: absolute; bottom: -20%; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } .top_sectitle p { text-align: justify; line-height: 180%; width: min(100%, 680px); margin: 0 auto; } .top { -webkit-transition: all 0.2s; transition: all 0.2s; } .top_news { width: min(100%, 980px); padding: 15px; margin: 0 auto 6rem; } .top_news__inner { width: 100%; margin: 0 auto; padding: 0 20px; } .top_news__inner dl { display: -ms-grid; display: grid; gap: 20px; -ms-grid-columns: auto 20px 1fr; grid-template-columns: auto 1fr; overflow: hidden; } .top_news__inner dl dt { -ms-grid-column: 1; grid-column: 1; } .top_news__inner dl dd { -ms-grid-column: 2; grid-column: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .top_about { width: min(100%, 980px); padding: 15px; margin: 0 auto 6rem; } .top_about__inner { line-height: 260%; text-align: justify; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 30px; -ms-flex-preferred-size: 100%; flex-basis: 100%; } @media screen and (min-width: 1025px) { .top_about__inner { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .top_about__inner > div { width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .top_about__inner .right { text-align: center; } .top_about h3 { text-align: center; font-size: 1.8rem; margin-bottom: 2rem; } .top_service { background-color: #fcfcfc; } .top_service__inner { width: min(100%, 1240px); margin: 0 auto; padding: 0 20px; display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 30px 15px; } .top_service__inner h3 { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top_service__inner img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 220px; overflow: hidden; } @media (min-width: 768px) { .top_service__inner { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } .servicecard__tmb { height: 220px; } .servicecard__tmb img { width: 100%; height: 100%; overflow: hidden; -o-object-fit: cover; object-fit: cover; } .servicecard ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 120px; } @media (min-width: 768px) { .servicecard ul { display: none; } } .servicecard ul li { width: 100%; } .servicecard__body { padding: 20px; overflow: hidden; } .servicecard__body h3 { font-size: 1.7rem; font-weight: bold; overflow: hidden; padding-bottom: 1.5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .servicecard__body p { text-align: justify; } .top_access { padding: 0px 15px; background-color: #FCFBF3; } @media screen and (min-width: 1025px) { .top_access { padding: 40px; } } .top_access__inner { max-width: 1280px; padding: 0 15px; margin: 0 auto; } .top_access .representative { text-align: right; font-size: 1.8rem; } .top_access .representative span { margin-right: 15px; font-size: 1.4rem; } .top_access-info { margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 30px; -ms-flex-preferred-size: 100%; flex-basis: 100%; } @media screen and (min-width: 1025px) { .top_access-info { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .top_access-info > div { width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .top_insta__inner { width: 100%; max-width: 480px; margin: 0 auto !important; } /* common */ h2 { font-weight: 500; } .link { width: 100%; text-align: center; padding: 40px 0 40px; } .btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; border: none; line-height: 1; text-decoration: none; text-align: center; outline: none; cursor: pointer; -webkit-transition: text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, -webkit-box-shadow 0.2s; transition: text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, -webkit-box-shadow 0.2s; transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s; transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, -webkit-box-shadow 0.2s; } .btn:after { content: ""; width: 10px; height: 10px; border: 0; border-top: solid 2px #7b683d; border-right: solid 2px #7b683d; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 0; right: 15px; bottom: 0; margin: auto; } .btn_link { font-size: 1.5rem; background-color: #ffffff; padding: 20px 40px; color: #323232; border: 1px solid; -o-border-image: linear-gradient(to right, #7b683d, #ffdd7f) 1; border-image: -webkit-gradient(linear, left top, right top, from(#7b683d), to(#ffdd7f)) 1; border-image: linear-gradient(to right, #7b683d, #ffdd7f) 1; } .pg-title { width: 100%; height: 120px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: 0.025em; font-size: clamp(2.7rem, 2.5vw, 3.8rem); } .pg-title-about { background-size: cover; background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e4e4e4)); background-image: linear-gradient(#f9f9f9, #e4e4e4); } .m-title { width: min(100%, 1280px); margin: 0 auto; text-align: center; padding: 30px 0px; } .m-title h2 { color: #0DA26C; font-size: clamp(2rem, 2.5vw, 4rem); padding-bottom: 15px; } @media (min-width: 768px) { .m-title { padding: 60px 15px; } } /* 左から現れるボックスの設定 */ .left { -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s; } /* スクロールして追加するクラスの設定 */ .left-fadein { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } /*右から現れるボックスの指定*/ .right { -webkit-transform: translate(50px, 0); transform: translate(50px, 0); opacity: 0; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s; } /*スクロールして追加するクラスの設定*/ .right-fadein { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .grid-3 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: repeat(1, 1fr); gap: 15px; margin-top: 30px; } @media (min-width: 768px) { .grid-3 { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } } .grid-3 > div { text-align: justify; } .grid-3 > div p { margin-bottom: 1rem; letter-spacing: 0; } .grid-4 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 10px 1fr; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; } @media (min-width: 768px) { .grid-4 { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } } .grid-4 > div { text-align: justify; } .grid-4 > div p { margin-bottom: 1rem; letter-spacing: 0; } /* page */ .salon { padding: 0 15px; } .salon__inner { width: min(100%, 880px); margin: 6rem auto; } .salon__inner h3 { width: 100%; font-size: clamp(1.7rem, 2.5vw, 2rem); font-weight: bold; margin-bottom: 1rem; line-height: 180%; } .salon section { margin-bottom: 5rem; } .salon .grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: repeat(1, 1fr); gap: 15px; margin-top: 30px; } @media (min-width: 768px) { .salon .grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } .salon .grid figure { text-align: center; } .salon .grid > div { text-align: justify; } .salon .grid > div p { margin-bottom: 1rem; letter-spacing: 0; } .about { padding: 0 15px; } .about__inner { width: min(100%, 880px); margin: 6rem auto; } .about__inner h3 { width: 100%; font-size: clamp(1.7rem, 2.5vw, 2rem); font-weight: bold; margin-bottom: 1rem; line-height: 180%; } .about section { margin-bottom: 5rem; } .service { padding: 0 15px; } .service__inner { width: min(100%, 880px); margin: 6rem auto; } .service__inner h3 { width: 100%; font-size: clamp(1.7rem, 2.5vw, 2rem); padding: 5px 15px; font-weight: bold; background-color: #eeeeee; margin-bottom: 1rem; } .service section { margin-bottom: 5rem; } .service .grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: repeat(1, 1fr); gap: 15px; margin-top: 30px; } @media (min-width: 768px) { .service .grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } .service .grid figure { text-align: center; } .service .grid > div { text-align: justify; } .service .grid > div p { margin-bottom: 1rem; letter-spacing: 0; } .service .sec02 h4 { font-size: clamp(1.7rem, 2.5vw, 2rem); font-weight: bold; border-bottom: 1px solid currentColor; padding-bottom: 5px; margin-bottom: 5px; } .service .sec02 .demerit { color: #473219; background-color: #e9e3db; } .service .sec02 .merit { background-color: #0b80cf; color: white; } .service .sec02 ul { padding-left: 25px; line-height: 240%; } .service .sec02 ul li { list-style: circle; } .service .sec03 .grid > div { border-radius: 10px; } .service .sec03 .grid h4 { font-size: 2rem; font-weight: bold; margin-bottom: 8px; border-bottom: 2px solid #eee; color: cadetblue; } .service .sec03 .grid h5 { font-size: 1.6rem; } .service .sec03 .grid .before { color: #473219; text-align: center; } .service .sec03 .grid .after { color: coral; text-align: center; } .visit { padding: 0 15px; } .visit__inner { width: min(100%, 1080px); margin: 6rem auto; } .visit__inner h3 { width: 100%; font-size: clamp(1.7rem, 2.5vw, 2rem); padding: 8px 0px; border-bottom: 1px solid; margin-bottom: 1rem; } .visit__inner dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; gap: 2px; margin-top: 3rem; } .visit__inner dl dt { width: calc(30% - 1px); padding: 10px; background-color: #ddfc8d; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .visit__inner dl dd { width: calc(70% - 1px); background-color: #F3F3F3; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; } .visit section { margin-bottom: 5rem; } .visit .grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: repeat(1, 1fr); gap: 5px; margin-top: 30px; } @media (min-width: 768px) { .visit .grid { -ms-grid-columns: 1fr 40px 1fr; grid-template-columns: repeat(2, 1fr); gap: 40px; } } .visit .grid figure { text-align: center; } .visit .grid > div { text-align: justify; } .visit .grid > div p { margin-bottom: 1rem; letter-spacing: 0; } /* お問い合わせ */ .contact { padding: 0 15px; } .contact__inner { width: min(100%, 1240px); margin: 6rem auto; text-align: center; }