/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

}


  /* 買取の流れの箇所の記述 */
  div h2.takuhai-top{
    padding: 30px 25px 25px;
    margin-bottom: 30px;
    border-radius: 10px;
    background-color: #4AB54D;
    color: #fff;
    text-align: center;
}
p.takuhai-p{
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}
div.kaitori-nagare h3.takuhai-mid{
    margin-bottom: 2.5em;
    text-align: center;
    font-size: 1.7em;
    font-weight: 600;
}
.kaitori-nagare ol.step-order{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 0;
    font-size: 1.1rem;
}

.kaitori-nagare ol.step-order>li{
    padding-bottom: 20px;
    margin-bottom: 0;
    list-style: none;
}

.kaitori-nagare ol.step-order>li>h4{
    width: 100%;
    padding: 10px 0;
    margin: 0;
    text-align: center;
    font-size: 1.3rem;
}


.kaitori-nagare ol.step-order>li:nth-child(1){
    background-color: #f5f5f5;
    width: 25%;
}
.kaitori-nagare ol.step-order>li:nth-child(2){
    background-color: #fff9e9;
    width: 25%;
}
.kaitori-nagare ol.step-order>li:nth-child(3){
    background-color: #fff2fa;
    width: 25%;
}
.kaitori-nagare ol.step-order>li:last-child{
    background-color:#e8f7fa;
    width: 25%;
}

/* 1150px以下の時は2カラムにする */
@media screen and (max-width: 1150px){
    .kaitori-nagare ol.step-order>li{
        padding-bottom: 100px;
    }
    .kaitori-nagare ol.step-order>li:nth-child(1){
    width: 50%;
    }
    .kaitori-nagare ol.step-order>li:nth-child(2){
        width: 50%;
    }
    .kaitori-nagare ol.step-order>li:nth-child(3){
        width: 50%;
    }
    .kaitori-nagare ol.step-order>li:last-child{
        width: 50%;
    }
}
/* 600px以下の時は1カラムにする */
@media screen and (max-width: 600px){
    .kaitori-nagare ol.step-order>li{
        padding-bottom: 50px;
    }
    .kaitori-nagare ol.step-order>li p{
        margin-bottom: 30px;
    }
    .kaitori-nagare ol.step-order>li:nth-child(1){
    width: 100%;
    }
    .kaitori-nagare ol.step-order>li:nth-child(2){
        width: 100%;
    }
    .kaitori-nagare ol.step-order>li:nth-child(3){
        width: 100%;
    }
    .kaitori-nagare ol.step-order>li:last-child{
        width: 100%;
    }
}
/* 文字と外枠との隙間を空ける */
.kaitori-nagare ol.step-order>li p,.kaitori-nagare ol.step-order>li ul{
    padding: 0 10px;
}

/* ４つのボタンの記述 */
.kaitori-nagare>ol.step-order>li>ul.btn-4{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  list-style: none;
  margin: 0 auto;;
}
.kaitori-nagare>ol.step-order>li>ul.btn-4>li{
  box-sizing: border-box;
  width: 49%;
  transition-duration: .3s;
  transition-property: transform;
}
.kaitori-nagare>ol.step-order>li>ul.btn-4>li:hover{
  filter: brightness(1.1);
  transform: scale(0.9);
}
.kaitori-nagare>ol.step-order>li>ul.btn-4>li:nth-child(odd){
  margin-right: 1%;
  margin-bottom: 1%;
}
.kaitori-nagare>ol.step-order>li>ul.btn-4>li img{
  width: 100%;
  height: auto;
}
.kaitori-nagare>ol.step-order>li>ul.btn-4>li:nth-child(4):hover{
  transform: scale(1);
  filter: brightness(1);
}
/* 小見出し h4を中央揃えにして上下のborderを消す */
.kaitori-nagare ol.step-order>li>h4{
    position: relative;
    margin-bottom: 0;
    text-align: center;
    border-top: 0;
    border-bottom: 0;
    color: #000;
}

/* h4の小見出しの上にstepの背景画像を表示 */
.kaitori-nagare ol.step-order>li:first-child>h4:nth-child(1)::before{
    display: block;
    content: 'STEP1';
    position: absolute;
    top: -50px;
    width: 100%;
    height: 50px;
    background-color: #262a2c;
    line-height: 50px;
    color: #fff;
}
.kaitori-nagare ol.step-order>li:first-child>h4:nth-child(1)::after{
    content: '';
    position: absolute;
    z-index: 2;
    top: -50px;
    right: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #262a2c;
    border-width: 25px 0 25px 25px;
}
.kaitori-nagare ol.step-order>li:nth-child(2)>h4::before{
    display: block;
    content: 'STEP2';
    position: absolute;
    top: -50px;
    width: 100%;
    height: 50px;
    background-color: #FDB900;
    line-height: 50px;
    color: #fff;
}
.kaitori-nagare ol.step-order>li:nth-child(2)>h4::after{
    content: '';
    position: absolute;
    z-index: 2;
    top: -50px;
    right: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #FDB900;
    border-width: 25px 0 25px 25px;
}

.kaitori-nagare ol.step-order>li:nth-child(3)>h4::before{
    display: block;
    content: 'STEP3';
    position: absolute;
    top: -50px;
    width: 100%;
    height: 50px;
    background-color: #DF30A5;
    line-height: 50px;
    color: #fff;
}
.kaitori-nagare ol.step-order>li:nth-child(3)>h4::after{
    content: '';
    position: absolute;
    z-index: 2;
    top: -50px;
    right: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #DF30A5;
    border-width: 25px 0 25px 25px;
}
.kaitori-nagare ol.step-order>li:nth-child(4)>h4::before{
    display: block;
    content: 'STEP4';
    position: absolute;
    top: -50px;
    width: 100%;
    height: 50px;
    background-color: #0693E3;
    line-height: 50px;
    color: #fff;
}
/* 1149px以下になったら、黄色の矢印を消す */
@media screen and (max-width: 1149px){
    .kaitori-nagare ol.step-order>li:nth-child(2)>h4::after{
        border: 0;
    }
}

/* 600px以下になったら、矢印を消してレイアウトを整える */
@media screen and (max-width: 600px){
  .kaitori-nagare ol.step-order>li:first-child>h4:nth-child(1)::after,
  .kaitori-nagare ol.step-order>li:nth-child(2)>h4:nth-child(1)::after,
  .kaitori-nagare ol.step-order>li:nth-child(3)>h4:nth-child(1)::after,
  .kaitori-nagare ol.step-order>li:last-child>h4:nth-child(1)::after{
      border: 0;
  }
/* 画像を中央に揃える */
  .kaitori-nagare ol.step-order>li figure{
      text-align: center;
  }
}
/* aタグの要素に下線を引く */
div.kaitori-nagare a{
    text-decoration: underline;
}

/* 会社案内の住所などの記述 */
.we-company{
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 100%;
    border-top: 1px dotted rgb(30, 2, 129);
    border-right: 1px dotted rgb(30, 2, 129);
    margin: 0 auto;
    line-height: 1.0;
}

.we-company>dt{
    box-sizing: border-box;
    width: 25%;
    padding: 0.5em 1em 0.5em 1em;
    border-bottom: 1px dotted rgb(30, 2, 129);
    background-color: rgb(26, 138, 250);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}
.we-company>dd{
    box-sizing: border-box;
    width: 75%;
    padding: 0.5em 1em 0.5em 1em;
    margin: 0;
    border-bottom: 1px dotted rgb(30, 2, 129);
    background-color: #fff;
    color:rgb(30, 2, 129);
    font-size: 16px;
}

/* スマホサイズでレイアウトを変更 */
@media screen and (max-width: 450px){
    .we-company{
        box-sizing: border-box;
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start;
        width: 100%;
        border-top: 1px dotted rgb(30, 2, 129);
        border-right: 1px dotted rgb(30, 2, 129);
        margin: 30px auto;
        line-height: 1.0;
    }
    .we-company>dt{
        box-sizing: border-box;
        width: 100%;
        text-align: center;
    }
    .we-company>dd{
        box-sizing: border-box;
        width: 100%;
        text-align: center;
    }
}

/* 会社案内の住所などの記述 */
.we-company{
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 100%;
    border-top: 1px dotted rgb(30, 2, 129);
    border-right: 1px dotted rgb(30, 2, 129);
    margin: 0 auto;
    line-height: 1.0;
}

.we-company>dt{
    box-sizing: border-box;
    width: 25%;
    padding: 0.5em 1em 0.5em 1em;
    border-bottom: 1px dotted rgb(30, 2, 129);
    background-color: rgb(26, 138, 250);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}
.we-company>dd{
    box-sizing: border-box;
    width: 75%;
    padding: 0.5em 1em 0.5em 1em;
    margin: 0;
    border-bottom: 1px dotted rgb(30, 2, 129);
    background-color: #fff;
    color:rgb(30, 2, 129);
    font-size: 16px;
}

/* スマホサイズでレイアウトを変更 */
@media screen and (max-width: 450px){
    .we-company{
        box-sizing: border-box;
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start;
        width: 100%;
        border-top: 1px dotted rgb(30, 2, 129);
        border-right: 1px dotted rgb(30, 2, 129);
        margin: 30px auto;
        line-height: 1.0;
    }
    .we-company>dt{
        box-sizing: border-box;
        width: 100%;
        text-align: center;
    }
    .we-company>dd{
        box-sizing: border-box;
        width: 100%;
        text-align: center;
    }
}

/* 買取エリアの都道府県の記述 */
.area-47{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    order: 2;
    width: 100%;
    border-top: 1px dotted rgb(30, 2, 129);
    border-right: 1px dotted rgb(30, 2, 129);
    margin-bottom: 30px;
    line-height: 1.0;
}

.area-47 dt{
    width: 25%;
    padding: 0.5em 1em 0.5em 1em;
    border-bottom: 1px dotted rgb(30, 2, 129);
    background-color: rgb(26, 138, 250);
    color: #fff;
}
.area-47 dd{
    width: 75%;
    padding: 0.5em 1em 0.5em 1em;
    margin: 0;
    border-bottom: 1px dotted rgb(30, 2, 129);
    color:rgb(30, 2, 129);
    font-size: 13px;
    background-color: #fff;
}
.area-47 dd>ul{
    margin: 0;
    list-style: none;
}
.area-47 dd>ul>li{
    display: inline-block;
    position: relative;
    height: 100%;
    margin-right: 10px;
}
.area-47 dd>ul>li::after{
    content: '|';
    position: absolute;
    right: -5px;
}

.yamato-search-button .elementor-widget-container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.yamato-search-button .elementor-widget-container dl{
    width: 49%;
}
.yamato-search-button .elementor-widget-container dt{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.yamato-search-button .elementor-widget-container dd{
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    transition-duration: .3s;
    transition-property: transform;
}
.yamato-search-button .elementor-widget-container dd>a{
    display: block;
    padding: 30px 0;
    border: 3px solid #FED100;
    border-radius: 20px;
    background-color: #008A79;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    transition-duration: .3s;
    transition-property: transform;
}

.yamato-search-button .elementor-widget-container dd>a:hover{
    transform: scale(0.97);
}
/* タブレットの幅 */
@media screen and (max-width: 1024px) {
    .yamato-search-button .elementor-widget-container dl{
        width: 90%;
    }
}
/* スマホサイズの幅 */
@media screen and (max-width: 767px) {
    .yamato-search-button .elementor-widget-container dt{
        font-size: 18px;
    }
    .yamato-search-button .elementor-widget-container dd{
        font-size: 16px;
    }
}

/* 買取エリアの都道府県の記述 */
.area-47{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    order: 2;
    width: 100%;
    border-top: 1px dotted rgb(30, 2, 129);
    border-right: 1px dotted rgb(30, 2, 129);
    margin-bottom: 30px;
    line-height: 1.0;
}

.area-47 dt{
    width: 25%;
    padding: 0.5em 1em 0.5em 1em;
    border-bottom: 1px dotted rgb(30, 2, 129);
    background-color: rgb(26, 138, 250);
    color: #fff;
}
.area-47 dd{
    width: 75%;
    padding: 0.5em 1em 0.5em 1em;
    margin: 0;
    border-bottom: 1px dotted rgb(30, 2, 129);
    color:rgb(30, 2, 129);
    font-size: 13px;
    background-color: #fff;
}
.area-47 dd>ul{
    margin: 0;
    list-style: none;
}
.area-47 dd>ul>li{
    display: inline-block;
    position: relative;
    height: 100%;
    margin-right: 10px;
}
.area-47 dd>ul>li::after{
    content: '|';
    position: absolute;
    right: -5px;
}