@charset "UTF-8";

html {
  min-width: auto;
  -webkit-text-size-adjust: none;
}

@media screen and (min-width: 641px) {
  html {
    min-width: 1200px;
  }
}
@media print, screen and (min-width: 641px) {
  html.no-scroll {
    overflow: hidden;
    padding-right: 17px;
  }
  html.no-scroll header .c-contentWidth {
    padding-right: 97px;
  }
  html.no-scroll.mac {
    padding-right: 0;
  }
  html.no-scroll.mac header .c-contentWidth {
    padding-right: 80px;
  }
}
.l-footer .c-contentWidth {
  box-sizing: border-box;
}

body.loading-now {
  position: fixed;
}

.l-main *,
.l-main *:before,
.l-main *:after {
  box-sizing: border-box;
}

.l-main h2 {
  margin: 0;
}

.l-main .p-mv {
  height: 700px;
  background-image: url(../images/mv_pc2209.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 700px;
}

@media screen and (max-width: 640px) {
  .l-main .p-mv {
    background-image: none;
    height: auto;
  }
}
.l-main .p-mv .l-content-inner {
  height: 100%;
  position: relative;
}

@media screen and (max-width: 640px) {
  .l-main .p-mv .l-content-inner {
    padding: 0;
  }
}



/* ----------------------------------------------------------------------------------------------------
*	アンカーリンク
* --------------------------------------------------------------------------------------------------*/
.page-nav-wrapper {
  height: 60px;
  position: relative;
}

@media screen and (max-width: 640px) {
  .page-nav-wrapper {
    position: fixed;
    display: flex;
    align-items: flex-end;
    margin-left: 0;
    justify-content: flex-start;
    top: auto;
    bottom: 20vw;
    z-index: 4;
    transition: 0.3s;
    pointer-events: none;
    transform: translateX(-51.733vw);
    opacity: 0;
  }
  .page-nav-wrapper.is-active {
    opacity: 1;
  }
  .page-nav-wrapper.is-open {
    transform: translateX(0);
  }
}
.page-nav-tab {
  display: none;
}

@media screen and (max-width: 640px) {
  .page-nav-tab {
    display: block;
    width: 9.067vw;
    height: 38.667vw;
    position: relative;
    left: -1px;
    border-radius: 0 5px 5px 0;
    border: 1px solid #1fa536;
    border-left: none;
    z-index: 2;
    background: url(../images/tab_line.svg) #ddf2e1 no-repeat center center/2.9947916667vw auto;
    pointer-events: auto;
  }
  .page-nav-tab.is-tab-open {
    background-image: url(../images/tab_line_rev.svg);
  }
}
.page-navigation {
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: 6;
  background : linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
}

@media screen and (max-width: 640px) {
  .page-navigation {
    width: 51.733vw;
    position: relative;
    right: auto;
    height: auto;
    border-radius: 0 5px 0 0;
    border: 1px solid #1fa536;
    border-left: none;
    margin-left: 0;
    margin-right: 0;
    background: #ffffff;
  }
}
.page-navigation.is-fixed {
  position: fixed;
  top: 80px;
  height: 50px;
}

@media screen and (max-width: 640px) {
  .page-navigation.is-fixed {
    position: static;
    height: auto;
  }
}
.page-navigation.is-fixed .page-nav__link::after {
  display: none;
}

@media screen and (max-width: 640px) {
  .page-navigation.is-fixed .page-nav__link::after {
    display: block;
  }
}
.page-nav__list {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 640px) {
  .page-nav__list {
    flex-direction: column;
    padding-left: 3.467vw;
    padding-right: 3.467vw;
  }
}
.page-nav__item {
  position: relative;
}
.page-nav__item:last-of-type::after {
  display: none;
}

@media screen and (max-width: 640px) {
  .page-nav__item {
    border-bottom: 1px solid #ddf2e1;
  }
  .page-nav__item:last-of-type {
    border: none;
  }
}
.page-nav__item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 12px;
  height: 25px;
  background-color: #1fa536;
  width: 1px;
}

@media screen and (max-width: 640px) {
  .page-nav__item::after {
    display: none;
  }
}
.page-nav__link {
  font-size: 1.6rem;
  font-weight: bold;
  position: relative;
  padding: 16px 0 27px;
  text-align: center;
  display: block;
  box-sizing: border-box;
  width: 170px;
  line-height: 1;
  pointer-events: auto;
}

.page-nav__link-hasicon {
  padding-left: 46px;
}
@media screen and (max-width: 640px) {
  .page-nav__link-hasicon {
    padding-left: 9vw;
  }
}

@media screen and (max-width: 640px) {
  .page-nav__link {
    font-size: 3.3854166667vw;
    height: auto;
    padding-top: 4.533vw;
    padding-bottom: 4.533vw;
    color: #2f2f2f;
    letter-spacing: .05em;
    text-align: left;
  }
}
.page-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 7px;
  height: 7px;
  border-bottom: 1px solid #1fa536;
  border-right: 1px solid #1fa536;
  transform: rotate(45deg) translateX(-50%);
}

@media screen and (max-width: 640px) {
  .page-nav__link::after {
    left: auto;
    right: 2.6041666667vw;
    top: 50%;
    transform: translateY(-50%) rotate(315deg);
    width: 8px;
    height: 8px;
    z-index: 2;
    bottom: 0;
  }
}
.page-nav__link .icon {
  width: 20px;
  height: auto;
  display: inline-block;
  position: absolute;
  top: 47%;
  left: 18px;
  transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .page-nav__link .icon {
    left: 2vw;
    top: 50%;
    width: 5.6875vw;
    margin-right: 1.3020833333vw;
  }
}

.p-flex {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 640px) {
  .p-flex {
    display: block;
  }
}


/* ----------------------------------------------------------------------------------------------------
*	フェードイン
* --------------------------------------------------------------------------------------------------*/
.js-fadeIn {
  opacity: 0;
}

.isFadein {
  -webkit-animation: fadeIn .5s forwards;
  animation: fadeIn .5s forwards;
}

.delay02 {
  -webkit-animation-delay: 0.2s !important;
  animation-delay: 0.2s !important;
}

.delay04 {
  -webkit-animation-delay: 0.4s !important;
  animation-delay: 0.4s !important;
}

.delay06 {
  -webkit-animation-delay: 0.6s !important;
  animation-delay: 0.6s !important;
}

.delay08 {
  -webkit-animation-delay: 0.8s !important;
  animation-delay: 0.8s !important;
}

.delay10 {
  -webkit-animation-delay: 1s !important;
  animation-delay: 1s !important;
}

.delay12 {
  -webkit-animation-delay: 1.2s !important;
  animation-delay: 1.2s !important;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
}
.fade-in.js-animeOn {
  -webkit-animation: fadeIn .5s forwards;
  animation: fadeIn .5s forwards;
}

.fade-top {
  opacity: 0;
  transform: translateY(10px);
}
.fade-top.js-animeOn {
  -webkit-animation: fadeTop .5s forwards;
  animation: fadeTop .5s forwards;
}

@-webkit-keyframes fadeTop {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeTop {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ----------------------------------------------------------------------------------------------------
*	bg
* --------------------------------------------------------------------------------------------------*/


.p-content-bg {
  background: url(../images/bg_skicon.jpg) no-repeat top center;
}

@media screen and (max-width: 640px) {
  .p-content-bg {
    background: url(../images/bg_sp_skicon.jpg) no-repeat top center / cover;
  }
}


/* ----------------------------------------------------------------------------------------------------
* p-sec01
* --------------------------------------------------------------------------------------------------*/
.p-sec01 {
  /* padding: 230px 0 100px; */
  padding: 280px 0 50px;
  position: relative;
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
  .p-sec01 {
    padding: 180px 0 100px;
  }
}

.p-sec01-txt {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  line-height: 2.3;
  margin-top: 2.3em;
}

.p-sec01-txt:first-child {
  margin-top: 0;
}


.p-sec01 .js-diagIn {
  opacity: 0;
}
.p-sec01 .isDiag {
	transform-origin: 0 0;
  -webkit-animation: diag 1s forwards;
  animation: diag 1s forwards;
}
@-webkit-keyframes diag {
  0% {
    opacity: 0;
    transform: skewY(5deg) translateY(24px);
  }
  100% {
    opacity: 1;
    transform: skewY(0) translateY(0);
  }
}
@keyframes diag {
  0% {
    opacity: 0;
    transform: skewY(5deg) translateY(24px);
  }
  100% {
    opacity: 1;
    transform: skewY(0) translateY(0);
  }
}

@media screen and (max-width: 640px) {
  .p-sec01 {
    /* padding: 26.8vw 0 27.6vw; */
    padding: 39.467vw 0 16vw;
  }

  .p-sec01-txt {
    font-size: 4vw;
    line-height: 2.1;
    margin-top: 2.1em;
  }
}


/* ----------------------------------------------------------------------------------------------------
* product
* --------------------------------------------------------------------------------------------------*/
#product-content {
  /* padding: 215px 0 85px; */
  padding: 265px 0 35px;
  position: relative;
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
  #product-content {
    padding: 200px 0 95px;
  }
}
#product-content #product {
  position: absolute;
  top: -100px;
}

.p-product-box {
  margin-bottom: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-product-img {
  margin: 0 155px 0 70px;
  width: 131px;
  position: relative;
}

.p-product-img .icon-new {
  width: 112px;
  position: absolute;
  left: -123px;
  bottom: 24px;
}

.p-product-ttl {
  margin-bottom: 25px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.66;
}

.p-product-txt01 {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.7;
}

.p-product-txt02 {
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 1.47;
}

.p-product-txt03 {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.7;
  margin-top: 3px;
}

.p-product-cnt .m-underline {
  border-bottom: 1px solid #1fa536;
}

.p-product-price {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 2.66;
  letter-spacing: 0.115em;
}

.p-product-list {
  display: flex;
  justify-content: center;
}

.p-product-point {
  background: url(../images/product_bg.svg) no-repeat center center / 100% auto;
  margin: 0 22px;
  padding: 0 7px 7px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 207px;
  height: 90px;
}

.p-product-point-txt {
  color: #b58d36;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
}

.p-product-point-txt-sub {
  font-size: 1.6rem;
  line-height: 1.56;
}

@media screen and (max-width: 640px) {
  #product-content {
    /* padding: 0 0 28.64vw; */
    padding: 8vw 0 23.64vw;
  }
  
  #product-content #product {
    top: -40vw;
  }

  .p-product-box {
    margin-bottom: 11.7vw;
    flex-direction: column;
  }

  .p-product-img {
    margin: 1.6vw 0 4vw;
    width: 32.5vw;
  }

  .p-product-img .icon-new {
    left: -26vw;
    bottom: 0;
    width: 26.69vw;
  }

  .p-product-ttl {
    margin-bottom: 6.5vw;
    font-size: 2rem;
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
  }

  .p-product-info {
    border: 1px solid #1fa536;
    padding: 5.4vw 5.4vw 3.9vw;
  }

  .p-product-txt01 {
    font-size: 3.467vw;
  }

  .p-product-txt02 {
    font-size: 4vw;
    line-height: 1.6;
  }

  .p-product-txt03 {
    font-size: 3.467vw;
    line-height: 1.7;
    margin-top: 0.8vw;
  }

  .p-product-price {
    font-size: 3.467vw;
    line-height: 2.6;
  }

  .p-product-list {
    flex-wrap: wrap;
    margin: 0 -2.1vw;
  }

  .p-product-point {
    background: url(../images/product_bg_sp.svg) no-repeat center center / 100% auto;
    margin: 0 1.3vw;
    padding: 0 1.5vw 1.5vw 0;
    width: 44.2vw;
    height: 20.44vw;
  }

  .p-product-point:last-child {
    margin-top: 4vw;
  }

  .p-product-point-txt {
    font-size: 4.4vw;
    line-height: 1.37;
    letter-spacing: -0.05em;
  }

  .p-product-point-txt-sub {
    font-size: 3.733vw;
    line-height: 1.7;
  }
}

/* ----------------------------------------------------------------------------------------------------
* fours
* --------------------------------------------------------------------------------------------------*/
#fours-content {
  /* padding: 80px 0 186px; */
  padding: 130px 0 136px;
  position: relative;
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
  #fours-content {
    padding: 80px 0 186px;
  }
}

#fours-content .p-fours-ttl {
  margin: 0 auto 25px;
  width: 720px;
}
#fours-content #fours {
  position: absolute;
  top: -300px;
}

.p-fours-list {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.p-fours-list-wrap {
  width: 470px;
}
.p-fours-list-wrap:nth-of-type(2){
  margin-left: 38px;
}

.p-fours-item {
  position: relative;
  display: flex;
}

.p-fours-item.-item01,
.p-fours-item.-item02 {
  margin-bottom: 45px;
}

.p-fours-img {
  margin: 10px 10px 0 0;
  width: 125px;
  height: 125px;
  border-radius: 100%;
  overflow: hidden;
}

.-item04 .p-fours-img {
  margin-top: -10px;
  width: 127px;
  height: auto;
  border-radius: 0;
}


.p-fours-item::before,
.p-fours-item::after {
  position: absolute;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
}
.p-fours-item.-item01::before {
  background-image: url("../images/img_fours01_deco.png");
  width: 162px;
  height: 167px;
  top: -56px;
  left: -112px;
}
.p-fours-item.-item02::before {
  background-image: url("../images/img_fours02_deco.png");
  width: 92px;
  height: 96px;
  bottom: -24px;
  right: -76px;
}
.p-fours-item.-item03::before {
  background-image: url("../images/img_fours03_dec01.png");
  width: 110px;
  height: 109px;
  top: -42px;
  left: -90px;
}
.p-fours-item.-item03::after {
  background-image: url("../images/img_fours03_dec02.png");
  width: 60px;
  height: 60px;
  bottom: -8px;
  left: 76px;
}
.p-fours-item.-item04::before {
  background-image: url("../images/img_fours04_deco.png");
  width: 84px;
  height: 81px;
  top: -24px;
  right: -6px;
}

.p-fours-text {
  width: 328px;
}

.p-fours-text .p-fours-name {
  color: #1fa536;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.35;
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
}

.p-fours-text .p-fours-name .p-fours-name-main {
  position: relative;
}

.p-fours-text .p-fours-name .p-fours-name-sub {
  font-size: 1.5rem;
  line-height: 1.26;
  letter-spacing: -0.025em;
  margin-left: -0.5em;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.p-fours-text .p-fours-name .p-fours-name-main::after,
.p-fours-text .p-fours-name .p-fours-name-sub::after {
  content: "";
  background: #cbd9b6;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 10px;
}

.p-fours-text .p-fours-name .p-fours-name-sub::after {
  left: 0.5em;
  width: calc( 100% - 1em );
}

.p-fours-text .p-fours-name .p-fours-name-sub small {
  font-size: 1.3rem;
  line-height: 1.46;
}

.p-fours-text .p-fours-txt{
  font-size: 1.5rem;
  line-height: 1.66;
}

.p-fours-att {
  margin-top: 1em;
  font-size: 1rem;
  text-align: right;
  width: 460px;
}

@media screen and (max-width: 640px) {
  #fours-content {
    /* padding-bottom: 46.8vw; */
    padding: 19.2vw 0 16vw;
  }

  #fours-content .p-fours-ttl {
    margin: 0 -5.2083333333vw 6vw;
    width: 100vw;
  }
  
  #fours-content #fours {
    top: -42vw;
  }

  .p-fours-list {
    flex-direction: column;
  }
  .p-fours-list-wrap {
    width: 100%;
  }
  .p-fours-list-wrap:nth-of-type(2){
    margin-left:0;
  }

  .p-fours-item.-item01,
  .p-fours-item.-item02 {
    margin-bottom: 0;
  }
  .p-fours-item.-item02,
  .p-fours-item.-item03,
  .p-fours-item.-item04 {
    margin-top: 4.5vw;
  }

  .p-fours-img {
    margin: 0 3.5vw 0 0;
    width: 27.34vw;
    height: 27.34vw;
  }

  .-item04 .p-fours-img {
    margin: 0 2.3vw 0 -1.3vw;
    width: 29.9vw;
  }

  .p-fours-text {
    width: 56vw;
  }

  .p-fours-item.-item01::before {
    width: 38.933vw;
    height: 40.267vw;
    top: -17.2vw;
    right: -13.5vw;
    left: inherit;
  }
  .p-fours-item.-item02::before {
    width: 84px;
    height: 88px;
    bottom: 8.2vw;
    left: 8vw;
    right: inherit;
  }
  .p-fours-item.-item03::before {
    width: 92px;
    height: 91px;
    top: -15.6vw;
    left: -2.6vw;
  }
  .p-fours-item.-item03::after {
    width: 50px;
    height: 50px;
    top: 1.6vw;
    bottom: inherit;
    right: -3.5vw;
    left: inherit;
  }
  .p-fours-item.-item04::before {
    width: 76px;
    height: 73px;
    top: -10.4vw;
    right: -8.1vw;
  }

  .p-fours-text .p-fours-name {
    font-size: 4.267vw;
    margin-bottom: 2.6vw;
    line-height: 1.1;
  }

  .p-fours-text .p-fours-name .p-fours-name-sub {
    background: linear-gradient(transparent 60%, #cbd9b6 60%);
    font-size: 3.46vw;
    line-height: 1.1;
    white-space: normal;
    margin-left: 0;
  }

  .p-fours-text .p-fours-name .p-fours-name-main::after {
    height: 2.4vw;
  }

  .p-fours-text .p-fours-name .p-fours-name-sub::after {
    display: none;
  }

  .p-fours-text .p-fours-name .p-fours-name-sub small {
    font-size: 2.933vw;
    line-height: 1.18;
    display: inline-block;
  }

  .p-fours-text .p-fours-txt{
    font-size: 3.467vw;
    line-height: 1.76;
  }
  .p-fours-item.-item04 .p-fours-text .p-fours-txt span.whitespace{
    display: block;
    white-space: nowrap;
  }

  .p-fours-att {
    margin-top: 3vw;
    width: 100%;
    margin-left: 0;
  }

}

/* ----------------------------------------------------------------------------------------------------
* fours
* --------------------------------------------------------------------------------------------------*/
#howtouse-content {
  padding: 0px 0 147px;
  position: relative;
}
#howtouse-content .l-content-inner {
  position: relative;
}
#howtouse-content #howtouse{
  position: absolute;
  top: -180px;
}
#howtouse-content .p-howtouse-ttl {
  margin: 0 auto 5px;
  width: 390px;
}

.p-howtouse-list {
  position: relative;
  margin-bottom: 216px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.p-howtouse-item{
  position: relative;
}

.p-howtouse-item.-howtouse01 .p-howtouse-parts,
.p-howtouse-item.-howtouse02,
.p-howtouse-item.-howtouse03,
.p-howtouse-item.-howtouse04 {
  display: flex;
}

.p-howtouse-item.-howtouse02,
.p-howtouse-item.-howtouse03 {
  flex-direction: row-reverse;
}

.p-howtouse-item.-howtouse01 {
  margin: 0 -5px 37px 0;
  padding-left: 53px;
  width: 540px;
}

.p-howtouse-item.-howtouse01 .p-howtouse-parts.-face02 {
  margin-top: 18px;
  align-items: flex-end;
}

.p-howtouse-item.-howtouse02 {
  margin: 118px 0 0 -84px;
  padding-left: 64px;
  width: 580px;
}

.p-howtouse-item.-howtouse03 {
  margin: 0 130px 0 -40px;
  padding-left: 70px;
  width: 550px;
  align-items: flex-end;
}

.p-howtouse-item.-howtouse04 {
  margin: -10px 0 0 -165px;
  padding: 0 0 0 70px;
  width: 530px;
}

.p-howtouse-item.-howtouse01 .p-howtouse-img {
  margin-right: 30px;
  width: 107px;
  text-align: center;
}

.p-howtouse-item.-howtouse01 .p-howtouse-parts.-face01 .p-howtouse-img picture {
  width: 94px;
  display: inline-block;
}

.p-howtouse-item.-howtouse02 .p-howtouse-img {
  margin: 30px 0 0 -85px;
  width: 290px;
}

.p-howtouse-item.-howtouse03 .p-howtouse-img {
  margin-left: 0; 
  width: 178px;
}

.p-howtouse-item.-howtouse04 .p-howtouse-img {
  margin-right: 30px;
  width: 147px;
}

.p-howtouse-item.-howtouse04 .p-howtouse-text {
  margin-top: 14px;
}

.p-howtouse-label {
  margin-bottom: 10px;
  width: 100px;
}

.p-howtouse-ttl02 {
  color: #633b14;
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .05em;
  display: inline;
}

.p-howtouse-item.-howtouse01 .p-howtouse-ttl02 {
  background: linear-gradient(transparent 95%, #2c6eac 95%);
}

.p-howtouse-item.-howtouse02 .p-howtouse-ttl02 {
  background: linear-gradient(transparent 95%, #cb1e7d 95%);
}

.p-howtouse-item.-howtouse03 .p-howtouse-ttl02 {
  background: linear-gradient(transparent 95%, #d45e2d 95%);
}

.p-howtouse-item.-howtouse04 .p-howtouse-ttl02 {
  background: linear-gradient(transparent 95%, #278844 95%);
}

.p-howtouse-txt {
  margin-top: 0;
  font-size: 1.5rem;
  line-height: 1.66;
}

.p-howtouse-lead {
  display: flex;
  justify-content: center;
}

.p-howtouse-link {
  margin: 0 30px;
  padding: 50px 30px 30px;
  width: 480px;
  height: 235px;
  position: relative;
}

.p-howtouse-link.-link01 {
  background: rgba(242, 227, 232 , .7);
}

.p-howtouse-link.-link02 {
  background: rgba(225, 236, 234 , .7);
}

.p-howtouse-link::after {
  position: absolute;
  content: "";
  width: 480px;
  height: 235px;
  right: -10px;
  bottom: -10px;
  z-index: -1;
}

.p-howtouse-link.-link01::after {
  background: rgba(242, 227, 232 , .3);
}

.p-howtouse-link.-link02::after {
  background: rgba(225, 236, 234 , .3);
}


.p-howtouse-link-ttl {
  top: -28px;
  position: absolute;
}

.p-howtouse-link.-link01 .p-howtouse-link-ttl {
  left: 20px;
  width: 154px;
}

.p-howtouse-link.-link02 .p-howtouse-link-ttl {
  left: 15px;
  width: 351px;
}

.p-howtouse-link-txt {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.78;
}

.p-howtouse-link-btn {
  margin-top: 30px;
  color: #fff;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  position: relative;
}

.p-howtouse-link.-link01 .p-howtouse-link-btn {
  background : -moz-linear-gradient(78.57% 250.11% 135deg,rgba(218, 159, 178, 1) 0%,rgba(206, 128, 151, 1) 100%);
  background : -webkit-linear-gradient(135deg, rgba(218, 159, 178, 1) 0%, rgba(206, 128, 151, 1) 100%);
  background : -webkit-gradient(linear,78.57% 250.11% ,21.43% -150.11% ,color-stop(0,rgba(218, 159, 178, 1) ),color-stop(1,rgba(206, 128, 151, 1) ));
  background : -o-linear-gradient(135deg, rgba(218, 159, 178, 1) 0%, rgba(206, 128, 151, 1) 100%);
  background : -ms-linear-gradient(135deg, rgba(218, 159, 178, 1) 0%, rgba(206, 128, 151, 1) 100%);
}

.p-howtouse-link.-link02 .p-howtouse-link-btn {
  background : -moz-linear-gradient(0% 50% 0deg,rgba(93, 159, 146, 1) 0%,rgba(158, 198, 190, 1) 100%);
  background : -webkit-linear-gradient(0deg, rgba(93, 159, 146, 1) 0%, rgba(158, 198, 190, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(93, 159, 146, 1) ),color-stop(1,rgba(158, 198, 190, 1) ));
  background : -o-linear-gradient(0deg, rgba(93, 159, 146, 1) 0%, rgba(158, 198, 190, 1) 100%);
  background : -ms-linear-gradient(0deg, rgba(93, 159, 146, 1) 0%, rgba(158, 198, 190, 1) 100%);
}

.p-howtouse-link-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  display: block;
  width: 9px;
  height: 9px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: translateY(-50%) rotate(-45deg);
}


/* fluid svg(流体) */
.p-howtouse-fluid{
  display: block;
  position: absolute;
  z-index: -1;
}
.fluid {
  display: block;
}
.-fluid01{
  width: 76%;
  top: -240px;
  left: -120px;
}
.-fluid02{
  width: 80%;
  top: -280px;
  left: 400px;
}
.-fluid03{
  width: 82%;
  top: 160px;
  left: -60px;
}
.-fluid04{
  width: 76%;
  top: 120px;
  left: 420px;
}
.p-howtouse-fluid svg{
  position: absolute;
	top: 0;
	left: 0;
}

/* canvas(流体) */

.p-howtouse-canvas{
  display: block;
  position: absolute;
  z-index: -1;
  margin: auto;
}
.canvas {
  display: block;
}
.-canvas01{
  top: 90px;
  left: 100px;
}
.-canvas02{
  top: 190px;
  left: 600px;
}
.-canvas03{
  top: 620px;
  left: 120px;
}
.-canvas04{
  top: 570px;
  left: 600px;
}

@media screen and (max-width: 640px) {
  .p-howtouse-canvas .canvas{
    margin: auto;
    width: 100%;
  }
  .-canvas01{
    top: 40vw;
    left: -10vw;
    right: -10vw;
  }
  .-canvas02{
    top: 156vw;
    left: -24vw;
    right: -24vw;
  }
  .-canvas03{
    top: 312vw;
    left: -24vw;
    right: -24vw;
  }
  .-canvas04{
    top: 246vw;
    left: -24vw;
    right: -24vw;
  }
  .-canvas04 .canvas{
    width: 90%;
  }
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
}



@media screen and (max-width: 640px) {
  #howtouse-content {
    padding: 0 0 20vw;
  }
  #howtouse-content #howtouse{
    position: absolute;
    top: -26vw;
  }
  #howtouse-content .p-howtouse-ttl {
    margin: 0 auto 16vw;
    width: 87.467vw;
  }

  .p-howtouse-list {
    margin-bottom: 44.8vw;
    flex-direction: column;
    justify-content: center;
  }

  .p-howtouse-item{
    padding: 0 2.667vw !important;
  }

  .p-howtouse-item.-howtouse01 .p-howtouse-parts,
  .p-howtouse-item.-howtouse02,
  .p-howtouse-item.-howtouse03,
  .p-howtouse-item.-howtouse04 {
    display: flex;
  }
  .p-howtouse-item.-howtouse03 {
    order: 2;
  }
  .p-howtouse-item.-howtouse04 {
    order: 1;
  }

  .p-howtouse-item.-howtouse01 {
    margin: 0;
    width: 100%;
  }
  .p-howtouse-item.-howtouse01 .p-howtouse-parts {
    margin: 0 auto  0 -2.667vw;
  }

  .p-howtouse-item.-howtouse01 .p-howtouse-parts.-face02 {
    margin-top: 5.333vw;
    align-items: flex-start;
  }

  .p-howtouse-item.-howtouse02 {
    margin: 21.333vw 0 15.2vw;
    width: 100%;
  }

  .p-howtouse-item.-howtouse03 {
    margin: 0;
    width: 100%;
    align-items: flex-start;
  }

  .p-howtouse-item.-howtouse04 {
    margin: 0 0 20vw;
    padding: 0 0 0 26.667vw;
    width: 100%;
  }

  .p-howtouse-item.-howtouse01 .p-howtouse-img {
    margin-right: 2.667vw;
    margin-top: -2.667vw;
    width: 24vw;
  }
  .p-howtouse-item.-howtouse01 .p-howtouse-parts.-face01 .p-howtouse-img picture {
    width: 21.867vw;
  }
  .p-howtouse-item.-howtouse01 .p-howtouse-parts.-face02 .p-howtouse-img {
    margin-top: -4.267vw;
  }
  .p-howtouse-item.-howtouse01 .p-howtouse-parts .p-howtouse-text{
    width: 58.667vw;
  }

  .p-howtouse-item.-howtouse02 .p-howtouse-img {
    margin: 13.333vw -8vw 0 -29.333vw;
    width: 80vw;
  }

  .p-howtouse-item.-howtouse03 .p-howtouse-img {
    margin: -13.333vw -6.667vw 0 -13.333vw;
    width: 42.667vw;
  }

  .p-howtouse-item.-howtouse04 .p-howtouse-img {
    margin-right: 2.133vw;
    margin-left: -2.133vw;
    width: 36.267vw;
  }

  .p-howtouse-item.-howtouse04 .p-howtouse-text {
    margin-top: 3.733vw;
  }

  .p-howtouse-label {
    margin-bottom: 2.667vw;
    width: 24vw;
  }

  .p-howtouse-ttl02 {
    font-size: 4.5vw;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .p-howtouse-txt {
    margin-top: 0.8vw;
    font-size: 3.467vw;
    line-height: 1.8;
    white-space: nowrap;
  }

  .p-howtouse-lead {
    display: block;
  }

  .p-howtouse-link {
    margin: 0 auto;
    padding: 9.333vw 10.667vw 6.667vw;
    width: 89.6vw;
    height: 57.6vw;
    height: auto;
  }
  .p-howtouse-link.-link02 {
    margin-top: 70px;
  }

  .p-howtouse-link::after {
    width: 89.6vw;
    height: 57.6vw;
    right: -2.133vw;
    bottom: -2.133vw;
  }

  .p-howtouse-link-ttl {
    top: -6.667vw;
  }

  .p-howtouse-link.-link01 .p-howtouse-link-ttl {
    left: 2.667vw;
    width: 36vw;
  }

  .p-howtouse-link.-link02 .p-howtouse-link-ttl {
    left: 2.667vw;
    width: 80vw;
  }

  .p-howtouse-link-txt {
    font-size: 3.4vw;
    line-height: 1.8;
  }

  .p-howtouse-link-btn {
    width: 67.733vw;
    margin-top: 5.333vw;
    font-size: 3.2vw;
    height: 13.333vw;
  }

  .p-howtouse-link-btn::after {
    right: 5.333vw;
    width: 2.133vw;
    height: 2.133vw;
  }
}

/* ----------------------------------------------------------------------------------------------------
* history
* --------------------------------------------------------------------------------------------------*/
#history-content {
  background: url("../images/bg_pc_history.png") no-repeat top center /cover;
  padding: 130px 0;
  position: relative;
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
  #history-content {
    padding-bottom: 300px;
  }
}
#history-content #history{
  position: absolute;
  top: -100px;
}
#history-content .l-content-inner{
  position: relative;
}

#history-content .p-history-ttl {
  margin: 0 auto 40px;
  width: 645px;
}
#history-content .p-history-lead {
  margin: 0 auto 58px;
  text-align: center;
  color: #3c2213;
  font-size: 1.8rem;
  font-weight: bold;
}

.p-historyDecade-inner {
  width: 1075px;
  /* width: 1065px; */
  margin: 0 auto;
  padding-bottom: 112px;
}

#history-content .p-history-list{
  position: relative;
}
#history-content .p-history-section{
  position: relative;
  clear: both;
  opacity: 0;
}
#history-content .p-history-section.-visible {
  opacity: 1;
}

.p-history-section-ttl{
  display: block;
  margin-bottom: 7px;
}
.p-history-section-ttl span{
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.5333;
}
.p-history-section:nth-of-type(n + 2) .p-history-section-ttl span{
  color: #ffffff;
  font-size: 2rem;
  padding:  0 8px;
}
.p-history-section.-history1963 .p-history-section-ttl span{
  background: rgb(139,170,6);
  background: linear-gradient(90deg, rgba(139,170,6, 1) 0%, rgba(139,170,6, .5) 100%);
}
.p-history-section.-history2003 .p-history-section-ttl span{
  background: rgb(184,189,0);
  background: linear-gradient(90deg, rgba(184,189,0, 1) 0%, rgba(184,189,0, .5) 100%);
}
.p-history-section.-history2012 .p-history-section-ttl span{
  background: rgb(217,190,0);
  background: linear-gradient(90deg, rgba(217,190,0, 1) 0%, rgba(217,190,0, .5) 100%);
}
.p-history-section.-history2020 .p-history-section-ttl span{
  background: rgb(216,140,26);
  background: linear-gradient(90deg, rgba(216,140,26, 1) 0%, rgba(216,140,26, .5) 100%);
}
.p-history-section.-history2022 .p-history-section-ttl span{
  background: rgb(231,125,46);
  background: linear-gradient(90deg, rgba(231,125,46, 1) 0%, rgba(231,125,46, .5) 100%);
}
.p-history-section-inner.-pcLeft .p-history-section-text{
  padding-right: 20px;
}
.p-history-section-inner.-pcRight .p-history-section-text{
  padding-left: 30px;
}
.p-history-section-txt{
  position: relative;
  font-size: 1.5rem;
  line-height: 1.667;
  color: #3c2213;
}
.p-history-att{
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 4px;
}
.p-history-end{
  font-size: 1.1rem;
  line-height: 1.3;
  color: #3c2213;
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  padding: 2px 5px;
}
.p-history-section-txt sup{
  font-size: 1rem;
  display: inline-block;
  position: relative;
  top: -.3em;
}
.p-history-section.-history1963 .p-history-end{
  border-color: #8baa06;
}
.p-history-section.-history2003 .p-history-end{
  border-color: #b8bd00;
}
.p-history-section.-history2012 .p-history-end{
  border-color: #d9be00;
}
.p-history-section.-history2020 .p-history-end{
  border-color: #d88c1a;
}

.p-history-section-inner {
  position: relative;
  width: 520px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.p-history-section.-history1963 .p-history-section-inner {
  padding-right: 60px;
  padding-left: 30px;
}
.p-history-section.-history2003 .p-history-section-inner {
  padding-right: 55px;
  padding-left: 55px;
}
.p-history-section.-history2012 .p-history-section-inner {
  padding-right: 50px;
}
.p-history-section.-history2012 .p-history-section-txt {
  padding-right: 60px;
}
.p-history-section.-history2020 .p-history-section-inner {
  padding-right: 80px;
  padding-left: 30px;
}
.p-history-section.-history2022 .p-history-section-inner {
  padding-right: 60px;
}
.p-history-section.-history2022 .p-history-section-txt {
  padding-right: 60px;
}

.p-history-section-inner::before {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  z-index: 1;
}
.p-history-section.-historyfirst .p-history-section-inner::before {
  background-image: url("../images/img_history01.png");
  width: 200px;
  height: 201px;
  left: -80px;
  top: -34px;
}
.p-history-section.-history1963 .p-history-section-inner::before {
  background-image: url("../images/img_history02.png");
  width: 80px;
  height: 214px;
  right: 70px;
  top: -136px;
}
.p-history-section.-history2003 .p-history-section-inner::before {
  background-image: url("../images/img_history03.png");
  width: 80px;
  height: 195px;
  left: -30px;
  top: -35px;
}
.p-history-section.-history2012 .p-history-section-inner::before {
  background-image: url("../images/img_history04.png");
  width: 64px;
  height: 193px;
  right: 35px;
  top: 80px;
}
.p-history-section.-history2020 .p-history-section-inner::before {
  background-image: url("../images/img_history05.png");
  width: 80px;
  height: 195px;
  left: -55px;
  top: -10px;
}
.p-history-section.-history2022 .p-history-section-inner::before {
  background-image: url("../images/img_history06.png");
    width: 91px;
    height: 251px;
    left: -102px;
  top: 50px;
}

.p-history-year img{
  width: 86px;
}
.p-history-section-inner.-pcLeft {
  float: left;
}
.p-history-section-inner.-pcRight {
  float: right;
}
.p-history-section-inner.-pcLeft .p-history-year,
.p-history-section:not(.-historyfirst) .p-history-section-inner.-pcLeft .p-history-section-ttl {
  text-align: right;
}
.p-history-section-inner .p-history-year{
  margin-bottom: 10px;
}
.-historyfirst .p-history-section-inner{
  padding-right: 25px;
}
.-historyfirst .p-history-box{
  position: relative;
  width: 400px;
  height: 260px;
  background: #ffffff;
  padding: 0 30px 30px;
  margin-left: auto;
}
.-historyfirst .p-history-section-ttl {
  position: relative;
  color: #1fa536;
  margin-top: -12px;
  margin-bottom: 0;
}
.-historyfirst .p-history-box::before,
.-historyfirst .p-history-box::after,
.-historyfirst .p-history-section-ttl::before,
.-historyfirst .p-history-section-ttl::after {
  position: absolute;
  content: "";
  background-color: #1fa536;
  z-index: 1;
}
.-historyfirst .p-history-box::before,
.-historyfirst .p-history-section-ttl::before {
  width: 124px;
  height: 1px;
}
.-historyfirst .p-history-box::after,
.-historyfirst .p-history-section-ttl::after{
  width: 1px;
  height: 70px;
}
.-historyfirst .p-history-section-ttl::before {
  top: 18px;
  right: -35px;
}
.-historyfirst .p-history-section-ttl::after {
  top: 5px;
  right: -23px;
}
.-historyfirst .p-history-box::before {
  bottom: 5px;
  left: -5px;
}
.-historyfirst .p-history-box::after {
  bottom: -5px;
  left: 5px;
}

.-history1963 .p-history-section-inner{
  margin-top: -200px;
}
.-history2003 .p-history-section-inner{
  margin-top: -40px;
}
.-history2012 .p-history-section-inner{
  margin-top: -200px;
}
.-history2020 .p-history-section-inner{
  margin-top: -100px;
}
.-history2022 .p-history-section-inner{
  margin-top: -210px;
}

/* dot */
.p-history-section,
.p-history-section-inner::after {
  opacity: 0;
  -webkit-transition: 0.4s opacity ease-out;
  transition: 0.4s opacity ease-out
}

.-visible .p-history-section-inner::after {
  opacity: 1
}

.p-history-section-inner::after {
  content: '';
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  z-index: 6;
  top: 18px;
}


@media only screen and (max-width: 640px) {
  .p-history-section-inner::after {
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    z-index: 6;
  }

  .-history1963 .p-history-section-inner::after {
    top: 3.2vw;
    left: 2.133vw;
    width: 7.467vw;
    height: 2.667vw;
    background-image: url("../images/img_historyPoint01_sp.png");
  }
  .-history2003 .p-history-section-inner::after {
    top: 2.667vw;
    left: 2.133vw;
    width: 7.467vw;
    height: 2.667vw;
    background-image: url("../images/img_historyPoint02_sp.png");
  }
  .-history2012 .p-history-section-inner::after {
    top: 2.133vw;
    left: 3.733vw;
    width: 6.933vw;
    height: 2.933vw;
    background-image: url("../images/img_historyPoint03_sp.png");
  }
  .-history2020 .p-history-section-inner::after {
    top: 2.4vw;
    left: 1.067vw;
    width: 9.067vw;
    height: 2.667vw;
    background-image: url("../images/img_historyPoint04_sp.png");
  }
  .-history2022 .p-history-section-inner::after {
    top: 0.533vw;
    left: 0.533vw;
    width: 10.133vw;
    height: 7.467vw;
    background-image: url("../images/img_historyPoint05_sp.png");
  }
}


@media only screen and (min-width: 641px) {
  .-history1963 .p-history-section-inner::after {
    left: -33px;
    width: 53px;
    height: 11px;
    background-image: url("../images/img_historyPoint01_pc.png");
  }
  .-history2003 .p-history-section-inner::after {
    right: -2px;
    width: 45px;
    height: 11px;
    background-image: url("../images/img_historyPoint02_pc.png");
  }
  .-history2012 .p-history-section-inner::after {
    left: -55px;
    width: 47px;
    height: 11px;
    background-image: url("../images/img_historyPoint03_pc.png");
  }
  .-history2020 .p-history-section-inner::after {
    right: 24px;
    width: 49px;
    height: 11px;
    background-image: url("../images/img_historyPoint04_pc.png");
  }
  .-history2022 .p-history-section-inner::after {
    top: 5px;
    left: -54px;
    width: 51px;
    height: 31px;
    background-image: url("../images/img_historyPoint05_pc.png");
  }
}

/* arrow */
.m-arrowbottom {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto
}

.m-arrowbottom.-mv {
  -webkit-animation: topBtnAnime 3s linear infinite;
  animation: topBtnAnime 3s linear infinite;
  -webkit-transition: 0.4s opacity ease-out;
  transition: 0.4s opacity ease-out;
  opacity: 0
}
.m-arrowbottom.-mv.-on {
  opacity: 1
}

.m-arrowbottom.-summary.-on {
  opacity: 1
}

.m-arrowbottom.-summary {
  -webkit-transition: 0.4s opacity ease-out;
  transition: 0.4s opacity ease-out;
  opacity: 0
}

@media only screen and (min-width: 641px) {
  .m-arrowbottom.-mv {
    bottom: 72px
  }
  
  .m-arrowbottom.-summary {
    top: 28px
  }
}

@media only screen and (max-width: 640px) {
  .m-arrowbottom.-mv {
    bottom: 80vw
  }

  .m-arrowbottom.-summary {
    top: -9vw;
  }
}


/* timeline */
@media only screen and (min-width: 641px) {
  .p-spTimeLine {
    display: none
  }

  .p-pcTimeline {
    position: absolute;
    top: 384px;
    left: 48%;
    width: 45px;
    background-image: url("../images/img_timeLine.svg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    -webkit-transform: translateX(-48%);
    transform: translateX(-48%);
    z-index: 5;
  }
}

@media only screen and (max-width: 640px) {
  .p-pcTimeline {
    display: none
  }
  
    .p-spTimeLine {
    position: absolute;
    top: 100%;
    left: 4.1vw;
    width: 5.4vw;
    height: 0;
    background-image: url("../images/img_timeLine_sp.svg");
    background-position: top center;
    background-repeat: no-repeat;
    /* background-size: cover; */
    background-size: 100%;
    z-index: 5;
  }

  .p-spTimeLine.-mv {
    top: 198vw;
    min-height: 0;
  }
}

@media only screen and (max-width: 640px) {
  #history-content .l-content-inner {
    padding: 0 3.2vw;
  }
  #history-content {
    background: url("../images/bg_sp_history.png") no-repeat top center /cover;
    padding: 29.333vw 0 32vw;
  }

  #history-content #history{
    top: -10vw;
  }

  #history-content .p-history-ttl {
    margin: 0 auto 9.333vw;
    width: 84.8vw;
  }
  #history-content .p-history-lead {
    margin: 0 auto 10.667vw;
    font-size: 3.733vw;
    line-height: 2.4;
  }

  .p-historyDecade-inner {
    width: 100%;
    padding-bottom: 16vw;
  }

  .p-history-section-ttl{
    margin-bottom: 1.867vw;
  }
  .p-history-section-ttl span{
    font-size: 5.067vw;
    letter-spacing: -.05em;
    line-height: 1.5333;
  }
  .p-history-section:nth-of-type(n + 2) .p-history-section-ttl span{
    /* font-size: 1.67rem; */
    font-size: 4.43vw;
    letter-spacing: normal;
    padding: 0.533vw 2.133vw;
    white-space: nowrap;
  }
  .p-history-section-inner.-pcLeft .p-history-section-text,
  .p-history-section-inner.-pcRight .p-history-section-text{
    padding-left: 10.667vw;
    padding-right: 0
  }
  .p-history-section-txt{
    font-size: 3.467vw;
    line-height: 1.667;
  }
  .p-history-att{
    font-size: 2.667vw;
    line-height: 1.4;
    margin-top: 1.067vw;
  }
  .p-history-end{
    font-size: 2.667vw;
    line-height: 1.2;
    padding: 0.267vw 0.8vw;
  }
  .p-history-section-txt sup{
    font-size: 0.5rem;
  }

  .p-history-section-inner {
    width: 100%;
  }
  .p-history-section.-history1963 .p-history-section-inner,
  .p-history-section.-history2003 .p-history-section-inner,
  .p-history-section.-history2012 .p-history-section-inner,
  .p-history-section.-history2020 .p-history-section-inner,
  .p-history-section.-history2022 .p-history-section-inner{
    padding-right: 2.667vw;
    padding-left: 12.267vw;
  }
  .p-history-section.-history2012 .p-history-section-txt {
    padding: 0;
  }
  .p-history-section.-history2022 .p-history-section-txt,
  .p-history-section.-history2022 .p-history-att {
    padding-right: 0;
    padding-left: 2.667vw;
  }

  .p-history-section-inner::before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    z-index: 1;
  }
  .p-history-section.-historyfirst .p-history-section-inner::before {
    width: 46.667vw;
    height: 46.933vw;
    top: inherit;
    bottom: 0;
    left: inherit;
    right: -8vw;
  }
  .p-history-section.-history1963 .p-history-section-inner::before {
    width: 16.533vw;
    height: 44.267vw;
    right: inherit;
    left: 5.867vw;
    top: 21.333vw;
  }
  .p-history-section.-history2003 .p-history-section-inner::before {
    width: 18.667vw;
    height: 45.6vw;
    left: inherit;
    right: 6.933vw;
    top: -16vw;
  }
  .p-history-section.-history2012 .p-history-section-inner::before {
    width: 14.667vw;
    height: 44.267vw;
    right: inherit;
    left: 5.867vw;
    /* top: 33.333vw; */
    top: 31.668vw;
  }
  .p-history-section.-history2020 .p-history-section-inner::before {
    width: 18.133vw;
    height: 47.2vw;
    left: inherit;
    right: 10.667vw;
    top: -16.533vw;
  }
  .p-history-section.-history2022 .p-history-section-inner::before {
    background-image: url("../images/img_history06_sp.png");
    width: 16.467vw;
    height: 54.133vw;
    right: inherit;
    left: 5.2vw;
    top: 20.333vw;
  }
  
  .p-history-year img{
    width: 18.667vw;
  }
  .p-history-section-inner.-pcLeft ,
  .p-history-section-inner.-pcRight {
    float: none;
  }
  .p-history-section-inner.-pcLeft .p-history-year,
  .p-history-section:not(.-historyfirst) .p-history-section-inner.-pcLeft .p-history-section-ttl {
    text-align: left;
  }
  .p-history-section-inner .p-history-year{
    margin-bottom: 2.667vw;
  }

  .-historyfirst .p-history-section-inner{
    padding-right: 0;
  }
  .-historyfirst .p-history-box{
    width: 93.333vw;
    height: 80vw;
    padding: 6.933vw 6.933vw;
    margin: 0 auto;
  }
  .-historyfirst .p-history-section-ttl {
    margin-top: -9.6vw;
    margin-bottom: 2.133vw;
  }
  .-historyfirst .p-history-box::before,
  .-historyfirst .p-history-section-ttl::before {
    width: 33.067vw;
    height: 1px;
  }
  .-historyfirst .p-history-box::after,
  .-historyfirst .p-history-section-ttl::after{
    width: 1px;
    height: 33.067vw;
  }
  .-historyfirst .p-history-section-ttl::before {
    top: 4.8vw;
    right: -9.333vw;
  }
  .-historyfirst .p-history-section-ttl::after {
    top: 1.333vw;
    right: -6.133vw;
  }
  .-historyfirst .p-history-box::before {
    bottom: 1.333vw;
    left: -1.333vw;
  }
  .-historyfirst .p-history-box::after {
    bottom: -1.333vw;
    left: 1.333vw;
  }

  .-history1963 .p-history-section-inner{
    margin-top: 9.6vw;
  }
  .-history2003 .p-history-section-inner{
    margin-top: 5.333vw;
  }
  .-history2012 .p-history-section-inner{
    margin-top: 5.333vw;
  }
  .-history2020 .p-history-section-inner{
    margin-top: 10.667vw;
  }
  .-history2022 .p-history-section-inner{
    margin-top: 6.667vw;
  }

}


/* ----------------------------------------------------------------------------------------------------
* 2024/09 更新
* --------------------------------------------------------------------------------------------------*/

.l-main p {
  margin: 0;
}
.l-main img {
  vertical-align: bottom;
}

.ttl_slash {
  text-align: center;
}
.ttl_slash span {
  display: inline-block;
  color: #32998f;
  font-size: 2.8rem;
  line-height: 1.4;
  letter-spacing: .1em;
  font-weight: 400;
  padding: 0 1.5em;
  position: relative;
}
.ttl_slash span::before, .ttl_slash span::after {
  content: '';
  background: url("../images/ttl_dot01.svg") no-repeat center / cover;
  position: absolute;
  left: 0;
  bottom: -.2em;
  width: 1em;
  height: 1.5em;
}
.ttl_slash span::after {
  left: auto;
  right: 0;
  transform: scale(-1,1);
}
.ttl_slash._gold span {
  color: #8c6134;
}
.ttl_slash._gold span::before, .ttl_slash._gold span::after {
  background-image: url("../images/dot_ttl03.svg");
}

.marker {
  background: linear-gradient(to top, rgba(50, 153, 143,.2) .3em, transparent .3em);
  font-weight: 400;
}
.marker._gold {
  background: linear-gradient(to top, rgba(170, 120, 0,.2) .3em, transparent .3em);
  font-weight: 400;
}

.anchor {
  position: absolute;
  top: -100px;
}

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

  .ttl_slash span {
    font-size: calc(100vw * 38 / 768);
  }

  .anchor {
    top: -10vw;
  }

}

/* mv */

#sec_mv {
  position: relative;
  margin: 0;
}
#sec_mv .bg img {
  width: 100%;
}
#sec_mv .new {
  position: absolute;
  left: 75%;
  top: 12%;
  width: 14vw;
  min-width: 170px;
  margin: 0;
}
#sec_mv .flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#sec_mv .flex .inner {
  padding-top: 4%;
  padding-left: 13%;
  text-align: center;
}
#sec_mv .flex .ttl img {
  width: 34vw;
  min-width: 38rem;
}
#sec_mv .flex .txt {
  font-size: max(1.4vw,18px);
  letter-spacing: .1em;
  font-weight: 400;
  margin: 2em 0 0;
}
#sec_mv .flex .small {
  font-size: max(.9vw,12px);
  letter-spacing: .1em;
  font-weight: 400;
  margin: 0;
}

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

  #sec_mv .new {
    left: 70%;
    top: 8%;
    width: 25vw;
    min-width: auto;
  }
  #sec_mv .flex .inner {
    width: 100%;
    padding: 65% 0 0;
    text-align: center;
  }
  #sec_mv .flex .ttl img {
    width: 64vw;
    min-width: auto;
  }
  #sec_mv .flex .txt {
    font-size: 3.2vw;
    margin-top: 1em;
  }
  #sec_mv .flex .small {
    font-size: 2.5vw;
    position: absolute;
    right: 2vw;
    bottom: 2vw;
  }

}

/* intro */

#sec_intro {
  background: url("../images/intro_bg_pc@2x.png") no-repeat center / cover;
  margin: 0;
}
#sec_intro .txt {
  color: #3f3a39;
  font-size: 2.2rem;
  line-height: 2.6;
  letter-spacing: .25em;
  font-weight: 400;
  text-align: center;
  padding: 15rem 0;
  margin: 0;
}

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

  #sec_intro {
    background-image: url("../images/intro_bg_sp@2x.png");
  }
  #sec_intro .txt {
    font-size: calc(100vw * 32 / 768);
    padding: 5em 0;
  }

}

/* cream */

#sec_cream {
  background: url("../images/cream_bg_pc@2x.png") no-repeat center top / 2000px 100%;
  margin: 0;
}
#sec_cream .nav_wrap {
  text-align: center;
  padding: 10rem 0;
}
#sec_cream .nav_wrap .ttl img {
  width: 7.6rem;
}
#sec_cream .nav_wrap .nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
#sec_cream .nav_wrap .nav .item {
  flex: 1;
}
#sec_cream .nav_wrap .nav .item + .item {
  border-left: 3px dotted #32998f;
}
#sec_cream .nav_wrap .nav .item a {
  display: block;
}
#sec_cream .nav_wrap .nav .item .img {
  width: 9rem;
  height: 10rem;
  margin: 0 auto;
  position: relative;
}
#sec_cream .nav_wrap .nav .item .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
#sec_cream .nav_wrap .nav .item .img .new {
  width: 5.5rem;
  height: 5.5rem;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%,-40%);
}
#sec_cream .nav_wrap .nav .item .txt {
  color: #32998f;
  font-size: 1.4rem;
  position: relative;
}
#sec_cream .nav_wrap .nav .item .txt::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%)rotate(45deg);
  width: .5em;
  height: .5em;
  border-right: 1px solid #32998f;
  border-bottom: 1px solid #32998f;
}

@media screen and (min-width: 2000px) {

  #sec_cream {
    background-size: cover;
  }

}
@media screen and (min-width: 641px) {

  #sec_cream .nav_wrap .nav .item a {
    transition: transform .4s ease;
  }
  #sec_cream .nav_wrap .nav .item a:hover {
    transform: translateY(-10px);
    opacity: 1;
  }

}

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

  #sec_cream {
    background: url("../images/cream_bg_sp@2x.png") no-repeat center top / cover;
  }
  #sec_cream .nav_wrap {
    padding: 15vw 0;
  }
  #sec_cream .nav_wrap .ttl img {
    width: calc(100vw * 137 / 768);
  }
  #sec_cream .nav_wrap .nav .item + .item {
    border-left-width: 2px;
  }
  #sec_cream .nav_wrap .nav .item .img {
    width: 16vw;
    height: 18vw;
  }
  #sec_cream .nav_wrap .nav .item .img .new {
    width: 12vw;
    height: 12vw;
  }
  #sec_cream .nav_wrap .nav .item .txt {
    font-size: calc(100vw * 22 / 768);
    line-height: 1.2;
    padding: .5em 0;
  }

}

#sec_cream .sec_01 {
  position: relative;
}
#sec_cream .sec_01 .flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
#sec_cream .sec_01 .flex .left {
  flex: 0 0 auto;
  position: relative;
}
#sec_cream .sec_01 .flex .img img {
  width: 51rem;
}
#sec_cream .sec_01 .flex .new {
  position: absolute;
  left: 0;
  top: 3rem;
  width: 14rem;
}
#sec_cream .sec_01 .flex .ttl {
  color: #3f3a39;
  font-size: 3.2rem;
  line-height: 1.8;
  font-weight: 400;
  margin-bottom: 1.5em;
}
#sec_cream .sec_01 .flex .ttl strong {
  background: linear-gradient(to top, rgba(50, 153, 143,.2) .3em, transparent .3em);
  font-weight: 400;
}
#sec_cream .sec_01 .flex .txt {
  font-size: 1.8rem;
  line-height: 1.6;
}
#sec_cream .sec_01 .flex .txt span {
  text-decoration: underline;
}
#sec_cream .sec_01 .flex .txt a:hover {
  opacity: 1;
  color: #32998f;
}
#sec_cream .sec_01 .flex .txt small {
  color: #3f3a39;
  font-size: 80%;
}

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

  #sec_cream .sec_01 .flex {
    display: block;
  }
  #sec_cream .sec_01 .flex .img img {
    width: 100%;
  }
  #sec_cream .sec_01 .flex .new {
    left: auto;
    right: 0;
    top: -3vw;
    width: 28vw;
  }
  #sec_cream .sec_01 .flex .ttl {
    font-size: calc(100vw * 38 / 768);
    text-align: center;
    margin-top: -1.5em;
    white-space: nowrap;
  }
  #sec_cream .sec_01 .flex .txt {
    font-size: calc(100vw * 28 / 768);
    text-align: center;
  }

}

#sec_cream .sec_02 .box {
  background: #fff;
  max-width: 940px;
  margin: 4rem auto;
  padding: 6rem 4rem;
  border-radius: 2rem;
}
#sec_cream .sec_02 .box .list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem 2rem;
  margin-top: 3rem;
}
#sec_cream .sec_02 .box .list .item {
  width: 26.4rem;
}
#sec_cream .sec_02 .box .list .item:nth-child(1),
#sec_cream .sec_02 .box .list .item:nth-child(2) {
  width: 30.5rem;
}
#sec_cream .sec_02 .box .list .item span {
  display: block;
  background: url("../images/ttl_gold_bg_pc@2x.png") no-repeat center / 100% 100%;
  padding: 1em;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: .1em;
  text-align: center;
  color: #8c6134;
}

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

  #sec_cream .sec_02 .box {
    margin: 10vw auto;
    padding: 10vw 5vw;
  }
  #sec_cream .sec_02 .box .list {
    gap: 0;
  }
  #sec_cream .sec_02 .box .list .item,
  #sec_cream .sec_02 .box .list .item:nth-child(1),
  #sec_cream .sec_02 .box .list .item:nth-child(2) {
    width: 40%;
  }
  #sec_cream .sec_02 .box .list .item:nth-child(3) {
    width: 100%;
  }
  #sec_cream .sec_02 .box .list .item span {
    background-image: url("../images/ttl_gold_bg_sp@2x.png");
    width: calc(100vw * 215 / 768);
    height: calc(100vw * 250 / 768);
    margin: -3vw auto;
    font-size: calc(100vw * 28 / 768);
    line-height: 1.4;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

#sec_cream .sec_03 {
  margin-top: 13rem;
  position: relative;
}
#sec_cream .sec_03 .slider .slick-track {
  padding: 6rem 0;
}
#sec_cream .sec_03 .slider .slick-slide {
  transform: translateY(-10%);
  margin: 0 -1rem;
}
#sec_cream .sec_03 .slider .slick-slide:nth-child(even) {
  transform: translateY(10%);
}
#sec_cream .sec_03 .slider .item {
  position: relative;
  padding: 25% 0;
  width: 176px;
}
#sec_cream .sec_03 .slider .item .img img {
  width: 100%;
}
#sec_cream .sec_03 .slider .item .txt {
  color: #8c6134;
  position: absolute;
  left: 50%;
  bottom: 85%;
  transform: translateX(-50%);
  line-height: 1.6;
}
#sec_cream .sec_03 .slider .item .txt .big,
#sec_cream .sec_03 .slider .item .txt .small {
  display: block;
  text-align: center;
  white-space: nowrap;
}
#sec_cream .sec_03 .slider .item .txt .big {
  font-size: 1.2rem;
}
#sec_cream .sec_03 .slider .item .txt .small {
  font-size: 1.0rem;
}
#sec_cream .sec_03 .slider .slick-slide:nth-child(even) {
  .txt {
    top: 85%;
  }
}
#sec_cream .sec_03 .slider .item .txt._green {
  color: #32998f;
}
#sec_cream .sec_03 .comment {
  position: absolute;
  bottom: 2rem;
  right: 10rem;
  display: flex;
  gap: 1em;
}
#sec_cream .sec_03 .comment p {
  font-size: 1.0rem;
  line-height: 1.4;
}
#sec_cream .sec_03 .comment .green {
  color: #32998f;
  &::before {
    content: '';
    display: inline-block;
    height: 2px;
    width: 1.2em;
    background: #32998f;
    vertical-align: .2em;
    margin-right: .2em;
  }
}
#sec_cream .sec_03 .comment .brown {
  color: #8c6134;
  &::before {
    content: '';
    display: inline-block;
    height: 2px;
    width: 1.2em;
    background: #8c6134;
    vertical-align: .2em;
    margin-right: .2em;
  }
}

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

  #sec_cream .sec_03 {
    margin: 8vw auto;
    width: 90%;
  }
  #sec_cream .sec_03 .box {
    background: #fff;
    border-radius: 1rem;
    padding: 8vw 5vw;
    position: relative;
  }
  #sec_cream .sec_03 .ttl_slash {
    white-space: nowrap;
  }
  #sec_cream .sec_03 .list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 5vw 2vw;
    margin-top: 8vw;
  }
  #sec_cream .sec_03 .list .item:nth-child(5n+1) {
    grid-column: 1/3;
  }
  #sec_cream .sec_03 .list .item:nth-child(5n+2) {
    grid-column: 3/5;
  }
  #sec_cream .sec_03 .list .item:nth-child(5n+3) {
    grid-column: 5/7;
  }
  #sec_cream .sec_03 .list .item:nth-child(5n+4) {
    grid-column: 2/4;
  }
  #sec_cream .sec_03 .list .item:nth-child(5n+5) {
    grid-column: 4/6;
  }
  #sec_cream .sec_03 .list .txt {
    color: #8c6134;
    font-size: calc(100vw * 24 / 768);
    line-height: 1.2;
    text-align: center;
    margin-top: .5em;
  }
  #sec_cream .sec_03 .list .txt span {
    display: block;
  }
  #sec_cream .sec_03 .list .txt .small {
    font-size: calc(100vw * 20 / 768);
  }
  #sec_cream .sec_03 .list .txt._green {
    color: #32998f;
  }
  #sec_cream .sec_03 .comment {
    position: static;
    align-items: center;
    justify-content: center;
    margin-top: 5vw;
  }
  #sec_cream .sec_03 .comment p {
    font-size: calc(100vw * 20 / 768);
  }
  #sec_cream .sec_03 .comment .image {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: .5em;
  }

}

#sec_cream .sec_04 {
  margin: 20rem 0 8rem;
}
#sec_cream .sec_04 .flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
}
#sec_cream .sec_04 .flex .sttl {
  width: 20rem;
  margin: 3em auto .5em;
}
#sec_cream .sec_04 .flex .sttl:first-child {
  margin-top: 0;
}
#sec_cream .sec_04 .flex .txt {
  color: #3f3a39;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: .1em;
  text-align: center;
}
#sec_cream .sec_04 .flex .txt .big {
  font-size: 120%;
}

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

  #sec_cream .sec_04 {
    margin: 15vw 0 8vw;
  }
  #sec_cream .sec_04 .flex {
    flex-direction: column;
    gap: 8vw;
    margin-top: 5vw;
  }
  #sec_cream .sec_04 .flex .left {
    order: 2;
  }
  #sec_cream .sec_04 .flex .sttl {
    width: calc(100vw * 300 / 768);
  }
  #sec_cream .sec_04 .flex .txt {
    font-size: calc(100vw * 28 / 768);
    line-height: 1.8;
  }

}

#sec_cream .sec_05 {
  padding-bottom: 10rem;
}
#sec_cream .sec_05 .ttl {
  text-align: center;
  margin: .5em 0;
}
#sec_cream .sec_05 .ttl img {
  width: 940px;
}
#sec_cream .sec_05 .flex._01 {
  display: flex;
  justify-content: center;
  margin-top: -8rem;
}
#sec_cream .sec_05 .flex._01 img {
  flex: 0 0 auto;
  width: 200px;
}
#sec_cream .sec_05 .flex._01 .txt {
  color: #3f3a39;
  font-size: 1.4rem;
  line-height: 1.8;
  padding-top: 12rem;
}
#sec_cream .sec_05 .flex._02 {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: -3rem;
  text-align: center;
}
#sec_cream .sec_05 .flex._02 .item {
  position: relative;
}
#sec_cream .sec_05 .flex._02 .sttl {
  margin: 1em 0;
}
#sec_cream .sec_05 .flex._02 .sttl img {
  height: 2.5rem;
  width: auto;
}
#sec_cream .sec_05 .flex._02 .txt {
  color: #3f3a39;
  font-size: 1.4rem;
  line-height: 1.8;
  margin-top: .8em;
}
#sec_cream .sec_05 .flex._02 .img._01 {
  position: absolute;
  left: -15rem;
  top: -10rem;
  width: 117px;
}
#sec_cream .sec_05 .flex._02 .img._02 {
  position: absolute;
  right: -10rem;
  bottom: -3rem;
  width: 81px;
}

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

  #sec_cream .sec_05 {
    padding-bottom: 20vw;
    margin-top: 12vw;
  }
  #sec_cream .sec_05 .ttl img {
    width: calc(100vw * 300 / 768);
  }
  #sec_cream .sec_05 .flex._01 {
    margin-top: 3vw;
    gap: 0;
  }
  #sec_cream .sec_05 .flex._01 img {
    width: 26vw;
    transform: scale(1.4);
  }
  #sec_cream .sec_05 .flex._01 .txt {
    font-size: calc(100vw * 26 / 768);
    padding-top: 0;
  }
  #sec_cream .sec_05 .flex._02 {
    flex-direction: column;
    gap: 1rem;
    margin-top: 10vw;
  }
  #sec_cream .sec_05 .flex._02 .sttl img {
    height: 5vw;
  }
  #sec_cream .sec_05 .flex._02 .txt {
    font-size: calc(100vw * 26 / 768);
    line-height: 1.6;
    text-align: left;
  }
  #sec_cream .sec_05 .flex._02 .img._01 {
    position: absolute;
    left: 0;
    top: -6vw;
    width: calc(100vw * 120 / 768);
  }
  #sec_cream .sec_05 .flex._02 .img._02 {
    position: absolute;
    right: 0;
    bottom: -12vw;
    width: calc(100vw * 94 / 768);
  }

}

/* oil */

#sec_oil {
  background: url("../images/oil_bg_pc@2x.png") no-repeat center top / 2000px 100%;
  margin: 0;
  position: relative;
}

@media screen and (min-width: 2000px) {

  #sec_oil {
    background-size: cover;
  }

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

  #sec_oil {
    background: url("../images/oil_bg_sp@2x.png") no-repeat center top / cover;
  }

}

#sec_oil .sec_01 {
  padding-top: 4rem;
}
#sec_oil .sec_01 .flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
#sec_oil .sec_01 .flex .left {
  flex: 0 0 auto;
  position: relative;
}
#sec_oil .sec_01 .flex .img img {
  width: 51rem;
}
#sec_oil .sec_01 .flex .ttl {
  color: #3f3a39;
  font-size: 3.2rem;
  line-height: 1.8;
  font-weight: 400;
  margin-bottom: 1.5em;
}
#sec_oil .sec_01 .flex .ttl strong {
  background: linear-gradient(to top, rgba(170, 120, 0,.2) .3em, transparent .3em);
  font-weight: 400;
}
#sec_oil .sec_01 .flex .txt {
  font-size: 1.8rem;
  line-height: 1.6;
}
#sec_oil .sec_01 .flex .txt span {
  text-decoration: underline;
}
#sec_oil .sec_01 .flex .txt a:hover {
  opacity: 1;
  color: #aa7800;
}
#sec_oil .sec_01 .flex .txt small {
  color: #3f3a39;
  font-size: 80%;
}

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

  #sec_oil .sec_01 .flex {
    display: block;
  }
  #sec_oil .sec_01 .flex .img img {
    width: 100%;
  }
  #sec_oil .sec_01 .flex .ttl {
    font-size: calc(100vw * 40 / 768);
    text-align: center;
    margin-top: -.5em;
  }
  #sec_oil .sec_01 .flex .txt {
    font-size: calc(100vw * 28 / 768);
    text-align: center;
  }

}

#sec_oil .sec_02 .box {
  background: #fff;
  max-width: 940px;
  margin: 4rem auto;
  padding: 6rem 4rem;
  border-radius: 2rem;
}
#sec_oil .sec_02 .box .list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem 2rem;
  margin-top: 3rem;
}
#sec_oil .sec_02 .box .list .item {
  width: 26.4rem;
}
#sec_oil .sec_02 .box .list .item span {
  display: block;
  background: url("../images/ttl_gold_bg_pc@2x.png") no-repeat center / 100% 100%;
  padding: 1em;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: center;
  color: #8c6134;
  white-space: nowrap;
}

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

  #sec_oil .sec_02 .box {
    margin: 10vw auto;
    padding: 10vw 5vw;
  }
  #sec_oil .sec_02 .box .list {
    gap: 0;
  }
  #sec_oil .sec_02 .box .list .item {
    width: 40%;
  }
  #sec_oil .sec_02 .box .list .item:nth-child(1) {
    width: 100%;
  }
  #sec_oil .sec_02 .box .list .item span {
    background-image: url("../images/ttl_gold_bg_sp@2x.png");
    width: calc(100vw * 215 / 768);
    height: calc(100vw * 250 / 768);
    margin: -3vw auto;
    font-size: calc(100vw * 28 / 768);
    line-height: 1.4;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

#sec_oil .sec_03 {
  margin-top: 8rem;
}
#sec_oil .sec_03 .ttl_slash {
  margin-bottom: 3rem;
}
#sec_oil .sec_03 .p-fours-name {
  color:  #8c6134;
  font-weight: 400;
}
#sec_oil .sec_03 .p-fours-name-main,
#sec_oil .sec_03 .p-fours-name-sub {
  background: linear-gradient(to top, rgba(170, 120, 0,.2) .3em, transparent .3em);
}
#sec_oil .sec_03 .p-fours-name-main::after,
#sec_oil .sec_03 .p-fours-name-sub::after {
  display: none;
}
#sec_oil .sec_03 .p-fours-item.-item01::before,
#sec_oil .sec_03 .p-fours-item.-item02::before,
#sec_oil .sec_03 .p-fours-item.-item03::before,
#sec_oil .sec_03 .p-fours-item.-item03::after,
#sec_oil .sec_03 .p-fours-item.-item04::before {
  display: none;
}
#sec_oil .sec_03 .p-fours-att {
  margin-top: 1em;
}

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

  #sec_oil .sec_03 {
    margin-top: 8vw;
  }
  #sec_oil .sec_03 .ttl_slash span {
    white-space: nowrap;
    letter-spacing: 0;
  }

}

#sec_oil .sec_04 {
  margin: 20rem 0 8rem;
}
#sec_oil .sec_04 .flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
}
#sec_oil .sec_04 .flex .sttl {
  width: 20rem;
  margin: 3em auto .5em;
}
#sec_oil .sec_04 .flex .sttl:first-child {
  margin-top: 0;
}
#sec_oil .sec_04 .flex .txt {
  color: #3f3a39;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: .1em;
  text-align: center;
}
#sec_oil .sec_04 .flex .txt .big {
  font-size: 120%;
}

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

  #sec_oil .sec_04 {
    margin: 15vw 0 10vw;
  }
  #sec_oil .sec_04 .ttl_slash span {
    white-space: nowrap;
    letter-spacing: 0;
  }
  #sec_oil .sec_04 .flex {
    flex-direction: column;
    gap: 8vw;
    margin-top: 5vw;
  }
  #sec_oil .sec_04 .flex .left {
    order: 2;
  }
  #sec_oil .sec_04 .flex .sttl {
    width: calc(100vw * 300 / 768);
  }
  #sec_oil .sec_04 .flex .txt {
    font-size: calc(100vw * 28 / 768);
    line-height: 1.8;
  }

}

#sec_oil .sec_05 .ttl_slash,
#sec_oil .sec_05 .p-howtouse-list {
  position: relative;
  z-index: 2;
}
#sec_oil .sec_05 .ttl_slash small {
  display: inline-block;
  font-size: 2.2rem;
  margin-bottom: .3em;
}
#sec_oil .sec_05 .ttl_slash strong {
  font-size: 105%;
}
#sec_oil .sec_05 .p-howtouse-list {
  margin-bottom: 0;
  padding-bottom: 10rem;
}
#sec_oil .sec_05 .p-howtouse-txt {
  margin-top: .5em;
}
#sec_oil .sec_05 .p-howtouse-canvas {
  z-index: 1;
}
#sec_oil .sec_05 .l-content-inner {
  position: relative;
}
#sec_oil .sec_05 .p-howtouse-text {
  line-height: 1.6;
}
#sec_oil .sec_05 .p-howtouse-item.-howtouse01 .p-howtouse-ttl02 {
  background: linear-gradient(transparent 95%, #32998f 95%);
}
#sec_oil .sec_05 .p-howtouse-item.-howtouse02 .p-howtouse-ttl02 {
  background: linear-gradient(transparent 95%, #aa7800 95%);
}
#sec_oil .sec_05 .p-howtouse-item.-howtouse03 .p-howtouse-ttl02 {
  background: linear-gradient(transparent 95%, #8c6134 95%);
}
#sec_oil .sec_05 .p-howtouse-item.-howtouse04 .p-howtouse-ttl02 {
  background: linear-gradient(transparent 95%, #00803b 95%);
}

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

  #sec_oil .sec_05 .ttl_slash {
    margin-bottom: 5vw;
  }
  #sec_oil .sec_05 .ttl_slash span {
    white-space: nowrap;
    letter-spacing: 0;
  }
  #sec_oil .sec_05 .ttl_slash small {
    font-size: calc(100vw * 32 / 768);
  }
  #sec_oil .sec_05 .-canvas01 {
    top: 20vw;
  }
  #sec_oil .sec_05 .-canvas02 {
    top: 135vw;
  }
  #sec_oil .sec_05 .-canvas03 {
    top: 292vw;
  }
  #sec_oil .sec_05 .-canvas04 {
    top: 222vw;
  }

}

/* products */


#sec_products {
  background: url("../images/product_bg_pc@2x.png") no-repeat center top / 1440px auto;
  margin: 0;
  padding: 15rem 0 10rem;
}
#sec_products .ttl {
  color: #aa7800;
  font-size: 2.2rem;
  line-height: 1.6;
  font-weight: 400;
  text-align: center;
}
#sec_products .ttl img {
  width: 75rem;
  margin-bottom: 1em;
}
#sec_products .ttl + .txt {
  line-height: 1.8;
  text-align: center;
  margin-top: 1.5em;
}
#sec_products .flex {
  display: flex;
  justify-content: space-between;
  margin-top: 15rem;
  padding: 0 5%;
}
#sec_products .flex .item {
  background: rgba(255, 255, 255, .8);
  position: relative;
  width: 33.8rem;
  height: 27.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#sec_products .flex .item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border: 1px solid #d7b455;
  pointer-events: none;
}
#sec_products .flex .item .sttl {
  color: #8c6134;
  font-size: 2.4rem;
  line-height: 1.4;
  letter-spacing: .1em;
  text-align: center;
  margin: 0 0 .5em;
}
#sec_products .flex .item .sttl .marker {
  font-weight: 500;
}
#sec_products .flex .item .list {
  list-style: none;
}
#sec_products .flex .item .list li {
  background: url("../images/product_check01.svg") no-repeat left top .4em / 1em auto;
  padding-left: 1.3em;
  line-height: 1.6;
  margin: .5em 0;
}
#sec_products .flex .item._02::before {
  border-color: #32998f;
}
#sec_products .flex .item._02 .sttl {
  color: #32998f;
}
#sec_products .flex .item._02 .list li {
  background-image: url("../images/product_check02.svg");
}
#sec_products .attention {
  background: url("../images/product_comment_pc@2x.png") no-repeat center / contain;
  width: 95rem;
  height: 36rem;
  margin: 4rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 10rem 0;
  gap: 4rem;
}
#sec_products .attention .img {
  flex: 0 0 auto;
}
#sec_products .attention .sttl {
  color: #8eac11;
  font-size: 2.0rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center;
}
#sec_products .attention .txt {
  font-size: 1.4rem;
  line-height: 1.8;
  margin-top: 1em;
}

@media screen and (min-width: 1441px) {

  #sec_products {
    background-size: cover;
    padding: 12vw 0 8vw;
  }
  #sec_products .ttl {
    font-size: 1.8vw;
  }
  #sec_products .ttl img {
    width: 56vw;
  }
  #sec_products .ttl + .txt {
    font-size: 1.2vw;
  }
  #sec_products .flex {
    margin-top: calc( 15vw );
  }
  #sec_products .attention {
    margin-top: calc( 4vw );
  }

}

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

  #sec_products {
    background: url("../images/product_bg_sp@2x.png") no-repeat center top -60vw / 140% auto;
    margin: 0;
    padding: 18vw 0 12vw;
  }
  #sec_products .ttl {
    font-size: calc(100vw * 32 / 768);
  }
  #sec_products .ttl img {
    width: 95%;
    margin-bottom: .8em;
  }
  #sec_products .ttl + .txt {
    font-size: calc(100vw * 28 / 768);
    line-height: 2.0;
  }
  #sec_products .flex {
    flex-direction: column;
    gap: 5vw;
    margin-top: 80vw;
    padding: 0;
  }
  #sec_products .flex .item {
    width: 100%;
    height: calc(100vw * 490 / 768);
  }
  #sec_products .flex .item .sttl {
    font-size: calc(100vw * 46 / 768);
  }
  #sec_products .flex .item .list li {
    font-size: calc(100vw * 32 / 768);
  }
  #sec_products .attention {
    background: url("../images/product_comment_sp@2x.png") no-repeat center / contain;
    width: 94vw;
    height: auto;
    margin: 8vw 0 0 -3vw;
    flex-flow: column;
    padding: 24vw 8vw 16vw 10vw;
    gap: 1rem;
  }
  #sec_products .attention .img {
    order: 2;
    width: 60%;
    margin: 0 auto;
  }
  #sec_products .attention .detail {
    display: contents;
  }
  #sec_products .attention .sttl {
    font-size: calc(100vw * 32 / 768);
    letter-spacing: 0;
    white-space: nowrap;
    margin: 0 -.5em;
  }
  #sec_products .attention .txt {
    text-align: justify;
    font-size: calc(100vw * 26 / 768);
    order: 3;
  }

}

#history-content .sttl {
  display: block;
  color: #8caa11;
  font-size: 2.2rem;
  line-height: 1.4;
  text-align: center;
  font-weight: 400;
  margin: 1em 0 0;
}
#history-content .p-history-lead {
  font-weight: 400;
  line-height: 1.8;
  padding-bottom: 30px;
}
#history-content .p-history-ttl {
  margin-bottom: .5em;
}
#history-content .p-history-new {
  width: 8.6rem;
  height: 8.6rem;
  position: absolute;
  left: -170px;
  top: 160px;
}
#history-content .p-history-section-txt {
  margin: .3em 0;
}

@media screen and (min-width: 641px) {

  #history-content .p-history-ttl {
    width: 702px;
  }

}

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

  #history-content {
    padding-bottom: 15vw;
  }
  #history-content .sttl {
    margin-bottom: .5em;
  }
  #history-content .p-history-lead {
    padding-bottom: 10vw;
  }
  #history-content .p-history-new {
    width: 12vw;
    height: 12vw;
    left: 0;
    top: 18vw;
  }
  .p-history-section.-history2022 .p-history-section-inner::before {
    width: 14vw;
    height: 46vw;
    top: 24vw;
  }

}

#sec_link {
  padding: 15rem 0 8rem;
}
#sec_link .p-howtouse-link-ttl {
  top: 0;
  transform: translateY(-50%);
  margin: 0;
}
#sec_link .p-howtouse-link.-link01 {
  background: rgba(206, 219, 217, .7);
}
#sec_link .p-howtouse-link.-link01::after {
  background: rgba(206, 219, 217, .3);
}
#sec_link .p-howtouse-link.-link02 {
  background: rgba(225, 229, 209, .7);
}
#sec_link .p-howtouse-link.-link02::after {
  background: rgba(225, 229, 209, .3);
}
.p-howtouse-link.-link01 .p-howtouse-link-btn {
  background: linear-gradient(to right, #449081, #82b7ad);
}
.p-howtouse-link.-link02 .p-howtouse-link-btn {
  background: #80b699;
}
#sec_link .p-howtouse-link.-link01 .p-howtouse-link-ttl {
  width: 167px;
}
#sec_link .p-howtouse-link.-link02 .p-howtouse-link-ttl {
  width: 353px;
}

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

  #sec_link {
    padding: 20vw 0 10vw;
  }
  #sec_link .p-howtouse-link.-link01 .p-howtouse-link-ttl {
    width: calc(100vw * 287 / 768);
  }
  #sec_link .p-howtouse-link.-link02 .p-howtouse-link-ttl {
    width: calc(100vw * 600 / 768);
  }
  #sec_link .p-howtouse-link::after {
    height: 100%;
  }

}