@charset "UTF-8";

/*! Type: YakuHanJP_Narrow - Based on Noto Sans CJK JP */
@font-face {
 font-family: YakuHanJP_Narrow;
 font-style: normal;
 font-weight: 300;
 font-display: swap;
 src: url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Light.eot");
 src: url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP/YakuHanJP-Light.woff2") format("woff2"), url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Light.woff") format("woff");
 unicode-range: U+3001-3002, U+3008-3011, U+3014-3015, U+30fb, U+ff01, U+ff08-ff09, U+ff1a-ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d
}

@font-face {
 font-family: YakuHanJP_Narrow;
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Light.eot");
 src: url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Light.woff2") format("woff2"), url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Light.woff") format("woff");
 unicode-range: U+3001-3002, U+3008-3011, U+3014-3015, U+30fb, U+ff01, U+ff08-ff09, U+ff1a-ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d
}

@font-face {
 font-family: YakuHanJP_Narrow;
 font-style: normal;
 font-weight: 500;
 font-display: swap;
 src: url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-DemiLight.eot");
 src: url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-DemiLight.woff2") format("woff2"), url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-DemiLight.woff") format("woff");
 unicode-range: U+3001-3002, U+3008-3011, U+3014-3015, U+30fb, U+ff01, U+ff08-ff09, U+ff1a-ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d
}

@font-face {
 font-family: YakuHanJP_Narrow;
 font-style: normal;
 font-weight: 600;
 font-display: swap;
 src: url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Regular.eot");
 src: url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Regular.woff2") format("woff2"), url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Regular.woff") format("woff");
 unicode-range: U+3001-3002, U+3008-3011, U+3014-3015, U+30fb, U+ff01, U+ff08-ff09, U+ff1a-ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d
}

@font-face {
 font-family: YakuHanJP_Narrow;
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Medium.eot");
 src: url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Medium.woff2") format("woff2"), url("../../fonts/202404_hybrid-gel-oil_special/YakuHanJP-Medium.woff") format("woff");
 unicode-range: U+3001-3002, U+3008-3011, U+3014-3015, U+30fb, U+ff01, U+ff08-ff09, U+ff1a-ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d
}

@media (max-width:639px) {
 body {
  min-width: 320px
 }
}

#main {
 margin-top: 0;
 margin-bottom: 0
}

#main>.row {
 max-width: none
}

#primary.column {
 padding-left: 0 !important;
 padding-right: 0 !important
}

h1,
h2,
h3 {
 border: none;
 font-weight: 400;
 padding: 0
}

footer img {
 display: inline-block
}

.hgo-ttl {
 color: #c8c8c8;
 font-family: Roboto, YakuHanJP_Narrow, "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
 font-size: 28px;
 font-weight: 300;
 letter-spacing: .06em;
 line-height: 1.1428571429
}

.hgo-ttl--xs {
 font-size: 22px;
 letter-spacing: .02em
}

.hgo-ttl--s {
 font-size: 23px
}

.hgo-ttl--l {
 font-size: 40px
}

.hgo-ttl--horz {
 display: -webkit-box;
 display: flex;
 -webkit-box-align: baseline;
 align-items: baseline
}

.hgo-ttl__sub {
 display: block;
 font-size: 12px;
 font-weight: 400;
 letter-spacing: .05em
}

.hgo-ttl--horz .hgo-ttl__sub {
 margin-left: .4em
}

.hgo-ttl--xs .hgo-ttl__sub {
 margin-top: .4em
}

@media (min-width:640px) {
 .hgo-ttl {
  font-size: 40px
 }

 .hgo-ttl--xs {
  font-size: 25px
 }

 .hgo-ttl--s {
  font-size: 32px
 }

 .hgo-ttl--l {
  font-size: 70px
 }

 .hgo-ttl--horz\@m- {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
  align-items: baseline
 }

 .hgo-ttl__sub {
  font-size: 14px
 }

 .hgo-ttl--horz:not(.hgo-ttl--xs) .hgo-ttl__sub,
 .hgo-ttl--horz\@m-:not(.hgo-ttl--xs) .hgo-ttl__sub {
  margin-left: .4em
 }

 .hgo-ttl--horz:not(.hgo-ttl--xs) .hgo-ttl__sub,
 .hgo-ttl--horz\@m-.hgo-ttl--xs .hgo-ttl__sub {
  margin-left: 1.7em;
  letter-spacing: .12em
 }
}

@media (min-width:750px) {
 .hgo-ttl--horz\@l- {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
  align-items: baseline
 }

 .hgo-ttl--horz\@l-.hgo-ttl--xs .hgo-ttl__sub {
  margin-left: 1.7em;
  letter-spacing: .12em
 }
}

@media (max-width:639px) {
 .hgo-ttl--l {
  letter-spacing: .02em
 }

 .hgo-ttl--l .hgo-ttl__sub {
  margin-top: .2em
 }
}

.hgo-btn {
 display: block;
 width: 100%;
 max-width: 270px;
 margin-right: auto;
 margin-left: auto;
 padding: 17px 10px 14px;
 background-color: #727377;
 border: none;
 border-radius: 3px;
 color: #fff;
 font-family: Roboto, YakuHanJP_Narrow, "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
 font-size: 14px;
 text-align: center;
 letter-spacing: .12em;
 line-height: 1;
 -webkit-transition: opacity .4s cubic-bezier(.25, .46, .45, .94);
 transition: opacity .4s cubic-bezier(.25, .46, .45, .94)
}

.hgo-btn.is-inView:hover,
.hgo-btn:hover {
 opacity: .6
}

.hgo-btn--ja {
 font-weight: 400
}

.hgo-btn--l {
 max-width: 315px;
 padding: 22px 10px 16px
}

.hgo-btn--primary {
 background-repeat: no-repeat;
 background-size: auto 100%;
 background-position: right bottom;
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22610%22%20height%3D%2274%22%20viewBox%3D%220%200%20610%2074%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%22-9361.266%22%20y1%3D%22-6704.437%22%20x2%3D%22-8729.643%22%20y2%3D%22-6704.437%22%20gradientTransform%3D%22rotate(27.335%20-18172.792%2016119.407)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e9e0ff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23efffff%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h610v74H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%23a5a5a8%22%20d%3D%22M612.533-958.415V74.221H-8.109V-958.415z%22%2F%3E%3Cpath%20opacity%3D%22.67%22%20fill%3D%22url(%23b)%22%20d%3D%22M542.42%20426.48L-2.073%20156.168l291.431-511.951L833.851-85.471%20542.42%20426.48z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

@media (min-width:640px) {
 .hgo-btn {
  max-width: 360px;
  padding: 14px 10px 12px;
  border-right: 4px;
  font-size: 18px
 }

 .hgo-btn--ja {
  padding: 16px 10px 13px;
  font-size: 15px
 }

 .hgo-btn--l {
  max-width: 610px;
  padding: 29px 10px 27px
 }

 .hgo-btn--primary {
  background-size: cover
 }

 .hgo-btn--left\@m- {
  margin-left: 0
 }
}

@media (min-width:960px) {
 .hgo-btn--left\@l {
  margin-left: 0
 }
}

.hgo-list>li {
 position: relative
}

.hgo-list--disc>li {
 padding-left: .55em
}

.hgo-list--disc>li::before {
 content: "•";
 display: block;
 position: absolute;
 left: 0
}

.hgo-list--circle>li {
 padding-left: 1em
}

.hgo-list--circle>li::before {
 content: "◯";
 display: block;
 position: absolute;
 top: 1%;
 left: 0;
 -webkit-transform: scale(.85);
 transform: scale(.85);
 -webkit-transform-origin: left center;
 transform-origin: left center
}

.ico-plus {
 fill: currentColor;
 stroke: currentColor
}

.ico-plus__vert {
 -webkit-transition: -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
 transition: -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
 transition: transform .4s cubic-bezier(.25, .46, .45, .94);
 transition: transform .4s cubic-bezier(.25, .46, .45, .94), -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
 -webkit-transform-origin: center center;
 transform-origin: center center
}

.is-open .ico-plus__vert {
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg)
}

.hgo-video {
 position: relative;
 width: 100%;
 padding-top: 55.866%
}

.hgo-video iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%
}

.js-accTgl {
 cursor: pointer;
 -webkit-transition: opacity .4s cubic-bezier(.25, .46, .45, .94);
 transition: opacity .4s cubic-bezier(.25, .46, .45, .94)
}

.js-accTgl:hover {
 opacity: .6
}

.js-accBody {
 overflow: hidden;
 -webkit-transition: .4s cubic-bezier(.25, .46, .45, .94);
 transition: .4s cubic-bezier(.25, .46, .45, .94);
 -webkit-transition-property: opacity, height, padding-top, padding-bottom;
 transition-property: opacity, height, padding-top, padding-bottom
}

.js-accBody:not(.is-open) {
 height: 0;
 padding: 0;
 opacity: 0
}

.hgo-ctnr {
 width: 100%;
 margin-right: auto;
 margin-left: auto;
 padding-right: 8%;
 padding-left: 8%
}

.hgo-ctnr--max {
 max-width: 1350px
}

.hgo-ctnr--xl {
 max-width: 1266px
}

.hgo-ctnr--l {
 max-width: 1080px
}

.hgo-ctnr--m {
 max-width: 1006px
}

.hgo-ctnr--s {
 max-width: 940px
}

.hgo-ctnr--xs {
 max-width: 796px
}

.hgo-ctnr--xxs {
 max-width: 650px
}

@media (min-width:640px) {
 .hgo-ctnr {
  padding-right: 40px;
  padding-left: 40px
 }
}

@media (max-width:639px) {
 .hgo-ctnr\@s {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 8%;
  padding-left: 8%
 }

 .hgo-ctnr--expand\@s {
  padding-right: 0;
  padding-left: 0
 }

 .hgo-ctnr--l\@s {
  padding-right: 4%;
  padding-left: 4%
 }

 .hgo-ctnr--m\@s {
  padding-right: 5.334%;
  padding-left: 5.334%
 }

 .hgo-ctnr--s\@s {
  padding-right: 10.67%;
  padding-left: 10.67%
 }
}

@media (max-width:959px) {
 .hgo-ctnr\@s-l {
  width: 100%;
  margin-right: auto;
  margin-left: auto
 }
}

@media (min-width:640px) and (max-width:959px) {
 .hgo-ctnr\@s-l {
  padding-right: 40px;
  padding-left: 40px
 }
}

@media (max-width:639px) {
 .hgo-ctnr\@s-l {
  padding-right: 8%;
  padding-left: 8%
 }
}

h2,
h3,
h4,
h5 {
 color: #585858
}

.hgo {
 padding-bottom: 62px;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 color: #585858;
 font-family: YakuHanJP_Narrow, "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
 font-weight: 400;
 font-size: 13px;
 -webkit-font-feature-settings: "pkna";
 font-feature-settings: "pkna";
 letter-spacing: .06em;
 line-height: 1
}

.hgo p {
 margin: 0;
 line-height: 1
}

.hgo ul {
 margin: 0;
 padding: 0
}

@media (min-width:640px) {
 .hgo {
  padding-bottom: 135px;
  font-size: 16px
 }
}

.hgoMV {
 width: 100%;
 background-image: url(../../images/202404_hybrid-gel-oil_special/mv_bg.png);
 background-repeat: no-repeat;
 background-size: auto 100%;
 background-position: center top 0
}

.hgoMV__img {
 width: 100%
}

@media (min-width:960px) {
 .hgoMV {
  background-size: 100% auto
 }
}

.hgoPRES {
 padding-top: 42px
}

.hgoPRES__panel {
 padding-bottom: 30px
}

.hgoPRES__inner {
 padding-top: 54px
}

.hgoPRES__ttl {
 position: absolute;
 top: -13px;
 left: 29px
}

.hgoPRES__01Ttl {
 padding-bottom: 17px;
 line-height: 1.6
}

.hgoPRES__steps>li:nth-child(n+2) {
 margin-top: 17px
}

.hgoPRES__step {
 display: -webkit-box;
 display: flex
}

.hgoPRES__stepLbl {
 -webkit-box-flex: 0;
 flex: 0 0 29px;
 text-align: center;
 letter-spacing: .14em;
 line-height: 1.75
}

.hgoPRES__stepNum {
 display: block;
 width: 29px;
 height: 21px
}

.hgoPRES__stepVis {
 -webkit-box-flex: 0;
 flex: 0 0 33px;
 width: 33px
}

.hgoPRES__stepTxt {
 -webkit-box-flex: 1;
 flex: 1 1 auto
}

.hgoPRES__stepTtl {
 letter-spacing: .05em;
 line-height: 1.4583333333
}

.hgoPRES__stepDesc {
 line-height: 1.3913043478
}

.hgoPRES__catch {
 margin-top: 18px;
 letter-spacing: .12em;
 line-height: 1.6
}

.hgoPRES__02Ttl {
 padding-bottom: 16px;
 line-height: 1.65
}

.hgoPRES__02TtlSub {
 padding-bottom: 5px
}

.hgoPRES__02List {
 line-height: 1.5833333333
}

.hgoPRES__note {
 margin-top: 4px;
 letter-spacing: .01em;
 line-height: 1.2
}

@media (min-width:640px) {
 .hgoPRES {
  padding-top: 68px
 }

 .hgoPRES__panel {
  padding: 0 20px 15px
 }

 .hgoPRES__inner {
  max-width: 934px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 52px
 }

 .hgoPRES__ttl {
  top: -22px;
  left: 0
 }

 .hgoPRES__01 {
  max-width: 440px;
  padding-top: 11px
 }

 .hgoPRES__01Ttl,
 .hgoPRES__02Ttl {
  letter-spacing: .07em
 }

 .hgoPRES__01Ttl {
  padding-bottom: 18px;
  line-height: 1.45
 }

 .hgoPRES__steps>li:nth-child(n+2) {
  margin-top: 8px
 }

 .hgoPRES__step {
  -webkit-box-align: center;
  align-items: center
 }

 .hgoPRES__stepLbl {
  -webkit-box-flex: 0;
  flex: 0 0 40px
 }

 .hgoPRES__stepNum {
  width: 40px;
  height: 28px
 }

 .hgoPRES__stepVis {
  -webkit-box-flex: 0;
  flex: 0 0 51px
 }

 .hgoPRES__stepTtl {
  line-height: 1.45
 }

 .hgoPRES__stepDesc {
  margin-top: 2px;
  line-height: 1.4
 }

 .hgoPRES__catch {
  margin-top: 18px
 }

 .hgoPRES__arr {
  padding-top: 30px
 }

 .hgoPRES__02 {
  max-width: 344px
 }

 .hgoPRES__02Ttl {
  line-height: 1.55;
  padding-bottom: 9px
 }

 .hgoPRES__02List>li {
  line-height: 1.58
 }

 .hgoPRES__02Vis {
  -webkit-box-ordinal-group: 0;
  order: -1
 }

 .hgoPRES__note {
  margin-top: 18px;
  line-height: 1.5454545455
 }
}

@media (min-width:960px) {
 .hgoPRES__content {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between
 }

 .hgoPRES__01,
 .hgoPRES__02 {
  width: calc(50% - 36px)
 }

 .hgoPRES__01 {
  -webkit-box-flex: 1;
  flex: 1 1 auto
 }

 .hgoPRES__arr {
  -webkit-box-flex: 1;
  flex: 1 0 72px;
  padding-top: 157px;
  padding-right: 10px
 }

 .hgoPRES__02 {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-flex: 0;
  flex: 0 1 344px;
  position: relative;
  left: 7px
 }

 .hgoPRES__02Desc {
  margin-top: 23px
 }
}

@media (min-width:1120px) {
 .hgoPRES__ttl {
  left: -33px
 }
}

@media (max-width:959px) {

 .hgoPRES__01,
 .hgoPRES__02 {
  margin-left: auto;
  margin-right: auto
 }

 .hgoPRES__arr {
  padding-top: 40px;
  padding-bottom: 40px
 }

 .hgoPRES__arrIco {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
 }

 .hgoPRES__02Vis {
  margin-top: 30px
 }
}

@media (max-width:639px) {
 .hgoPRES__stepLbl {
  padding-top: 4px
 }

 .hgoPRES__stepVis {
  align-self: center
 }

 .hgoPRES__stepVisImg--01 {
  width: 15px
 }

 .hgoPRES__stepVisImg--02 {
  width: 13px
 }

 .hgoPRES__stepVisImg--03 {
  width: 14px
 }

 .hgoPRES__arr {
  padding-top: 27px;
  padding-bottom: 25px
 }

 .hgoPRES__arrIco {
  width: 27px
 }

 .hgoPRES__02Wrap {
  left: 6px;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto
 }

 .hgoPRES__02Vis {
  margin-top: 7px
 }

 .hgoPRES__02VisImg {
  width: 231px
 }
}

.hgoPRD {
 padding-top: 122px
}

.hgoPRD__img {
 width: 100%
}

.hgoPRD__txt {
 padding-bottom: 46px
}

.hgoPRD__catch {
 margin-top: 30px;
 letter-spacing: .07em;
 line-height: 1.8235294118
}

.hgoPRD__lead {
 margin-top: 30px;
 line-height: 1.8
}

.hgoPRD__deets {
 display: block;
 margin-top: 5px
}

.hgoPRD__p {
 margin: 16px 0;
 line-height: 1.5
}

.hgoPRD__btn {
 margin-top: 33px
}

@media (min-width:640px) {
 .hgoPRD {
  padding-top: 209px
 }

 .hgoPRD__wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 1px
 }

 .hgoPRD__vis {
  width: 45%;
  padding-right: 20px
 }

 .hgoPRD__img {
  max-width: 332px
 }

 .hgoPRD__txt {
  width: 55%;
  padding-bottom: 4.5%;
  padding-left: .7%
 }

 .hgoPRD__catch {
  margin-top: 52px;
  padding-left: 4px;
  line-height: 1.85
 }

 .hgoPRD__lead {
  margin-top: 40px;
  line-height: 1.875
 }

 .hgoPRD__deets {
  margin-top: 8px
 }

 .hgoPRD__p {
  margin: 21px 0 20px;
  line-height: 1.43
 }

 .hgoPRD__btn {
  margin-top: 49px
 }

 .hgoPRD__btm {
  margin-top: -41px
 }
}

@media (min-width:960px) {
 .hgoPRD__vis {
  width: 332px;
  padding-right: 0
 }

 .hgoPRD__img {
  left: 8px
 }

 .hgoPRD__txt {
  width: calc(100% - 332px);
  padding-left: 16%
 }
}

@media (max-width:639px) {
 .hgoPRD__vis {
  margin-top: 41px
 }

 .hgoPRD__img {
  width: 50%;
  margin-left: auto;
  margin-right: auto
 }

 .hgoPRD__txt {
  max-width: 270px;
  margin: 37px auto 0
 }

 .hgoPRD__name {
  letter-spacing: .02em
 }
}

.hgoPRD__pt {
 height: 0;
 overflow: hidden;
 padding-top: 0;
 -webkit-transition: 1.5s ease;
 transition: 1.5s ease;
 -webkit-transition-property: height, padding;
 transition-property: height, padding
}

.hgoPRD__pt.is-open {
 padding-top: 78px;
 padding-bottom: 44px;
 height: auto
}

.hgoPRD__ptItem--02 {
 margin-top: 73px
}

.hgoPRD__ptItem--03 {
 margin-top: 77px
}

.hgoPRD__ptLbl {
 display: -webkit-box;
 display: flex;
 -webkit-box-align: end;
 align-items: flex-end;
 letter-spacing: 0
}

.hgoPRD__ptLblNum {
 display: block;
 width: 69px;
 height: 48px
}

.hgoPRD__ptLblTxt {
 display: -webkit-box;
 display: flex;
 -webkit-box-align: center;
 align-items: center;
 position: relative
}

.hgoPRD__ptLblTxt::before {
 content: "";
 display: block;
 width: 46px;
 height: 1px;
 margin-right: .5em;
 background-color: currentColor
}

.hgoPRD__ptLblTxt--02::before,
.hgoPRD__ptLblTxt--03::before {
 margin-left: .3em
}

.hgoPRD__ptTtl {
 padding: 33px 0 20px;
 line-height: 1.75
}

.hgoPRD__ptP {
 line-height: 1.8333333333
}

.hgoPRD__ptNote {
 margin-top: 18px;
 line-height: 1.5
}

.hgoPRD__ptFig01 {
 margin: 55px auto 0
}

.hgoPRD__ptFig01Wrap {
 display: -webkit-box;
 display: flex;
 flex-wrap: wrap;
 -webkit-box-pack: center;
 justify-content: center
}

.hgoPRD__ptFig01Item {
 position: relative;
 width: 90px;
 width: 28.572%;
 text-align: center
}

.hgoPRD__ptFig01Cap {
 margin-top: 7px;
 font-size: 11px;
 line-height: 1.4
}

.hgoPRD__ptFig01CapKern {
 letter-spacing: -.05em
}

.hgoPRD__ptFig01Lbl {
 display: -webkit-box;
 display: flex;
 -webkit-box-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 align-items: center;
 position: absolute;
 top: -32px;
 left: -9px;
 width: 51px;
 height: 51px;
 border: 1px solid #9b9b9b;
 border-radius: 50%
}

.hgoPRD__ptFig03 {
 display: -webkit-box;
 display: flex;
 -webkit-box-pack: justify;
 justify-content: space-between;
 margin-top: 40px
}

.hgoPRD__ptFig03Ttl {
 color: #848484;
 text-align: center;
 white-space: normal
}

.hgoPRD__ptFig03Desc,
.hgoPRD__ptFig03Ttl {
 letter-spacing: 0
}

.hgoPRD__ptFig03Ico {
 display: -webkit-box;
 display: flex;
 -webkit-box-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 align-items: center;
 height: 60px
}

.hgoPRD__ptFig03Desc {
 font-size: 11px;
 line-height: 1.65
}

.hgoPRD__ptFig03Plus {
 -webkit-box-flex: 0;
 flex: 0 0 auto
}

.hgoPRD__ptFig03PlusImg {
 margin-top: 41px
}

.hgoPRD__ptSubVis {
 margin-top: 37px
}

.hgoPRD__ptSubVisImg {
 width: 100%;
 max-width: 432px
}

.hgoPRD__ptBtn {
 display: table;
 margin-left: auto;
 margin-right: auto;
 vertical-align: middle;
 cursor: pointer;
 -webkit-transition: opacity .4s cubic-bezier(.25, .46, .45, .94);
 transition: opacity .4s cubic-bezier(.25, .46, .45, .94)
}

.hgoPRD__ptBtn.is-inView:hover,
.hgoPRD__ptBtn:hover {
 opacity: .6
}

.hgoPRD__ptBtnTgl,
.hgoPRD__ptBtnTxt {
 display: inline-block
}

.hgoPRD__ptBtnTxt {
 padding: 7px 2px;
 border-bottom: 1px solid currentColor
}

.hgoPRD__ptBtnTgl {
 vertical-align: middle;
 width: 40px;
 height: 40px;
 margin-left: 17px;
 border: 1px solid currentColor
}

.hgoPRD__ptBtnTgl::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 -webkit-transition: -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
 transition: -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
 transition: transform .4s cubic-bezier(.25, .46, .45, .94);
 transition: transform .4s cubic-bezier(.25, .46, .45, .94), -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%239b9b9b%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M17%208.5H0M8.5%2017V0%22%2F%3E%3C%2Fsvg%3E");
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 16px auto
}

.is-open .hgoPRD__ptBtnTgl::after {
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg)
}

@media (min-width:640px) {
 .hgoPRD__pt.is-open {
  padding-top: 148px;
  padding-bottom: 57px
 }

 .hgoPRD__ptItem--02,
 .hgoPRD__ptItem--03 {
  margin-top: 116px
 }

 .hgoPRD__ptLblNum {
  width: 80px;
  height: 56px
 }

 .hgoPRD__ptLblTxt::before {
  width: 57px
 }

 .hgoPRD__ptTtl {
  padding: 29px 0 25px;
  letter-spacing: .09em;
  line-height: 1.73
 }

 .hgoPRD__ptP {
  line-height: 1.8571428571
 }

 .hgoPRD__ptNote {
  margin-top: 14px;
  line-height: 1.4
 }

 .hgoPRD__ptVisImg {
  width: 100%
 }

 .hgoPRD__ptFig01 {
  max-width: 412px;
  margin-top: 67px
 }

 .hgoPRD__ptFig01Wrap {
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin: 0
 }

 .hgoPRD__ptFig01Item {
  width: 18.4466%;
  margin: 0
 }

 .hgoPRD__ptFig01Cap {
  margin-top: 14px;
  letter-spacing: .02em
 }

 .hgoPRD__ptFig01Lbl {
  top: -38px;
  left: -6px;
  width: 54px;
  height: 54px
 }

 .hgoPRD__ptFig03 {
  max-width: 410px;
  margin-top: 52px;
  margin: 13px auto 0
 }

 .hgoPRD__ptFig03Item {
  max-width: 185px
 }

 .hgoPRD__ptFig03Ico {
  height: 85px
 }

 .hgoPRD__ptFig03PlusImg {
  margin-top: 51px
 }

 .hgoPRD__ptFig03Desc {
  line-height: 1.6
 }

 .hgoPRD__ptSubVis {
  margin-top: 34px
 }

 .hgoPRD__ptSubVisImg {
  max-width: 432px
 }

 .hgoPRD__ptBtn {
  padding-left: 14px
 }

 .hgoPRD__ptBtnTxt {
  padding: 6px 2px
 }

 .hgoPRD__ptBtnTgl {
  width: 45px;
  height: 45px;
  margin-left: 18px
 }

 .hgoPRD__ptBtnTgl::after {
  background-size: 17px auto
 }
}

@media (min-width:640px) and (max-width:959px) {
 .hgoPRD__pt {
  margin-left: auto;
  margin-right: auto;
  max-width: 542px
 }
}

@media (min-width:960px) {
 .hgoPRD__ptItem {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  margin-top: 0
 }

 .hgoPRD__ptItem--01,
 .hgoPRD__ptItem--03 {
  -ms-grid-columns: 1fr 50%;
  grid-template-columns: 1fr 50%
 }

 .hgoPRD__ptItem--02 {
  -ms-grid-columns: 50% 1fr;
  grid-template-columns: 50% 1fr
 }

 .hgoPRD__ptBody,
 .hgoPRD__ptLbl {
  padding-left: 8.485%;
  padding-right: 8.485%
 }

 .hgoPRD__ptLbl {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  -ms-grid-column-span: 1
 }

 .hgoPRD__ptLbl--01,
 .hgoPRD__ptLbl--03 {
  -ms-grid-column: 1;
  grid-column: 1/2
 }

 .hgoPRD__ptLbl--02 {
  -ms-grid-column: 2;
  grid-column: 2/3
 }

 .hgoPRD__ptVis {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/3;
  -ms-grid-column-span: 1
 }

 .hgoPRD__ptVis--01,
 .hgoPRD__ptVis--03 {
  -ms-grid-column: 2;
  grid-column: 2/3
 }

 .hgoPRD__ptVis--02 {
  -ms-grid-column: 1;
  grid-column: 1/2
 }

 .hgoPRD__ptBody {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
  -ms-grid-column-span: 1
 }

 .hgoPRD__ptBody--01,
 .hgoPRD__ptBody--03 {
  -ms-grid-column: 1;
  grid-column: 1/2
 }

 .hgoPRD__ptBody--02 {
  -ms-grid-column: 2;
  grid-column: 2/3
 }

 .hgoPRD__ptTtl {
  padding-top: 24px
 }

 .hgoPRD__ptFig01 {
  margin-left: 0
 }

 .hgoPRD__ptFig03 {
  margin-left: 2%
 }
}

@media (min-width:960px) and (max-width:1140px) {
 .hgoPRD__ptItem:nth-child(n+2) {
  margin-top: 40px
 }
}

@media (min-width:1141px) {

 .hgoPRD__ptItem--02,
 .hgoPRD__ptItem--03 {
  -ms-grid-rows: 100px 1fr;
  grid-template-rows: 100px 1fr
 }
}

@media (min-width:1300px) {
 .hgoPRD__ptItem--01 {
  -ms-grid-rows: 109px 1fr;
  grid-template-rows: 109px 1fr
 }

 .hgoPRD__ptItem--02 {
  -ms-grid-rows: 203px 1fr;
  grid-template-rows: 203px 1fr
 }

 .hgoPRD__ptItem--03 {
  -ms-grid-rows: 128px 1fr;
  grid-template-rows: 128px 1fr
 }

 .hgoPRD__ptBody--01,
 .hgoPRD__ptBody--03,
 .hgoPRD__ptLbl--01,
 .hgoPRD__ptLbl--03 {
  padding-left: 25.9%
 }

 .hgoPRD__ptBody--02,
 .hgoPRD__ptLbl--02 {
  padding-left: 10.4%;
  padding-right: 25%
 }

 .hgoPRD__ptBody--01 {
  padding-right: 11%
 }

 .hgoPRD__ptBody--03 {
  padding-right: 10%
 }
}

@media (min-width:2000px) {

 .hgoPRD__ptBody--01,
 .hgoPRD__ptBody--03,
 .hgoPRD__ptLbl--01,
 .hgoPRD__ptLbl--03 {
  padding-left: 38%
 }
}

@media (max-width:959px) {
 .hgoPRD__ptVis {
  margin-top: 40px
 }

 .hgoPRD__ptSubVisImg {
  margin-left: auto;
  margin-right: auto
 }
}

@media (max-width:639px) {
 .hgoPRD__ptVis {
  margin-top: 31px
 }

 .hgoPRD__ptP {
  font-size: 12px;
  letter-spacing: .01em
 }

 .hgoPRD__ptPKern\@s {
  letter-spacing: -.02em
 }

 .hgoPRD__ptFig01 {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto
 }

 .hgoPRD__ptFig01Img {
  width: 100%
 }

 .hgoPRD__ptFig01Item:not(:nth-child(3n+1)) {
  margin-left: 7.14%
 }

 .hgoPRD__ptFig01Item:nth-child(n+4) {
  margin-top: 20px
 }

 .hgoPRD__ptFig03 {
  padding: 0 10px
 }

 .hgoPRD__ptFig03Item {
  width: 41%
 }

 .hgoPRD__ptFig03Plus {
  width: 15px
 }

 .hgoPRD__ptFig03IcoImg {
  width: 30px
 }
}

@media (max-width:479px) {
 .hgoPRD__ptSubVis {
  margin-right: -4.762%;
  margin-left: -4.762%
 }
}

.hgoKB {
 padding-top: 138px
}

.hgoKB__catch {
 margin-top: 29px;
 letter-spacing: .06em;
 line-height: 1.8235294118
}

.hgoKB__vis {
 position: relative;
 width: 77.334%;
 z-index: 1
}

.hgoKB__visImg {
 width: 100%
}

.hgoKB__02 {
 padding-top: 36px;
 padding-bottom: 49px
}

.hgoKB__02::before {
 content: "";
 display: block;
 position: absolute;
 right: 0;
 bottom: 0;
 width: 100%;
 height: calc(100% + 75px);
 background-color: #f2f3f4
}

.hgoKB__02P {
 line-height: 1.7692307692
}

.hgoKB__fig {
 margin-top: 41px
}

.hgoKB__03 {
 margin-top: 35px
}

.hgoKB__03P {
 letter-spacing: .02em;
 line-height: 2.0769230769
}

.hgoKB__03P+.hgoKB__03P {
 margin-top: 1.2em
}

.hgoKB__note {
 margin-top: 22px;
 line-height: 1.5
}

@media (min-width:640px) {
 .hgoKB {
  padding-top: 269px
 }

 .hgoKB__01 {
  padding-right: 40px;
  padding-left: 40px
 }

 .hgoKB__catch {
  margin-top: 54px;
  line-height: 1.82
 }

 .hgoKB__vis {
  position: absolute;
  top: 290px;
  left: 0;
  width: 42.9629%
 }

 .hgoKB__02 {
  width: 53%;
  margin-top: 15.7%;
  margin-left: auto;
  padding: 49px 40px 57px 0
 }

 .hgoKB__02::before {
  width: 176.847%;
  height: 100%
 }

 .hgoKB__02P {
  line-height: 1.875
 }

 .hgoKB__fig {
  margin-top: 78px
 }

 .hgoKB__03 {
  margin-top: 45px
 }

 .hgoKB__03P {
  letter-spacing: .1em;
  line-height: 2
 }

 .hgoKB__03P+.hgoKB__03P {
  margin-top: 1.4em
 }

 .hgoKB__note {
  margin-top: 28px;
  line-height: 1.35
 }
}

@media (min-width:960px) {
 .hgoKB__01 {
  width: 49.037%;
  margin-left: auto;
  padding-left: 0
 }

 .hgoKB__02 {
  width: 49.2592%;
  margin-top: 52px
 }

 .hgoKB__vis {
  top: 149px
 }

 .hgoKB__fig {
  margin-left: -14px
 }
}

@media (min-width:1800px) {
 .hgoKB__01 {
  width: 54%
 }

 .hgoKB__vis {
  width: 36%
 }

 .hgoKB__02 {
  width: 54.25%
 }
}

@media (max-width:639px) {

 .hgoKB__01,
 .hgoKB__02 {
  padding-left: 8%
 }

 .hgoKB__01 {
  padding-right: 8%
 }

 .hgoKB__02 {
  padding-right: 4.5%
 }

 .hgoKB__02P,
 .hgoKB__fig {
  margin-left: auto;
  margin-right: auto
 }

 .hgoKB__02P {
  max-width: 386px
 }

 .hgoKB__vis {
  margin-top: 41px
 }
}

.hgoFP {
 padding-top: 124px
}

.hgoFP__visImg {
 width: 100%
}

.hgoFP__ttl {
 margin-top: -18px
}

.hgoFP__ttlS {
 margin-top: 29px
}

.hgoFP__content {
 margin-top: 14px
}

.hgoFP__01 {
 line-height: 1.7857142857
}

.hgoFP__02 {
 padding-top: 36px
}

.hgoFP__list>li {
 line-height: 1.45
}

.hgoFP__list>li:nth-child(n+2) {
 margin-top: .95em
}

.hgoFP__note {
 margin-top: 20px;
 line-height: 1.5
}

@media (min-width:640px) {
 .hgoFP {
  padding-top: 255px
 }

 .hgoFP__ttl {
  margin-top: -39px
 }

 .hgoFP__ttlS {
  margin-top: 51px
 }

 .hgoFP__content {
  margin-top: 14px
 }

 .hgoFP__01 {
  letter-spacing: .09em;
  line-height: 2
 }

 .hgoFP__02 {
  padding-top: 7px
 }

 .hgoFP__list>li {
  letter-spacing: .08em;
  line-height: 1.5
 }

 .hgoFP__list>li:nth-child(n+2) {
  margin-top: .25em
 }

 .hgoFP__note {
  margin-top: 16px;
  line-height: 1.36
 }
}

@media (min-width:750px) {
 .hgoFP__inner {
  padding-left: 2%
 }

 .hgoFP__content {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between
 }

 .hgoFP__01 {
  width: 50%
 }

 .hgoFP__02 {
  width: 47%;
  max-width: 416px
 }
}

@media (min-width:960px) {
 .hgoFP__note {
  padding-right: 5%
 }
}

@media (max-width:749px) {
 .hgoFP__02 {
  margin-top: 30px;
  border-top: 1px solid rgba(137, 137, 137, .3)
 }
}

.hgoFP__max__ttl {
 margin-right: -5px;
 margin-left: -5px;
 letter-spacing: .055em
}

.hgoHTM {
 padding-top: 122px
}

.hgoHTM__header {
 width: 100%;
 height: 0;
 padding-top: 29.07%;
 background-image: url(../../images/202404_hybrid-gel-oil_special/htm-s.jpg);
 background-repeat: no-repeat;
 background-position: center top;
 background-size: 100% auto
}

.hgoHTM__headerInner {
 display: -webkit-box;
 display: flex;
 -webkit-box-align: center;
 align-items: center;
 -webkit-box-pack: center;
 justify-content: center;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 padding-top: 4.5%;
 padding-right: 1.4%
}

.hgoHTM__ttl {
 font-size: 45.5px;
 font-size: 12.1334vw;
 color: rgba(255, 255, 255, .65);
 letter-spacing: -.035em;
 line-height: 1.05;
 white-space: nowrap
}

.hgoHTM__subttl {
 padding-left: 1.8%;
 color: rgba(255, 255, 255, .8)
}

.hgoHTM__top {
 margin-top: 43px
}

.hgoHTM__topTtl {
 letter-spacing: .1em
}

.hgoHTM__video {
 margin-top: 14px
}

.hgoHTM__lead {
 margin-top: 35px;
 line-height: 1.7692307692
}

@media (min-width:640px) {
 .hgoHTM {
  padding-top: 180px
 }

 .hgoHTM__header {
  padding-top: 25.037%;
  background-image: url(../../images/202404_hybrid-gel-oil_special/htm.jpg);
  background-size: cover
 }

 .hgoHTM__headerInner {
  padding-top: 3%
 }

 .hgoHTM__ttl {
  font-size: 12vw
 }

 .hgoHTM__subttl {
  font-size: 16px;
  letter-spacing: .1em
 }

 .hgoHTM__top {
  margin-top: 81px
 }

 .hgoHTM__video {
  margin-top: 20px
 }

 .hgoHTM__lead {
  margin-top: 68px;
  letter-spacing: .1em;
  line-height: 1.875
 }
}

@media (min-width:960px) {
 .hgoHTM {
  padding-top: 273px
 }
}

@media (min-width:1350px) {
 .hgoHTM__ttl {
  font-size: 164px
 }
}

@media (max-width:639px) {
 .hgoHTM__lead {
  padding-right: 3.5%;
  padding-left: 3.5%;
  letter-spacing: .02em
 }
}

.hgoMSS {
 margin-top: 56px
}

.hgoMSS__header {
 position: relative;
 padding-right: 48px;
 padding-left: 12%;
 padding-bottom: 12px
}

.hgoMSS__header:not(.hgoMSS__header--lite) {
 min-height: 71px;
 padding-top: 16px;
 background-color: #727377
}

.hgoMSS__header--lite {
 padding-top: 0;
 padding-right: 12%;
 padding-left: 12%
}

.hgoMSS__body:not(.is-open)+.hgoMSS__header {
 margin-top: 1px
}

.hgoMSS__ttl--lite {
 padding-bottom: 13px
}

.hgoMSS__ttl--lite::after {
 content: "";
 display: block;
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 111.112%;
 height: 0;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 border-bottom: 1px solid rgba(132, 132, 132, .3)
}

.hgoMSS__tgl {
 position: absolute;
 top: 0;
 right: 25px;
 bottom: 0;
 width: 17px;
 height: 17px;
 margin: auto 0
}

.hgoMSS__tglIco {
 width: 17px;
 height: 17px
}

.hgoMSS__lead {
 max-width: 410px;
 margin: 19px auto 0
}

.hgoMSS__leadList>li:nth-child(n+2) {
 margin-top: .8em
}

.hgoMSS__body {
 padding-top: 35px;
 padding-bottom: 46px
}

.hgoMSS__header--lite+.hgoMSS__body {
 padding-top: 19px;
 padding-bottom: 31px
}

.hgoMSS__step {
 position: relative
}

.hgoMSS__p {
 letter-spacing: 0;
 line-height: 1.5833333333
}

@media (min-width:640px) {
 .hgoMSS {
  margin-top: 107px
 }

 .hgoMSS__header {
  padding-right: 5.525%;
  padding-left: 5.525%;
  padding-bottom: 21px
 }

 .hgoMSS__header:not(.hgoMSS__header--lite) {
  min-height: 80px;
  padding-top: 31px
 }

 .hgoMSS__ttl--lite {
  padding-bottom: 11px
 }

 .hgoMSS__ttl--lite::after {
  width: 103.948%
 }

 .hgoMSS__tgl {
  right: 40px;
  width: 29px;
  height: 29px
 }

 .hgoMSS__tglIco {
  width: 29px;
  height: 29px
 }

 .hgoMSS__lead {
  margin-top: 22px
 }

 .hgoMSS__leadList>li:nth-child(n+2) {
  margin-top: .15em
 }

 .hgoMSS__body {
  padding-top: 80px;
  padding-bottom: 114px
 }

 .hgoMSS__header--lite+.hgoMSS__body {
  padding-top: 51px;
  padding-bottom: 96px
 }

 .hgoMSS__steps {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto
 }

 .hgoMSS__step {
  width: 50%;
  padding-right: 10px;
  padding-left: 10px
 }

 .hgoMSS__vis {
  position: relative
 }

 .hgoMSS__vis::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10%;
  margin: auto 0;
  width: 36px;
  height: 32px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236.707%22%20height%3D%2232.707%22%20viewBox%3D%220%200%2036.707%2032.707%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%239b9b9b%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M20%20.354l16%2016-16%2016%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%239b9b9f%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M36%2016.354H0%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top
 }

 .hgoMSS__img,
 .hgoMSS__p {
  margin-left: auto;
  margin-right: auto
 }

 .hgoMSS__p {
  max-width: 264px;
  margin-top: 0;
  letter-spacing: .04em;
  line-height: 1.75
 }
}

@media (min-width:640px) and (max-width:749px) {
 .hgoMSS__step:nth-child(n+3) {
  margin-top: 92px
 }

 .hgoMSS__step:nth-child(2n) .hgoMSS__vis::before {
  content: ""
 }
}

@media (min-width:750px) and (max-width:959px) {
 .hgoMSS__vis::before {
  margin-left: -5%
 }
}

@media (min-width:750px) {
 .hgoMSS__step {
  width: 33.33%
 }

 .hgoMSS__steps--5 .hgoMSS__step:nth-child(1) {
  margin-left: 1px
 }

 .hgoMSS__steps--5 .hgoMSS__step:nth-child(2) {
  margin-right: 1px
 }

 .hgoMSS__steps--5 .hgoMSS__step:nth-child(n+3) {
  margin-top: 92px
 }

 .hgoMSS__vis {
  position: relative
 }

 .hgoMSS__steps--3 .hgoMSS__step:not(:nth-child(3n+1)) .hgoMSS__vis::before,
 .hgoMSS__steps--5 .hgoMSS__step:not(:nth-child(1)):not(:nth-child(3)) .hgoMSS__vis::before {
  content: ""
 }
}

@media (min-width:960px) {
 .hgoMSS__header {
  padding-right: 12%;
  padding-left: 12%
 }
}

@media (max-width:639px) {
 .hgoMSS__body {
  padding-right: 7%;
  padding-left: 7%
 }

 .hgoMSS__lead {
  padding-left: 2.7%
 }

 .hgoMSS__leadList>li {
  line-height: 1.4
 }

 .hgoMSS__steps {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto
 }

 .hgoMSS__step {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
 }

 .hgoMSS__steps--3 .hgoMSS__step:nth-child(n+2) {
  margin-top: 24px
 }

 .hgoMSS__steps--3 .hgoMSS__step:nth-child(n+2)::before {
  top: -30%
 }

 .hgoMSS__steps--5 .hgoMSS__step:nth-child(n+2) {
  margin-top: 15px
 }

 .hgoMSS__steps--5 .hgoMSS__step:nth-child(n+2)::before {
  top: -25%
 }

 .hgoMSS__step:nth-child(n+2) {
  position: relative
 }

 .hgoMSS__step:nth-child(n+2)::before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  width: 21px;
  height: 23px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2223%22%20viewBox%3D%220%200%2020.707%2022.707%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23898989%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M20.354%2012l-10%2010-10-10m10%2010V0%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top
 }

 .hgoMSS__vis {
  -webkit-box-flex: 0;
  flex: 0 0 138px
 }

 .hgoMSS__img {
  max-width: 130px
 }
}

.hgoSR {
 padding-top: 97px;
 padding-bottom: 100px
}

.hgoSR__video {
 margin-top: 19px
}

.hgoSR__btn {
 margin-top: 20px
}

@media (min-width:640px) {
 .hgoSR {
  padding-top: 241px;
  padding-bottom: 200px
 }

 .hgoSR__video {
  margin-top: 30px
 }

 .hgoSR__btn {
  margin-top: 65px
 }
}

.hgoREC {
 padding-top: 56px;
 padding-bottom: 65px
}

.hgoREC__inner {
 max-width: 420px
}

.hgoREC__ttl {
 letter-spacing: .06em;
 line-height: 1.5909090909
}

.hgoREC__content {
 margin-top: 23px
}

.hgoREC__lbl {
 display: -webkit-box;
 display: flex;
 -webkit-box-align: center;
 align-items: center;
 -webkit-box-pack: center;
 justify-content: center;
 position: absolute;
 width: 100px;
 height: 100px;
 border: 1px solid currentColor;
 line-height: 1.1903571429
}

.hgoREC__name {
 letter-spacing: .07em;
 line-height: 1.35
}

.hgoREC__info {
 line-height: 1.5
}

.hgoREC__p {
 margin-top: 13px;
 letter-spacing: .06em;
 line-height: 1.6
}

.hgoREC__price {
 margin-top: 15px
}

.hgoREC__btn {
 margin-top: 34px
}

@media (min-width:640px) {
 .hgoREC {
  padding-top: 86px;
  padding-bottom: 94px
 }

 .hgoREC__inner {
  max-width: 988px
 }

 .hgoREC__ttl {
  line-height: 1.4375
 }

 .hgoREC__content {
  margin-top: 48px
 }

 .hgoREC__item {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between
 }

 .hgoREC__item:nth-child(n+2) {
  margin-top: 129px
 }

 .hgoREC__vis {
  width: 50%;
  display: -webkit-box;
  display: flex
 }

 .hgoREC__vis--01 {
  max-width: 426px
 }

 .hgoREC__vis--02 {
  -webkit-box-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  align-items: center;
  max-width: 428px
 }

 .hgoREC__lbl {
  width: 120px;
  height: 120px;
  line-height: 1.23
 }

 .hgoREC__lbl--01 {
  top: -84px;
  right: -9%
 }

 .hgoREC__lbl--02 {
  top: -88px;
  left: 0
 }

 .hgoREC__txt {
  width: 50%;
  max-width: 402px
 }

 .hgoREC__item:nth-child(odd) .hgoREC__txt {
  -webkit-box-ordinal-group: 0;
  order: -1
 }

 .hgoREC__name {
  line-height: 1.4
 }

 .hgoREC__info {
  line-height: 1.7
 }

 .hgoREC__p {
  margin-top: 16px;
  line-height: 1.45
 }

 .hgoREC__price {
  margin-top: 20px
 }

 .hgoREC__btn {
  margin-top: 30px
 }
}

@media (min-width:750px) {
 .hgoREC__vis--02 {
  -webkit-box-align: end;
  align-items: flex-end
 }

 .hgoREC__lbl--01 {
  right: -2.8%
 }

 .hgoREC__img--01 {
  top: -6px
 }

 .hgoREC__img--02 {
  top: 8px
 }
}

@media (min-width:640px) and (max-width:959px) {
 .hgoREC__vis--02 {
  padding-right: 25px
 }
}

@media (min-width:960px) {
 .hgoREC__inner {
  left: 1.3%
 }

 .hgoREC__lbl--02 {
  left: -8.2%
 }
}

@media (max-width:639px) {
 .hgoREC__item:nth-child(n+2) {
  margin-top: 73px
 }

 .hgoREC__visWrap--01 {
  padding-top: 78px
 }

 .hgoREC__visWrap--02 {
  padding-top: 62px
 }

 .hgoREC__img {
  margin-left: auto;
  margin-right: auto;
  width: 85.715%
 }

 .hgoREC__img--02 {
  left: -2.5%
 }

 .hgoREC__lbl--01 {
  top: 0;
  left: 37px
 }

 .hgoREC__lbl--02 {
  top: 0;
  right: 5px
 }

 .hgoREC__txt {
  width: 86%;
  margin: 41px auto 0
 }

 .hgoREC__name--kern {
  letter-spacing: -.02em
 }
}

.hgoSI {
 padding-top: 96px
}

.hgoSI__content {
 margin-top: 40px
}

.hgoSI__listItem {
 padding-right: 10.87%;
 padding-left: 10.87%;
 padding-bottom: 35px
}

.hgoSI__listItem:nth-child(n+2) {
 padding-top: 49px;
 border-top: 1px solid rgba(132, 132, 132, .3)
}

.hgoSI__card {
 margin-left: auto;
 margin-right: auto
}

.hgoSI__cardBody {
 padding-top: 30px
}

.hgoSI__cardTtl {
 letter-spacing: .06em
}

.hgoSI__cardP {
 letter-spacing: .05em;
 line-height: 1.7
}

.hgoSI__cardP:nth-of-type(1) {
 margin: 11px 0 5px
}

@media (min-width:640px) {
 .hgoSI {
  padding-top: 196px
 }

 .hgoSI__content {
  margin-top: 102px
 }

 .hgoSI__listItem {
  padding-right: 23px;
  padding-left: 23px;
  padding-bottom: 65px
 }

 .hgoSI__listItem:nth-child(n+2) {
  padding-top: 64px
 }

 .hgoSI__card {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  max-width: 666px
 }

 .hgoSI__cardMedia {
  width: 48%;
  max-width: 326px
 }

 .hgoSI__cardBody {
  width: 51%;
  max-width: 270px;
  padding: 0 0 0 10px
 }

 .hgoSI__cardP {
  line-height: 1.75
 }

 .hgoSI__cardP:nth-of-type(1) {
  margin: 15px 0 8px
 }
}

@media (min-width:700px) {
 .hgoSI__cardMedia {
  width: 51%
 }

 .hgoSI__cardBody {
  width: 48%
 }
}

@media (min-width:960px) {
 .hgoSI__cardBody {
  padding-bottom: 2.8%
 }
}

@media (max-width:639px) {
 .hgoSI__card {
  max-width: 330px
 }
}

.txt-ja {
 font-family: YakuHanJP_Narrow, "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
 font-weight: 400
}

.txt-en {
 font-family: Roboto, Futura, "Century Gothic", "Segoe UI", Arial, sans-serif
}

.txt-enja {
 font-family: Roboto, YakuHanJP_Narrow, "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif
}

.txt-normal {
 font-weight: 400;
 font-weight: 400
}

.txt-bold {
 font-weight: 700;
 font-weight: 600
}

.txt-center {
 text-align: center
}

.txt-right {
 text-align: right
}

@media (min-width:640px) {
 .txt-center\@m- {
  text-align: center
 }

 .txt-right\@m- {
  text-align: right
 }
}

@media (max-width:959px) {
 .txt-center\@s-l {
  text-align: center
 }

 .txt-right\@s-l {
  text-align: right
 }
}

@media (max-width:749px) {
 .txt-center\@sm {
  text-align: center
 }

 .txt-right\@sm {
  text-align: right
 }
}

@media (max-width:639px) {
 .txt-center\@s {
  text-align: center
 }

 .txt-right\@s {
  text-align: right
 }
}

@media (min-width:640px) {
 [class*=-fz11] {
  font-size: 11px
 }

 [class*=-fz12] {
  font-size: 12px
 }

 [class*=-fz13] {
  font-size: 13px
 }

 [class*=-fz14] {
  font-size: 14px
 }

 [class*=-fz15] {
  font-size: 15px
 }

 [class*=-fz16] {
  font-size: 16px
 }

 [class*=-fz17] {
  font-size: 17px
 }

 [class*=-fz18] {
  font-size: 18px
 }

 [class*=-fz20] {
  font-size: 20px
 }

 [class*=-fz22] {
  font-size: 22px
 }

 [class*=-fz25] {
  font-size: 25px
 }

 [class*=-fz26] {
  font-size: 26px
 }

 [class*=-fz32] {
  font-size: 32px
 }
}

@media (max-width:639px) {
 [class*=fz9-] {
  font-size: 9px
 }

 [class*=fz10-] {
  font-size: 10px
 }

 [class*="fz10.5-"] {
  font-size: 10.5px
 }

 [class*=fz11-] {
  font-size: 11px
 }

 [class*="fz11.5-"] {
  font-size: 11.5px
 }

 [class*=fz12-] {
  font-size: 12px
 }

 [class*=fz13-] {
  font-size: 13px
 }

 .fz14\@s,
 [class*=fz14-] {
  font-size: 14px
 }

 [class*=fz15-] {
  font-size: 15px
 }

 [class*=fz16-] {
  font-size: 16px
 }

 [class*=fz17-] {
  font-size: 17px
 }

 [class*=fz18-] {
  font-size: 18px
 }

 [class*=fz19-] {
  font-size: 19px
 }

 [class*=fz20-] {
  font-size: 20px
 }

 [class*=fz22-] {
  font-size: 22px
 }
}

.txt-sup {
 position: relative;
 top: -.5em;
 font-size: 65%
}

.fc-primary {
 color: #c8c8c8
}

.fc-normal {
 color: #585858
}

.fc-mid {
 color: #9b9b9b
}

.fc-lite {
 color: #c8c8c8
}

.fc-liter {
 color: #c9c9c9
}

.fc-white {
 color: #fff
}

.bg-mute {
 background-color: #f2f3f4
}

.bg-dark {
 background-color: #727377
}

.d-b {
 display: block
}

.d-ib {
 display: inline-block
}

.pos-r {
 position: relative
}

.m-center {
 margin-left: auto;
 margin-right: auto;
 display: block
}

.wbr {
 display: inline-block
}

@media (min-width:640px) {
 .wbr\@m- {
  display: inline-block
 }
}

@media (max-width:639px) {
 .wbr\@s {
  display: inline-block
 }
}

.ov-h {
 overflow: hidden
}

.js-fade {
 opacity: 0;
 -webkit-transform: translate3d(0, -5px, 0);
 transform: translate3d(0, -5px, 0);
 transition: opacity .75s linear, -webkit-transform 1.75s cubic-bezier(.19, 1, .22, 1), transform 1.75s cubic-bezier(.19, 1, .22, 1)
}

.js-fadein,
.js-fadein-acc {
 opacity: 0;
 -webkit-transform: translate3d(0, 30px, 0);
 transform: translate3d(0, 30px, 0);
 transition: opacity .75s linear, -webkit-transform 1.75s cubic-bezier(.19, 1, .22, 1), transform 1.75s cubic-bezier(.19, 1, .22, 1)
}

.js-fadeinB {
 opacity: 0;
 -webkit-transform: translate3d(0, 60px, 0);
 transform: translate3d(0, 60px, 0);
 transition: opacity .75s linear, -webkit-transform 1.75s cubic-bezier(.19, 1, .22, 1), transform 1.75s cubic-bezier(.19, 1, .22, 1)
}

.js-fade.is-inView,
.js-fadein-acc.is-inView,
.js-fadein.is-inView,
.js-fadeinB.is-inView {
 opacity: 1;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0)
}

@media (min-width:640px) {
 .is-visible\@s {
  display: none
 }
}

@media (min-width:750px) {
 .is-visible\@sm {
  display: none
 }
}

@media (min-width:960px) {
 .is-visible\@s-l {
  display: none
 }
}

@media (max-width:959px) {
 .is-hidden\@s-l {
  display: none
 }
}

@media (max-width:749px) {
 .is-hidden\@sm {
  display: none
 }
}

@media (max-width:639px) {
 .is-hidden\@s {
  display: none
 }
}