/*===============================================
●共通
===============================================*/

.green {
  color: #779652;
  font-weight: 500;
}

/*===============================================
●画面の横幅が813px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 813px) {

  /* メイン画像 */
  .main-img {
    width: 100%;
    margin: 0 auto;
  }

  .main-img img {
    width: 100%;
  }

  p.txt01 {
    width: 98%;
    max-width: 1400px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 2;
    text-align: left;
  }

  .map {
    width: 98%;
    max-width: 1400px;
    margin: 60px auto 0 auto;
  }

  .map iframe {
    width: 100%;
  }

  /* box01 */
  .box01 {
    width: 98%;
    max-width: 1400px;
    margin: 60px auto 0 auto;
  }

  .box01 > div {
    width: 50%;
    margin: 0 auto;
    font-size: 16px;
    line-height: 2;
    text-align: left;
  }

  .box01 > div:nth-of-type(2) {
    padding: 0 0 0 20px;
  }

  .box01 > div > span {
    font-size: 18px;
    font-weight: 500;
    line-height: 2;
    color: #779652;
  }

  /* box02 */
  .box02 {
    width: 670px;
    margin: 160px auto 300px auto;
  }

  .box02 > img {
    width: 100%;
    margin: 60px auto 0 auto;
  }

  .box02 > p.txt02 {
    margin: 80px auto 0 auto;
    font-size: 24px;
    font-weight: 500;
    line-height: 2;
    color: #E89F42;
    text-align: center;
  }

  .box02 > p.txt03 {
    margin: 20px 0 0 0;
    font-size: 16px;
    line-height: 2;
    text-align: left;
  }

}

/*===============================================
●画面の横幅が812px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 812px) {

  /* メイン画像 */
  .main-img {
    width: 100%;
    margin: 0 auto;
  }

  .main-img img {
    width: 100%;
  }

  p.txt01 {
    width: 90%;
    margin: 100px auto 0 auto;
    font-size: 14px;
    line-height: 2;
    text-align: left;
  }

  .map {
    margin: 40px auto 0 auto;
    width: 90%;
    height: 0;
    overflow: hidden;
    padding-bottom: 80%;
    position: relative;
  }

  .map iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }

  /* box01 */
  .box01 {
    width: 90%;
    margin: 30px auto 0 auto;
  }

  .box01 > div {
    width: 100%;
    margin: 0 auto;
    font-size: 14px;
    line-height: 2;
    text-align: left;
  }

  .box01 > div:nth-of-type(2) {
    margin: 30px auto 0 auto;
  }

  .box01 > div > span {
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
    color: #779652;
  }

  /* box02 */
  .box02 {
    width: 90%;
    margin: 80px auto;
  }

  .box02 > img {
    width: 100%;
    margin: 30px auto 0 auto;
  }

  .box02 > p.txt02 {
    margin: 80px auto 0 auto;
    font-size: 24px;
    font-weight: 500;
    line-height: 2;
    color: #E89F42;
    text-align: center;
  }

  .box02 > p.txt03 {
    margin: 15px 0 0 0;
    font-size: 14px;
    line-height: 2;
    text-align: left;
  }

}