/* part.css */
@charset "utf-8";

/* ---------- パートコンテンツの基本設定 ---------- */

div.parts {padding: 1em 2em;}
div.parts_2 {padding: 0em 1em;}


/* スマホ版対応 */
@media screen and (max-width: 960px) {
  div.parts {padding: 0;}
  div.parts_2 {padding: 0;}
}

*.bgcolor {}

*.bgcolor_2 {
  background-color: var(--main-bg-color-2);
}

*.bgcolor_3 {
  background-color: var(--main-bg-color-3);
}

*.bgcolor_4 {
  background-color: var(--main-color);
}

/* ---------- 画像文字横並びパーツ ---------- */

div.parts ul.pattern_1 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

div.parts ul.pattern_1 li.image {
  width: calc(50% - 2em); /* 左右のpadding分引く */
  padding: 1em;
}

div.parts ul.pattern_1 li.image img {
  width: 100%;
}

div.parts ul.pattern_1 li.message {
  width: calc(50% - 2em); /* 左右のpadding分引く */
  padding: 1em;
  position: relative;
}

div.parts ul.pattern_1 li.message p.rev_color {
  color: var(--reverse-font-color);
}

div.parts ul.pattern_1 li.message p.title {
  font-size: 1.4rem;
  padding: 1em 0 1em 0;
/*  text-decoration:underline;*/
}

div.parts ul.pattern_1 li.message p.column {
  margin-bottom: calc(clamp(0.4rem, calc(0.6vw + 0.4rem), 1.2rem) + 1.6em + 1.2em);
}

div.parts ul.pattern_1 li.message p.button {
  position: absolute;
  right: 1.2em;
  bottom: 1.2em;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {

  div.parts ul.pattern_1 {display: block;}

  div.parts ul.pattern_1 li.image {
    width: 100%;
    padding: 0;
  }

  div.parts ul.pattern_1 li.message {
    width: calc(100% - 1.6em);
    padding: 0.5em 0.8em;
    position: static;
  }

  div.parts ul.pattern_1 li.message p.title {
    font-size: 1.4rem;
    padding: 0.8em;
  }

  div.parts ul.pattern_1 li.message p.column {
    margin-bottom: 1.4em;
  }

  div.parts ul.pattern_1 li.message p.button {
    position: static;
    text-align: right;
    margin-bottom: 1em;
  }
}


/* ----- 画像文字縦並び2コンテンツパーツ ----- */

div.parts dl.pattern_2 {
  width: 40%;
  padding: 1em 1em;
  display: inline-block;
}

div.parts dl.pattern_2 dt {
  width: 100%;
  border: none;
  padding: 0;
}

div.parts dl.pattern_2 dd {
  width: 100%;
  border: none;
  padding: 0;
  color: var(--main-font-color);
  background-color: var(--main-bg-color-4);
}

div.parts dl.pattern_2 dd.bgcolor_2 {
  color: var(--main-font-color);
  background-color: var(--main-bg-color-2);
}

div.parts dl.pattern_2 dd.bgcolor_3 {
  color: var(--reverse-font-color);
  background-color: var(--main-bg-color-3);
}

div.parts dl.pattern_2 dd.bgcolor_4 {
  color: var(--reverse-font-color);
  background-color: var(--main-color);
}


/* ---------- 会社案内 企業特色 パーツ設定 ---------- */

div.parts ul.pattern_3 {
  width: calc(100% - 2em);
  display: flex;
  flex-wrap: wrap;
/*  align-items:center;*/
  padding: 1em;
}

div.parts ul.pattern_3 li.image {
  width: 46%;

/*  width: calc(46% - 2em);*/ /* 左右のpadding分引く */
/*  padding: 1em;*/
}

div.parts ul.pattern_3 li.image img {
  width: 100%;
}

div.parts ul.pattern_3 li.message {
  width: 54%;

/*  width: calc(54% - 2em);*/ /* 左右のpadding分引く */
/*  padding: 1em;*/
}

/* 小見出し（パーツ内） */
div.parts ul.pattern_3 h3.title {
  width: calc(100% - 4.2em);
  padding: 2em 1em 0.2em 1.2em;
  margin: 0 1em;
  font-size: 1.1rem;
  color: var(--base-font-color-2);
  font-weight: normal;
  border-bottom: thick double var(--main-color-2);
}

div.parts ul.pattern_3 h3.rev_color {color: var(--reverse-font-color);}
div.parts ul.pattern_3 h3.rev_color {border-bottom: thick double var(--main-color-3);}

/* 小見出し用コンテンツ（パーツ内） */
div.parts ul.pattern_3 div.text {
  width: calc(100% - 4.4em);
  padding: 1.2em;
  margin: 0 1em;
}

div.parts ul.pattern_3 div.rev_color {color: var(--reverse-font-color);}

div.parts ul.pattern_3 li.message p.item {
  padding-left: 2em;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {

  div.parts ul.pattern_3 {
    display: block;
    width: 100%;
    padding: 1.5em 0;
  }

  div.parts ul.pattern_3 li.image {
    width: 100%;
    padding: 0;
  }

  div.parts ul.pattern_3 li.message {
    width: 100%;
    padding: 0.5em 0;
    position: static;
  }

  div.parts ul.pattern_3 h3.title {
    width: calc(100% - 3.2em);
    padding: 0.8em 1em 0.2em 1em;
    margin: 0 0.6em;
  }

  div.parts ul.pattern_3 div.text {
    width: calc(100% - 2em);
    padding: 1.2em 1em;
    margin: 0;
  }
}

/* ----- コンテンツパーツ パターン4 ----- */

dl.pattern_4 {
  padding: 2em 0em 0em 0em;
}

dl.pattern_4 dt {
  padding: 1em;
  color: var(--reverse-font-color);
  background-color: var(--main-color-3);
  border: solid 1px var(--main-border-color);
}

dl.pattern_4 dd {
  padding: 1.5em 2em 3em 2em;
  color: var(--main-font-color);
  border: none;
/*  border: solid 1px var(--main-border-color);*/
}

dl.pattern_4 dd.bgcolor_2 {
  color: var(--main-font-color);
  background-color: var(--main-bg-color-2);
}

dl.pattern_4 dd.bgcolor_3 {
  color: var(--reverse-font-color);
  background-color: var(--main-bg-color-3);
}

dl.pattern_4 dd.bgcolor_4 {
  color: var(--reverse-font-color);
  background-color: var(--main-color);
}


/* ----- 会社案内 当社について パーツ設定 ----- */

dl.profile {
  padding: 0 8em 1em 2em;
}

dl.profile dt {
  width: 13em;
  padding: 2em 3em 1em 1em;
  text-align: right;
  font-weight: bold;
}

dl.profile dd {
  width: calc(100% - 17em - 6em - 10em); /* 文字13em + dt padding4em + dd padding 4em + dl padding 4em */
  padding: 2em 3em 1em 3em;
}

div.profile_attention {
  text-align: right;
  padding-right: 8em;
  font-size: 0.9rem;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {

  dl.profile {
    padding: 0;
  }

  dl.profile dt {
    width: calc(100% - 1em);
    padding: 0.4em 0em 0em 1em;
    text-align: left;
    border-bottom: none;
  }

  dl.profile dd {
    width: calc(100% - 3.6em);
    padding: 0.6em 1em 0.8em 1em;
    margin: 0 0.8em 1em 0.8em;
    border-bottom: dashed 1px var(--main-border-color);
  }

  div.profile_attention {
    text-align: right;
    padding-right: 1.8em;
    font-size: 1rem;
  }
}


/* ----- ご利用にあたって サービスについて パーツ設定 ----- */

div.pattern_5 p {}

div.pattern_5 p.message {
  font-weight: bold;
  font-size: 1.05rem;
  padding-bottom:0.1em;
}

div.pattern_5 p.dial {
  font-size: 1.4rem;
  padding-left: 1em;
}

div.pattern_5 p.dial_sp {
  display: none;
  font-size: 1.4rem;
  padding: 0;
  text-align:center;
}

div.pattern_5 p.center {text-align: center;}

div.pattern_5 div.image {
  text-align: center;
  padding: 1.2em 0;
}

div.pattern_5 ul.service_3 {padding-left: 3em;}
div.pattern_5 ul.service_3 li {padding: 0.5em 1em;}
div.pattern_5 ul.service_3 li iframe {width: 600px; height: 380px;}

div.pattern_5 div.image ul {}
div.pattern_5 div.image ul li img {width: 480px;}

/* 個別画像設定 */
div.pattern_5 img {width: 50%;}
div.pattern_5 img.wide {width: 70%;}


/* スマホ版対応 */
@media screen and (max-width: 960px) {

  div.pattern_5 p {padding: 0 0.8em;}
  div.pattern_5 p.message {padding: 0 0.8em 0.4em 0.8em;}

  div.pattern_5 p.dial {display: none;}
  div.pattern_5 p.dial_sp {display: block;}

  div.pattern_5 p.link {padding: 0; text-align:center;}

  div.pattern_5 ul.service_3 {padding-left: 0;}
  div.pattern_5 ul.service_3 li {padding: 0.5em 0;}
  div.pattern_5 ul.service_3 li iframe {width: 100%; height: 300px;}

  div.pattern_5 div.image ul {}
  div.pattern_5 div.image ul li img {width: 100%;}

  div.pattern_5 img {width: 100%;}
  div.pattern_5 img.wide {width: 100%;}
}


/* ----- ご利用にあたって 料金案内 パーツ設定 ----- */

div.parts div.fee {
  display: inline-block;
  width: 28em;
  height: 30em;
  border: solid 1px var(--main-border-color);
  vertical-align: top;
}

div.parts div.fee dl {
/*  width: auto;
  display: block;*/
}

div.parts div.fee dl dt {
/*  width: auto;*/
  padding: 1em;
  margin: 1em;
  font-size: 1.1rem;
  border-bottom: solid 1px var(--main-border-color);
}

div.parts div.fee dl dd {
/*  width: auto;*/
  padding: 1em;
  margin: 1em;
  border: none;
}

div.parts div.fee dl dd p.title {}
div.parts div.fee dl dd p.text {}

div.parts div.fee dl p.rev_color {color: var(--reverse-font-color);}

div.parts div.fee dl dd p.space_1 {padding: 0.2em;}
div.parts div.fee dl dd p.space_2 {padding: 1em;}

div.parts div.fee dl dd p font.attention {
  font-weight: bold;
  font-size: 1.1rem;
}

div.fee_attention {
  text-align: right;
  padding-top: 2em;
  padding-right: 8em;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {

  div.parts div.fee {width: 100%; border: none;}
  div.parts div.fee dl {}

  div.fee_attention {padding-top: 2em;}
}

/* ---------- 募集要項 パーツ設定 ---------- */

/* dlタグの縦 */
dl.requirements {
  padding: 1em 0em 2em 0em;
}

dl.requirements dt {
  font-size: 16px;
  font-weight: bold;
  padding: 0.2em 1.4em;
  margin: 1em 0em 1.2em 0em;
  border-bottom: solid 1px var(--main-border-color);
}

dl.requirements dd {
  font-size: 16px;
  padding: 0em 3em 0.6em 3em;
  border-bottom: none;
}


/* ----- タクシーを呼ぶ 電話注文 パーツ設定 ----- */

div.call_taxi {
  display: inline-block;
  width: 28em;
/*  height: 21em;*/
  border: solid 1px var(--main-border-color);
  vertical-align: top;
}

div.call_taxi dl {
/*  width: auto;
  display: block;*/
}

div.call_taxi dl dt {
/*  width: auto;*/
  padding: 0em 1em 0.6em 1em;
  margin: 1em 1em 0.5em 1em;
  font-size: 1.1rem;
  border-bottom: solid 1px var(--main-border-color);
}

div.call_taxi dl dt.footer {
/*  width: auto;*/
  padding: 0.6em 1em 0em 1em;
  margin: 0.5em 1em 1em 1em;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: right;
  border-top: solid 1px var(--main-border-color);
  border-bottom: none;
}

div.call_taxi dl dd {
/*  width: auto;*/
  padding: 1em;
  margin: 0.5em 1em 0.5em 1em;
  border: none;
}

div.call_taxi dl p.rev_color {color: var(--reverse-font-color);}
div.call_taxi dl p.rev_color u {color: var(--reverse-font-color);}

/* スマホ版対応 */
@media screen and (max-width: 960px) {
  div.call_taxi {width: 100%; border: none;}
  div.call_taxi dl {}
}
