@media (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .pc {
    display: none !important;
  }
}
.bg_gray{
  background: #eee;
}

p.ttl_area {
  border-bottom: #ea5621 solid 3px;
  position: relative;

  font-family: "M PLUS 1p", sans-serif;
  font-size: 3.8rem;
  line-height: normal;

  padding: 0 0 0px 15px;
  

  span.icon {
    position: absolute;
    bottom: -12px;
    left: -32px;
    img {
      width: 35px;
      height: 40px;
    }
  }

  span.small{
    font-size: 1.8rem;
  }
}
@media (max-width: 767px) {
  p.ttl_area {
    font-size: 2.6rem;
    line-height: 3.6rem;
    margin-left: 30px;
    padding: 0 0 0 8px;

    span.icon {
    bottom: -10px;
    left: -30px;

      img {
        width: 30px;
        height: 34px;
      }
    }
    span.small{
      font-size: 2.8vw;
    }

  }
}


span.plus{
  display: inline-block;
  vertical-align: top;
  margin-top: -2px;
}

/*============================
#service
============================*/
main#service {
  font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;

  section.contents_page {
    margin-bottom: 100px;
		section.about_st {

      div.wrap {
        max-width: 1000px;
        margin: 0 auto;
        padding: 100px 0;

        div.content_area {
          width: 960px;
          margin: 40px auto 0 auto;

          div.headline_area {
            background: url(/assets/img/headline_bg.7c54a31a.png) no-repeat;
            background-size: cover;
            font-family: "M PLUS 1p", sans-serif;
            height: 240px;
            text-align: center;
            margin-bottom: 60px;
            padding-top: 60px;
            box-sizing: border-box;

            p.secondary {
              font-size: 3.4rem;
              font-weight: 700;
              line-height: 1.2;
              letter-spacing: 3px;
              color: #333;

            }
            p.primary {
              font-size: 4.6rem;
              font-weight: 800;
              color: #ea5621;
            }
          }
          p.text {
            font-size: 1.8rem;
            margin-bottom: 20px;
          }
        }
      }
      @media (max-width: 767px) {
        div.wrap {
          padding: 50px 0;
  
          div.content_area {
            width: 90%;
            margin: 40px auto 0 auto;
  
            div.headline_area {
              height: auto;
              margin-bottom: 40px;
              padding: 30px 0;
  
              p.secondary {
                font-size: 1.8rem;
              }
              p.primary {
                font-size: 3.3rem;
              }
            }
            p.text {
              font-size: 1.6rem;
            }
          }
        }

      }
		}
		section.about_obp {
			div.wrap {
        max-width: 1000px;
        margin: 0 auto;
        padding: 100px 0;

				div.content_area {
          margin-top: 40px;

          p.catch_text {
            font-family: "M PLUS 1p", sans-serif;
            font-size: 2.0rem;
            font-weight: 500;
            text-align: center;
            margin-bottom: 40px;

            span.emp {
              color: #c75b1a;
						}
					}
					p.text {
            font-size: 1.8rem;
            margin-bottom: 20px;
					}
					p.date {
            text-align: right;
					}
				}
			}
      @media (max-width: 767px) {
        div.wrap {
          padding: 50px 0;
  
          div.content_area {
            width: 90%;
            margin: 40px auto 0 auto;
  
            p.text {
              font-size: 1.8rem;
              margin-bottom: 20px;
            }
            p.date {
              text-align: right;
            }
          }
        }

      }
		}
		section.compare_area {
			div.wrap {
        max-width: 1000px;
        margin: 0 auto;
        padding: 100px 0;

				div.content_area {
          width: 990px;
          margin: 40px auto 0 auto;
          overflow-x: auto;
          max-width: 100%;

          table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;

            padding: 0;
						thead {
              tr {
                background: #e9b58d;
                font-size: 1.5rem;
                font-weight: 500;

                th {
                  text-align: center;
                  padding: 14px;
                  white-space: nowrap;
                  border: 1px solid #fff;
                }
								td {
                  padding: 20px 5px;
                  text-align: center;
                  border: 1px solid #fff;
								}
							}
						}
						tbody {
							tr {
								th {
                  text-align: left;
                  padding: 10px;
                  white-space: nowrap;
                  font-size: 1.5rem;
                  border: 1px solid #fff;
                  
                }
								td {
                  text-align: center;
                  padding: 20px 5px;
                  white-space: nowrap;
                  font-size: 1.3rem;
                  border: 1px solid #fff;
								}
							}
              tr:nth-of-type(1){
                background: #ffd7b8 !important;
              }
              tr:nth-of-type(odd){
                background: #fcfbf5;
              }
              tr:nth-of-type(even){
                background: #ffeada;
              }
						}
					}
				}
			}
      @media (max-width: 767px) {
        div.wrap {
          padding: 50px 0;
  
          div.content_area {
            width: 90%;
            margin: 40px auto 0 auto;
            overflow-x: auto;
            max-width: 100%;

            table {
              width: 100%;
              border-collapse: collapse;
              font-size: 14px;
  
              padding: 0;
              overflow: auto;
              thead {
                tr {
                  position: sticky;
                  top: 0;
                  z-index: 1;
                  th {
                    position: sticky;
                    left: 0;
                    z-index: 1;
                    padding: 10px;
                    white-space: nowrap;
                    border: 1px solid #fff;
                    background: #e9b58d;

                  }
                  td {
                    padding: 10px 5px;
                    white-space: nowrap;
                    border: 1px solid #fff;
                  }
                }
              }
              tbody {
                tr {
                  th {
                    padding: 10px;
                    white-space: normal;
                    position: sticky;
                    left: 0;
                    z-index: 1;

                  }
                  td {
                    text-align: center;
                    padding: 10px 5px;
                    white-space: nowrap;
                    border: 1px solid #fff;
                  }
                }
                tr:nth-of-type(1){
                  th{
                    white-space: nowrap;
                  }
                }
                tr:nth-of-type(1){
                  th{
                    background: #ffd7b8 !important;
                  }
                }
                tr:nth-of-type(odd){
                  th{
                    background: #fcfbf5;
                  }
                }
                tr:nth-of-type(even){
                  th{
                    background: #ffeada;
                  }

                }
              }
            }
          }
        }

      }
		}
		section.recommend_area {
			div.wrap {
        max-width: 1000px;
        margin: 0 auto;
        padding: 100px 0;

        div.content_area {
          margin-top: 40px;

          div.recommend_box {
            width: 990px;
            margin: 0 auto 20px auto;
            background: #fff;
            border: #333 solid 3px;
            border-radius: 20px;
            padding: 20px;
            display: flex;
            align-items: center;
            
						div.left {
              width: 615px;
							dl {
                margin-bottom: 30px;
								dt {
									p.text {
                    font-size: 2.0rem;
										span.boder {
                      padding: 0 5px;
                      background: linear-gradient(transparent 60%, #f8e4c2 60%);
                    }
									}
								}
								dd {
									p.text {
                    font-size: 1.6rem;
                    padding: 10px 0 0 10px;
									}
								}
							}
						}
						div.right {
              width: 335px;
              height: 335px;
							img {
                width: 100%;
							}
						}
					}
				}
			}
      @media (max-width: 767px) {
        div.wrap {
          padding: 50px 0;
  
          div.content_area {
            width: 90%;
            margin: 40px auto 0 auto;
  
            div.recommend_box {
              width: 100%;
              padding: 20px;
              display: flex;
              flex-direction: column;
              
              div.left {
                width: 100%;
              }
              div.right {
                width: 100%;
                img {
                  width: 100%;
                }
              }
            }
          }
        }

      }
		}
	}
  @media (max-width: 767px) {
    section.contents_page {
      margin-bottom: 50px;
    }
  }
}