@charset "UTF-8";
/* ホームページ・ビルダー対応版：CSS変数・CSS Grid・clampを使用しない設計 */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fffdf9; color: #18344a; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 16px; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; border: 0; }
.kicker { margin: 0 0 18px; color: #8fa087; font-size: 12px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
.section { max-width: 1240px; margin: 0 auto; padding: 100px 30px; }
.heading { max-width: 790px; margin-bottom: 48px; }
.heading.center { margin-left: auto; margin-right: auto; text-align: center; }
.heading h2, .about h2, .area h2, .contact h2 { margin: 0 0 18px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 48px; line-height: 1.45; letter-spacing: 2px; font-weight: normal; }
.heading > p:last-child { margin: 0; color: #466074; }

.header { background: #fffdf9; border-bottom: 1px solid #e4ded6; }
.headerIn { max-width: 1400px; height: 88px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; }
.logo { width: 300px; display: flex; align-items: center; line-height: 1.1; }
.logoImg { width: 66px; height: 66px; margin-right: 12px; flex: none; border-radius: 50%; object-fit: cover; }
.logo > span { display: block; }
.logo b, .footerLogo { display: block; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 23px; letter-spacing: 2px; }
.logo small { display: block; margin-top: 7px; color: #466074; font-size: 10px; letter-spacing: 1px; }
.header nav { margin-left: auto; white-space: nowrap; }
.header nav a { display: inline-block; margin: 0 13px; padding: 10px 0; font-size: 14px; font-weight: bold; }
.header nav a:hover { color: #b85e4e; }
.phone.mini { width: 194px; margin-left: 20px; padding: 9px 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #18344a; border-radius: 10px; }
.phone.mini > span { margin-right: 9px; }
.phone.mini b { display: block; font-size: 16px; line-height: 1.25; }
.phone.mini small { display: block; font-size: 9px; }

.hero { max-width: 1450px; min-height: 760px; margin: 0 auto; padding: 22px 28px 45px; display: flex; align-items: stretch; background: #f7f1e8; }
.heroCopy { width: 50%; padding: 85px 35px 40px 22px; }
.pill { display: inline-block; margin: 0; padding: 10px 18px; border: 1px solid #8fa087; border-radius: 24px; background: #fffdf9; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
.hero h1 { margin: 24px 0 20px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 64px; line-height: 1.3; letter-spacing: 2px; font-weight: normal; }
.hero h1 em { color: #b85e4e; font-style: normal; }
.lead { max-width: 650px; margin: 0; color: #466074; font-size: 17px; line-height: 2; }
.cta { max-width: 600px; min-height: 82px; margin-top: 27px; padding: 12px 18px 12px 27px; display: flex; align-items: center; justify-content: space-between; background: #c96f5d; color: #fff; border-radius: 16px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 24px; font-weight: bold; }
.cta:hover { background: #b85e4e; }
.cta small { display: block; margin-bottom: 3px; font-family: "Yu Gothic", Meiryo, sans-serif; font-size: 10px; letter-spacing: 1px; }
.cta i { width: 46px; height: 46px; line-height: 46px; flex: none; border-radius: 50%; background: #fffdf9; color: #c96f5d; text-align: center; font-family: Arial, sans-serif; font-style: normal; }
.ctaNote { margin: 8px 0 0; color: #466074; font-size: 12px; text-align: center; }
.trust { margin: 26px 0 0; padding: 15px 6px; display: flex; list-style: none; background: #efe3d4; border-radius: 16px; }
.trust li { width: 33.33%; padding: 0 6px; border-right: 1px solid #d7cabd; text-align: center; font-size: 11px; }
.trust li:last-child { border-right: 0; }
.trust i { width: 34px; height: 34px; line-height: 34px; margin: 0 auto 5px; display: block; border: 1px solid #8fa087; border-radius: 50%; color: #8fa087; font-family: serif; font-style: normal; }
.trust b { display: block; }
.heroPhoto { position: relative; width: 50%; min-height: 700px; overflow: hidden; border-radius: 30px; background: #efe3d4; }
.heroPhoto > img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.heroPhoto > span { position: absolute; top: 26px; right: 26px; padding: 10px 18px; border-radius: 9px; background: #fffdf9; font-family: "Yu Mincho", serif; font-weight: bold; }
.heroPhoto > i { position: absolute; left: 20px; bottom: 20px; width: 105px; height: 105px; padding-top: 28px; border: 6px solid #f7f1e8; border-radius: 50%; background: #18344a; color: #fff; text-align: center; font-size: 10px; font-style: normal; }
.heroPhoto > i b { display: block; font-family: "Yu Mincho", serif; font-size: 14px; }

.voices { padding: 65px 5%; background: #18344a; color: #fff; text-align: center; }
.voices .kicker { color: #cadac5; }
.voices > div { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; }
.voices > div p { width: 23.5%; min-height: 105px; margin: 0; padding: 22px 10px; border: 1px solid #526a7b; border-radius: 14px; font-family: "Yu Mincho", serif; font-size: 17px; }
.voices h2 { margin: 27px 0 0; color: #f3d7d1; font-family: "Yu Mincho", serif; font-size: 21px; font-weight: normal; }

.services { display: flex; flex-wrap: wrap; justify-content: space-between; }
.services article { width: 31.7%; margin-bottom: 28px; overflow: hidden; border: 1px solid #ddd7cf; border-radius: 20px; background: #fff; }
.serviceImg { position: relative; height: 245px; overflow: hidden; background: #efe3d4; }
.serviceImg img { width: 100%; height: 100%; object-fit: cover; }
.services article:nth-child(1) .serviceImg img, .services article:nth-child(3) .serviceImg img { object-position: center 44%; }
.serviceImg span { position: absolute; left: 16px; bottom: 14px; width: 46px; height: 46px; line-height: 46px; border-radius: 50%; background: #18344a; color: #fff; text-align: center; font-family: "Yu Mincho", serif; }
.serviceBody { padding: 24px 24px 28px; }
.serviceBody h3 { margin: 0 0 11px; font-family: "Yu Mincho", serif; font-size: 23px; font-weight: normal; }
.serviceBody p { margin: 0; color: #466074; font-size: 14px; }
.ask { margin-top: 16px; padding: 25px 30px; display: flex; align-items: center; justify-content: space-between; border-radius: 16px; background: #f7f1e8; }
.ask p { margin: 0; font-family: "Yu Mincho", serif; font-size: 18px; }
.ask a { padding: 12px 20px; border: 1px solid #18344a; border-radius: 8px; font-size: 14px; font-weight: bold; }

.works { max-width: none; padding-left: 5%; padding-right: 5%; background: #f7f1e8; }
.works .heading { max-width: 1240px; margin-left: auto; margin-right: auto; }
.workList { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.workCard { width: 23.5%; margin-bottom: 26px; overflow: hidden; border: 1px solid #ddd7cf; border-radius: 18px; background: #fff; }
.workCard img { width: 100%; height: auto; background: #fff; }
.workCard > div { padding: 19px 18px 22px; }
.workCard h3 { margin: 0 0 9px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 19px; font-weight: normal; }
.workCard p { margin: 0; color: #466074; font-size: 12px; line-height: 1.8; }

.about { padding: 105px 5%; display: flex; align-items: center; background: #f7f1e8; }
.about > div { width: 50%; }
.photos { position: relative; min-height: 620px; padding-right: 50px; }
.photos img:first-child { width: 72%; height: 560px; margin-left: auto; object-fit: cover; object-position: center 55%; border-radius: 25px; }
.photos img:nth-child(2) { position: absolute; left: 0; bottom: 24px; width: 55%; height: 190px; object-fit: cover; border: 8px solid #f7f1e8; border-radius: 20px; }
.photos > b { position: absolute; left: 5px; top: 25px; padding: 17px 20px; border-radius: 12px; background: #18344a; color: #fff; font-family: "Yu Mincho", serif; font-size: 18px; }
.aboutCopy { max-width: 650px; padding-left: 35px; }
.aboutCopy > p:not(.kicker) { color: #466074; font-size: 15px; line-height: 2; }
.aboutCopy strong { color: #b85e4e; }
.reasons { margin-top: 28px; }
.reasons > div { margin-bottom: 10px; padding: 15px 17px; display: flex; align-items: center; border-radius: 12px; background: #fff; }
.reasons i { width: 38px; height: 38px; line-height: 38px; margin-right: 13px; flex: none; border-radius: 50%; background: #dfe6da; text-align: center; font-family: serif; font-size: 12px; font-style: normal; }
.reasons p { margin: 0; color: #466074; font-size: 13px; }
.reasons p b { display: block; color: #18344a; font-size: 15px; }

.flow ol { margin: 0; padding: 0; display: flex; justify-content: space-between; list-style: none; }
.flow li { position: relative; width: 31.7%; min-height: 300px; padding: 40px 28px 30px; border: 1px solid #ddd7cf; border-radius: 20px; text-align: center; }
.flow li > i { position: absolute; top: 16px; left: 18px; color: #c96f5d; font-family: serif; font-style: normal; }
.flow li > span { width: 76px; height: 76px; line-height: 76px; margin: 0 auto 20px; display: block; border-radius: 50%; background: #efe3d4; font-family: serif; font-size: 26px; }
.flow li h3 { margin: 0 0 12px; font-family: "Yu Mincho", serif; font-size: 22px; font-weight: normal; }
.flow li p { margin: 0; color: #466074; font-size: 14px; }

.area { padding: 85px 9%; display: flex; align-items: center; background: #dfe6da; }
.area > div:first-child { width: 62%; padding-right: 60px; }
.area > div:first-child > p:last-child { color: #466074; }
.hours { width: 38%; padding: 34px; border-radius: 20px; background: #fffdf9; text-align: center; }
.hours p { margin: 0 0 7px; color: #8fa087; font-size: 12px; font-weight: bold; letter-spacing: 1px; }
.hours > b { display: block; font-family: "Yu Mincho", serif; font-size: 31px; }
.hours > small { color: #466074; font-size: 10px; }
.hours hr { margin: 21px 0; border: 0; border-top: 1px solid #ddd7cf; }
.hours a { display: block; margin-bottom: 7px; color: #b85e4e; font-size: 27px; font-weight: bold; }

.faq > div:last-child { max-width: 900px; margin: 0 auto; border-top: 1px solid #ddd7cf; }
details { border-bottom: 1px solid #ddd7cf; }
summary { position: relative; min-height: 84px; padding: 25px 55px; cursor: pointer; list-style: none; font-family: "Yu Mincho", serif; font-size: 18px; font-weight: bold; }
summary::-webkit-details-marker { display: none; }
summary b, details > p b { position: absolute; left: 10px; top: 23px; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: #efe3d4; color: #b85e4e; text-align: center; }
summary i { position: absolute; right: 14px; font-family: Arial, sans-serif; font-size: 22px; font-style: normal; }
details > p { position: relative; margin: 0 30px 25px 55px; padding: 20px 21px 20px 56px; border-radius: 10px; background: #f7f1e8; color: #466074; font-size: 14px; }
details > p b { left: 13px; top: 17px; background: #8fa087; color: #fff; }

.webSupport { max-width: none; padding-left: 7%; padding-right: 7%; display: flex; background: #f2eadf; }
.webLead { width: 52%; padding-right: 65px; }
.businessLabel { display: inline-block; margin: 0 0 18px; padding: 7px 14px; border-radius: 20px; background: #18344a; color: #fff; font-size: 12px; font-weight: bold; letter-spacing: 1px; }
.webLead h2 { margin: 0 0 20px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 46px; line-height: 1.5; font-weight: normal; }
.webLead > p:not(.kicker):not(.businessLabel) { color: #466074; line-height: 2; }
.webButtons { margin-top: 28px; }
.webButtons a { display: inline-block; margin: 0 8px 10px 0; padding: 14px 20px; border-radius: 9px; font-size: 13px; font-weight: bold; }
.webLine { border: 1px solid #05b94f; background: #05b94f; color: #fff; }
.webServices { width: 48%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.webServices article { width: 48.5%; margin-bottom: 14px; padding: 22px 20px; border: 1px solid #ddd2c4; border-radius: 14px; background: #fff; }
.webServices article > b { color: #c96f5d; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 2px; }
.webServices h3 { margin: 8px 0 9px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 18px; font-weight: normal; }
.webServices article p { margin: 0; color: #466074; font-size: 12px; line-height: 1.75; }
.webPolicy { width: 100%; margin: 2px 0 0; padding: 18px 20px; border-left: 4px solid #c96f5d; background: #fffdf9; color: #466074; font-size: 12px; line-height: 1.8; }
.webPolicy strong { display: block; color: #18344a; font-family: "Yu Mincho", serif; font-size: 17px; }

.webProof { max-width: none; padding-left: 6%; padding-right: 6%; background: #fffdf9; }
.webProof .heading { max-width: 880px; }
.proofLayout { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
.proofLayout article { overflow: hidden; border: 1px solid #ddd7cf; border-radius: 16px; background: #fff; }
.proofLayout article img { width: 100%; height: auto; }
.proofLayout h3 { margin: 16px 17px 7px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 18px; font-weight: normal; }
.proofLayout article p { margin: 0 17px 20px; color: #466074; font-size: 12px; line-height: 1.75; }
.proofFlyer { width: 37%; }
.proofSide { width: 61%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.proofSide > article { width: 48.5%; margin-bottom: 18px; }
.proofSide > article > img { height: 315px; object-fit: cover; object-position: center; }
.proofSide > article:first-child > img { object-fit: contain; background: #f7f1e8; }
.proofSide > .seminarWide { width: 100%; }
.proofSide > .seminarWide > img { height: 330px; object-fit: cover; }

.contact { padding: 80px 7%; display: flex; align-items: center; background: #18344a; color: #fff; }
.contact > div:first-child { width: 58%; padding-right: 55px; }
.contact > div:last-child { width: 42%; }
.contact .kicker { color: #cfddc9; }
.contact h2 { font-size: 45px; }
.contact > div:first-child > p:last-child { color: #d1d9df; }
.contact .cta { width: 100%; margin: 0; }
.insta { display: block; margin-top: 13px; padding: 13px; border: 1px solid #708392; border-radius: 10px; text-align: center; font-size: 13px; font-weight: bold; }
footer { padding: 45px 5% 30px; display: flex; flex-wrap: wrap; justify-content: space-between; background: #102838; color: #fff; }
footer > div { width: 48%; }
footer > div:nth-child(2) { text-align: right; }
footer p { color: #aebbc4; font-size: 12px; }
footer > div:nth-child(2) a { font-size: 16px; font-weight: bold; }
footer > small { width: 100%; margin-top: 20px; padding-top: 22px; border-top: 1px solid #2e4554; color: #7e919e; font-size: 10px; }
.footerBrand { display: flex; align-items: center; }
.footerLogoImg { width: 76px; height: 76px; margin-right: 15px; border-radius: 50%; object-fit: cover; }
.sticky { display: none; }

@media screen and (max-width: 900px) {
  .header nav { display: none; }
  .headerIn { height: 72px; padding: 0 17px; }
  .logo { width: 255px; }
  .logoImg { width: 54px; height: 54px; margin-right: 9px; }
  .logo b { font-size: 19px; }
  .logo small { font-size: 8px; }
  .phone.mini { width: 44px; height: 44px; margin-left: auto; padding: 0; border-radius: 50%; }
  .phone.mini b { display: none; }
  .phone.mini > span { margin: 0; }
  .hero { min-height: 0; padding: 18px 16px 60px; display: block; }
  .heroCopy, .heroPhoto { width: 100%; }
  .heroPhoto { height: 520px; min-height: 0; margin-bottom: 28px; }
  .heroCopy { padding: 10px 0; }
  .hero h1 { font-size: 48px; }
  .lead { font-size: 14px; }
  .voices { padding: 50px 16px; }
  .voices > div { flex-wrap: wrap; }
  .voices > div p { width: 48%; margin-bottom: 10px; font-size: 14px; }
  .section { padding: 75px 18px; }
  .heading h2, .about h2, .area h2, .contact h2 { font-size: 38px; }
  .services article { width: 48.5%; }
  .workCard { width: 48.5%; }
  .about { padding: 75px 18px; display: block; }
  .about > div { width: 100%; }
  .photos { min-height: 520px; padding: 0; margin-bottom: 40px; }
  .photos img:first-child { height: 480px; }
  .photos img:nth-child(2) { height: 155px; }
  .aboutCopy { padding: 0; max-width: none; }
  .flow ol { display: block; }
  .flow li { width: 100%; min-height: 0; margin-bottom: 18px; padding: 28px 25px 28px 105px; text-align: left; }
  .flow li > span { position: absolute; left: 21px; top: 34px; width: 65px; height: 65px; line-height: 65px; }
  .area { padding: 70px 18px; display: block; }
  .area > div:first-child, .hours { width: 100%; }
  .area > div:first-child { padding: 0 0 30px; }
  .webSupport { padding: 70px 18px; display: block; }
  .webLead, .webServices { width: 100%; padding: 0; }
  .webServices { margin-top: 30px; }
  .webLead h2 { font-size: 38px; }
  .proofLayout { display: block; }
  .proofFlyer, .proofSide { width: 100%; }
  .proofFlyer { margin-bottom: 20px; }
  .contact { padding: 65px 18px; display: block; }
  .contact > div:first-child, .contact > div:last-child { width: 100%; padding: 0; }
  .contact > div:last-child { margin-top: 28px; }
  .sticky { position: fixed; z-index: 99; left: 8px; right: 8px; bottom: 8px; height: 60px; padding: 8px 18px; display: flex; align-items: center; border-radius: 14px; background: #c96f5d; color: #fff; }
  .sticky span { margin-right: 10px; }
  .sticky b { font-family: "Yu Mincho", serif; font-size: 16px; }
  .sticky small { margin-left: auto; }
  body { padding-bottom: 74px; }
}

@media screen and (max-width: 560px) {
  .logo { width: 225px; }
  .logoImg { width: 50px; height: 50px; }
  .logo b { font-size: 17px; }
  .heroPhoto { height: 400px; }
  .hero h1 { font-size: 40px; }
  .pill { font-size: 10px; }
  .cta { font-size: 20px; }
  .services article { width: 100%; }
  .workCard { width: 100%; }
  .webServices article { width: 100%; }
  .proofSide > article, .proofSide > .seminarWide { width: 100%; }
  .proofSide > article > img, .proofSide > .seminarWide > img { height: auto; }
  .serviceImg { height: 220px; }
  .ask { display: block; text-align: center; }
  .ask p { margin-bottom: 15px; }
  .trust li { font-size: 9px; }
  .photos { min-height: 455px; }
  .photos img:first-child { height: 420px; }
  .photos img:nth-child(2) { height: 130px; }
  summary { padding-left: 48px; font-size: 15px; }
  details > p { margin-left: 0; margin-right: 0; font-size: 12px; }
  footer { display: block; }
  footer > div { width: 100%; }
  footer > div:nth-child(2) { margin-top: 20px; text-align: left; }
  .sticky small { display: none; }
}

/* ホームページ・ビルダー編集画面向け：flexを使わない最終上書き */
@media screen and (min-width: 901px) {
  .headerIn { display: table; width: 100%; table-layout: auto; }
  .logo, .header nav, .phone.mini { display: table-cell; vertical-align: middle; }
  .logo { width: 300px; }
  .logoImg { display: inline-block; vertical-align: middle; }
  .logo > span { display: inline-block; vertical-align: middle; }
  .header nav { margin-left: 0; text-align: right; }
  .phone.mini { width: 194px; margin-left: 0; text-align: center; }
  .phone.mini > span, .phone.mini > b { display: inline-block; vertical-align: middle; }

  .hero { display: table; width: 100%; table-layout: fixed; }
  .heroCopy, .heroPhoto { display: table-cell; width: 50%; vertical-align: middle; }
  .heroPhoto { height: 700px; }
  .cta { display: table; width: 100%; table-layout: fixed; }
  .cta > span, .cta > i { display: table-cell; vertical-align: middle; }
  .cta > i { width: 46px; }
  .trust { display: table; width: 100%; table-layout: fixed; }
  .trust li { display: table-cell; width: 33.33%; vertical-align: middle; }

  .voices > div { display: table; width: 100%; border-collapse: separate; border-spacing: 8px 0; }
  .voices > div p { display: table-cell; width: 25%; vertical-align: middle; }

  .services, .workList, .webServices, .proofSide { display: block; overflow: hidden; }
  .services article { float: left; width: 31.7%; margin-right: 2.45%; }
  .services article:nth-child(3n) { margin-right: 0; }
  .workCard { float: left; width: 23.5%; margin-right: 2%; }
  .workCard:nth-child(4n) { margin-right: 0; }
  .ask { display: table; width: 100%; }
  .ask > p, .ask > a { display: table-cell; vertical-align: middle; }
  .ask > a { width: 210px; text-align: center; }

  .about { display: table; width: 100%; table-layout: fixed; }
  .about > div { display: table-cell; width: 50%; vertical-align: middle; }
  .reasons > div { display: table; width: 100%; }
  .reasons > div > i, .reasons > div > p { display: table-cell; vertical-align: middle; }
  .reasons > div > i { width: 38px; }

  .flow ol { display: table; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 10px 0; }
  .flow li { display: table-cell; width: 33.33%; vertical-align: top; }

  .area { display: table; width: 100%; table-layout: fixed; }
  .area > div:first-child, .area > .hours { display: table-cell; vertical-align: middle; }

  .webSupport { display: table; width: 100%; table-layout: fixed; }
  .webLead, .webServices { display: table-cell; vertical-align: top; }
  .webServices article { float: left; width: 48.5%; margin-right: 3%; }
  .webServices article:nth-child(2n) { margin-right: 0; }
  .webPolicy { clear: both; }

  .proofLayout { display: table; width: 100%; table-layout: fixed; }
  .proofFlyer, .proofSide { display: table-cell; vertical-align: top; }
  .proofFlyer { width: 37%; }
  .proofSide { width: 63%; padding-left: 20px; }
  .proofSide > article { float: left; width: 48.5%; margin-right: 3%; }
  .proofSide > article:nth-child(2) { margin-right: 0; }
  .proofSide > .seminarWide { clear: both; float: none; width: 100%; margin-right: 0; }

  .contact { display: table; width: 100%; table-layout: fixed; }
  .contact > div { display: table-cell; vertical-align: middle; }
  footer { display: block; overflow: hidden; }
  footer > div { float: left; width: 50%; }
  footer > small { display: block; clear: both; }
  .footerBrand { display: table; }
  .footerLogoImg, .footerLogo { display: table-cell; vertical-align: middle; }
}

@media screen and (max-width: 900px) {
  .headerIn { display: table; width: 100%; }
  .logo, .phone.mini { display: table-cell; vertical-align: middle; }
  .logoImg, .logo > span { display: inline-block; vertical-align: middle; }
  .phone.mini { text-align: center; }
  .cta { display: table; width: 100%; table-layout: fixed; }
  .cta > span, .cta > i { display: table-cell; vertical-align: middle; }
  .cta > i { width: 42px; }
  .trust { display: table; width: 100%; table-layout: fixed; }
  .trust li { display: table-cell; width: 33.33%; vertical-align: middle; }
  .voices > div, .services, .workList, .webServices, .proofSide { display: block; overflow: hidden; }
  .voices > div p { float: left; width: 48%; margin-right: 4%; }
  .voices > div p:nth-child(2n) { margin-right: 0; }
  .services article, .workCard { float: left; width: 48.5%; margin-right: 3%; }
  .services article:nth-child(2n), .workCard:nth-child(2n) { margin-right: 0; }
  .webServices article, .proofSide > article { float: none; width: 100%; margin-right: 0; }
  .sticky { display: table; width: auto; }
  .sticky > span, .sticky > b, .sticky > small { display: table-cell; vertical-align: middle; }
  .sticky > small { text-align: right; }
}

@media screen and (max-width: 560px) {
  .services article, .workCard, .voices > div p { float: none; width: 100%; margin-right: 0; }
}

/* 本文は読みやすいメイリオ、見出しは明朝体で印象を強くする */
body, p, li, a, nav, small, summary, details, button, input, textarea, select {
  font-family: Meiryo, "メイリオ", "MS PGothic", sans-serif !important;
}
h1, h2, h3, .logo b, .footerLogo, .cta, .voices p, .hours > b {
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "MS PMincho", serif !important;
}
.hero h1, .heading h2, .about h2, .area h2, .contact h2, .webLead h2 {
  font-weight: bold;
  letter-spacing: 0.055em;
}
img {
  max-width: 100%;
  height: auto !important;
  -ms-interpolation-mode: bicubic;
}
.logoImg, .footerLogoImg {
  width: 72px;
  max-height: 72px;
  border-radius: 0;
}
.heroPhoto {
  height: auto !important;
  min-height: 0 !important;
  text-align: center;
  overflow: hidden;
}
.heroPhoto > img {
  display: block;
  width: auto !important;
  max-width: 100%;
  max-height: 700px;
  margin: 0 auto;
}
.serviceImg {
  height: 245px !important;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.serviceImg img {
  display: block;
  width: 100% !important;
  max-width: none;
  max-height: none;
  margin: 0;
  vertical-align: top;
}
/* 縦長写真は人物が見える位置で上下を切り、横長写真は左右だけを切る */
.services article:nth-child(2) .serviceImg img { margin-top: -205px; }
.services article:nth-child(1) .serviceImg img,
.services article:nth-child(5) .serviceImg img {
  width: 128% !important;
  margin-left: -14%;
}
.photos img:first-child {
  width: auto;
  max-width: 72%;
  max-height: 560px;
}
.photos img:nth-child(2) {
  height: auto !important;
}
.proofLayout article img,
.proofSide > article > img,
.proofSide > .seminarWide > img {
  height: auto !important;
  object-fit: contain;
}

@media screen and (max-width: 900px) {
  .heroPhoto > img { max-height: 520px; }
  .serviceImg { height: 220px !important; line-height: normal; }
  .services article:nth-child(2) .serviceImg img { margin-top: -155px; }
  .photos img:first-child { max-height: 480px; }
}

@media screen and (max-width: 560px) {
  .logoImg { width: 56px; max-height: 56px; }
  .heroPhoto > img { max-height: 400px; }
  .photos { min-height: 0 !important; padding: 0; }
  .photos img:first-child,
  .photos img:nth-child(2) {
    position: static;
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 420px;
    margin: 0 auto 14px;
    border-width: 0;
  }
}

/* 高さの違う事例カードでも、各段を必ず左端から始める */
@media screen and (min-width: 901px) {
  .workCard:nth-child(4n+1) { clear: left; }
}
@media screen and (min-width: 561px) and (max-width: 900px) {
  .workCard:nth-child(2n+1) { clear: left; }
}

/* 小さい説明文も無理なく読める文字サイズと行間にする */
.kicker, .ctaNote, .businessLabel, .webServices article > b,
.hours p, .insta, .webButtons a {
  font-size: 14px;
}
.logo small, .phone.mini small, .cta small, .hours > small,
.footerLogo + small, footer > small {
  font-size: 12px;
  line-height: 1.6;
}
.trust li, .heroPhoto > i {
  font-size: 13px;
  line-height: 1.55;
}
.serviceBody p, .flow li p, details > p {
  font-size: 15px;
  line-height: 1.9;
}
.workCard p, .reasons p, .webServices article p,
.webPolicy, .proofLayout article p, footer p {
  font-size: 14px;
  line-height: 1.9;
}
.aboutCopy > p:not(.kicker) {
  font-size: 16px;
}

@media screen and (max-width: 560px) {
  .logo small { font-size: 10px; }
  .pill { font-size: 12px; }
  .lead { font-size: 16px; }
  .trust li { font-size: 12px; }
  .voices > div p { font-size: 16px; }
  summary { font-size: 16px; }
  details > p { font-size: 14px; }
}