@charset "UTF-8";
/* common
================================================== */
/*
 * media query
**/
/**
 * フォントサイズの可変
 *
 * @param {number} $fontsize 基準となるフォントサイズ
 * @param {number} $basewidth 基準となる幅
 * @param {number} $maxwidth フォントサイズの拡大をとめる幅（未指定時は上限なし）
 * @param {number} $minwidth フォントサイズの縮小をとめる幅（未指定時は下限なし）
 */
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

#fs-main {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #fef2e5;
  color: #444;
  position: relative;
  overflow: hidden;
}
#fs-main:before {
  position: absolute;
  content: "";
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  #fs-main:before {
    right: 0;
    background-image: url(/-/media/com/learn-more/sun-care/column/nrf2/assets/img/bg.jpg);
    background-position: top right;
    width: 100vw;
    height: 120.2049780381vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #fs-main:before {
    width: 1366px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main:before {
    width: 768px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #fs-main:before {
    height: 1642px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main:before {
    height: 923.1742313324px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main:before {
    right: 0;
    background-image: url(/-/media/com/learn-more/sun-care/column/nrf2/assets/img/bg.sp.jpg);
    background-position: top right;
    width: 100vw;
    height: 462.03125vw;
    top: -16.40625vw;
  }
}
#fs-main * {
  box-sizing: border-box;
}
#fs-main #fs-header {
  background: rgb(252, 152, 77);
  background: linear-gradient(90deg, rgb(252, 152, 77) 0%, rgb(235, 111, 55) 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  #fs-main #fs-header {
    height: 4.2553191489vw;
    margin-bottom: 8.5106382979vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 940px) {
  #fs-main #fs-header {
    height: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main #fs-header {
    height: 32.6808510638px;
  }
}
@media screen and (min-width: 768px) and (min-width: 940px) {
  #fs-main #fs-header {
    margin-bottom: 80px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main #fs-header {
    margin-bottom: 65.3617021277px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main #fs-header {
    height: 7.8125vw;
    margin-bottom: 7.03125vw;
  }
}
#fs-main #fs-header p {
  color: #fff;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  #fs-main #fs-header p {
    font-size: 1.8085106383vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 940px) {
  #fs-main #fs-header p {
    font-size: 17px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main #fs-header p {
    font-size: 13.8893617021px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main #fs-header p {
    font-size: 3.125vw;
  }
}
#fs-main .block-01 {
  position: relative;
}
@media screen and (min-width: 768px) {
  #fs-main .block-01 {
    margin-bottom: 6.3829787234vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 940px) {
  #fs-main .block-01 {
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 {
    margin-bottom: 49.0212765957px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main .block-01 {
    margin-bottom: 7.8125vw;
  }
}
#fs-main .block-01:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  #fs-main .block-01:last-child {
    padding-bottom: 9.5744680851vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 940px) {
  #fs-main .block-01:last-child {
    padding-bottom: 90px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01:last-child {
    padding-bottom: 73.5319148936px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main .block-01:last-child {
    padding-bottom: 9.375vw;
  }
}
@media screen and (min-width: 768px) {
  #fs-main .block-01 h2 {
    margin-bottom: 2.6595744681vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 940px) {
  #fs-main .block-01 h2 {
    margin-bottom: 25px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 h2 {
    margin-bottom: 20.4255319149px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main .block-01 h2 {
    margin-bottom: 4.6875vw;
  }
}
@media screen and (min-width: 768px) {
  #fs-main .block-01 h2.txt03 img {
    width: 60.88794926vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 946px) {
  #fs-main .block-01 h2.txt03 img {
    width: 576px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 h2.txt03 img {
    width: 467.6194503171px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main .block-01 h2.txt03 img {
    width: 92.1875vw;
  }
}
#fs-main .block-01 h2 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  #fs-main .block-01 h2 img {
    width: 100vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 946px) {
  #fs-main .block-01 h2 img {
    width: 946px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 h2 img {
    width: 768px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main .block-01 h2 img {
    width: 81.875vw;
  }
}
#fs-main .block-01 h3 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  #fs-main .block-01 h3 img {
    width: 100vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 h3 img {
    width: 942px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 h3 img {
    width: 768px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main .block-01 h3 img {
    width: 92.1875vw;
  }
}
#fs-main .block-01 .block-01-panel {
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  #fs-main .block-01 .block-01-panel {
    width: 100vw;
    padding-top: 4.7770700637vw;
    padding-bottom: 5.3078556263vw;
    padding-left: 5.3078556263vw;
    padding-right: 5.3078556263vw;
    border-bottom-left-radius: 0.5307855626vw;
    border-bottom-right-radius: 0.5307855626vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel {
    width: 942px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel {
    width: 768px;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel {
    padding-top: 45px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel {
    padding-top: 36.6878980892px;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel {
    padding-bottom: 50px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel {
    padding-bottom: 40.7643312102px;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel {
    padding-left: 50px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel {
    padding-left: 40.7643312102px;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel {
    padding-right: 50px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel {
    padding-right: 40.7643312102px;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel {
    border-bottom-left-radius: 5px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel {
    border-bottom-left-radius: 4.076433121px;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel {
    border-bottom-right-radius: 5px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel {
    border-bottom-right-radius: 4.076433121px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main .block-01 .block-01-panel {
    width: 92.1875vw;
    padding-top: 6.25vw;
    padding-bottom: 1.5625vw;
    padding-left: 6.25vw;
    padding-right: 6.25vw;
    border-bottom-left-radius: 1.5625vw;
    border-bottom-right-radius: 1.5625vw;
  }
}
@media screen and (min-width: 768px) {
  #fs-main .block-01 .block-01-panel p {
    font-size: 1.9108280255vw;
    margin-bottom: 2.1231422505vw;
    line-height: 1.778;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel p {
    font-size: 18px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel p {
    font-size: 14.6751592357px;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel p {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel p {
    margin-bottom: 16.3057324841px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main .block-01 .block-01-panel p {
    font-size: 3.75vw;
    margin-bottom: 4.6875vw;
    line-height: 1.583;
  }
}
#fs-main .block-01 .block-01-panel p.leaf {
  position: relative;
}
@media screen and (max-width: 767px) {
  #fs-main .block-01 .block-01-panel p.leaf {
    padding-right: 20.3125vw;
  }
}
#fs-main .block-01 .block-01-panel p.leaf:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(/-/media/com/learn-more/sun-care/column/nrf2/assets/img/img-02.png);
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  #fs-main .block-01 .block-01-panel p.leaf:after {
    width: 9.9787685775vw;
    height: 15.8174097665vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel p.leaf:after {
    width: 94px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel p.leaf:after {
    width: 76.6369426752px;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel p.leaf:after {
    height: 149px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel p.leaf:after {
    height: 121.4777070064px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main .block-01 .block-01-panel p.leaf:after {
    background-image: url(/-/media/com/learn-more/sun-care/column/nrf2/assets/img/img-02.sp.png);
    width: 17.8125vw;
    height: 28.4375vw;
  }
}
#fs-main .block-01 .block-01-panel p span.orange {
  font-weight: 600;
  color: #e64b05;
  background: linear-gradient(transparent 40%, #fff7db 0%);
}
@media screen and (min-width: 768px) {
  #fs-main .block-01 .block-01-panel p span.orange {
    font-size: 1.804670913vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel p span.orange {
    font-size: 17px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel p span.orange {
    font-size: 13.8598726115px;
  }
}
@media screen and (min-width: 768px) {
  #fs-main .block-01 .block-01-panel .img {
    padding-top: 2.1231422505vw;
    margin-bottom: 4.2462845011vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel .img {
    padding-top: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel .img {
    padding-top: 16.3057324841px;
  }
}
@media screen and (min-width: 768px) and (min-width: 942px) {
  #fs-main .block-01 .block-01-panel .img {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #fs-main .block-01 .block-01-panel .img {
    margin-bottom: 32.6114649682px;
  }
}
@media screen and (max-width: 767px) {
  #fs-main .block-01 .block-01-panel .img {
    margin-bottom: 4.6875vw;
  }
}
#fs-main .block-01 .block-01-panel .img img {
  max-width: 100%;
}

.toolBox01 {
  clear: both;
  width: 100%;
  padding: 14px 0;
  box-sizing: border-box;
  background-color: #f06211;
}
.toolBox01 .toolBox01In {
  max-width: 940px;
  margin: 0 auto;
  overflow: hidden;
}