/*
Theme Name: initializr
Theme URI: http://wordpress.local/
Author: Ottan
Author URI: http://wordpress.local/
Description: Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain:
*/
/* ===== FAQページ装飾 ===== */
.faq-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.faq-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.faq-intro {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 24px;
  color: #555;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: #ffffff;
  border-radius: 10px;
  padding: 16px 18px;
  border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.faq-question {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

.faq-q-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #f2f5ff;
  color: #3355aa;
  font-size: 13px;
  font-weight: 700;
}

.faq-answer p {
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 8px;
  color: #444;
}

.faq-answer ul {
  margin: 0 0 8px 1.2em;
  padding: 0;
}

.faq-answer li {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 2px;
}

.faq-area-title {
  font-size: 14px;
  font-weight: 700;
  margin: 10px 0 4px;
  color: #333;
}

/* CTAブロック */
.faq-cta {
  margin-top: 32px;
  padding: 20px 18px;
  border-radius: 10px;
  background: #f5faf5;
  border: 1px solid #d6f0d6;
  text-align: center;
}

.faq-cta h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.faq-cta p {
  font-size: 14px;
  margin-bottom: 10px;
}

/* LINEボタン */
.lineBtn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: #06c755;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.lineBtn:hover {
  opacity: 0.9;
}

/* スマホ調整 */
@media (max-width: 767px) {
  .faq-page {
    padding: 16px 12px 28px;
  }
  .faq-item {
    padding: 14px 14px;
  }
}
.company-rep-profile{
  margin-top: 32px;
  padding: 18px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

.company-rep-profile__title{
  font-size: 18px;
  margin-bottom: 8px;
}

.company-rep-profile__text{
  line-height: 1.7;
  margin-bottom: 12px;
}

.company-rep-profile__link{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #222;
  text-decoration: none;
}

/* ===== ファーストビューのフォントサイズ変更 ===== */
@media only screen and (max-width: 767px) {
    .topFvTitle {
        font-size: 28px; /* 本来のSCSSの数値 */
        line-height: 1.5;
    }
    .topFvTitle span {
        font-size: 28px;
        line-height: 1.5;
        background: linear-gradient(transparent 80%, rgb(255, 202, 0) 0%);
    }
}

/* ===== 画像をWebpに変更 ===== */
.wayTitleBlock::after {
    background-image: url(img/house.webp);
}
.wayTitleBlock.__delivery::after {
    background-image: url(img/delivery.webp);
}
.contTelWrap::after {
    background-image: url(img/fax.webp);
}
.contText::after {
    background-image: url(img/line_icon.webp);
}
.__mail .contText::after {
    background-image: url(img/mail_icon_o.webp);
}
.headerBtnSp > a::after {
    background-image: url(img/line_icon.webp);
}
.overRayBtn::after {
    background-image: url(img/mail_icon_w.webp);
}
.headerBtnList > li a.__line::after {
    background-image: url(img/line_icon.webp);
}
.headerBtnList > li a.__contact::after {
    background-image: url(img/mail_icon_w.webp);
}
.kaitoriCard::after {
    background-image: url(img/back_y.webp);
}
.wayCard::after {
    background-image: url(img/back_y.webp);
}
@media only screen and (max-width: 767px) {
    .voiceImg {
        background-image: url(img/voice_sp.webp) !important;
    }
		.contactImg {
        background-image: url(img/contact_sp.webp) !important;
        background-repeat: no-repeat;
    }
    .topFvImg {
        background-image: none!important;
    }
}


/* ===== 画像にLazy Loadを付与したことによるCSS修正 ===== */
.comImg,
.delyImg,
.stepImg,
.cmNewsListImg,
.flowImg,
.compCanImg{
    padding-bottom: 0px;
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-display: swap;
    src: local("Font Awesome 6 Pro"); /* 端末にあればそれを使う */
}







/*==================================================
ふわっアニメーション
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}



/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}



/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;

}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}



.workPrice {
    font-family: "Oswald", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic StdN", "Meiryo", sans-serif!important;
}