.bg01 {
  background-color: #f3f5f7;
}

.main h2 {
  color: #111;
  font-weight: 600;
}

.main .secTtl {
  position: relative;
  display: flex;
  flex-flow: column;
  font-size: 2.2em;
  color: #111;
  line-height: 1.4;
  padding: 0;
  margin: 0 auto 40px;
  text-align: center;
  align-items: center;
  font-weight: 600;
}

.pageTitle {
  display: none;
}

.contents {
  margin-top: 0;
  padding-top: 0;
}

#window-renovation.cmp .pageTitle {
  display: flex;
}

#window-renovation.cmp .contents {
  margin-top: 30px;
}

.mv {
  display: flex;
  justify-content: center;
  position: relative;
  background: #f1efe7 url(../../img/common/bg01.png) center center;
  padding: 8vmin 0 9vmin;
}

.mv::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -70px;
  transform: translateX(-50%);
  width: 100%;
  height: 417px;
  background: url(../img/pic_renovation_mv_catch.png) center 0 no-repeat;
  z-index: 1;
}

.mv img {
  position: relative;
  z-index: 2;
}

.firstView {
  background-color: #fff;
  padding: 3vmin 0 1vmin;
}

.conversion {
  padding: 5vmin 0;
  background-color: #f1efe7;
  text-align: center;
}

.conversion .conversionTel .tel {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.2;
}

.conversion .conversionTel .tel span {
  font-size: 70px;
  padding-left: 70px;
  background-size: 70px auto;
}

.conversion .conversionList {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0 0;
  gap: 0 20px;
}

.conversion .conversionList li {
  max-width: 320px;
  margin: 0;
  padding-left: 0;
}

.conversion .conversionList li::before,
.conversion .conversionList li::after {
  content: none;
}

.conversion .conversionList li img {
  max-width: 100%;
  height: auto;
}

/* ===== 窓のリフォームでこんなメリットが！CSS ===== */
.merits {
  padding: 60px 0;
}

.meritsInner {
  max-width: 1200px;
  margin-inline: auto;
}

.merits h2 {
  text-align: center;
}

.merits .meritsList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
}

.merits .meritsList li {
  margin: 0;
  padding: 0;
  max-width: 290px;
  border: 2px solid #ebe9e5;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
}

.merits .meritsList li dd {
  margin-top: 15px;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  line-height: 1.4;
}

.merits .meritsList li img {
  max-width: 100%;
  height: auto;
}

.merits .meritsList li::before,
.merits .meritsList li::after {
  content: none;
}

.merits .meritsDetalis {
  margin-top: 60px;
  max-width: 1000px;
  margin-inline: auto;
}

.merits .meritsDetalis h3 {
  background: transparent;
  font-size: 32px;
  color: #111;
  width: auto;
  padding: 0;
  margin: 0;
  text-align: center;
}

.merits .meritsDetalisPic {
  margin-top: 40px;
}

.merits .meritsDetalisPic img {
  max-width: 100%;
  height: auto;
}

.merits .meritsDetalisPic figcaption {
  margin-top: 5px;
  font-size: 14px;
}

/* ===== 窓リフォームの概要CSS ===== */
.lead {
  padding: 0 0 60px;
}

.leadInner {
  max-width: 1200px;
  margin-inline: auto;
}

.lead h2 {
  margin-bottom: 20px;
  font-size: 22px;
}

.lead h2 span {
  font-size: 35px;
  color: #ff8800;
  text-align: center;
}

.lead .leadList {
  display: flex;
  justify-content: space-between;
  margin: 40px 0 0 0;
  gap: 0 20px;
}

.lead .leadList .leadItem {
  width: 49%;
  margin: 0;
  border-radius: 20px;
  padding: 24px 24px 20px 24px;
}

.lead .leadList .leadItem01 {
  background: url(../img/pic_lead_main_img01.jpg) 0 0 / cover no-repeat;
}

.lead .leadList .leadItem02 {
  background: url(../img/pic_lead_main_img02.jpg) 0 0 / cover no-repeat;
}

.lead .leadList li::before,
.lead .leadList li::after {
  content: none;
}

.lead .leadItem .leadItemTtl {
  margin: 0 0 32px 0;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 13px 5px;
  text-align: center;
  background-color: rgba(241, 239, 231, 0.8);
  backdrop-filter: blur(10px);
  font-weight: 400;
  font-size: 18px;
  color: #111;
}

.lead .leadItem .leadItemLg {
  font-size: 28px;
  font-weight: 600;
}

.lead .leadItem .leadItemKind {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #66605d;
  margin: 0 0 258px auto;
  width: 108px;
  height: 108px;
}

.lead .leadItem .leadItemKind p {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 15px;
  line-height: calc(16 / 12);
  letter-spacing: 0.08em;
  font-weight: 400;
}

.lead .leadListFeature {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

.lead .leadListFeature .leadListItem {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  width: 138px;
  height: 138px;
  margin: 0 18px 0 0;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ebe9e5;
  font-size: 15px;
}

.lead .leadListFeature .leadListItem:last-child {
  margin-right: 0;
}

.lead .leadListFeature .leadListItem::before,
.lead .leadListFeature .leadListItem::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid #ebe9e5;
  background-color: transparent;
}

.lead .leadListFeature .leadListItem::before {
  width: 95%;
  height: 95%;
}

.lead .leadListFeature .leadListItem::after {
  width: 90%;
  height: 90%;
}

.lead .leadInner .leadItemNote {
  width: 49%;
  margin: 10px 0 0 auto;
  font-size: 14px;
}

.method {
  margin-top: 30px;
}

.method .methodInner {
  max-width: 1200px;
  margin-inline: auto;
  border-radius: 32px;
  padding: 60px;
  background-color: #f1efe7;
  box-sizing: border-box;
}

.method h3 {
  position: relative;
  background-color: transparent;
  font-size: 35px;
  font-weight: 600;
  color: #111;
  line-height: 1.4;
  padding: 0;
  margin: 0;
  position: relative;
  text-align: center;
}

.method .methodRow {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.method .methodRow02 {
  align-items: center;
}

.method .methodCol {
  width: 45%;
}

.method .methodRow02 .methodCol {
  width: 38%;
}

.method .methodRow02 .methodCol + .methodCol {
  width: 58%;
}

.method .methodCol .methodTtl {
  font-size: 22px;
  padding: 0;
  margin: 0;
  color: #111;
}

.method .methodCol .methodTtl::before,
.method .methodCol .methodTtl::after {
  content: none;
}

.method .methodCol p.methodTxt {
  margin-top: 35px;
  margin-bottom: 0;
}

.method .methodCol .methodPicRow {
  display: flex;
  align-items: center;
}

.method .methodCol .methodPicRow img:first-child {
  width: 64%;
  height: 100%;
}

.method .methodCol .methodPicRow img:nth-of-type(2) {
  width: 32%;
  height: 100%;
}

.method .methodCol .methodPic {
  margin-top: 20px;
  text-align: center;
}

.method .methodCol .methodPic img {
  max-width: 100%;
  height: auto;
}

.method .methodCol .methodNote {
  margin-top: 10px;
}

.method .methodCol .methodNote li {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.method .methodCol .methodNote li::before,
.method .methodCol .methodNote li::after {
  content: none;
}

.method .methodContent {
  margin-top: 60px;
}

.method .methodContent .methodLeadTtl {
  font-size: 22px;
  padding: 0;
  margin: 0;
  color: #222;
}

.method .methodContent + .methodContent {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #cecdcd;
}

.method .methodContent .methodLeadTtl::before,
.method .methodContent .methodLeadTtl::after {
  content: none;
}

.method .methodContent .methodLead {
  margin-top: 20px;
  margin-bottom: 0;
}

.method .methodContent .methodTxts {
  position: relative;
  text-align: center;
}

.method .methodContent h4.methodTxt {
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
  font-size: 18px;
  line-height: calc(20 / 14);
  font-weight: 600;
  color: #ff8800;
}

.method .methodContent h4.methodTxt::before,
.method .methodContent h4.methodTxt::after {
  content: "";
  width: 1px;
  height: 18px;
  background: #ff8800;
  position: absolute;
  top: 50%;
  border-radius: 6px;
  opacity: 1;
}

.method .methodContent h4.methodTxt::before {
  left: -25px;
  transform: translate(0%, -50%) rotate(-30deg);
}

.method .methodContent h4.methodTxt::after {
  left: inherit;
  right: -25px;
  transform: translate(0%, -50%) rotate(30deg);
}

.method .methodContent .methodNote {
  margin: 10px 0 0 0;
  padding: 0;
  font-size: 12px;
}

/* ===== 商品紹介CSS ===== */
.product {
  margin-bottom: 60px;
}

.product .productInner {
  max-width: 1000px;
  margin-inline: auto;
}

.product .productTables {
  border-radius: 10px;
  background-color: #fff;
}

.product .productTable {
  width: 100%;
  table-layout: fixed;
  margin: 0;
}

.product .productTable tr th:first-child,
.product .productTable tr td:first-child {
  width: 20%;
  padding: 1em;
  font-size: 16px;
  border-bottom: 1px solid #ebe9e5;
}

.product .productTable tr th {
  background-color: #fff;
  color: #111;
}

.product .productTable tr th,
.product .productTable tr td {
  width: auto;
  padding: 1em;
  font-size: 16px;
  line-height: 1;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #ebe9e5;
  background-color: #fff;
}

.product .productTable tr td {
  text-align: center;
  border-bottom: 1px solid #ebe9e5;
  border-left: 1px solid #ebe9e5;
}

.product .productTable .productWrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 100%;
}

.product .productTable .productWrap .thumb {
  width: 45%;
  height: auto;
  padding: 0 5% 0 0;
}

.product .productTable .productWrap .thumb img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}

.product .productTable .productWrap .btnWrap p {
  margin-bottom: 0;
  font-size: 15px;
}

/* ===== 補助金の対象工事 ===== */
.subsidys {
  margin-bottom: 60px;
}

.subsidys .secTtl.fullWidth {
  margin-bottom: 0;
}

.subsidys .subsidyInner {
  padding: 60px 20px;
}

.subsidys .subsidyMenu {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  gap: 20px;
  max-width: 1000px;
  margin-inline: auto;
}

.subsidys .subsidyMenu li {
  width: 32%;
  margin: 0;
  border: 2px solid #ebe9e5;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
}

.subsidys .subsidyMenu li::before,
.subsidys .subsidyMenu li::after {
  content: none;
}

.subsidys .subsidyMenu li h3 {
  margin: 0;
  padding: 0;
  color: #111;
  box-shadow: none;
  border: none;
  background: none;
  line-height: 1.4;
  font-size: 18px;
  text-align: center;
}

.subsidys .subsidyMenu .subsidyPic {
  margin-top: 20px;
  text-align: center;
}

.subsidys .subsidyMenu .subsidyPic img {
  max-width: 100%;
  max-height: 218px;
  height: auto;
}

/* ===== 窓といっしょにリフォームしてもっと快適にCSS ===== */
.otherMenus {
  margin-bottom: 60px;
}

.otherMenus .otherMenu {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  gap: 20px;
  max-width: 1200px;
  margin-inline: auto;
}

.otherMenus .otherMenu li {
  width: 23%;
  margin: 0;
  border: 2px solid #3b4391;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 0 10px 10px;
  text-align: center;
}

.otherMenus .otherMenu li::before,
.otherMenus .otherMenu li::after {
  content: none;
}

.otherMenus .otherMenu .otherMenufirst {
  width: 100%;
  padding: 0 20px 10px;
  text-align: left;
}

.otherMenus .otherMenu .otherMenufirst h3 {
  margin: 0 -20px 15px;
}

.otherMenus .otherMenu h3 {
  margin: 0 -10px 15px;
  background: #3b4391;
  box-shadow: none;
  font-size: 20px;
  text-align: center;
}

.otherMenus .otherMenu .otherRow {
  display: flex;
}

.otherMenus .otherMenu .otherPic {
  width: 220px;
  margin-inline: auto;
}

.otherMenus .otherMenu .otherPic img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.otherMenus .otherMenu .otherPrice {
  color: #c1272d;
  font-size: 32px;
  font-weight: bold;
}

.otherMenus .otherMenu .otherPrice span {
  font-size: 20px;
}

.otherMenus .btnWrap {
  margin: 40px 0 0;
  text-align: center;
}

.otherMenus .btnWrap .btn {
  min-width: 308px;
  margin: 0;
}

.otherMenus .btnWrap .btn a {
  text-decoration: none;
}

/* ===== リペアウィズの施工事例 ===== */
.achievement {
  position: relative;
}

.main .achievementList {
  padding: 60px 20px;
}

.achievement h2.fullWidth {
  margin-bottom: 0;
}

.achievementSlider {
  width: 1200px;
  margin: 0 auto;
}

.main .archiveList .achievementItem {
  width: 375px;
  margin-bottom: 0;
}

.main .archiveList article > a {
  display: block;
  border-color: #ebe9e5;
}

.achievementItem .more {
  background-color: #111;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  padding: 5px 0;
}

.achievementList .btnWrap {
  margin: 30px 0 0;
  text-align: center;
}

.achievementList .btnWrap .btn {
  margin: 0;
}

.main .formArea h2 {
  font-size: 30px;
}
