@charset "utf-8";

/* 共通 */
body {
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  font-size: 16px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  color: #3B4043;
}
a:link, 
a:visited, 
a:active {
  color: #3B4043;
  text-decoration: none;
}
.title-text {
  padding-bottom: 20px;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 5px;
  background-image: linear-gradient(90deg, #F3E20E 0 20%, #DED028 20%);
  background-repeat: no-repeat;
  background-size: 100% 15%;
  background-position: bottom
}

.text-m {
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.text-b {
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
  font-weight: 600;
  font-style: normal;
}

/* PC/スマホで表示/非表示を切り替える */
.pc { display: block !important; }
.sp { display: none !important; }

/* トップ全体 */
.top {
  padding: 95px 0px 0px 0px;
  text-align: center;
}

/* トップイメージ */
/* .top-image img {
  width: 100%;
} */
.img-frame {
  position: relative;
  width: 70%;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
}
.img-frame {
  width: 100%;
  height: 200px;
  height: 750px;
  z-index: -999;
}
.img-01, .img-02, .img-03, .img-04, .img-02-sp, .img-03-sp , .img-04-sp {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.img-01 {
  background-image: url('../img/top-image.png');
  animation: slide-animation-01 20s infinite;
  background-position: center;
}
.img-02 {
  background-image: url('../img/top-img2.png');
  animation: slide-animation-02 20s infinite;
  background-position: center;
}
.img-03 {
  background-image: url('../img/top-img3.png');
  animation: slide-animation-03 20s infinite;
  background-position: center;
}
.img-04 {
  background-image: url('../img/top-img4.png');
  animation: slide-animation-04 20s infinite;
  background-position: center;
}
.img-02-sp {
  background-image: url('../img/top-img2-sp.png');
  animation: slide-animation-02 20s infinite;
  background-position: center;
}
.img-03-sp {
  background-image: url('../img/top-img3-sp.png');
  animation: slide-animation-03 20s infinite;
  background-position: center;
}
.img-04-sp {
  background-image: url('../img/top-img4-sp.png');
  animation: slide-animation-04 20s infinite;
  background-position: center;
}

@keyframes slide-animation-01 {
  0% {opacity: 0; transform: scale(1.0);}
  25% {opacity: 1; transform: scale(1.15);}
  50% {opacity: 0; transform: scale(1.15);}
  75% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes slide-animation-02 {
  0% {opacity: 0;}
  25% {opacity: 0; transform: scale(1.1);}
  50% {opacity: 1; transform: scale(1.0);}
  75% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes slide-animation-03 {
  0% {opacity: 0;}
  25% {opacity: 0;}
  50% {opacity: 0; transform: scale(1.0);}
  75% {opacity: 1; transform: scale(1.1);}
  100% {opacity: 0; transform: scale(1.1);}
}
@keyframes slide-animation-04 {
  0% {opacity: 0;}
  25% {opacity: 0;}
  50% {opacity: 0;}
  75% {opacity: 0; transform: scale(1.1);}
  100% {opacity: 1; transform: scale(1.0);}
}


.img-frame-text {
  position: absolute;
  width: 100%;
  text-align: left;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.img-frame-text h1 {
  /* color: #30A2CF; */
  font-size: 30pt;
  /* text-shadow: -2px -2px 3px white, 2px 2px 3px white; */
  text-shadow    : 
  2px  2px 1px #ffffff,
 -2px  2px 1px #ffffff,
  2px -2px 1px #ffffff,
 -2px -2px 1px #ffffff,
  2px  0px 1px #ffffff,
  0px  2px 1px #ffffff,
 -2px  0px 1px #ffffff,
  0px -2px 1px #ffffff;        /* 文字の影 */

  font-family: "mizolet", sans-serif;
  font-weight: 400;
  font-style: normal;
}



/* トップのアピール */
.top-appeal {
  padding: 80px 20px;
}
.top-appeal-title {
  font-size: 35px;
  font-weight: bold;
  letter-spacing: 5px;
  color: #DED028;
  letter-spacing: 10px;
}
.top-appeal-image-01 img{
  padding: 0px 20px 0px 0px;
  width: 120px;
}
.top-appeal-text-01 {
  font-size: 20px;
}
.top-appeal-text-02 {
  flex-basis: 50%;;
  /* font-size: 20px;
  font-weight: bold;
  text-align: left;
  color:#4a4a4a; */
  /* -webkit-text-stroke: 3px #DED028;
  paint-order: stroke;
  text-shadow: 1px 1px 2px #4a4a4a; */
}
.top-appeal-text-02  img {
  width: 100%;
}
.top-appeal-text-03 {
  margin-top: 100px;
  font-size: 25px;
}
.top-appeal-text-03 img {
  vertical-align: middle;
  width: 50px;
}
.top-appeal-list {
  display: flex;
  justify-content: center;
  padding: 0px 20px;
}
.top-appeal ul {
  text-align: left;
  list-style: none;
  margin: 0;
  padding: 0;
  list-style-position: inside;
}
.top-appeal ul li {
  padding-left: 1em;
  text-indent: -1em;
}
.top-appeal li i {
  padding: 10px 20px 10px 0px;
  color: darkorange;
  vertical-align: middle;
}
.top-appeal-container-01 {
  padding: 40px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .top-appeal-container-01 img {
  padding: 0px 20px 0px 0px;
  width: 120px;
} */
.circle {	
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  line-height: 1em;
  background: #30A2CF;
  margin: 0px 20px;
}
.circle span {
  color: #FFF;
  font-size: 20px;
  line-height: 2em;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :200px;
  text-align:center;
}
.top-appeal-container-02 {
  padding: 20px 0px;
  display: flex;
  justify-content: center;
}
.top-appeal-container-02 table {
  width: 800px;
  border-collapse: collapse;
}
.top-appeal-container-02 th {
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
.top-appeal-container-02 td {
  padding: 5px;
  text-align: left;
}
.top-appeal-th-back {
  background-color: #F3E20E;
  border-radius: 10px;
  padding: 7px 40px;
  font-size: 20px;
}
.top-appeal-star {
  color: #EE5C37;
  font-size: 28px;
  font-weight: bold;
}
.top-appeal-emphasis {
  color: #EE5C37;
  font-weight: bold;
}
.top-appeal-container-03 {
  padding: 20px 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0px auto;
  width: 760px;
}
.top-appeal-container-03-item {
  flex-basis: 230px;
  padding: 20px 10px; 
}
.top-appeal-container-03-item-top {
  background-color: whitesmoke;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2);
  padding-bottom: 20px;
}
.top-appeal-container-03-item-bottom {
  padding: 20px 0px 0px 0px;
  text-align: left;
  line-height: 1.3em;
}
.top-appeal-container-03-item img {
  width: 100%;
}
.top-appeal-container-03-item-title {
  padding: 20px 0px;
}
.top-appeal-container-03-item-stararea {
  background-color: white;
  border-radius: 10px;
  margin: 0px 20px;
}

/* トップのご契約から工事完了までの流れ */
.top-flow {
  padding: 80px 20px;
  background-color: whitesmoke;
}
.top-flow-container {
  text-align: left;
  display: flex;
  justify-content: center;
  padding: 40px 0px;
}
.top-flow-item-step {
  padding: 10px 0px;
}
.top-flow-item-step img {
  padding-right: 10px;
  vertical-align: middle;
  width: 70px;
}
.top-flow-item-step h3 {
  border-bottom: 1px gray solid;
  text-shadow: 1px 1px 1px gray;
  font-size: 24px;
}
.top-flow-item-step-01 {
  color: #F3E20E;
}
.top-flow-item-step-02 {
  color: #30A2CF;  
}
.top-flow-item-step-03 {
  color: #F88330;  
}

/* 塗装メニュー */
.top-tosoumenu {
  display: flex;
  justify-content: space-between;
}

/*テーブル*/
.top-menu-table  {
  margin-top: 50px;
}
.top-menu-table table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 60%;
  table-layout: fixed;
}
.top-menu-table tr {
  background-color: #fff;
  border: 1px solid #bbb;
  padding: .35em;
}
.top-menu-table th, 
.top-menu-table td {
  padding: 1em 10px 1em 1em;
  border-right: 1px solid #bbb;
}
.top-menu-table th {
  font-size: 15px;
}
.top-menu-table thead tr{
  background-color: #eee;
}
.txt{
   text-align: left;
   font-size: 15px;
}
.price{
   text-align: right;
}
.gold {
  background-color: #CFAF58;
}
.silver {
  background-color: #989898;
}
.gray {
  background-color: #CECECE;
}


/* トップのお問い合わせ */
.top-contact {
  padding: 80px 20px;
  text-align: center;
}
.top-contact img{
  width: 60%;
}

/* トップの施工事例 */
.top-construction-example {
  padding: 80px 20px;
  text-align: center;
}
.top-construction-example-container img {
  width: 60%;
}
.top-construction-example-text {
  padding: 40px;
}
.top-construction-example-links {
  padding-top: 80px;
}
.top-construction-example-links a {
  padding: 20px 60px;
  border: 1px gray solid;
  transition: 0.3s ease-in-out;
}
.top-construction-example-links a:hover {
  background-color: lightgray; 
}
.top-construction-example-links a:after {
  content: '>';
  position: absolute;
  padding-left: 20px;
}
.top-construction-example-links i {
  padding-left: 20px;
}

/* トップの会社概要 */
.top-company-overview {
  padding: 80px 20px;
  background-color: whitesmoke;
}
.top-company-overview-container {
  display: flex;
  justify-content: center;
  padding: 80px;
}
.top-company-overview table {
  width: 750px;
  border-collapse: collapse;
  font-size: 15px;
}
.top-company-overview th {
  padding: 20px 40px;
  text-align: center;
  background-color: gray;
  color: white;
  font-weight: normal;
  border: 2px silver solid;
  white-space: nowrap;
}
.top-company-overview td {
  padding: 20px 20px;
  border: 2px silver solid;
  text-align: left;
  background-color: #FFF;
}

/* トップの代表挨拶 */
.top-representative-greeting {
  padding: 0px 100px 100px 100px;
  background-color: whitesmoke;
  display: flex;
  justify-content: center;
  text-align: left;
}
.top-representative-greeting h2 {
  margin: 0px;
}
.top-representative-greeting-img1 {
  width: 300px;
}
.top-representative-greeting h3 {
  margin: 0px;
}
.top-representative-greeting-img2 {
  width: 600px;
}

/* 施工事例 */
.works {
  padding: 200px 20px 100px 20px;
  background-color: whitesmoke;
  text-align: center;
}
.works-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;
}
.works-item {
  flex-basis: 45%;
  padding: 5px 0px;
  margin: 30px 0px 0px 0px;
  /* border-top: 2px gray solid; */
}
.works-item-title {
  border-top: 1px gray solid;
  border-bottom: 1px gray solid;
  padding: 10px 0px;
  font-weight: bold;
}
.works-item-date {
  font-size: 14px;
  padding: 20px 0px;
}
.works-item-image {
  padding: 30px 20px;
}
.works-item-image img{
  width: 90%;
}
.works-item-point {
  text-align: left;
  padding: 0px 100px;
}
.works-item-point-title {
  font-weight: bold;
}
.works-item-point-body {
  padding: 20px;
  border: 1px gray solid;
  font-size: 14px;
}
.works-2 {
  margin-top: 100px;
}

/* お問い合わせ */
.contact {
  padding: 200px 20px 100px 20px;
  background-color: whitesmoke;
  text-align: center;
}
.contact-container {
  padding: 40px 0px;
  text-align: left;
  display: flex;
  justify-content: center;
}
/* .contact-text-02 {
  font-size: 16px;
} */
.contact-text-02 a{
  text-decoration: underline;
  color: #30A2CF;
}
.contact-text-03 {
  font-size: 12px;
}
.contact-text-04 {
  color: red;
}
.contact-required {
  color: red;
  padding-right: 5px;
}
.contact-item-block-01 {
  padding: 20px 0px;
}
.contact-item-block-02 {
  padding: 40px 0px;
  text-align: center;
}
.contact-item-label {
  font-size: 12px;
  padding-bottom: 10px;
}
.contact-privacy {
  font-size: 12px;
  width: 710px;
  height: 200px;
  overflow: scroll;
  border: 1px gray solid;
  padding: 10px;
  background-color: white;
}
.contact input[type=text] {
  font-size: 14px;
  padding: 10px 20px;
  width: 100%;
  border: none;
  box-sizing: border-box;
  background-color: white;
  border-radius: 0;
}
.contact textarea {
  font-size: 14px;
  line-height: 1.2em;
  padding: 10px 10px;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
}
.contact-submit {
  padding: 40px 0px;
}
.contact-submit a {
  padding: 20px 80px;
  font-weight: bold;
  border: 2px gray solid;
  transition: 0.3s ease-in-out;
}
.contact-submit a:hover {
  background-color: silver; 
}
.contact-submit a:after {
  content: '>';
  position: absolute;
  padding-left: 50px;
}
.contact-submit i {
  padding-left: 20px;
}
.contact-back {
  padding: 40px 0px;
  margin: 0px 20px;
}
.contact-back a {
  padding: 20px 80px;
  font-weight: bold;
  border: 2px gray solid;
  transition: 0.3s ease-in-out;
  background-color: white;
}
.contact-back a:hover {
  background-color: lightgray; 
}
.contact-back a:after {
  content: '>';
  position: absolute;
  padding-left: 50px;
}
.contact-back i {
  padding-left: 20px;
}
.contact-item-confirm table {
  width: 600px;
  border-collapse: collapse;
}
.contact-item-confirm th {
  padding: 10px;
  text-align: center;
  background-color: gray;
  color: white;
  font-weight: normal;
  border: 2px silver solid;
}
.contact-item-confirm td {
  padding: 10px;
  text-align: left;
  border: 2px silver solid;
}
.contact-tel div{
  font-size: 30px;
}
.contact-tel-item {
  margin-top: 30px;
}
.contact-tel-item i{
  margin-right: 5px;
}
.contact-tel-item span{
  padding: 15px 30px;
  background-color: #F3E20E;
  border-radius: 5px;
}


/* フッタ部 */
.footer-contact {
  padding: 80px 20px;
  background-color: lightyellow;  
  text-align: center;
}
.footer-contact img{
  width: 60%;
}
.footer-copyright {
  padding: 20px;
  text-align: center;
  color: white;
  background-color: silver;
}





@media screen and (max-width: 768px) {

  /* 全体 */
  body {
    font-size: 14px;
  }
  .title-text {
    font-size: 26px;
}
.top {
  padding: 0px 0px 0px 0px;
}

  /* PC/スマホで表示/非表示を切り替える */
  .pc { display: none !important; }
  .sp { display: block !important; }

  /* トップイメージ */
  .img-frame-text {
    width: 90%;
    top: 27%;
    left: 50%;
  }
  .img-frame-text h1 {
    font-size: 15pt;
    line-height: 1.5em;
  }

  /* トップのアピール */
  .top-appeal-title {
    text-align: left;
    font-size: 25px;
    letter-spacing: 5px;
  } 
  .top-appeal-text-01 {
    text-align: left;
    font-size: 18px;
  }
  .fa-2x {
    font-size: 1.5em;
  }
  .top-appeal li i {
    padding: 10px 10px 10px 0px;
  }
  .top-appeal-list {
    padding: 0px 10px;
  }
  .top-appeal-container-01 {
    display: block;
  }
  .top-appeal-container-02 th {
    padding: 5px 5px 2px 0px;
  }
  .top-appeal-container-02 td {
    padding: 5px;
  }
  .top-appeal-th-back {
    padding: 2px;
  }
  .top-appeal-text-03 {
    font-size: 16px;
  }
  .circle {	
    width: 110px;
    height: 110px;
    line-height: 0.5em;
    margin: 0px 0px;
  }
  .circle span {
    font-size: 13px;
    line-height: 1.5em;
    width :110px;
  }
  /*劣化度チェック*/
  .top-appeal-star {
    font-size: 13px;
  }
  .top-appeal-th-back {
    padding: 3px 10px;
    font-size: 14px;
  }
  .top-appeal-container-03 {
    padding: 0px 0px;
    justify-content: space-between;
    width: 100%;
  }
  .top-appeal-container-03-item {
    flex-basis: 43%;
    padding: 20px 5px;
  }
  .top-appeal-container-03-item-title {
    padding: 10px 0px;
}
.top-appeal-container-03-item-bottom {
  padding: 10px 0px 0px 0px;
}

  /*塗装メニュー*/
  .top-flow-item-step h3 {
    font-size: 15px;
  }
  .top-flow-item-step img {
    padding-right: 5px;
    width: 45px;
  } 
  .top-tosoumenu {
  flex-wrap: wrap;  
  }
  .top-tosoumenu {
    font-size: 10px;  
  }
  .top-menu-table table {
    width: 100%;
  }
  /*テーブル*/
  .top-menu-table {
    font-size: 10px;
  }
  .top-menu-table th {
    font-size: 10px;
  }
  .txt{
     font-size: 10px;
  }
  .top-menu-table th, .top-menu-table td {
    padding: 5px;
}

  /* トップのお問い合わせ */
  .top-contact img{
    width: 100%;
  }

  /* トップの施工事例 */
  .top-construction-example-text {
    padding: 20px;
    text-align: left;
  }
  .top-construction-example-container img {
    width: 100%;
  }

  /* トップの会社概要 */
  .top-company-overview-container {
    padding: 80px 0px 0px 0px;
  }
  .top-company-overview table {
    width: 100%;
  }
  .top-company-overview th {
    padding: 5px;
  }
  .top-company-overview td {
    padding: 5px;
  }

  /* トップの代表挨拶 */
  .top-representative-greeting {
    padding: 20px;
  }
  .top-representative-greeting-img1 {
    width: 250px;
  }
  .top-representative-greeting-img2 {
    width: 100%;
  }

  /* 施工事例 */
  .works {
    padding: 100px 20px;
  }
  .works-container {
    display: block;
  }
  .works-item-image {
    padding: 20px;
  }
  .works-item-image img {
    width: 100%;
  }
  .works-item-point {
    padding: 0px 20px;
  }

  /* フッター */
  .footer-contact img{
    width: 100%;
  }
  
  /* お問い合わせ */
  .contact {
    padding: 100px 20px;
  }
  .contact-container {
    padding: 20px 0px;
    display: block;
  }
  .contact-container-sp {
    text-align: center;
  }
  .contact-privacy {
    width: 90%;
  }
  .contact-item-confirm table {
    width: 100%;
  }
  .contact-item-confirm th {
    padding: 5px;
  }
  .contact-item-confirm td {
    padding: 5px;
  }

  .header-logo img{
    width: 200px;
    padding: 15px 0px 10px 5px!important;
  }
  .header-menu-right {
    padding: 0px 0px;
}
}

@media screen and (max-width: 375px) {
  /*トップのアピール*/
  .circle {	
    width: 100px;
    height: 100px;
    }
  .circle span {
    font-size: 11px;
    width :100px;
  }
}