@charset "UTF-8";
/*
 Theme Name:   trustart_wp_theme_for_lp
 Theme URI:
 Description:  LP用のCSSファイルだよ
 Author:       NARITA DESIGN
 Author URI:   https://narita-design.jp
 Template:
 Version:      1.0.0
 License:
 License URI:
 Tags:
 Text Domain:
*/
/*--------------------------------------------------------------
>>> trustart_wp_theme style:
----------------------------------------------------------------*/

section div.bg-container div.bg-img-container{
  display: flex;
  justify-content: center;
  overflow: hidden;
}

section div.bg-container div.bg-img-container:first-child{
  margin: 0 0 10px 0;
}

section div.bg-container div.bg-img-container img{
  margin: 0 5px;
  height: 250px;
}

section div.top-container{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 50px auto;
  width: 1080px;
  flex-direction: column;
}

section div.top-container div.msg{
  display: flex;
  flex-direction: column;
  width: 100%;
}

section div.top-container div.msg div.speech-bubbles-short{
  padding: 0;
  top: -10px;
  width: 50%;
  background-color: #FFFFFF;
}

section div.top-container div.msg div.speech-bubbles-short:after {
  background-color: #FFFFFF;
}

section div.top-container div.msg div.speech-bubbles-short p{
  margin: 0 auto;
  color: #000000;
}

section div.top-container div.msg div.appeal{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #4EA1D3;
  padding: 20px;
}

section div.top-container div.msg div.appeal h1{
  margin: 0 auto;
  color: #FFFFFF;
  font-size: 2.5em;
}

section div.top-container div.msg div.appeal h1 small{
  margin: 0 5px;
}

section div.top-container div.msg div.appeal h2{
  margin: 0 auto;
  color: #FFFFFF;
}

section div.top-container div.msg div.appeal div.button {
  margin: 0 auto;
}

section div.top-container div.msg div.appeal div.button a.button {
  margin: 30px auto;
  background: #F8D849;
  border: 2px solid #F8D849;
  color: #000000;
  box-shadow: 0 5px 0 #67591E;
}


/** 画面幅 1080px以下用 */
@media (max-width: 1080px) {
  section div.top-container{
    width: 100%;
  }
}

/** タブレット用 */
@media screen and (min-width:600px) and (max-width:1024px){
}



/** スマートフォン用 */
@media (max-width: 599px) {
  section div.top-container{
    width: 100%;
  }

  section div.bg-container div.bg-img-container img{
    height: 300px;
  }

  section div.top-container div.msg div.speech-bubbles-short{
    width: 100%;
    border-radius: 0px;
  }

  section div.bg-container div.bg-img-container img{
    height: 300px;
  }




}