@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap");

/*--------------------------------------------------------

共通の指定 START

--------------------------------------------------------*/
#obentonet h1,
#obentonet h2,
#obentonet h3,
#obentonet h4,
#obentonet h5,
#obentonet h6,
#obentonet p,
#obentonet figure {
  margin: 0;
}

#obentonet ul,
#obentonet ol,
#obentonet li,
#obentonet dl,
#obentonet dd {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#obentonet {
  position: relative;
  color: #59493f;
  font-weight: 500;
  font-size: 16px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  line-height: 1.8;
  overflow: hidden;
}

#obentonet a {
  color: #59493f;
  text-decoration: none;
}

#obentonet .clearfix:after {
  content: "";
  display: block;
  clear: both;
}

#obentonet img {
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

#obentonet .note {
  font-size: 14px;
  text-indent: -1.5em;
  margin-left: 1.5em;
  margin-top: 10px;
  text-align: left;
}

#obentonet section {
  position: relative;
}
#obentonet .inner_layout {
  max-width: 1200px;
  text-align: center;
  margin: 0 auto;
  padding: 80px 0;
  position: relative;
}

#obentonet .inner_layout2 {
  padding: 20px 0 120px;
}

#obentonet .form_layout {
  padding: 0 0 0 250px;
}

#obentonet h2 {
  font-size: 50px;
  font-weight: 800;
  display: inline-block;
  text-align: center;
  position: relative;
  font-feature-settings: "palt";
  line-height: 1.4;
  margin-bottom: 60px;
}

#obentonet h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 7px;
  background: #db473b;
  position: absolute;
  bottom: -28px;
  left: 50%;
  margin-left: -25px;
  border-radius: 4px;
}
#obentonet .no_pc {
  display: none;
}

#obentonet .no_sp {
  display: block;
}

#obentonet .bg_round::before {
  content: "";
  display: block;
  background: url(../img/bg_wh.png) center/cover;
  position: absolute;
  top: -60px;
  width: 100%;
  height: 60px;
}

#obentonet .bg_round_org::before {
  background: url(../img/bg_org.png) center/cover;
}

#obentonet .bg_round_bl::before {
  background: url(../img/bg_bl.png) center/cover;
}
#obentonet .bubble h2::before {
  content: "";
  display: block;
  background: url(../img/user_icon.png) center/cover;
  position: absolute;
  top: -110px;
  left: -170px;
  width: 156px;
  height: 140px;
}
#obentonet #provider .bubble h2::before {
  background: url(../img/provider_icon.png) center/cover;
}
#obentonet .merit h2 i {
  background: url(../img/user_icon2.png) center/cover;
  position: absolute;
  top: -30px;
  right: -150px;
  width: 145px;
  height: 93px;
}
#obentonet .merit2 h2 i {
  background: url(../img/provider_icon2.png) center/cover;
}
#obentonet .lead {
  font-size: 18px;
  font-weight: 600;
}

#obentonet .merit ul {
  display: flex;
  flex-wrap: wrap;
  gap: 50px 3%;
  justify-content: center;
  margin: auto;
}
#obentonet .merit ul li {
  width: 22%;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  padding: 30px;
  background: #fff;
  border-radius: 30px;
}

#obentonet .merit2 ul li {
  background: #fff;
}
#obentonet .merit li em {
  font-style: normal;
  background: linear-gradient(transparent 60%, #ffbf35 60%);
}
#obentonet .merit2 ul li span {
  font-size: 14px;
}
#obentonet .merit ul li img {
  margin-bottom: 10px;
}

/* /////////// START 1200px 共通の指定 /////////// */
@media only screen and (max-width: 1200px) {
  #obentonet .contents_wrap {
    padding: 0 60px;
  }
}

/* /////////// START SP 共通の指定 /////////// */
@media only screen and (max-width: 768px) {
  #obentonet .contents_wrap {
    padding: 0;
  }
  #obentonet .inner_layout {
    max-width: 90%;
    padding: 60px 0;
  }
  #obentonet .inner_layout2 {
    padding: 20px 0 120px;
  }
  #obentonet .form_layout {
    padding: 0;
  }

  #obentonet h2 {
    font-size: 26px;
    margin-bottom: 60px;
  }

  #obentonet h2:after {
    bottom: -22px;
  }

  #obentonet h3 {
    font-size: 26px;
    margin-bottom: 30px;
    line-height: 1.5;
  }

  #obentonet .no_pc {
    display: block;
  }

  #obentonet .no_sp {
    display: none;
  }
  #obentonet .bg_round::before {
    content: "";
    display: block;
    background: url(../img/sp_bg_wh.png) center/cover;
    position: absolute;
    top: -60px;
    width: 100%;
    height: 60px;
  }

  #obentonet .bg_round_org::before {
    background: url(../img/sp_bg_org.png) center/cover;
  }

  #obentonet .bg_round_bl::before {
    background: url(../img/sp_bg_bl.png) center/cover;
  }

  #obentonet .merit h2 i {
    top: -80px;
    right: 50px;
    width: 95px;
    height: 63px;
  }
  #obentonet .merit h2::before {
    top: -60px;
    left: -80px;
    width: 78px;
    height: 70px;
  }
  #obentonet .merit ul {
    gap: 20px 4%;
  }
  #obentonet .merit ul li {
    width: 48%;
    font-size: 16px;
    padding: 20px;
    text-align: left;
  }
}

/*--------------------------------------------------------

ボタン START

--------------------------------------------------------*/
/* #obentonet a.btn {
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background: #ec6941;
  width: 300px;
  height: 60px;
  border-radius: 30px;
  line-height: 60px;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 40px auto 0;
  transition: 0.3s;
}

#obentonet a.btn:hover {
  transform: translateY(3px);
  box-shadow: none;
} */

/* /////////// SP ボタン START /////////// */

/*--------------------------------------------------------

header START

--------------------------------------------------------*/
#obentonet header {
  width: 100%;
  height: 100px;
  position: absolute;
  z-index: 1;
}

#obentonet .logo {
  width: 250px;
  margin: 30px 0 0 30px;
}
/* /////////// SP header START /////////// */
@media only screen and (max-width: 768px) {
  #obentonet .logo {
    width: 180px;
    margin: 20px 0 0 20px;
  }
  #obentonet main h1::after {
    width: 73px;
    top: -40px;
    right: -50px;
  }
}

/*--------------------------------------------------------

KV START

--------------------------------------------------------*/
#obentonet main {
  width: 100%;
  min-height: 880px;
  background: url("../img/kv_bg.png") no-repeat center/cover;
  position: relative;
  padding-top: 30px;
  text-align: center;
}

#obentonet main h1 {
  font-size: 50px;
  font-weight: 900;
  color: #db473b;
  line-height: 1.4;
  display: inline-block;
  margin: 40px 0 10px;
  position: relative;
  text-shadow: rgb(255, 255, 255) 6px 0px 0px, rgb(255, 255, 255) 5.91686px 0.995377px 0px, rgb(255, 255, 255) 5.66974px 1.96317px 0px, rgb(255, 255, 255) 5.2655px 2.87655px 0px, rgb(255, 255, 255) 4.71532px 3.71022px 0px, rgb(255, 255, 255) 4.03447px 4.44106px 0px, rgb(255, 255, 255) 3.24181px 5.04883px 0px, rgb(255, 255, 255) 2.35931px 5.51667px 0px,
    rgb(255, 255, 255) 1.41143px 5.83163px 0px, rgb(255, 255, 255) 0.424423px 5.98497px 0px, rgb(255, 255, 255) -0.574341px 5.97245px 0px, rgb(255, 255, 255) -1.55719px 5.79441px 0px, rgb(255, 255, 255) -2.49688px 5.45578px 0px, rgb(255, 255, 255) -3.36738px 4.96596px 0px, rgb(255, 255, 255) -4.14455px 4.33852px 0px,
    rgb(255, 255, 255) -4.80686px 3.59083px 0px, rgb(255, 255, 255) -5.33596px 2.74364px 0px, rgb(255, 255, 255) -5.71718px 1.8204px 0px, rgb(255, 255, 255) -5.93995px 0.84672px 0px, rgb(255, 255, 255) -5.99811px -0.150428px 0px, rgb(255, 255, 255) -5.89004px -1.14341px 0px, rgb(255, 255, 255) -5.61874px -2.1047px 0px,
    rgb(255, 255, 255) -5.19172px -3.00766px 0px, rgb(255, 255, 255) -4.62082px -3.82727px 0px, rgb(255, 255, 255) -3.92186px -4.54081px 0px, rgb(255, 255, 255) -3.11421px -5.12852px 0px, rgb(255, 255, 255) -2.22026px -5.57409px 0px, rgb(255, 255, 255) -1.26477px -5.86518px 0px, rgb(255, 255, 255) -0.274238px -5.99373px 0px,
    rgb(255, 255, 255) 0.723898px -5.95617px 0px, rgb(255, 255, 255) 1.70197px -5.75355px 0px, rgb(255, 255, 255) 2.63288px -5.39147px 0px, rgb(255, 255, 255) 3.49082px -4.87998px 0px, rgb(255, 255, 255) 4.25202px -4.23324px 0px, rgb(255, 255, 255) 4.89538px -3.46919px 0px, rgb(255, 255, 255) 5.40307px -2.60899px 0px,
    rgb(255, 255, 255) 5.76102px -1.67649px 0px, rgb(255, 255, 255) 5.95932px -0.697531px 0px;
}

#obentonet main h1::after {
  content: "";
  display: block;
  width: 133px;
  height: 136px;
  background: url(../img/kv_flag.png) center/cover;
  position: absolute;
  top: 0;
  right: -150px;
}

#obentonet main p.subtitle {
  font-size: 26px;
  font-weight: bold;
  line-height: 1.6;
  color: #59493f;
}
#obentonet main p.subtitle em {
  color: #ec6941;
  font-style: normal;
}
#obentonet main p.subtitle span {
  font-size: 16px;
  font-weight: normal;
}

/* /////////// SP版 メインビジュアル START /////////// */
@media only screen and (max-width: 768px) {
  #obentonet main {
    width: 100%;
    min-height: 650px;
    background: url("../img/sp_kv_bg.png") no-repeat bottom/cover;
    overflow: hidden;
  }

  #obentonet main .inner_layout {
    padding: 60px 0 0;
  }
  #obentonet main h1 {
    font-size: 26px;
    line-height: 1.6;
    margin: 50px 0 0;
  }
  #obentonet main p.subtitle {
    font-size: 18px;
    margin: 10px auto;
  }

  #obentonet main h1::after {
    width: 63px;
    height: 66px;
    top: -26px;
    right: -53px;
  }
}
/*--------------------------------------------------------

サービスの特徴 START

--------------------------------------------------------*/
#obentonet #service {
  background: #fff1b7;
}
#obentonet #service .inner_layout {
  padding: 0 0 120px;
}
#obentonet .service_wrap {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 40px auto 0;
}
#obentonet .service_box {
  width: 22%;
  position: relative;
}
#obentonet .service_box::after {
  content: "";
  display: block;
  background: url(../img/service_point_01.png) center/cover;
  position: absolute;
  top: -21px;
  left: -30px;
  width: 87px;
  height: 80px;
}
#obentonet .service_box:nth-child(2)::after {
  background: url(../img/service_point_02.png) center/cover;
}
#obentonet .service_box:nth-child(3)::after {
  background: url(../img/service_point_03.png) center/cover;
}
#obentonet .service_box:nth-child(4)::after {
  background: url(../img/service_point_04.png) center/cover;
}
#obentonet .service_box img {
  width: 60%;
  margin-bottom: 10px;
}
#obentonet #service .service_box h3 {
  font-size: 20px;
  color: #db473b;
}
#obentonet #service .service_box p {
  font-size: 15px;
}
#obentonet #service .service_box p span {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  display: inline-block;
  margin-top: 5px;
}
/* /////////// START SP サービスの特徴 /////////// */
@media only screen and (max-width: 768px) {
  #obentonet #service .inner_layout {
    padding: 40px 0 80px;
  }
  #obentonet .service_wrap {
    flex-wrap: wrap;
    width: 100%;
    margin: 40px auto 0;
  }
  #obentonet .service_box {
    width: 48%;
    margin-bottom: 30px;
  }
  #obentonet .service_box::after {
    top: -21px;
    left: -10px;
    width: 67px;
    height: 60px;
  }
  #obentonet #service .service_box h3 {
    font-size: 16px;
    margin-bottom: 0;
  }
  #obentonet #service .service_box p {
    font-size: 14px;
    line-height: 1.6;
  }
}
/*--------------------------------------------------------

利用者のメリット START

--------------------------------------------------------*/
#obentonet #user .merit ul li {
  background: #ffe788;
}
/*--------------------------------------------------------

利用者のメリット START

--------------------------------------------------------*/
#obentonet #provider {
  background: #d9eef0;
}
/*--------------------------------------------------------

導入事例 START

--------------------------------------------------------*/
#obentonet .case_wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
#obentonet .case_text {
  width: 60%;
  text-align: left;
  line-height: 2.5;
  font-size: 18px;
}
#obentonet .case_text h3 {
  font-size: 30px;
}
#obentonet .case_image {
  width: 35%;
  height: 200px;
  border-radius: 30px;
  overflow: hidden;
}
/* /////////// SP 導入事例 START /////////// */
@media only screen and (max-width: 768px) {
  #obentonet .case_wrap {
    display: block;
    width: 100%;
    margin-top: 30px;
  }
  #obentonet .case_text {
    width: 100%;
  }
  #obentonet .case_text p {
    margin: 0;
    padding: 0;
  }
  #obentonet .case_text h3 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
  }
  #obentonet .case_image {
    width: 100%;
    margin-top: 20px;
  }
}
/*--------------------------------------------------------

利用者の声 START

--------------------------------------------------------*/
#obentonet #voice {
  background: #fff1b7;
}

#obentonet #voice .merit ul {
  margin-bottom: 80px;
}
#obentonet .voice_wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 40px auto 0;
}
#obentonet .voice_box {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin-bottom: 60px;
}
#obentonet .voice_wrap figure {
  width: 100px;
}

#obentonet .voice_box p {
  width: 86%;
  padding: 20px 30px;
  background: #fff;
  border-radius: 30px;
  position: relative;
  text-align: left;
}
#obentonet .voice_box p span {
  text-align: right;
  display: block;
}
#obentonet .voice_box p:before {
  content: "";
  display: block;
  position: absolute;
  top: 35px;
  left: -30px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 30px 30px;
  border-color: transparent transparent #fff transparent;
}
#obentonet .voice_wrap .oppose figure {
  order: 2;
}
#obentonet .voice_wrap .oppose p:before {
  right: -30px;
  left: auto;
  border-width: 30px 0 0 30px;
  border-color: transparent transparent transparent #fff;
  margin-bottom: 30px;
}

/* /////////// SP 利用者の声 START /////////// */
@media only screen and (max-width: 768px) {
  #obentonet .voice_wrap {
    display: block;
    width: 100%;
    margin-top: 0;
  }
  #obentonet .voice_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
  }
}
/*--------------------------------------------------------

情報提供のお願い START

--------------------------------------------------------*/
#obentonet #info {
  background: #fff1b7;
}
/*--------------------------------------------------------

サービス利用について START

--------------------------------------------------------*/
#obentonet #about {
  background: url(../img/about_bg.png) top center / cover;
  padding-top: 60px;
  margin-top: -60px;
}
#obentonet #about ul {
  display: flex;
  justify-content: center;
  width: 85%;
  margin: 40px auto;
  gap: 0 5%;
}
#obentonet #about ul li {
  width: 22%;
}
#obentonet #about ul li img {
  display: block;
  width: 50%;
  margin: 0 auto 12px;
}
/* /////////// SP サービス利用について START /////////// */
@media only screen and (max-width: 768px) {
  #obentonet #about {
    background: url(../img/sp_about_bg.png) top center / cover;
    padding: 40px 0 0;
  }
  #obentonet #about ul {
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 0 4%;
  }
  #obentonet #about ul li {
    width: 45%;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
  }
  #obentonet #about ul li:nth-of-type(n + 3) {
    margin-bottom: 0;
  }
  #obentonet #about ul li img {
    width: 50%;
  }
}
/*--------------------------------------------------------

資料ダウンロード START

--------------------------------------------------------*/
/* /////////// SP 資料ダウンロード START /////////// */
@media only screen and (max-width: 768px) {
  #obentonet #dl h2 {
    margin-bottom: 10px;
  }
}
/*--------------------------------------------------------

サービス説明／導入相談 START

--------------------------------------------------------*/
#obentonet #consultation .inner_layout {
  padding: 0 0 120px;
}
/* /////////// SP サービス説明／導入相談 START /////////// */
@media only screen and (max-width: 768px) {
  #obentonet #consultation h2 {
    margin-bottom: 10px;
  }
}
/*--------------------------------------------------------

ページTOPへ START

--------------------------------------------------------*/
#obentonet .to_top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  height: 60px;
  width: 60px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 999;
  cursor: pointer;
  transition: 0.3s;
}
#obentonet .to_top:after {
  content: "";
  width: 20px;
  height: 20px;
  border-top: solid 5px #fff;
  border-right: solid 5px #fff;
  transform: rotate(-45deg);
  position: absolute;
  right: 50%;
  top: 50%;
  margin-top: -5px;
  margin-right: -10px;
}
#obentonet .to_top:hover {
  text-decoration: none;
  background: #db473b;
}
@media only screen and (max-width: 768px) {
  #obentonet .to_top {
    display: none !important;
  }
}
/*--------------------------------------------------------

footer START

--------------------------------------------------------*/
#obentonet footer {
  background: #fff1b7;
  padding: 40px 0;
  text-align: center;
}
#obentonet footer .logo {
  margin: 0 auto 30px;
}
#obentonet footer p {
  font-size: 11px;
}
@media only screen and (max-width: 768px) {
  #obentonet footer {
    padding: 40px 0 60px;
  }
}