@charset "utf-8";



#main_box { line-height: 2.0; }



/* side_menu ----------------- */

li.btn006 {

  background-color: rgb(218,218,218);

  border-bottom-color: rgb(204,204,204) !important;

}

li.btn006 > a {

  pointer-events: none;

  cursor: auto;

}

#side_box .side_menu li.btn006 > a::after { display: none; }





/* contents ---- */

.ttl_ss {

    height: 44px;

    margin-top: 20px;

    background-repeat: no-repeat;

}

.box01_01 .ttl_ss { background-image: url(../images/ttl_s01.png); }

.box01_02 .ttl_ss { background-image: url(../images/ttl_s02.png); }

.box01_03 .ttl_ss { background-image: url(../images/ttl_s03.png); }

.box01_04 .ttl_ss { background-image: url(../images/ttl_s04.png); }





/* box01 li--->li_type */



._inarrowbox div.li_type {

  display: flex;

  flex-direction: row;

  align-items: flex-end;

  border: 2px rgb(153,153,153) solid;

  margin-bottom: 4px;

}

._inarrowbox div.li_type > span {

  display: block;

}

._inarrowbox div.li_type > .text {

  width: 75%;

}

._inarrowbox div.li_type > .text > span {

  display: block;

  position: relative;

  min-height: 88px;

  padding: 12px 48px 16px 60px;

  background-color: rgb(222,222,222);

  line-height: 1.5;

}

._inarrowbox div.li_type > .text > span::before,

._inarrowbox div.li_type > .text > span::after {

  display: block;

  position: absolute;

  right: -32px;

  top: 0;

  width: 32px;

  height: 100%;

  content: '';

}

._inarrowbox div.li_type > .text > span::before {

  background-color: rgb(255,255,255);

}

._inarrowbox div.li_type > .text > span::after {

  background:

    linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgb(222,222,222) 50.5%) no-repeat top left/100% 50%,

    linear-gradient(to top left, rgba(255,255,255,0) 50%, rgb(222,222,222) 50.5%) no-repeat bottom right/100% 50%;

}

._inarrowbox div.li_type > .text > span .title {

  display: block;

  font-size: 135.5%;

  font-weight: 700;

}

._inarrowbox div.li_type > .text > span .text_body {

  display: block;

  margin-top: 8px;

  padding-left: 2em;

}

._inarrowbox div.li_type > .per {

  width: 25%;

  padding-right: 16px;

  font-size: 137.5%;

    z-index: 2;

}

._inarrowbox div.li_type > .per > span {

  font-size: 200%;

  font-weight: 700;

}



._inarrowbox div.li_type.per_title {

  display: flex;

  flex-direction: row;

  justify-content: center;

  width: 25%;

  margin-bottom: 8px;

  margin-left: auto;

  border-style: none;

  line-height: 1.2;

  font-size: 13px;

}

._inarrowbox div.li_type.per_title > span {

  border-radius: 32px;

  padding: 8px 12px;

  background-color: rgb(249,237,215);

}



@media screen and (max-width:767px) {

  ._inarrowbox div.li_type > .text > span .title {

  font-size: 120%;

}

  ._inarrowbox div.li_type.per_title {

    width: 140px;

  }

  ._inarrowbox div.li_type > .text {

    width: calc(100% - 50px);

  }

  ._inarrowbox div.li_type > .text > span {

    padding: 12px 12px 8px 55px;

    min-height: 77px;

  }

  ._inarrowbox div.li_type > .text > span .title {

  }

  ._inarrowbox div.li_type > .text > span .text_body {

    padding-left: 1em;

  }

  ._inarrowbox > div.li_type > .per {

    width: 120px;

  }

}





/* box01 */



.box01 .box_gray20 .title {

  font-size: 112.5%;

  border-bottom: 2px rgb(213,211,211) solid;

  font-weight: 700;

}

.box01 .box_gray20 .title {}

.box01 .box_gray20 .text > div.li_type {

  display: block;

  text-indent: -1em;

  padding-left: 2em;

}

.box01 .box_gray20 h6{

  font-weight: 700;;

}



.box01 .basic_policy_box div.li_type.per_title > span {

  min-width: 80%;

 background-color: #f4f4f4;

}

.box01 .basic_policy_box div.li_type.chil02 {

  border-color: rgb(247,175,11);

}

.box01 .basic_policy_box div.li_type.chil02 > .text > span {

  background-color: rgb(249,237,215);

}

.box01 .basic_policy_box div.li_type.chil02 > .text > span::after {

  background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgb(249,237,215) 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, rgba(255,255,255,0) 50%, rgb(249,237,215) 50.5%) no-repeat bottom right/100% 50%;

}

.box01 .basic_policy_box div.li_type.chil02 > .per {

color: rgb(247,175,11);

}



.box01 .basic_policy_box div.li_type.chil03 {

  border-color: rgb(102,153,51);

}

.box01 .basic_policy_box div.li_type.chil03 > .text > span {

  background-color: rgb(228,252,202);

}

.box01 .basic_policy_box div.li_type.chil03 > .text > span::after {

  background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgb(228,252,202) 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, rgba(255,255,255,0) 50%, rgb(228,252,202) 50.5%) no-repeat bottom right/100% 50%;

}



.box01 .basic_policy_box div.li_type.chil03 > .per {

color: rgb(102,153,51);

}



.box01 .basic_policy_box div.li_type.chil04 {

  border-color: rgb(102,51,204);

}

.box01 .basic_policy_box div.li_type.chil04 > .text > span {

  background-color: rgb(239,227,253);

}

.box01 .basic_policy_box div.li_type.chil04 > .text > span::after {

  background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgb(239,227,253) 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, rgba(255,255,255,0) 50%, rgb(239,227,253) 50.5%) no-repeat bottom right/100% 50%;

}



.box01 .basic_policy_box div.li_type.chil04 > .per {

color: rgb(102,51,204);

}



.box02 .strategy_box {

  display: flex;

  justify-content: space-between;

}

.box02 .strategy_box > li {

  display: flex;

  flex-direction: column;

  width: calc(((100% - (24px + 345px)) / 9) * 4);

}

.box02 .strategy_box > li:last-child {

  width: calc(((100% - (24px + 345px)) / 9) + 345px + 8px);

}



.box02 .strategy_box .item_box {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 8px;

  background-color: rgb(222,222,222);

}

.box02 .strategy_box > li:last-child .item_box {

  display: block;

  background-color: transparent;

  padding: 0;

}

.box02 .strategy_box .item_box._upper {

  min-height: 154px;

}

.box02 .strategy_box .item_box._lower {

  min-height: 154px;

  margin-top: 8px;

}

.box02 .strategy_box .item_box._upper2 {

  min-height: 270px;

}

.box02 .strategy_box .item_box._lower2 {

  min-height: 200px;

  margin-top: 8px;

}



.box02 .strategy_box > li:last-child .item_box > div {

  position: relative;

  padding: 8px;

  background-color: rgb(225,236,255);

}

.box02 .strategy_box > li:last-child .item_box._lower > div {

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-height: 200px;

}

.box02 .strategy_box > li:last-child .item_box._upper > div:first-child {

  padding-right: calc(100% - 240px);

}

.box02 .strategy_box .title {

  padding-left: 6px;

  font-weight: 700;

}

.box02 .strategy_box .item_title {

  display: block;

  line-height: 1.5;

}



.box02 .strategy_box .item_box > div > ul {

  margin-top: 8px;

}

.box02 .strategy_box .item_box > div > ul > li {

  display: flex;

  justify-content: space-between;

  font-size: 81.25%;

  line-height: 1.5;

}

.box02 .strategy_box > li:last-child .item_box > div > .image {

  position: absolute;

  width: calc(100% - 256px);

  max-width: 120px;

  right: 8px;

  top: 0px;

}



.box02 .strategy_box .item_box ._small {

  font-size: 76.9%;

}



.box02 .strategy_box .item_box .item {

  line-height: 1.4;

}

.box02 .strategy_box .item_box ._l {

  font-weight: 700;

  font-size: 112.5%;

}



@media screen and (max-width: 980px) {

  .box02 .strategy_box .item_title._under {

    font-size: calc(1.6949vw - 0.6102px);

  }

  .box02 .strategy_box .item_box .item {

    font-size: calc(3.3898vw - 17.2203px);

  }

}

@media screen and (max-width: 920px) {

  .box02 .strategy_box .item_title._under,

  .box02 .strategy_box .item_box .item {

    font-size: 100%;

  }

}



@media screen and (max-width: 767px) {

  .box02 .strategy_box {

    flex-wrap: wrap;

  }

  .box02 .strategy_box > li {

    width: calc((100% - 8px) / 2);

  }

  .box02 .strategy_box > li:last-child {

    margin-top: 16px;

    width: 100%;

  }

  .box02 .strategy_box .item_box._upper {

    min-height: 100px;

  }

  .box02 .strategy_box .item_box._lower {

    min-height: 100px;

  }

  .box02 .strategy_box .item_box._upper2 {

    min-height: 184px;

  }

  .box02 .strategy_box .item_box._lower2 {

    min-height: 124px;

  }

  .box02 .strategy_box > li:last-child .item_box._lower > div {

    min-height: auto;

  }

}







.box01 ._inarrowbox > div.li_type {

    align-items: center;

}



.box01 .box_gray20 ._l {

  font-size: 175%;

  font-weight: 700;

  line-height: 1;

  width: 33px;

  text-align: right;

  display: inline-block;

}

.box01 .box_gray20 ._m {

  font-size: 137.5%;

  font-weight: 700;

  width: 32%;

  min-width: 240px;

  display: inline-block;

}

.box01 .box_gray20 ._s {

  font-size: 87.5%;

  white-space: nowrap

}



/* 20220322 model_box */

.box01 .box_variable {

    display: none;

    padding: 10px 10px 9px;

    background-color: #fcfcfc;

}

.box01 .box_variable h4 {

    display: inline-block;

    font-weight: 700;

    border: 2px solid;

    padding: 3px 10px;

    margin-bottom: 10px;

}



.box01 .box_variable h4 {

    color:#f7af0d;

    background-color: #ffffff;

    border-color: #f7af0d;

}

.box01 .box_variable h4.oem_mark {

    color:#79d1d9;

    border-color: #79d1d9;

}

.box01 .box_variable h4.food_mark {

    color:#e57663;

    border-color: #e57663;

}

.box01 .box_variable h4.etc_mark {

    color:#666666;

    border-color: #666666;

}

.box01 .model_box_wrap {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  margin-bottom: 25px;

}



.box01 .model_box {

  position: relative;

  width: 100%;

}

.box01 .model_box01 {

  width: calc((100% - 10px) * (387 / 784));

}

.box01 .model_box02 {

  width: calc((100% - 10px) * (387 / 784));

}



@media screen and (max-width: 767px) {

    .box01 .model_box_wrap {

  display: block;

}

    .box01 .model_box01,.box01 .model_box02  {

  width: 100%;

}

}



.box01 .model_box > .title {

  background-color: rgb(218,218,218);

  padding: 7px;

  font-size: 18px;

  font-weight: 700;

  text-align: center;

  min-height: 68px;

  line-height: 1.4;

}

.box01 .model_box01 div {

    font-weight: 700;

    text-align: center;

    margin: 10px 0;

}



.box01 .model_box02 > ul {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.box01 .model_box02 > ul > li {

  position: relative;

  width: 100%;

  margin-top: 6px;

  margin-bottom: 6px;

  background-color: #f8cbad;

  padding: 10px 5px;

  display: flex;

  align-items: center;

    text-align: center;

}



.box01 .model_box02 > ul > li p{

    width: 100%;

    line-height: 1.4;

}

.box01 .model_box02 > ul > li.col2 {

  width: calc((766 - 6) / 2 / 784 * 100%);

    background-color: #f8cbad;

}

.box01 .model_box02 > ul > li.col3 {

  width: calc((754 - 12) / 3 / 784 * 100%);

    background-color: #f8cbad;

}

.box01 .full_box .btn_opne_close{

    position: relative;

    cursor: pointer;}



.box01 .full_box .btn_opne_close:hover {

  border-color: rgb(208,18,27);

  color: rgb(208,18,27);

}

.box01 .full_box .btn_opne_close,

.box01 .full_box .btn_opne_close::before {

    transition: all .4s cubic-bezier(.165, .84, .44, 1);

}



.box01 .full_box .btn_opne_close::before {

  position: absolute;

  display: block;

  left: 20px;

  top: calc(50% + 0px);

  width: 25px;

  height: 25px;

  background-repeat: no-repeat;

  background-size: contain;

  transform: translate3d(0, -50%, 0);

  content: '';

    z-index: 1;

}

.box01 .full_box .btn_opne_close.plus01::before {

  background-image: url(/common/images/01_plus.svg);

}

.box01 .full_box .btn_opne_close.plus02::before {

  background-image: url(/common/images/02_plus.svg);

}

.box01 .full_box .btn_opne_close.plus03::before {

  background-image: url(/common/images/03_plus.svg);

}

.box01 .full_box .btn_opne_close:hover::before {

  background-image: url(/common/images/on_plus.svg);

}

.box01 .full_box._hide .btn_opne_close.plus01::before {

  background-image: url(/common/images/01_maina.svg);

}

.box01 .full_box._hide .btn_opne_close.plus02::before {

  background-image: url(/common/images/02_maina.svg);

}

.box01 .full_box._hide .btn_opne_close.plus03::before {

  background-image: url(/common/images/03_maina.svg);

}

.box01 .full_box._hide  .btn_opne_close:hover::before {

  background-image: url(/common/images/on_maina.svg);

}