@charset "UTF-8";

/**
 * index.css
 *
 * #layout
 *
 *
*/

/* ==========================================================================
   # 全体
   ========================================================================== */

/* カラム分け */

.l-contents {
  margin: 0 auto;
  margin-top: 80px;
  margin-bottom: 170px;
  width: 1000px;
}


.main-col {
  float: left;
  width: 740px;
}

.side-col {
  float: right;
  width: 220px;
}


/* ==========================================================================
   # CTA
   ========================================================================== */


.cta-img {
  margin-left: -23px;
}


.cta-solution01 {
  margin: -60px 0 -26px 0;
}

.cta-solution02 {
  margin: -110px 0 0 -2px;
}

.cta-solution03 {
  position: relative;
  margin: -110px 0 0 -2px;
}

/* 位置調整　*/

.l-relief-cta {
  border: 2px solid #1458bf;
  background: #fff7db;
  margin-bottom: -50px;
}


.l-price02-cta {
  margin-bottom: -50px;
  border: 2px solid #1458bf;
  background: #fff7db;
}

/* 0800切替用スタイル */
.l-cta {
  position: relative;
}

.l-cta .js-set-tel {
  position: absolute;
  top: 129px;
  left: 172px;
  display: block;
  /* width: 244px; */
  color: #1a2e5b;
  font-size: 49px;
  font-family: Helvetica, "Helvetica Neue";
  font-weight: 600;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

/* ==========================================================================
   # ヘッダー（top専用）
   ========================================================================== */

.l-header {
  margin: 0 auto;
  width: 1000px;
  height: 90px;
}

.header-logo {
  float: left;
  margin-top: 12px;
}

.header-tel {
  float: right;
  width: 590px;
}

.header-tel-img {
  position: relative;
  display: inline-block;
  margin-left: 54px;
}

/* 0800切替用スタイル */
.header-tel-img .js-set-tel {
  position: absolute;
  bottom: 11px;
  left: 62px;
  display: block;
  /* width: 244px; */
  color: #1a2e5b;
  font-size: 37px;
  font-family: Helvetica, "Helvetica Neue";
  font-weight: 600;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

.header-quality {
  margin-bottom: 6px;
}



/* ==========================================================================
   # メインイメージ
   ========================================================================== */

.mainimg {
  min-width: 1200px;
  overflow: hidden;
}

/* テロップ */

@keyframes scroll-telop {
  0% {
    transform: translateX(100%)
  }

  100% {
    transform: translateX(-100%)
  }
}

.l-mainimg-telop {
  position: relative;
  background: #1458bf;
  z-index: 4;
}

.mainimg-telop {
  position: relative;
  margin: 0 auto;
  width: 1000px;
}

.mainimage-telop-txt {
  display: inline-block;
  width: 480px;
  padding: 15px;
  white-space: nowrap;
  animation: scroll-telop 10s linear infinite;
}

.mainimage-telop-inner {
  width: 50%;
  font-size: 16px;
  line-height: 1;
  margin-left: 130px;
  color: #fff;
  overflow: hidden;
}

.mainimage-telop-point {
  color: #fce100;
}

.mainimage-telop-fixed {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  width: 124px;
  height: 30px;
  padding: 7px 5px 8px 13px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: #ed5121;
  border-radius: 10px;
}

/* FV */

.mainimg-fv {
  position: relative;
  z-index: 2;
  margin: -1px 0 14px 0;
  background: url(../images/top/mainimg/bg_fv.jpg) top center no-repeat;
}

.mainimg-fv-img {
  display: block;
  margin: 0 auto;
}

/* CTA */

.l-mainimg-cta {
  position: relative;
  padding: 140px 0 5px 0;
  margin-top: -50px;
  background: #1458bf;
}

.mainimg_small {
  position: absolute;
  top: -4px;
  left: 8px;
}

.l-mainimg-cta:before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 1400px;
  height: 83px;
  background: url(../images/top/mainimg/bg_shape.png);
  overflow: hidden;
}

.mainimg-star {
  position: absolute;
  top: -60px;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 4;
}

.mainimg-cta {
  display: block;
  margin: 0 auto;
}

.mainimg-cta-wrap {
  position: relative;
  width: 1044px;
  margin: 0 auto;
}

.l-mainimg-cta-txt {
  position: absolute;
  bottom: 63px;
  left: 106px;
  font-size: 14px;
  font-weight: 600;
  z-index: 10;
}

/* 0800切替用スタイル */
.mainimg-cta-wrap .js-set-tel {
  position: absolute;
  top: 90px;
  left: 125px;
  display: block;
  /* width: 244px; */
  color: #1a2e5b;
  font-size: 77px;
  font-family: Helvetica, "Helvetica Neue";
  font-weight: 600;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

/* ==========================================================================
   # どんなトラブルでも即日解決いたします！
   ========================================================================== */

/* タイトル */

.offer {
  position: relative;
  margin-bottom: 80px;
  background: #fff;
  border: 5px solid #1458bf;
  border-radius: 10px;
}

.offer-ttl {
  margin-bottom: 28px;
  background: #fff9e3;
  border-bottom: 1px solid #1458bf;
  border-radius: 10px 10px 0 0;
}

.offer-ttl-pic {
  position: absolute;
  top: -15px;
  left: -27px;
  border-radius: 50%;
}

.offer-ttl-txt {
  margin: 20px 64px 27px 115px
}

.offer-contents-price {
  margin: 0 0 35px -24px;
}

.offer-contents-card {
  margin-left: 34px;
  margin-bottom: 46px;
}

.offer-contents-item {
  display: block;
  margin: 0 auto;
  margin-bottom: 60px
}

/* ==========================================================================
   # 私たちに何でもお任せください！
   ========================================================================== */

.price {
  margin-bottom: -170px;
  padding-bottom: 160px;
  background: #f7dcb5 url(../images/parts/bg_wood.jpg);
  border-radius: 30px 30px 0 0;
}

.price-ttl {
  position: relative;
  padding: 25px 6px 7px 30px;
  margin-bottom: 23px;
  background: #1458bf;
  border-radius: 30px 30px 0 0;
}

.price-ttl:after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 80px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 13px 0 13px;
  border-color: #244fa4 transparent transparent transparent;
}

.price-cancel {
  display: block;
  margin: 0 auto;
  margin-bottom: 25px;
}

.l-price-box {
  padding: 0 25px 0 25px;
}

.price-box {
  background: #fff;
  padding-bottom: 36px;
  border-radius: 10px;
  border: 14px solid #e9f2ff;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #1458bf;
}

.price-box:last-child {
  padding-bottom: 45px;
}

.l-price-box + .l-price-box {
  margin-top: 25px;
}

.price-box-img {
  margin: -34px 0 0 -28px;
}

.l-price-box-txt {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  margin-top: -84px;
  width: 590px;
  background-color: #fff9e3;
  border: 1px solid #ed5121;
}

.price-box-txt-wrap {
  position: relative;
  padding: 36px 0 16px 190px;
}

.price-box-illust {
  position: absolute;
  left: 35px;
  top: 24px;
}

.price-box-txt {
  width: 360px;
  font-size: 18px;
  line-height: 1.667;
}

.price-before-after {
  margin: 0 14px 35px -17px;
}

/* ==========================================================================
   # 速さと安心をとことん追求した5つ星品質のガラス屋さんです！
   ========================================================================== */

.quality {
  position: relative;
  margin: 0 auto;
  margin-top: 80px;
  margin-bottom: 105px;
  padding: 24px;
  width: 700px;
  background: #a3835e;
  border: 6px solid #836133;
  border-radius: 30px;
}

.quality-main {
  margin: -40px 0 0 -11px;
  padding-bottom: 14px;
}

.quality-45min {
  display: block;
  margin: 0 auto;
  margin-top: -8px;
}

.quality-ttl {
  background: #fff;
}

/* ==========================================================================
   #speed/relief　共通　全体
   ========================================================================== */

.speed {
  position: relative;
  padding-bottom: 0;
  background: #1458bf;
  border-radius: 30px 30px 0 0;
}

.relief {
  padding-bottom: 0;
  background: #1458bf;
  padding-bottom: 20px;
}

.l-speed-contents,
.l-relief-contents {
  margin: 0 auto;
  width: 700px;
  background: #fff;
  border-radius: 10px;
}

.secret-p {
  font-size: 18px;
  letter-spacing: -0.04em;
  line-height: 2;
}

/* # 速さの秘密とは？
   ----------------------------------------------------------------- */

.speed-ttl {
  margin: -15px 0 -2px 44px;
}

.speed01,
.speed02 {
  position: relative;
}

.l-speed-contents {
  padding-bottom: 50px;
}

.l-speed-box-txt {
  position: relative;
  margin: 0 auto;
  padding: 38px 70px 30px 155px;
  width: 620px;
  background-color: #fff9e3;
  border: 2px solid #ed5121;
}

.speed-box-txt {
  width: 420px;
  font-size: 20px;
  line-height: 1.8;
}

.speed-20min {
  position: absolute;
  top: 10px;
  left: 15px;
}

.speed-fly {
  position: absolute;
  top: -45px;
  right: -35px;
}


/* 01 */

.speed01-ttl {
  margin: 28px 0 36px -18px;
}

.speed01-txt {
  float: left;
}

.speed01-p {
  margin: 0 0 34px 50px;
  width: 420px;
  text-align: justify;
}

.speed01-img {
  float: right;
  margin: 40px 40px 0 0;
}

/* 02 */

.speed02-ttl {
  margin: 41px 40px 30px 0;
}

.speed02-txt {
  float: right;
  margin-bottom: 35px
}

.speed02-p {
  width: 420px;
  text-align: justify;
}

.speed02-img {
  float: left;
  margin: 50px 0 40px 40px;
}


/* # 安心の秘密とは？
   ----------------------------------------------------------------- */

.relief-ttl {
  margin: 46px 17px 5px 39px;
}

.relief_small {
  margin: 15px 0 0 40px;
}

.l-relief-box-txt {
  position: relative;
  margin: 0 auto;
  padding: 38px 70px 30px 155px;
  width: 620px;
  background-color: #fff9e3;
  border: 2px solid #ed5121;
}

.relief-illust-staff {
  position: absolute;
  top: 66px;
  right: -30px;
}

.relief-box-txt {
  width: 400px;
  font-size: 20px;
  line-height: 1.8;
}

.relief-item {
  position: absolute;
  top: 5px;
  left: 20px;
}

.speed-15min {
  position: absolute;
  top: 10px;
  left: 15px;
}

.l-relief-box-txt-02 {
  margin: 0 auto;
  padding: 30px 30px 30px 30px;
  width: 620px;
  background-color: #fff9e3;
  border: 2px solid #ed5121;
}

.relief-box-txt-02 {
  width: 540px;
  margin: 0 20px 25px 10px;
  font-size: 20px;
  line-height: 1.8;
}

/* 01 */

.relief01-ttl {
  margin: 57px 0 31px 49px;
}

.relief01-txt {
  float: left;
}

.relief01-p {
  margin: 0 0 36px 49px;
  width: 400px;
  text-align: justify;
}

.relief01-img {
  float: right;
  margin: 55px 35px 0 0;
}

/* 02 */

.relief02-ttl {
  margin: 59px 82px 30px 0;
}

.relief02-txt {
  float: right;
}

.relief02-p {
  margin: 0 50px 42px 0;
  width: 420px;
  text-align: justify;
}

.relief02-img {
  float: left;
  margin: 40px 0 0 40px;
}

/* 03 */

.relief03-ttl {
  margin: 51px 0 30px 50px;
}

.relief03-txt {
  float: left;
}

.relief03-p {
  margin: 0 0 100px 50px;
  width: 400px;
  text-align: justify;
}

.relief03-img {
  float: right;
  margin: 43px 40px 0 0;
}



/* ==========================================================================
   #最新の施工事例をご紹介
   ========================================================================== */

.ex {
  position: relative;
  margin-top: 96px;
  padding: 50px 25px 25px 30px;
  background: #a3835e;
  border: 6px solid #836133;
  border-radius: 30px;
}

.ex-ttl {
  position: absolute;
  top: -15px;
  left: 4px;
}

.l-ex-box {
  padding: 165px 30px 50px 30px;
  background: #fff;
}

.ex-box-date {
  float: left;
}

.ex-box-img {
  float: right;
}

.ex-box-bottom {
  position: relative;
  padding: 40px 40px 40px 130px;
  background: #fff9e3;
}

.ex-box-staff {
  position: absolute;
  top: 25px;
  left: 30px;
  border-radius: 50%;
}

.ex-box-p {
  font-size: 18px;
}


.ex-box {
  margin-bottom: 30px;
  border: 2px solid #b8a04c;
}

.ex-box:nth-last-child(2) {
  margin-bottom: 40px;
}

.ex-box-top {
  padding: 30px;
}

.js-txt-open {
  font-size: 16px;
  color: #1458bf;
  text-decoration: underline;
}

/* date内 */

.ex-box-day {
  font-size: 20px;
  line-height: 1.6;
  color: #888;
}

.ex-box-ttl {
  margin: 15px 0 15px 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: underline;
}

.ex-box-ttl02 {
  width: 285px;
}

.ex-box-place {
  font-size: 18px;
  line-height: 1.667;
}

.open-style {
  cursor: pointer;
}

/* その他の施工事例 */

.ex-other {
  text-align: center;
}

.ex-other-txt {
  margin: 0 auto;
  margin-bottom: 20px;
  width: 560px;
}

.ex-other-ttl {
  float: left;
  font-size: 20px;
  font-weight: 600;
}

.ex-other-day {
  float: right;
  font-size: 18px;
  line-height: 1.6;
  color: #888;
}


/* ==========================================================================
   #よくある質問
   ========================================================================== */

.faq {
  padding-bottom: 120px;
  background-color: #fff9e3;
}

.faq-ttl {
  margin: 0 auto;
  margin-top: -30px;
  padding-top: 65px;
}

.faq-contents-wrap {
  margin: 0 auto;
  width: 660px;
}

.faq-ttl-img {
  margin-left: 35px;
}

.faq-contents-wrap {
  width: 660px;
  background: #fff;
  border: 1px solid #443309;
  border-radius: 5px;
}

/* 質問内部 */

.faq-second-ttl01 {
  position: relative;
  background: #fdf753;
  padding: 22px 0 20px 70px;
  border-radius: 5px 5px 0 0;
}

.faq-second-ttl02 {
  position: relative;
  background: #fdf753;
  padding: 22px 0 20px 70px;
}

.ico-faq {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 27px;
}

.faq-contents-txt {
  padding: 35px 35px 40px 35px;
  font-size: 18px;
  line-height: 1.889;
}

.faq-small {
  position: relative;
  padding-left: 25px;
  margin-top: 40px;
  font-size: 14px;
  color: #666666;
  line-height: 1.714;
}

.faq-small:before {
  content: "※";
  position: absolute;
  top: -2px;
  left: 0;
}

.faq-btn {
  margin: 0 auto;
  text-align: center;
  padding: 15px 20px 15px 20px;
  margin-bottom: 40px;
  width: 180px;
  color: #1458bf;
  font-size: 14px;
  background: #dff0ff;
  border-radius: 25px;
  cursor: pointer;
}

.js-faq-more-block {
  display: none;
}


/* ==========================================================================
   #料金の目安
   ========================================================================== */

.price02 {
  position: relative;
  width: 740px;
  margin-top: -80px;
  padding: 135px 20px 20px 20px;
  background-color: #1458bf;
  border-radius: 40px 40px 0px 0px;
}

.price02-ttl-img {
  position: absolute;
  top: 30px;
  left: 35px;
}

.price02-img {
  display: block;
}

.price02-contents {
  padding-bottom: 90px;
  background-color: #fff;
  border-radius: 10px;
}

.price02-mainimg {
  padding-top: 40px;
  margin: 0 0 49px -40px;
}

.price02-coupon {
  margin: 0 auto;
  margin-bottom: 40px;
}

.price02-place {
  position: relative;
  margin: 0 auto;
  z-index: 3;
}


/* ==========================================================================
   #お客様の声をご紹介
   ========================================================================== */

.voice {
  position: relative;
  margin-top: 76px;
  padding: 210px 0 25px 0;
  background-image: url(../images/parts/bg_wood.jpg);
  border-radius: 10px;
}

.voice-ttl {}

.voice-ttl-img {
  display: block;
  position: absolute;
  top: 25px;
  left: 40px;
}

.l-voice-contents {
  margin: 0 auto;
  width: 690px;
  background: #fff;
  border: 16px solid #fdf7dc;
  box-shadow: 0 0 0 2px #523819;
  border-radius: 10px;
}

/* お客様の声小ブロック */

.voice-box {
  position: relative;
  width: 590px;
  margin: 0 auto;
  padding: 40px 0 40px 0;
}

.voice-box-ico {
  position: absolute;
  top: 30px;
  right: -68px;
}

.voice-box-img {
  float: left;
  width: 180px;
}

.voice-box-day {
  display: table-cell;
}


.voice-box + .voice-box {
  border-top: 1px dotted #000;
}

/* お客様の声右ブロック */

.voice-box-comment {
  width: 380px;
  font-size: 14px;
  line-height: 1.714;
  padding-top: 8px;
}

.voice-box-txt {
  float: right;
  width: 384px;
}

.l-voice-box-date {
  display: table;
  width: 390px;
  margin: 9px 0 8px 0;
}

.voice-box-people {
  display: table-cell;
  font-size: 18px;
  color: #012557;
}

.voice-box-day {
  font-size: 16px;
  color: #888;
}

.voice-cox-ttl {
  margin-bottom: 30px;
  font-size: 28px;
  color: #012557;
  line-height: 1.714;
  text-decoration: underline;
}


/* ==========================================================================
   #サイド
   ========================================================================== */


/* # サイド共通
   ----------------------------------------------------------------- */

.side-ttl {
  position: relative;
  text-align: center;
  padding: 10px 0 10px 0;
  font-size: 15px;
  background: #fff9e3;
  border-radius: 3px 3px 0 0;
}


/* # ガラストラブル解決までの流れ
   ----------------------------------------------------------------- */


.sideflow {
  padding-bottom: 18px;
  margin-bottom: 30px;
  background-image: url(../images/parts/bg_wood02.jpg);
  border-radius: 10px 10px 5px 5px;
}

.l-sideflow-main {
  position: relative;
  padding: 104px 0 0 0;
}

.sideflow-ttl-img {
  display: block;
}

.sideflow-ttl {
  padding: 13px 22px 13px 22px;
  background: #1458bf;
  border-radius: 10px 10px 0 0;
}

.sideflow-start {
  position: absolute;
  top: 7px;
  left: -15px;
  z-index: 2;
}

.sideflow-list {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0;
  padding: 20px 0 45px 0;
  width: 206px;
  list-style: none;
  background: #fdf8e7;
  border-radius: 10px;
}

.sideflow-arrow {
  position: absolute;
  top: -35px;
  right: 5px;
}

.sideflow-item {
  position: relative;
  margin-bottom: 35px;
}

.sideflow-number {
  position: absolute;
  top: 5px;
  left: 0px;
  width: 32px;
  height: 34px;
  padding: 8px 0 0;
  text-align: center;
  color: #1050d2;
  font-family: Helvetica;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  background-color: #fdf753;
  border-radius: 0 17px 17px 0;
}

.sideflow-txt {
  margin-bottom: 10px;
  padding-left: 45px;
  color: #222;
  font-size: 15px;
  line-height: 1.467;
  font-weight: 500;
  text-decoration: underline;
}

.sideflow-item:after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 9px 0 9px;
  border-color: #1458bf transparent transparent transparent;
}

.sideflow-goal {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto;
  margin-top: -68px;
}

/* リスト（img） */

.sideflow-list01 {
  margin: -15px -5px 0 18px;
}

.sideflow-list02 {
  margin: 0 0 -25px 8px;
}

.sideflow-list03 {
  margin-left: 18px;
}

.sideflow-list04 {
  margin: 0 -3px -20px 18px;
}

.sideflow-list05 {
  margin: 0 18px -30px -6px;
}

/* #施工事例のご紹介
   ----------------------------------------------------------------- */

.sideex {
  background: #fff;
  margin-bottom: 30px;
  border: 2px solid #b8a04c;
  border-radius: 3px;
}

.sideex-ttl-img {
  position: absolute;
  top: -5px;
  left: 5px;
}

.l-sideex-box {
  padding: 20px 20px 0 20px;
}

.sideex-box {
  margin-bottom: 30px;
}

.sideex-box-day {
  font-size: 13px;
  color: #999;
}

.sideex-pic {
  margin-bottom: 5px;
}

.sideex-box-ttl {
  font-size: 18px;
  font-weight: 600;
  color: #10192e;
  margin-bottom: 4px;
  text-decoration: underline;
}

.sideex-box-bottom {
  position: relative;
  width: 180px;
}

.sideex-bottom-staff {
  position: absolute;
  top: -5px;
  right: 0;
  border-radius: 50%;
}

.sideex-bottom-txt {
  display: table-cell;
  font-size: 14px;
  color: #10192e;
  line-height: 1.429;
}


/* # よくある質問
   ----------------------------------------------------------------- */

.sidefaq {
  background: #fff;
  margin-bottom: 30px;
  border: 2px solid #b8a04c;
  border-radius: 3px;
}

.sidefaq-contents {
  position: relative;
}

.sidefaq-contents a {
  text-decoration: none;
  color: #222;
}

.sidefaq-ico {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 15px;
}

.sidefaq-txt {
  width: 200px;
  padding: 15px 0 10px 50px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.385;
  text-decoration: underline;
}

.sidefaq-contents + .sidefaq-contents {
  border-top: 1px solid #eee8d7;
}

.sidefaq-btn {
  padding: 20px 0 20px 0;
  text-align: center;
  color: #3b81ca;
  font-size: 12px;
  border-top: 1px solid #eee8d7;
  text-decoration: underline;
}

#faq-more {
  text-decoration: none;
}


/* #当サイトについて
   ----------------------------------------------------------------- */

.about {
  background: #fff;
  margin-bottom: 30px;
  border: 2px solid #b8a04c;
  border-radius: 3px;
}

.about-list {
  padding: 20px 0 20px 20px;
}

.about-list-item a {
  color: #333;
  text-decoration: none;
}

.about-list-item {
  margin-bottom: 10px;
  font-size: 13px;
}

.about-list-item:before {
  content: "・";
  color: #e26300;
  font-size: 15px;
  font-weight: 600;
  margin-right: 4px;
}