@charset "UTF-8";
/*
ユーティリティ系おまとめファイル
*/
/*
██████   █████  ███████ ███████
██   ██ ██   ██ ██      ██
██████  ███████ ███████ █████
██   ██ ██   ██      ██ ██
██████  ██   ██ ███████ ███████
*/
/*
██████  ██████  ███████  █████  ██   ██ ██████   ██████  ██ ███    ██ ████████
██   ██ ██   ██ ██      ██   ██ ██  ██  ██   ██ ██    ██ ██ ████   ██    ██
██████  ██████  █████   ███████ █████   ██████  ██    ██ ██ ██ ██  ██    ██
██   ██ ██   ██ ██      ██   ██ ██  ██  ██      ██    ██ ██ ██  ██ ██    ██
██████  ██   ██ ███████ ██   ██ ██   ██ ██       ██████  ██ ██   ████    ██
*/
/*
 ██████  ██████  ██       ██████  ██████
██      ██    ██ ██      ██    ██ ██   ██
██      ██    ██ ██      ██    ██ ██████
██      ██    ██ ██      ██    ██ ██   ██
 ██████  ██████  ███████  ██████  ██   ██
*/
/*
████████ ███████ ██   ██ ████████
   ██    ██       ██ ██     ██
   ██    █████     ███      ██
   ██    ██       ██ ██     ██
   ██    ███████ ██   ██    ██
*/
.u-pt0 {
  padding-top: 0px !important;
}

.u-pb0 {
  padding-bottom: 0px !important;
}

.u-mt0 {
  margin-top: 0px !important;
}

.u-mb0 {
  margin-bottom: 0px !important;
}

.u-pt5 {
  padding-top: 5px !important;
}

.u-pb5 {
  padding-bottom: 5px !important;
}

.u-mt5 {
  margin-top: 5px !important;
}

.u-mb5 {
  margin-bottom: 5px !important;
}

.u-pt10 {
  padding-top: 10px !important;
}

.u-pb10 {
  padding-bottom: 10px !important;
}

.u-mt10 {
  margin-top: 10px !important;
}

.u-mb10 {
  margin-bottom: 10px !important;
}

.u-pt15 {
  padding-top: 15px !important;
}

.u-pb15 {
  padding-bottom: 15px !important;
}

.u-mt15 {
  margin-top: 15px !important;
}

.u-mb15 {
  margin-bottom: 15px !important;
}

.u-pt20 {
  padding-top: 20px !important;
}

.u-pb20 {
  padding-bottom: 20px !important;
}

.u-mt20 {
  margin-top: 20px !important;
}

.u-mb20 {
  margin-bottom: 20px !important;
}

.u-pt25 {
  padding-top: 25px !important;
}

.u-pb25 {
  padding-bottom: 25px !important;
}

.u-mt25 {
  margin-top: 25px !important;
}

.u-mb25 {
  margin-bottom: 25px !important;
}

.u-pt30 {
  padding-top: 30px !important;
}

.u-pb30 {
  padding-bottom: 30px !important;
}

.u-mt30 {
  margin-top: 30px !important;
}

.u-mb30 {
  margin-bottom: 30px !important;
}

.u-pt35 {
  padding-top: 35px !important;
}

.u-pb35 {
  padding-bottom: 35px !important;
}

.u-mt35 {
  margin-top: 35px !important;
}

.u-mb35 {
  margin-bottom: 35px !important;
}

.u-pt40 {
  padding-top: 40px !important;
}

.u-pb40 {
  padding-bottom: 40px !important;
}

.u-mt40 {
  margin-top: 40px !important;
}

.u-mb40 {
  margin-bottom: 40px !important;
}

.u-pt45 {
  padding-top: 45px !important;
}

.u-pb45 {
  padding-bottom: 45px !important;
}

.u-mt45 {
  margin-top: 45px !important;
}

.u-mb45 {
  margin-bottom: 45px !important;
}

.u-pt50 {
  padding-top: 50px !important;
}

.u-pb50 {
  padding-bottom: 50px !important;
}

.u-mt50 {
  margin-top: 50px !important;
}

.u-mb50 {
  margin-bottom: 50px !important;
}

.u-pt55 {
  padding-top: 55px !important;
}

.u-pb55 {
  padding-bottom: 55px !important;
}

.u-mt55 {
  margin-top: 55px !important;
}

.u-mb55 {
  margin-bottom: 55px !important;
}

.u-pt60 {
  padding-top: 60px !important;
}

.u-pb60 {
  padding-bottom: 60px !important;
}

.u-mt60 {
  margin-top: 60px !important;
}

.u-mb60 {
  margin-bottom: 60px !important;
}

.u-pt65 {
  padding-top: 65px !important;
}

.u-pb65 {
  padding-bottom: 65px !important;
}

.u-mt65 {
  margin-top: 65px !important;
}

.u-mb65 {
  margin-bottom: 65px !important;
}

.u-pt70 {
  padding-top: 70px !important;
}

.u-pb70 {
  padding-bottom: 70px !important;
}

.u-mt70 {
  margin-top: 70px !important;
}

.u-mb70 {
  margin-bottom: 70px !important;
}

.u-pt75 {
  padding-top: 75px !important;
}

.u-pb75 {
  padding-bottom: 75px !important;
}

.u-mt75 {
  margin-top: 75px !important;
}

.u-mb75 {
  margin-bottom: 75px !important;
}

.u-pt80 {
  padding-top: 80px !important;
}

.u-pb80 {
  padding-bottom: 80px !important;
}

.u-mt80 {
  margin-top: 80px !important;
}

.u-mb80 {
  margin-bottom: 80px !important;
}

.u-pt85 {
  padding-top: 85px !important;
}

.u-pb85 {
  padding-bottom: 85px !important;
}

.u-mt85 {
  margin-top: 85px !important;
}

.u-mb85 {
  margin-bottom: 85px !important;
}

.u-pt90 {
  padding-top: 90px !important;
}

.u-pb90 {
  padding-bottom: 90px !important;
}

.u-mt90 {
  margin-top: 90px !important;
}

.u-mb90 {
  margin-bottom: 90px !important;
}

.u-pt95 {
  padding-top: 95px !important;
}

.u-pb95 {
  padding-bottom: 95px !important;
}

.u-mt95 {
  margin-top: 95px !important;
}

.u-mb95 {
  margin-bottom: 95px !important;
}

.u-pt100 {
  padding-top: 100px !important;
}

.u-pb100 {
  padding-bottom: 100px !important;
}

.u-mt100 {
  margin-top: 100px !important;
}

.u-mb100 {
  margin-bottom: 100px !important;
}

.c-topicspath {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5px 0;
  text-align: left;
}
@media screen and (max-width: 1200px) {
  .c-topicspath {
    padding: 8px 20px;
  }
}
.c-topicspath__wrap {
  background-color: #009c6f;
}
.c-topicspath li {
  display: inline-block;
  font-size: 14px;
  color: #fff;
}
.c-topicspath li:after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
  display: inline-block;
  margin-left: 8px;
  color: #fff;
}
.c-topicspath li:last-child:after {
  content: none;
}
.c-topicspath li a {
  color: inherit;
}
.c-topicspath li a:hover {
  color: inherit;
}

.l-lowerCaption {
  position: relative;
  width: 100%;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
.l-lowerCaption--howto {
  height: 555px;
}
.l-lowerCaption--howto .l-lowerCaption__title {
  font-size: 90px;
  font-family: 'Sawarabi Mincho', '游明朝', 'Yu Mincho', YuMincho,
    'ヒラギノ明朝 ProN W6', 'HiraMinProN-W6', 'HG明朝E', 'ＭＳ Ｐ明朝',
    'MS PMincho', 'MS 明朝', serif;
  font-weight: 400;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 12px;
}
@media screen and (max-width: 1024px) {
  .l-lowerCaption--howto .l-lowerCaption__title {
    font-size: 8vw;
  }
}
@media screen and (max-width: 568px) {
  .l-lowerCaption--howto .l-lowerCaption__title {
    font-size: 10vw;
  }
}
.l-lowerCaption--howto .l-lowerCaption__title small {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  font-family: 'Noto Sans JP', 游ゴシック体, YuGothic-M, 'Yu Gothic', YuGothic,
    'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo,
    Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: 600;
}
.l-lowerCaption--howto .l-lowerCaption__title small span {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 7.5px 30px;
}
@media screen and (max-width: 768px) {
  .l-lowerCaption--howto .l-lowerCaption__title small span {
    font-size: 2.5vw;
  }
}
@media screen and (max-width: 568px) {
  .l-lowerCaption--howto .l-lowerCaption__title small span {
    font-size: 15px;
  }
}
.l-lowerCaption--howto .l-lowerCaption__txt {
  text-align: center;
  font-size: 20px;
  color: #566460;
  font-weight: 600;
}
@media screen and (max-width: 568px) {
  .l-lowerCaption--howto .l-lowerCaption__txt {
    text-align: left;
    font-size: 18px;
  }
}

.l-lowerCaption__inner {
  max-width: 1170px;
  width: 100%;
  padding: 0 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#howto .l-lowerCaption {
  background-image: url('/productguide/inc/image/howto/pic_mainimg.jpg');
}
@media screen and (max-width: 568px) {
  #howto .l-lowerCaption {
    background-image: url('/productguide/inc/image/howto/pic_mainimg_sp.jpg');
  }
}

@media screen and (max-width: 1024px) {
  #howto img.pc {
    width: 80%;
  }
}

@media screen and (max-width: 568px) {
  #howto img.pc {
    display: none !important;
  }
}

#howto img.sp {
  display: none !important;
}
@media screen and (max-width: 568px) {
  #howto img.sp {
    display: block !important;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  #howto .l-section {
    padding: 0 20px 60px;
  }
}
@media screen and (max-width: 768px) {
  .bg-lightGreen {
    margin: 0 0 60px;
    padding: 30px 0;
  }
  .bg-lightGreen .l-section {
    padding: 0 20px 0px !important;
  }
}
@media screen and (max-width: 1200px) {
  .c-mainttl {
    margin-bottom: 50px;
  }
}

/* 外部リンクアイコンなし */
#howto .p-externalNoIcon::after {
  content: none;
}

#howto .p-externalNoIcon--hasHover:hover {
  opacity: 0.7;
}

#howto .p-index {
  width: 50%;
  margin: 0px auto;
  background: #e4f7f2;
  padding: 10px;
  border: 1px solid #009c6f;
}
@media screen and (max-width: 568px) {
  #howto .p-index {
    width: 100%;
  }
}
#howto .p-index__inner {
  border: 1px solid #009c6f;
  padding: 25px 40px 25px 25px;
}
#howto .p-index__heading {
  font-size: 18px;
  margin-bottom: 10px;
  color: #009c6f;
}

#howto .p-index__bg {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: -1;
  opacity: 0;
  transition: opacity 1s ease;
}

#howto .p-ttl3_ttl {
  color: #009c6f;
}

#howto .p-ttl3_ttl span {
  font-size: 80%;
}
#howto .p-ttl3_ttl .u-txt--largest {
  line-height: 1em;
}

#howto .c-mainttl__heading .ttl-point {
  display: inline-block;
}
#howto .c-mainttl__heading .ttl-point,
#howto .p-ttl3_ttl span.ttl-point {
  position: relative;
}
#howto .c-mainttl__heading .ttl-point:before,
#howto .c-mainttl__heading .ttl-point:after,
#howto .p-ttl3_ttl span.ttl-point:before,
#howto .p-ttl3_ttl span.ttl-point:after {
  content: '';
  width: 1px;
  height: 25px;
  display: inline-block;
  background-color: #009c6f;
  position: absolute;
  bottom: 0;
}
#howto .c-mainttl__heading .ttl-point:before,
#howto .p-ttl3_ttl span.ttl-point:before {
  transform: rotate(-30deg);
  left: -20px;
}
#howto .c-mainttl__heading .ttl-point:after,
#howto .p-ttl3_ttl span.ttl-point:after {
  transform: rotate(30deg);
  right: -20px;
}

#howto .p-ttl3_ttl span.ttl-step {
  background: #009c6f;
  color: #fff;
  border-radius: 5px;
  font-weight: 600;
  padding: 2px 15px;
  font-size: 70%;
}

#howto .p-ttl_drop span {
  display: block;
  font-size: 80%;
}

#howto .p-ttl_arrow {
  margin-bottom: 30px;
  position: relative;
}
.p-ttl_arrow:before {
  content: '\f0dd';
  font-family: 'Font Awesome 5 Free';
  color: #e4f7f2;
  font-weight: 600;
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3em;
  line-height: 1;
}
@media screen and (max-width: 568px) {
  .p-ttl_arrow {
    margin-bottom: 30px;
  }
  .p-ttl_arrow:before {
    top: -80px;
  }
}

#howto .img-line {
  border: solid 4px #aee8d8;
}
#howto .img-shadow {
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
  display: block;
  border-radius: 5px;
  transition: all 0.2s ease;
}
#howto a.img-shadow:hover {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
#howto .section-line {
  border-top: solid 1px #009c6f;
  padding-top: 40px;
}
#howto #search {
  margin-bottom: 30px;
}
#howto #abilities {
  margin-bottom: 60px;
}
@media screen and (max-width: 1024px) {
  #howto #abilities {
    margin-bottom: 0px;
  }
}

#howto #abilities .grid {
  justify-content: center;
}

#howto .p-anchor .p-anchor__item {
  display: block;
  border: solid 3px #009c6f;
  border-radius: 15px;
  background-color: #fff;
  padding: 20px 20px 40px 20px;
  color: #333;
  position: relative;
  text-align: center;
}
#howto .p-anchor .p-anchor__item:hover {
  background-color: #aee8d8;
}
#howto .p-anchor .p-anchor__item:after {
  content: '\f078';
  font-family: 'Font Awesome 5 Free';
  color: #009c6f;
  font-weight: 600;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1em;
  line-height: 1;
  transition: left 0.2s ease;
}
#howto .p-anchor .p-anchor__item span {
  color: #009c6f;
  display: block;
  text-align: center;
  font-weight: 600;
}

#howto .p-flow .p-flow__body {
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  margin: 0 20px 30px 20px;
  position: relative;
  background: #fff;
  padding-bottom: 20px;
  text-align: left;
}
#howto .p-flow .p-flow__bodyarrow::after {
  content: '\f0da';
  font-family: 'Font Awesome 5 Free';
  color: #e4f7f2;
  font-weight: 600;
  position: absolute;
  top: 50%;
  right: -55px;
  transform: translateY(-50%);
  font-size: 5em;
  line-height: 1;
  transition: left 0.2s ease;
}
@media screen and (max-width: 568px) {
  #howto .p-flow .p-flow__bodyarrow::after {
    content: '\f0dd';
    top: auto;
    right: auto;
    bottom: -54px;
    left: 50%;
    transform: translateX(-50%);
  }
}
#howto .p-flow .p-flow__bodyarrow.multiply::after {
  color: #aee8d8;
}
#howto .p-flow .p-flow__body .p-flow__img img {
  border-radius: 10px 10px 0 0;
}
#howto .p-flow .p-flow__body .p-flow__ttl3 {
  color: #009c6f;
  margin-bottom: 0;
}
#howto .p-flow .p-flow__body .p-flow__head,
#howto .p-flow .p-flow__body .p-flow__bottom {
  padding: 0 20px;
}

#howto .p-boxshadow__body {
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  padding: 35px;
  margin-bottom: 30px;
}
#howto .p-boxshadow__body.p-boxshadow__arrow {
  position: relative;
}
.p-boxshadow__body.p-boxshadow__arrow:after {
  content: '\f0dd';
  font-family: 'Font Awesome 5 Free';
  color: #e4f7f2;
  font-weight: 600;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5em;
  line-height: 1;
}

#howto .p-boxshadow__body--pWide {
  padding: 35px 55px;
}

@media screen and (max-width: 568px) {
  #howto .p-boxshadow__body--pWide {
    padding: 35px;
  }
}

#howto .p-boxshadow__body .p-boxshadow__ttl {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}
#howto .p-boxshadow__body .p-boxshadow__ttl:before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 17px;
  background: url(/productguide/inc/image/common/ico_drop-green.png)
    no-repeat center / contain;
  position: absolute;
  top: 0.3em;
  left: 0;
}
#howto .p-boxshadow__body .p-boxshadow__ttl span {
  color: #009c6f;
  /* text-decoration: underline; */
}
#howto .p-boxshadow__body .p-boxshadow__detail {
  padding-left: 20px;
}
#howto .p-boxshadow__thumb a:hover {
  opacity: 0.7;
}
#howto .p-boxshadow__thumb a[target='_blank']:after {
  content: none;
}
#howto .boxshadow__thumbarrow {
  position: relative;
}
#howto .boxshadow__thumbarrow::after {
  content: '\f0da';
  font-family: 'Font Awesome 5 Free';
  color: #e4f7f2;
  font-weight: 600;
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  font-size: 4em;
  line-height: 1;
  transition: left 0.2s ease;
}
@media screen and (max-width: 568px) {
  #howto .boxshadow__thumbarrow::after {
    content: '\f0dd';
    top: auto;
    right: auto;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
  }
}

#howto .c-list--check {
  padding-left: 1.8em;
}
#howto .c-list--check li {
  position: relative;
  font-weight: 600;
  line-height: 3em;
}
#howto .c-list--check li:before {
  content: '';
  display: inline-block;
  width: 25px;
  height: 20px;
  background: url(/productguide/inc/image/common/ico_checkbox.png)
    no-repeat center / contain;
  position: absolute;
  top: 0.9em;
  left: -30px;
}
#howto .bg-lightGreen .c-list--check li {
  line-height: 2em;
}
#howto .bg-lightGreen .c-list--check li:before {
  top: 0.5em;
}

#howto #download .c-contactSection {
  text-align: center;
  color: #fff;
  background: #aee8d8 url(/productguide/inc/image/howto/bg_download.jpg)
    repeat-x bottom center / contain;
  background-size: cover;
}
#howto #download .c-contactSection__caption:before,
#howto #download .c-contactSection__caption:after {
  content: none;
}
#howto #download .c-contactSection__btn .c-btn span.cosme:before {
  background-image: url(/productguide/inc/image/common/ico_cosme_red.png);
}

#howto #download .c-contactSection__btn .c-btn span.food:before {
  background-image: url(/productguide/inc/image/common/ico_food_red.png);
}
#howto #download .c-contactSection__btn .c-btn:hover .cosme:before {
  background-image: url(/productguide/inc/image/common/ico_cosme_white.png);
}

#howto #download .c-contactSection__btn .c-btn:hover .food:before {
  background-image: url(/productguide/inc/image/common/ico_food_white.png);
}

#howto #download .bg-lightGreen a:hover {
  opacity: 0.7;
}

#howto #scene .p-ttl-contents [class*='col-']:not([class*='col-0']) {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
#howto #scene .p-flow__bottom {
  border-top: solid 2px #cccccc;
}
#howto #scene .p-flow__bottom .p-flow__detail {
  margin-top: 10px;
}

#howto .w-auto {
  text-align: right;
  justify-content: flex-end;
  padding-right: 20px;
}
#howto .w-auto img {
  width: auto !important;
  display: inline;
}
@media screen and (max-width: 1024px) {
  #howto .w-auto img {
    width: 100% !important;
  }
}
@media screen and (max-width: 568px) {
  #howto .w-auto {
    text-align: center;
    justify-content: center;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-bottom: 20px !important;
  }
  #howto .w-auto img {
    width: 80% !important;
    display: inline;
  }
}

/*# sourceMappingURL=../_map/page/research.css.map */