@charset "UTF-8";
@font-face {
  font-family: "icon";
  src: url("/ec/css/fonts/icon.eot");
  src: url("/ec/css/fonts/icon.eot?#iefix") format("eot"), url("/ec/css/fonts/icon.woff") format("woff"), url("/ec/css/fonts/icon.ttf") format("truetype"), url("/ec/css/fonts/icon.svg#icon") format("svg");
  font-weight: normal;
  font-style: normal; }
[class^="icofont-"]:before, [class*=" icofont-"]:before {
  font-family: "icon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icofont-01:before {
  content: ""; }

.icofont-02:before {
  content: ""; }

.icofont-03:before {
  content: ""; }

.icofont-04:before {
  content: ""; }

.icofont-05:before {
  content: ""; }

.icofont-06:before {
  content: ""; }

.icofont-07:before {
  content: ""; }

.icofont-08:before {
  content: ""; }

.icofont-09:before {
  content: ""; }

.icofont-10:before {
  content: ""; }

.icofont-11:before {
  content: ""; }

.icofont-12:before {
  content: ""; }

.icofont-13:before {
  content: ""; }

.icofont-14:before {
  content: ""; }

.icofont-15:before {
  content: ""; }

.icofont-16:before {
  content: ""; }

.icofont-17:before {
  content: ""; }

.icofont-18:before {
  content: ""; }

.icofont-19:before {
  content: ""; }

.icofont-20:before {
  content: ""; }

.icofont-21:before {
  content: ""; }

.icofont-22:before {
  content: ""; }

.icofont-23:before {
  content: ""; }

.icofont-24:before {
  content: ""; }

.icofont-25:before {
  content: ""; }

*[class*="ico-ctg0"]:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%; }

.ico-ctg01::before {
  background: #e04388; }

.ico-ctg02::before {
  background: #e87c83; }

.ico-ctg03::before {
  background: #65b9b3; }

.ico-ctg04::before {
  background: #dbb029; }

.ico-ctg05::before {
  background: #489ad3; }

.ico-ctg06::before {
  background: #002e79; }

.ico-ctg07::before {
  background: #cb93c3; }

.is__bold {
  font-weight: bold; }

.is__bg_red {
  background-color: #E1766B;
  color: #fff; }
  @media (max-width: 768px) {
    .is__bg_red::before {
      border-top: 1px solid #fff;
      border-right: 1px solid #fff; } }
  @media screen and (min-width: 769px) {
    .is__bg_red::before {
      border-top: 1px solid #fff;
      border-right: 1px solid #fff; } }

.is__bg_white {
  background-color: #fff;
  border: solid 1px #E1766B;
  color: #E1766B; }
  @media (max-width: 768px) {
    .is__bg_white::before {
      border-top: 1px solid #E1766B;
      border-right: 1px solid #E1766B; } }
  @media screen and (min-width: 769px) {
    .is__bg_white::before {
      border-top: 1px solid #E1766B;
      border-right: 1px solid #E1766B; } }

@media (max-width: 768px) {
  .is__mgn-t_20 {
    margin-top: 3.846vw !important; } }
@media screen and (min-width: 769px) {
  .is__mgn-t_20 {
    margin-top: 20px !important; } }

@media (max-width: 768px) {
  .is__mgn-t_30 {
    margin-top: 7.692vw !important; } }
@media screen and (min-width: 769px) {
  .is__mgn-t_30 {
    margin-top: 30px !important; } }

@media (max-width: 768px) {
  .okuizome_howto {
    width: 100vw; } }
@media screen and (min-width: 769px) {
  .okuizome_howto {
    width: 780px; } }
.okuizome_howto .sec_cnt {
  background-color: #fff; }
  @media (max-width: 768px) {
    .okuizome_howto .sec_cnt {
      margin-top: 10.256vw;
      padding: 10.256vw 5.128vw; } }
  @media screen and (min-width: 769px) {
    .okuizome_howto .sec_cnt {
      margin-top: 30px;
      padding: 60px 90px; } }
  @media (max-width: 768px) {
    .okuizome_howto .sec_cnt .sec_kiso {
      width: 89.744vw;
      margin: 0 auto; } }
  @media screen and (min-width: 769px) {
    .okuizome_howto .sec_cnt .sec_kiso {
      width: 600px;
      margin: 0 auto; } }
  @media (max-width: 768px) {
    .okuizome_howto .sec_cnt .sec_junbi {
      width: 89.744vw;
      margin: 20.513vw auto 0 auto; } }
  @media screen and (min-width: 769px) {
    .okuizome_howto .sec_cnt .sec_junbi {
      width: 600px;
      margin: 100px auto 0 auto; } }
  @media (max-width: 768px) {
    .okuizome_howto .sec_cnt .sec_dandori {
      width: 89.744vw;
      margin: 20.513vw auto 0 auto; } }
  @media screen and (min-width: 769px) {
    .okuizome_howto .sec_cnt .sec_dandori {
      width: 600px;
      margin: 100px auto 0 auto; } }
  @media (max-width: 768px) {
    .okuizome_howto .sec_cnt .sec_kansha {
      width: 89.744vw;
      margin: 20.513vw auto 0 auto; } }
  @media screen and (min-width: 769px) {
    .okuizome_howto .sec_cnt .sec_kansha {
      width: 600px;
      margin: 100px auto 0 auto; } }
  @media (max-width: 768px) {
    .okuizome_howto .sec_cnt .sec_okuizome {
      width: 89.744vw;
      margin: 20.513vw auto 0 auto; } }
  @media screen and (min-width: 769px) {
    .okuizome_howto .sec_cnt .sec_okuizome {
      width: 600px;
      margin: 100px auto 0 auto; } }
  @media (max-width: 768px) {
    .okuizome_howto .sec_cnt .sec_osusume {
      width: 89.744vw;
      margin: 20.513vw auto 0 auto; } }
  @media screen and (min-width: 769px) {
    .okuizome_howto .sec_cnt .sec_osusume {
      width: 600px;
      margin: 100px auto 0 auto; } }
@media (max-width: 768px) {
  .okuizome_howto .sec_senmonka {
    margin-top: 10.256vw; } }
@media screen and (min-width: 769px) {
  .okuizome_howto .sec_senmonka {
    margin-top: 60px; } }

.mv_banner_area {
  background-image: url(/ec/images/shop1/ft_okuizome/howto/okuizome_manner_780x140_bg.jpg);
  background-repeat: no-repeat; }
  @media (max-width: 768px) {
    .mv_banner_area {
      background-size: 100vw 17.949vw;
      width: 100vw;
      height: 17.949vw; } }
  @media screen and (min-width: 769px) {
    .mv_banner_area {
      background-size: 780px 140px;
      width: 780px;
      height: 140px; } }
  .mv_banner_area .mv_banner_h1 {
    color: #7F5E08;
    text-align: center;
    font-family: 'Cormorant Garamond','Noto Serif JP', serif;
    line-height: 1; }
    @media (max-width: 768px) {
      .mv_banner_area .mv_banner_h1 {
        padding-top: 3.333vw;
        font-size: 7.179vw; } }
    @media screen and (min-width: 769px) {
      .mv_banner_area .mv_banner_h1 {
        padding-top: 26px;
        font-size: 58px; } }
  .mv_banner_area .mv_banner_h2 {
    color: #7F5E08;
    text-align: center;
    font-family: 'Cormorant Garamond','Noto Serif JP', serif;
    line-height: 1; }
    @media (max-width: 768px) {
      .mv_banner_area .mv_banner_h2 {
        padding-top: 1.282vw;
        letter-spacing: 0.256vw;
        font-size: 3.59vw; } }
    @media screen and (min-width: 769px) {
      .mv_banner_area .mv_banner_h2 {
        padding-top: 5px;
        letter-spacing: 2px;
        font-size: 28px; } }

@media (max-width: 768px) {
  .mv_txt_area {
    margin: 7.692vw auto 0 auto;
    width: 350px; } }
@media screen and (min-width: 769px) {
  .mv_txt_area {
    margin-top: 30px;
    width: 780px; } }
@media (max-width: 768px) {
  .mv_txt_area .mv_txt {
    font-size: 3.59vw; } }
@media screen and (min-width: 769px) {
  .mv_txt_area .mv_txt {
    font-size: 18px; } }
@media (max-width: 768px) {
  .mv_txt_area .mv_txt_annt {
    margin-top: 2.564vw;
    font-size: 3.077vw; } }
@media screen and (min-width: 769px) {
  .mv_txt_area .mv_txt_annt {
    margin-top: 15px;
    font-size: 14px; } }

.mv_index_area {
  background-color: #fff; }
  @media (max-width: 768px) {
    .mv_index_area {
      margin: 10.256vw auto 0 auto;
      padding: 7.692vw 7.692vw;
      width: 89.744vw; } }
  @media screen and (min-width: 769px) {
    .mv_index_area {
      margin: 30px auto 0 auto;
      padding: 30px 30px;
      width: 600px; } }
  .mv_index_area .mv_index_ttl {
    color: #7F5E08;
    font-weight: bold;
    line-height: 1;
    text-align: center; }
    @media (max-width: 768px) {
      .mv_index_area .mv_index_ttl {
        margin-bottom: 5.128vw;
        padding-bottom: 2.564vw;
        font-size: 3.846vw;
        border-bottom: dashed 1px #E1766B; } }
    @media screen and (min-width: 769px) {
      .mv_index_area .mv_index_ttl {
        margin-bottom: 20px;
        padding-bottom: 10px;
        font-size: 20px;
        border-bottom: dashed 1px #E1766B; } }
  .mv_index_area .parent_ol {
    color: #7F5E08; }
    @media (max-width: 768px) {
      .mv_index_area .parent_ol {
        margin: 0 auto;
        width: 82.051vw; } }
    @media screen and (min-width: 769px) {
      .mv_index_area .parent_ol {
        margin: 0 auto;
        width: 518px; } }
    .mv_index_area .parent_ol .parent_li {
      line-height: 1; }
      @media (max-width: 768px) {
        .mv_index_area .parent_ol .parent_li {
          margin-top: 3.846vw;
          font-size: 3.59vw; } }
      @media screen and (min-width: 769px) {
        .mv_index_area .parent_ol .parent_li {
          margin-top: 15px;
          font-size: 18px; } }
      .mv_index_area .parent_ol .parent_li a {
        color: #7F5E08; }
      @media (max-width: 768px) {
        .mv_index_area .parent_ol .parent_li .child_ol {
          margin-left: 3.59vw; } }
      @media screen and (min-width: 769px) {
        .mv_index_area .parent_ol .parent_li .child_ol {
          margin-left: 17px; } }
      .mv_index_area .parent_ol .parent_li .child_ol .child_li {
        line-height: 1; }
        @media (max-width: 768px) {
          .mv_index_area .parent_ol .parent_li .child_ol .child_li {
            font-size: 3.59vw;
            margin-top: 3.846vw; } }
        @media screen and (min-width: 769px) {
          .mv_index_area .parent_ol .parent_li .child_ol .child_li {
            font-size: 18px;
            margin-top: 15px; } }
        .mv_index_area .parent_ol .parent_li .child_ol .child_li a {
          color: #7F5E08; }

.cnt_ttl_area {
  background-image: url(/ec/images/shop1/ft_okuizome/howto/h2_bg.jpg);
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; }
  @media (max-width: 768px) {
    .cnt_ttl_area {
      margin: 0 auto;
      width: 89.744vw;
      height: 20.256vw;
      background-size: 89.744vw 20.256vw; } }
  @media screen and (min-width: 769px) {
    .cnt_ttl_area {
      margin: 0 auto;
      width: 600px;
      height: 133px;
      background-size: 600px 133px; } }
  .cnt_ttl_area .cnt_ttl_h2 {
    color: #7F5E08;
    font-family: 'Cormorant Garamond','Noto Serif JP', serif;
    font-weight: bold;
    text-align: center; }
    @media (max-width: 768px) {
      .cnt_ttl_area .cnt_ttl_h2 {
        font-size: 4.103vw;
        line-height: 1.4; } }
    @media screen and (min-width: 769px) {
      .cnt_ttl_area .cnt_ttl_h2 {
        font-size: 25px;
        line-height: 1.4; } }
    @media (max-width: 768px) {
      .cnt_ttl_area .cnt_ttl_h2 .ttl_h2_main {
        font-size: 5.128vw; } }
    @media screen and (min-width: 769px) {
      .cnt_ttl_area .cnt_ttl_h2 .ttl_h2_main {
        font-size: 30px; } }

@media (max-width: 768px) {
  .cnt_img_area {
    margin-top: 7.692vw; } }
@media screen and (min-width: 769px) {
  .cnt_img_area {
    margin-top: 30px; } }
@media (max-width: 768px) {
  .cnt_img_area .cnt_img {
    width: 89.744vw;
    height: 64.103vw; } }
@media screen and (min-width: 769px) {
  .cnt_img_area .cnt_img {
    width: 600px;
    height: 429px; } }
@media (max-width: 768px) {
  .cnt_img_area .cnt_img_annt {
    margin-top: 2.564vw;
    font-size: 2.821vw; } }
@media screen and (min-width: 769px) {
  .cnt_img_area .cnt_img_annt {
    margin-top: 10px;
    font-size: 12px; } }

.cnt_main_area {
  position: relative; }
  @media (max-width: 768px) {
    .cnt_main_area {
      margin-top: 7.692vw; } }
  @media screen and (min-width: 769px) {
    .cnt_main_area {
      margin-top: 30px; } }
  .cnt_main_area.is__calculator {
    background-color: #FFFAF4; }
    @media (max-width: 768px) {
      .cnt_main_area.is__calculator {
        margin-left: -5.128vw;
        width: 100vw;
        padding: 7.692vw 5.128vw; } }
    @media screen and (min-width: 769px) {
      .cnt_main_area.is__calculator {
        margin-left: -90px;
        width: 780px;
        padding: 60px 90px; } }
  .cnt_main_area .cnt_main_h3 {
    color: #7F5E08;
    font-weight: bold;
    position: relative; }
    @media (max-width: 768px) {
      .cnt_main_area .cnt_main_h3 {
        padding-left: 5.897vw;
        font-size: 4.103vw; } }
    @media screen and (min-width: 769px) {
      .cnt_main_area .cnt_main_h3 {
        padding-left: 27px;
        font-size: 22px; } }
    .cnt_main_area .cnt_main_h3::before {
      content: "";
      position: absolute;
      background-image: url(/ec/images/shop1/ft_okuizome/howto/h3_icon.jpg);
      background-repeat: no-repeat; }
      @media (max-width: 768px) {
        .cnt_main_area .cnt_main_h3::before {
          background-size: 5.641vw 5.641vw;
          width: 5.641vw;
          height: 5.641vw;
          left: 0px;
          top: 0.769vw; } }
      @media screen and (min-width: 769px) {
        .cnt_main_area .cnt_main_h3::before {
          background-size: 25px 25px;
          width: 25px;
          height: 25px;
          left: 0px;
          top: 5px; } }
  @media (max-width: 768px) {
    .cnt_main_area .cnt_main_txt {
      margin-top: 3.846vw;
      font-size: 3.59vw; } }
  @media screen and (min-width: 769px) {
    .cnt_main_area .cnt_main_txt {
      margin-top: 20px;
      font-size: 18px; } }
  .cnt_main_area .cnt_main_plus_txt {
    background-color: #FFFAF4; }
    @media (max-width: 768px) {
      .cnt_main_area .cnt_main_plus_txt {
        margin-top: 3.846vw;
        padding: 5.128vw 5.128vw;
        font-size: 3.59vw; } }
    @media screen and (min-width: 769px) {
      .cnt_main_area .cnt_main_plus_txt {
        margin-top: 20px;
        padding: 30px 30px;
        font-size: 18px; } }
    .cnt_main_area .cnt_main_plus_txt .plus_txt_bold {
      font-weight: bold; }
  .cnt_main_area .cnt_main_h4 {
    text-align: center;
    font-weight: bold;
    color: #7F5E08; }
    @media (max-width: 768px) {
      .cnt_main_area .cnt_main_h4 {
        margin-top: 5.128vw;
        font-size: 4.103vw; } }
    @media screen and (min-width: 769px) {
      .cnt_main_area .cnt_main_h4 {
        margin-top: 20px;
        font-size: 22px; } }

.cnt_btn {
  font-weight: bold;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none; }
  @media (max-width: 768px) {
    .cnt_btn {
      margin: 2.564vw auto 0 auto;
      width: 71.795vw;
      font-size: 3.59vw;
      border-radius: 12.821vw;
      padding: 3.077vw 0;
      text-align: center;
      line-height: 1.4; } }
  @media screen and (min-width: 769px) {
    .cnt_btn {
      margin: 10px auto 0 auto;
      width: 460px;
      height: 62px;
      font-size: 18px;
      border-radius: 50px; } }
  .cnt_btn::before {
    content: "";
    position: absolute;
    transform: translatey(-50%) rotate(45deg); }
    @media (max-width: 768px) {
      .cnt_btn::before {
        width: 2.051vw;
        height: 2.051vw;
        right: 5.128vw;
        top: 50%; } }
    @media screen and (min-width: 769px) {
      .cnt_btn::before {
        width: 9px;
        height: 9px;
        right: 20px;
        top: 50%; } }

@media (max-width: 768px) {
  .cnt_main {
    margin-top: 7.692vw; } }
@media screen and (min-width: 769px) {
  .cnt_main {
    margin-top: 30px; } }
.cnt_main .cnt_main_img_dis {
  display: flex;
  justify-content: space-between; }
  @media (max-width: 768px) {
    .cnt_main .cnt_main_img_dis {
      align-items: end; } }
  @media screen and (min-width: 769px) {
    .cnt_main .cnt_main_img_dis {
      align-items: center; } }
  @media (max-width: 768px) {
    .cnt_main .cnt_main_img_dis .img_left {
      width: 65.128vw;
      height: 51.795vw; } }
  @media screen and (min-width: 769px) {
    .cnt_main .cnt_main_img_dis .img_left {
      width: 385px;
      height: 304px; } }
  @media (max-width: 768px) {
    .cnt_main .cnt_main_img_dis .img_right {
      width: 22.308vw;
      height: 22.308vw; } }
  @media screen and (min-width: 769px) {
    .cnt_main .cnt_main_img_dis .img_right {
      width: 195px;
      height: 195px; } }
.cnt_main .cnt_main_txt {
  text-align: center; }
  @media (max-width: 768px) {
    .cnt_main .cnt_main_txt {
      margin-top: 3.846vw;
      font-size: 3.59vw; } }
  @media screen and (min-width: 769px) {
    .cnt_main .cnt_main_txt {
      margin-top: 10px;
      font-size: 18px; } }

.cnt_main_point_ttl {
  font-weight: bold;
  color: #E1766B;
  text-align: center; }
  @media (max-width: 768px) {
    .cnt_main_point_ttl {
      margin-top: 7.692vw;
      font-size: 4.103vw; } }
  @media screen and (min-width: 769px) {
    .cnt_main_point_ttl {
      margin-top: 30px;
      font-size: 22px; } }

.point_dis_bw {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media (max-width: 768px) {
    .point_dis_bw {
      margin-top: 3.846vw; } }
  @media screen and (min-width: 769px) {
    .point_dis_bw {
      margin-top: 20px; } }
  @media (max-width: 768px) {
    .point_dis_bw .point_img_1 {
      width: 41.026vw;
      height: 41.026vw; } }
  @media screen and (min-width: 769px) {
    .point_dis_bw .point_img_1 {
      width: 280px;
      height: 280px; } }
  @media (max-width: 768px) {
    .point_dis_bw .point_img_2 {
      width: 41.026vw;
      height: 41.026vw; } }
  @media screen and (min-width: 769px) {
    .point_dis_bw .point_img_2 {
      width: 280px;
      height: 220px; } }
  @media (max-width: 768px) {
    .point_dis_bw .point_txt {
      width: 44.872vw;
      font-size: 3.59vw; } }
  @media screen and (min-width: 769px) {
    .point_dis_bw .point_txt {
      width: 300px;
      font-size: 18px; } }

.point_bg {
  background-image: url(/ec/images/shop1/ft_okuizome/howto/okuizome_reitou.jpg);
  background-repeat: no-repeat; }
  @media (max-width: 768px) {
    .point_bg {
      margin-top: 3.846vw;
      background-size: 89.744vw 69.231vw;
      width: 89.744vw;
      height: 69.231vw; } }
  @media screen and (min-width: 769px) {
    .point_bg {
      margin-top: 20px;
      background-size: 600px 463px;
      width: 600px;
      height: 463px; } }
  .point_bg .point_bg_hdg {
    font-weight: bold; }
    @media (max-width: 768px) {
      .point_bg .point_bg_hdg {
        padding-top: 9.231vw;
        margin-left: auto;
        margin-right: 6.667vw;
        width: 57.692vw;
        font-size: 3.59vw; } }
    @media screen and (min-width: 769px) {
      .point_bg .point_bg_hdg {
        padding-right: 30px;
        padding-top: 30px;
        margin-left: auto;
        width: 405px;
        font-size: 24px; } }
  .point_bg .point_bg_txt {
    font-weight: bold;
    color: #5B5557; }
    @media (max-width: 768px) {
      .point_bg .point_bg_txt {
        margin-left: auto;
        margin-right: 6.667vw;
        padding-top: 6.41vw;
        width: 73.077vw;
        font-size: 3.077vw;
        line-height: 1.6; } }
    @media screen and (min-width: 769px) {
      .point_bg .point_bg_txt {
        margin-left: auto;
        padding-right: 30px;
        padding-top: 25px;
        width: 340px;
        font-size: 18px;
        line-height: 1.6; } }

.point_dis_cen {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }
  @media (max-width: 768px) {
    .point_dis_cen .point_cnt_dis {
      margin-top: 5.128vw;
      width: 89.744vw; } }
  @media screen and (min-width: 769px) {
    .point_dis_cen .point_cnt_dis {
      margin-top: 20px;
      width: 290px; } }
  @media screen and (min-width: 769px) {
    .point_dis_cen .point_cnt_dis:first-child {
      margin-right: 20px; } }
  .point_dis_cen .point_cnt_dis .point_cnt_ttl {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media (max-width: 768px) {
      .point_dis_cen .point_cnt_dis .point_cnt_ttl {
        font-size: 3.59vw; } }
    @media screen and (min-width: 769px) {
      .point_dis_cen .point_cnt_dis .point_cnt_ttl {
        font-size: 18px; } }
    .point_dis_cen .point_cnt_dis .point_cnt_ttl::before {
      content: ""; }
      @media (max-width: 768px) {
        .point_dis_cen .point_cnt_dis .point_cnt_ttl::before {
          flex-grow: 1;
          border-top: 1px dashed #BA9A6A;
          margin-right: 1rem; } }
      @media screen and (min-width: 769px) {
        .point_dis_cen .point_cnt_dis .point_cnt_ttl::before {
          flex-grow: 1;
          border-top: 1px dashed #BA9A6A;
          margin-right: 1rem; } }
    .point_dis_cen .point_cnt_dis .point_cnt_ttl::after {
      content: ""; }
      @media (max-width: 768px) {
        .point_dis_cen .point_cnt_dis .point_cnt_ttl::after {
          flex-grow: 1;
          border-top: 1px dashed #BA9A6A;
          margin-left: 1rem; } }
      @media screen and (min-width: 769px) {
        .point_dis_cen .point_cnt_dis .point_cnt_ttl::after {
          flex-grow: 1;
          border-top: 1px dashed #BA9A6A;
          margin-left: 1rem; } }
  @media (max-width: 768px) {
    .point_dis_cen .point_cnt_dis .point_cnt_img {
      margin-top: 2.564vw;
      width: 89.744vw;
      height: 69.231vw; } }
  @media screen and (min-width: 769px) {
    .point_dis_cen .point_cnt_dis .point_cnt_img {
      margin-top: 10px;
      width: 290px;
      height: 228px; } }

.cnt_senmonka_area {
  background-color: #fff;
  margin: 0 auto; }
  @media (max-width: 768px) {
    .cnt_senmonka_area {
      width: 89.744vw;
      padding: 5.128vw 5.128vw; } }
  @media screen and (min-width: 769px) {
    .cnt_senmonka_area {
      width: 600px;
      padding: 30px 30px; } }
  .cnt_senmonka_area .senmonka_ttl {
    font-weight: bold;
    text-align: center;
    color: #7F5E08;
    border-bottom: dashed 1px #E1766B;
    line-height: 1; }
    @media (max-width: 768px) {
      .cnt_senmonka_area .senmonka_ttl {
        font-size: 3.846vw;
        padding-bottom: 2.564vw; } }
    @media screen and (min-width: 769px) {
      .cnt_senmonka_area .senmonka_ttl {
        font-size: 20px;
        padding-bottom: 10px; } }
  .cnt_senmonka_area .senmonka_dis {
    display: flex; }
    @media (max-width: 768px) {
      .cnt_senmonka_area .senmonka_dis {
        width: 81.026vw;
        margin: 5.128vw auto 0 auto; } }
    @media screen and (min-width: 769px) {
      .cnt_senmonka_area .senmonka_dis {
        justify-content: space-between;
        width: 510px;
        margin: 20px auto 0 auto; } }
    @media (max-width: 768px) {
      .cnt_senmonka_area .senmonka_dis .senmonka_img {
        margin-right: 2.564vw;
        width: 11.538vw;
        height: 11.538vw; } }
    @media screen and (min-width: 769px) {
      .cnt_senmonka_area .senmonka_dis .senmonka_img {
        width: 90px;
        height: 90px; } }
    @media (max-width: 768px) {
      .cnt_senmonka_area .senmonka_dis .senmonka_intro {
        width: 66.923vw; } }
    @media screen and (min-width: 769px) {
      .cnt_senmonka_area .senmonka_dis .senmonka_intro {
        width: 400px; } }
    @media (max-width: 768px) {
      .cnt_senmonka_area .senmonka_dis .senmonka_intro .senmonka_txt {
        font-size: 3.077vw;
        line-height: 1.5; } }
    @media screen and (min-width: 769px) {
      .cnt_senmonka_area .senmonka_dis .senmonka_intro .senmonka_txt {
        font-size: 14px;
        line-height: 1.5; } }
    .cnt_senmonka_area .senmonka_dis .senmonka_intro .senmonka_name {
      font-weight: bold;
      color: #7F5E08;
      line-height: 1; }
      @media (max-width: 768px) {
        .cnt_senmonka_area .senmonka_dis .senmonka_intro .senmonka_name {
          margin-top: 1.795vw;
          font-size: 3.59vw;
          margin-bottom: 2.821vw; } }
      @media screen and (min-width: 769px) {
        .cnt_senmonka_area .senmonka_dis .senmonka_intro .senmonka_name {
          margin-top: 4px;
          font-size: 18px;
          margin-bottom: 20px; } }

.okuizome_fixed__button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  background-color: #E1766B;
  position: fixed;
  transition: all .3s ease;
  writing-mode: vertical-rl;
  text-decoration: none;
  z-index: 20;
  color: #fff !important; }
  @media (max-width: 768px) {
    .okuizome_fixed__button {
      font-size: 3.59vw;
      width: 9.231vw;
      height: 31.282vw;
      border-radius: 2.564vw 0 0 2.564vw;
      top: 111.231vw;
      right: 0; } }
  @media screen and (min-width: 769px) {
    .okuizome_fixed__button {
      font-size: 18px;
      width: 50px;
      height: 182px;
      border-radius: 10px 0 0 10px;
      top: 255px;
      right: 0; } }
  .okuizome_fixed__button::after {
    content: "";
    position: absolute;
    transform: translateX(50%) rotate(135deg); }
    @media (max-width: 768px) {
      .okuizome_fixed__button::after {
        width: 2.051vw;
        height: 2.051vw;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        right: 50%;
        bottom: 2.564vw; } }
    @media screen and (min-width: 769px) {
      .okuizome_fixed__button::after {
        width: 8px;
        height: 8px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        right: 50%;
        bottom: 20px; } }

/* 電卓全体のコンテナ */
.calculator-container {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  /* 角をより丸く */
  padding: 40px 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
  transition: all 0.3s ease; }
  @media (max-width: 768px) {
    .calculator-container {
      padding: 10.256vw 6.41vw; } }
  @media screen and (min-width: 769px) {
    .calculator-container {
      width: 600px;
      max-width: 500px;
      margin: 0 auto; } }

/* タイトル */
.calculator-title {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  color: #444;
  font-size: 1.4rem;
  position: relative;
  /* タイトルの下線を装飾 */ }
  @media (max-width: 768px) {
    .calculator-title {
      font-size: 4.615vw;
      margin-bottom: 5.128vw; } }
  @media screen and (min-width: 769px) {
    .calculator-title {
      font-size: 22px;
      margin-bottom: 20px; } }
  .calculator-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #ffb3ba, #ffdfba);
    /* グラデーション */
    border-radius: 2px;
    margin: 0.75rem auto 0; }

/* 説明文 */
.description {
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8; }
  @media (max-width: 768px) {
    .description {
      font-size: 3.59vw;
      margin-bottom: 5.128vw; } }
  @media screen and (min-width: 769px) {
    .description {
      margin-bottom: 20px; } }

/* オファー */
.offer_wrp {
  margin-bottom: .75rem;
  line-height: 1.7; }
  @media (max-width: 768px) {
    .offer_wrp {
      width: 55.385vw;
      margin-left: auto;
      margin-right: auto; } }
  .offer_wrp .offer {
    width: 280px;
    margin-left: auto;
    margin-right: auto; }
    @media (max-width: 768px) {
      .offer_wrp .offer {
        font-size: 2.821vw; } }
    @media screen and (min-width: 769px) {
      .offer_wrp .offer {
        font-size: 14px; } }

/* 入力エリア */
.input-group {
  display: flex;
  flex-direction: column; }
  @media (max-width: 768px) {
    .input-group {
      margin-bottom: 5.128vw; } }
  @media screen and (min-width: 769px) {
    .input-group {
      margin: 0 auto 20px;
      width: 400px; } }

.input-item label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: #5B5557; }
  @media (max-width: 768px) {
    .input-item label {
      font-size: 3.59vw; } }
  @media screen and (min-width: 769px) {
    .input-item label {
      font-size: 18px; } }
.input-item input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
  background-color: #fcfcfc;
  font-family: "Yu Gothic";
  font-weight: bold;
  line-height: 1.8;
  text-align: left !important; }
  @media (max-width: 768px) {
    .input-item input {
      font-size: 3.59vw;
      padding: 3.077vw 5.128vw;
      height: 14.103vw; } }
  @media screen and (min-width: 769px) {
    .input-item input {
      font-size: 18px;
      padding: 11px 30px; } }
  .input-item input:focus {
    outline: none;
    border-color: #ffb3ba;
    box-shadow: 0 0 0 3px rgba(255, 179, 186, 0.3); }

/* ボタン */
.calculate-button {
  display: flex;
  /* アイコン配置のため flex に */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: linear-gradient(45deg, #ff8a98, #ffb3ba);
  color: #fff;
  border: none;
  padding: 1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 138, 152, 0.4); }
  @media (max-width: 768px) {
    .calculate-button {
      font-size: 3.59vw;
      margin-bottom: 5.128vw; } }
  @media screen and (min-width: 769px) {
    .calculate-button {
      font-size: 18px;
      margin: 0 auto 20px;
      width: 400px; } }
  .calculate-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 138, 152, 0.5); }
  .calculate-button:active {
    transform: translateY(0); }

/* エラーメッセージ */
.error-message {
  margin-top: .5rem;
  color: red;
  border-radius: 10px; }
  @media (max-width: 768px) {
    .error-message {
      font-size: 2.821vw; } }
  @media screen and (min-width: 769px) {
    .error-message {
      font-size: 14px; } }

/* 結果表示エリア（メッセージカード風） */
.result-area {
  background-color: #fff;
  border: 1px solid #ffdde1;
  border-radius: 16px;
  text-align: center;
  line-height: 1.8;
  animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  /* 結果エリアの背景装飾 */ }
  @media (max-width: 768px) {
    .result-area {
      margin: 10.256vw 0;
      padding: 10.256vw 6.41vw; } }
  @media screen and (min-width: 769px) {
    .result-area {
      margin: 40px 0;
      padding: 30px 20px; } }
  .result-area section {
    position: relative; }
    .result-area section::after {
      content: '';
      display: block;
      width: 50px;
      height: 3px;
      background: linear-gradient(90deg, #ffb3ba, #ffdfba);
      border-radius: 2px; }
      @media (max-width: 768px) {
        .result-area section::after {
          margin: 2.564vw auto 0; } }
      @media screen and (min-width: 769px) {
        .result-area section::after {
          margin: 20px auto 0; } }
  .result-area::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 100px;
    height: 100px;
    background: #ffb3ba;
    border-radius: 50%;
    opacity: 0.1; }
  .result-area::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: #ffdfba;
    border-radius: 50%;
    opacity: 0.1; }
  .result-area .result-txt, .result-area .result-date {
    font-weight: bold; }
  @media (max-width: 768px) {
    .result-area .result-txt {
      font-size: 3.59vw;
      line-height: 2.2; } }
  @media screen and (min-width: 769px) {
    .result-area .result-txt {
      font-size: 18px;
      line-height: 2.0; } }
  @media (max-width: 768px) {
    .result-area .result-date {
      font-size: 4.615vw; } }
  @media screen and (min-width: 769px) {
    .result-area .result-date {
      font-size: 22px; } }
  .result-area p {
    margin: 0;
    font-size: 1rem;
    position: relative;
    z-index: 1; }
  @media (max-width: 768px) {
    .result-area .description {
      font-size: 3.1vw;
      line-height: 1.57;
      margin-top: 5.128vw; } }
  @media screen and (min-width: 769px) {
    .result-area .description {
      font-size: 18px;
      line-height: 1.8;
      margin-top: 20px; } }
  @media (max-width: 768px) {
    .result-area .bnr-wrp {
      margin: 2.564vw auto 0; } }
  @media screen and (min-width: 769px) {
    .result-area .bnr-wrp {
      margin: 20px auto 0; } }

.result-date {
  font-size: 1.9rem;
  font-weight: bold;
  color: #ff8a98;
  margin: 0.5rem 0;
  letter-spacing: 1px;
  line-height: 1.3; }

.input-item input {
  position: relative; }
  .input-item input::after {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("/ec/images/shop1/ft_okuizome/howto/icon_calendar.jpg");
    z-index: 99; }
    @media (max-width: 768px) {
      .input-item input::after {
        width: 4.615vw;
        height: 4.615vw;
        top: 4.103vw;
        right: 5.128vw; } }
    @media screen and (min-width: 769px) {
      .input-item input::after {
        width: 24px;
        height: 24px;
        top: 15.5px;
        right: 30px; } }

.input-item input.empty {
  color: transparent; }

.input-item input.empty::before {
  content: "年 / 月 / 日";
  color: #5B5557;
  position: absolute;
  left: 30px;
  top: 15px;
  pointer-events: none;
  background-color: #fff;
  font-size: 14px; }
  @media (max-width: 768px) {
    .input-item input.empty::before {
      width: 75%;
      text-align: center; } }
  @media screen and (min-width: 769px) {
    .input-item input.empty::before {
      width: fit-content; } }

.input-item input.empty:focus::before {
  display: none; }

.input-item input:focus {
  color: #333; }

/*# sourceMappingURL=style.css.map */