@media screen and (min-width: 769px) {
  #main_visual {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100% !important;
    height: 762px;
    margin: 0 auto !important;
    padding: 0;
    background: #fff url(../img/howto/bg_main.jpg) no-repeat top center;
    background-size: 959.5px 565px;
    transition: all .8s;
  }
  #main_visual h1 {
    position: relative;
    top: 50%;
    color: #595757;
    font-size: 68px;
    text-align: center;
    line-height: 1;
    letter-spacing: 6px;
    transform: translateY(-65%);
  }
  #main_visual h1 span {
    display: block;
    margin-top: 10px;
    font-size: 22px;
    letter-spacing: 0;
  }
  #main_visual ul {
    position: absolute;
    left: 50%;
    bottom: 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-flow: flex;
    width: auto;
    margin: 0 auto;
    transform: translateX(-50%);
}
  #main_visual ul li {
    list-style-type: none;
      margin: 0 20px 0 20px;
  }
  #main_visual ul li span {
    display: none;
  }
  #main_visual ul li a {
	display: block;
	margin-left: 10px;
	margin-right: 10px;
  }
  #main_visual ul li a:hover {
    opacity: 0.7;
  }
  #main_visual ul li.anc_houto_01 a {
    width: 128px;
    height: 180px;
    background: url(../img/howto/anc_houto_01.png) no-repeat center;
    background-size: cover;
  }
  #main_visual ul li.anc_houto_02 a {
    width: 68px;
    height: 182px;
    background: url(../img/howto/anc_houto_02.png) no-repeat center;
    background-size: cover;
  }
  #main_visual ul li.anc_houto_03 a {
    width: 62px;
    height: 218px;
    background: url(../img/howto/anc_houto_03.png) no-repeat center;
    background-size: cover;
  }
  #main_visual ul li.anc_houto_04 a {
	width: 72px;
	height: 98px;
	background: url(../img/howto/anc_houto_04.png) no-repeat center;
	background-size: cover;
  }
    #main_visual ul li.anc_houto_05 a {
	width: 63px;
	height: 195px;
	background: url("/2024img/img-shittori.png") no-repeat center;
	background-size: cover;
  }
    #main_visual ul li.anc_houto_06 a {
	width: 64px;
	height: 205px;
	background: url("/2024img/img-milk.png") no-repeat center;
	background-size: cover;
  }

  #howto_lineup {
    padding: 0;
  }
  #howto_lineup .unit {
    padding: 90px 0 170px;
  }
  #howto_lineup .unit .inner {
    width: 96%;
    max-width: 816px;
    margin: 0 auto;
  }
  #howto_lineup .unit .inner h2 {
    margin-bottom: 30px;
    color: #595757;
    font-size: 28px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    line-height: 1.2;
  }
  #howto_lineup .unit .inner h2 span {
    font-size: 23px;
  }
  #howto_lineup .unit .inner h3 {
    width: 345px;
    margin: 0 auto 16px;
    color: #595757;
    font-size: 22px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    text-align: left;
    line-height: 1.5;
  }
  #howto_lineup .unit .inner p {
    width: 345px;
    margin: 0 auto 10px;
    font-size: 16px;
    line-height: 1.66;
  }
  #howto_lineup .unit .inner p span {
    vertical-align: text-top;
    font-size: 10px;
  }
  #howto_lineup .unit .inner p.attention {
    margin-bottom: 20px;
    font-size: 12px;
  }
  #howto_lineup .unit .inner .btn {
    width: 345px;
    margin: 0 auto 10px;
    text-align: center;
  }
  #howto_lineup .unit .inner .btn a {
    display: inline-block;
    height: 39px;
    padding: 0 24px 0 24px;
    background-color: #fff;
    border-radius: 18px;
    line-height: 39px;
    font-size: 12px;
    text-decoration: none;
  }
  #howto_lineup .unit .inner .btn a:after {
    position: relative;
    bottom: 1px;
    display: inline-block;
    content: "";
    width: 5.5px;
    height: 5.5px;
    margin-left: 1em;
    border: 1px solid;
    border-color: transparent transparent #f49f7e #f49f7e;
    transform: rotate(-135deg);
  }
  #howto_lineup .unit .inner .btn a:hover {
    opacity: .7;
  }
  #howto_lineup .unit .inner .how_to_use_area {
    width: 100%;
    max-width: 828px;
    margin: 50px auto 0;
  }
  #howto_lineup .unit .inner .how_to_use_area h3 {
    margin-bottom: 32px;
    font-size: 24px;
    font-family: 'Alegreya Sans', sans-serif;
    text-align: center;
    letter-spacing: 4px;
    line-height: 1.2;
  }
  #howto_lineup .unit .inner .how_to_use_area h3 span {
    display: block;
    font-size: 15px;
    letter-spacing: 0;
  }
  #howto_lineup .unit .inner .how_to_use_area .use {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div {
    position: relative;
    width: 188px;
    max-width: 188px;
    height: 135px;
    margin: 0 6px 16px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    box-shadow: 0px 0px 16px 5px rgba(233, 142, 88, 0.2);
  }
  #howto_lineup .unit .inner .how_to_use_area .use div a {
    display: block;
    height: 135px;
    text-decoration: none;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 76px;
    line-height: 1.2;
    font-size: 16px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_01 {
    background: #fff url(../img/howto/icn_howto_01.png) no-repeat center 55px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_02 {
    background: #fff url(../img/howto/icn_howto_02.png) no-repeat center 55px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_03 {
    background: #fff url(../img/howto/icn_howto_03.png) no-repeat center 55px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_04 {
    background: #fff url(../img/howto/icn_howto_04.png) no-repeat center 55px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_05 {
    background: #fff url(../img/howto/icn_howto_05.png) no-repeat center 55px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_06 {
    background: #fff url(../img/howto/icn_howto_06.png) no-repeat center 55px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_07 {
    background: #fff url(../img/howto/icn_howto_07.png) no-repeat center 55px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_08 {
    background: #fff url(../img/howto/icn_howto_08.png) no-repeat center 55px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_09 {
    background: #fff url(../img/howto/icn_howto_09.png) no-repeat center 55px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.none {
    background-color: transparent;
    box-shadow: none;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div:hover {
    opacity: 0.7;
  }
  #howto_lineup #lineup_anzu,#howto_lineup #lineup_anzu3 {
    margin-bottom: 12px;
    background-color: #ffece4;
  }
  #howto_lineup #lineup_anzu .img {
    width: 204px;
    height: 256px;
    margin: 0 auto 20px;
    background: url(../img/howto/img_howto_01.png) no-repeat center;
    background-size: cover;
  }
  #howto_lineup #lineup_anzu2 .img {
    width: 124px;
    height: 380px;
    margin: 0 auto 20px;
    background: url("/2024img/img-shittori2.png") no-repeat center;
    background-size: cover;
  }
    #howto_lineup #lineup_anzu3 .img {
    width: 124px;
    height: 380px;
    margin: 0 auto 20px;
    background: url("/2024img/img-milk2.png") no-repeat center;
    background-size: cover;
  }
  #howto_lineup #lineup_hair_hand,#howto_lineup #lineup_anzu2 {
    margin-bottom: 12px;
    padding-bottom: 140px;
    background-color: #fdf4f3;
  }
  #howto_lineup #lineup_hair_hand .img {
    width: 308px;
    height: 246px;
    margin: 0 auto 20px;
    background: url(../img/howto/img_howto_02.png) no-repeat center;
    background-size: cover;
  }
  #howto_lineup #lineup_shower {
    margin-bottom: 12px;
    padding-bottom: 150px;
    background-color: #ffece4;
  }
  #howto_lineup #lineup_shower .img {
    width: 308px;
    height: 320px;
    margin: 0 auto 20px;
    background: url(../img/howto/img_howto_03.png) no-repeat center;
    background-size: cover;
  }
  #howto_lineup #lineup_creambalm {
    padding-top: 70px;
    padding-bottom: 104px;
    background-color: #fdf4f3;
  }
  #howto_lineup #lineup_creambalm .img {
    width: 350px;
    height: 165px;
    margin: 0 auto 20px;
    background: url(../img/howto/img_howto_04.png) no-repeat center;
    background-size: cover;
  }
  #howto_lineup #lineup_creambalm .amount_to_use {
    margin-top: 40px;
  }
  #howto_lineup #lineup_creambalm .amount_to_use h4 {
    margin-bottom: 20px;
    font-size: 14px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
  }
  #howto_lineup #lineup_creambalm .amount_to_use .flex_box {
    width: 332px;
    margin: 0 auto;
  }
  #howto_lineup #lineup_creambalm .amount_to_use .flex_box .unit {
    width: 163px;
    padding: 0;
    border-top: 1px solid #f9cbb9;
    border-bottom: 1px solid #f9cbb9;
    background-color: #fff;
  }
  #howto_lineup #lineup_creambalm .amount_to_use .flex_box .unit div {
    text-align: center;
    font-size: 14px;
    line-height: 31px;
  }
  #howto_lineup #lineup_creambalm .amount_to_use .flex_box .unit div + div {
    border-top: 1px dashed #f9cbb9;
  }

  #colorbox {
    padding-bottom: 20px;
  }

  #cboxOverlay {
    background-color: #ffece4;
  }

  #cboxContent {
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    box-shadow: 0px 0px 16px 5px rgba(233, 142, 88, 0.2);
  }

  #cboxLoadedContent {
    background: transparent;
  }

  #colorbox, #cboxOverlay, #cboxWrapper {
    overflow: inherit !important;
  }

  #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
    top: -24px;
    right: -24px;
    width: 48px;
    height: 48px;
    background: url(../img/howto/modal/icn_modal_close.png) no-repeat 0 0;
  }

  .howto_modal_unit {
    width: 600px;
    padding: 30px 0;
    text-align: center;
  }
  .howto_modal_unit p {
    margin-bottom: 16px;
    font-size: 14px;
  }
  .howto_modal_unit p.lead {
    width: 308px;
    margin: 0 auto;
    text-align: left;
    font-size: 13px;
  }
  .howto_modal_unit p.lead span {
    display: block;
    margin-top: 6px;
    font-size: 10px;
  }
  .howto_modal_unit .inner {
    width: 308px;
    margin: 0 auto;
  }
  .howto_modal_unit .inner + .inner {
    margin-top: 27px;
    padding-top: 28px;
    border-top: 1px solid #dcdddd;
  }
  .howto_modal_unit h2 {
    margin-bottom: 20px;
    padding-bottom: 6px;
    font-size: 19px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
  }
  .howto_modal_unit h3 {
    margin-bottom: 14px;
    font-size: 13px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
  }
  .howto_modal_unit table {
    width: 294px;
    margin: 0 auto 26px;
  }
  .howto_modal_unit table th, .howto_modal_unit table td {
    width: 33.3%;
    padding: 3px 0;
    border: 1px solid #e5e5e5;
    font-size: 13px;
    text-align: center;
  }
  .howto_modal_unit table th.single_al, .howto_modal_unit table td.single_al {
    padding: 5px 9px;
    text-align: left;
  }
  .howto_modal_unit .table_caption {
    width: 294px;
    margin: -20px auto 20px;
    font-size: 10px;
    text-align: left;
  }
  .howto_modal_unit#howto_01_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m01.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_02_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m02.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_03_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m03.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_04_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m04.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_05_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m05.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_06_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m06.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_07_pop h2 {
    background: url(../img/howto/modal/ttl_body_01.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_07_pop h2.ttl2 {
    background: url(../img/howto/modal/ttl_body_02.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_08_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m07.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_09_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m08.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_10_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m09.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_11_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m10.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_12_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m11.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_13_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m12.png) no-repeat center bottom;
  }
  .howto_modal_unit#howto_14_pop h2 {
    background: url(../img/howto/modal/ttl_bg_m13.png) no-repeat center bottom;
  }
  .howto_modal_unit .flex_box {
    width: 320px;
    margin: 0 auto;
  }
  .howto_modal_unit .flex_box .unit {
    width: 155px;
  }
  .howto_modal_unit .flex_box .unit p {
    margin-left: 10px;
    font-size: 13px;
    text-align: left;
  }
  .howto_modal_unit .flex_box .unit p span {
    display: block;
    margin-top: 6px;
    font-size: 10px;
  }
  .howto_modal_unit .flex_box .unit .img {
    width: 155px;
    height: 156px;
    margin-bottom: 6px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m01_1 {
    background: url(../img/howto/modal/img_modal_01_1.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_m01_2 {
    background: url(../img/howto/modal/img_modal_01_2.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_m01_3 {
    background: url(../img/howto/modal/img_modal_01_3.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_m01_4 {
    background: url(../img/howto/modal/img_modal_01_4.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_m01_5 {
    background: url(../img/howto/modal/img_modal_01_5.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_m02_1 {
    background: url(../img/howto/modal/img_modal_02_1.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_m02_2 {
    background: url(../img/howto/modal/img_modal_02_2.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_m02_3 {
    background: url(../img/howto/modal/img_modal_02_3.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_m02_4 {
    background: url(../img/howto/modal/img_modal_02_4.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_m02_5 {
    background: url(../img/howto/modal/img_modal_02_5.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_body_01_1 {
    background: url(../img/howto/modal/img_body_01_1.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_body_02_1 {
    background: url(../img/howto/modal/img_body_02_1.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_body_01_2 {
    background: url(../img/howto/modal/img_body_01_2.png) no-repeat center;
  }
  .howto_modal_unit .flex_box .unit .img.img_body_02_2 {
    background: url(../img/howto/modal/img_body_02_2.png) no-repeat center;
  }
  .howto_modal_unit .oil_01 {
    width: 318px;
    height: 60px;
    margin: 0 auto;
    background: url(../img/howto/modal/img_oil_01.png) no-repeat center;
  }
  .howto_modal_unit .oil_01 span {
    display: none;
  }
  .howto_modal_unit .oil_02 {
    width: 318px;
    height: 60px;
    margin: 0 auto;
    background: url(../img/howto/modal/img_oil_02.png) no-repeat center;
  }
  .howto_modal_unit .oil_02 span {
    display: none;
  }
  .howto_modal_unit .oil_03 {
    width: 318px;
    height: 60px;
    margin: 0 auto;
    background: url(../img/howto/modal/img_oil_03.png) no-repeat center;
  }
  .howto_modal_unit .oil_03 span {
    display: none;
  }
}
/* SP */
@media screen and (max-width: 768px) {
  *:focus {
    outline: none;
  }

  #main_visual {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 507px;
    max-width: 100% !important;
    margin: 0 auto;
    padding-top: 0;
    background: url(../img/howto/sp/bg_main.png) no-repeat top center;
    background-size: 375px 300px;
    transition: all .8s;
  }
  #main_visual h1 {
    position: relative;
    top: 50%;
    color: #595757;
    font-size: 38px;
    text-align: center;
    line-height: 1;
    letter-spacing: 6px;
    transform: translateY(-100%);
  }
  #main_visual h1 span {
    display: block;
    font-size: 15.5px;
    letter-spacing: 0;
  }
  #main_visual ul {
	position: absolute;
	left: 50%;
	bottom: 32px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 60%;
	margin: 0 auto;
	transform: translateX(-50%);
  }
  #main_visual ul li {
    list-style-type: none;
  }
  #main_visual ul li span {
    display: none;
  }
  #main_visual ul li a {
    display: block;
  }
  #main_visual ul li a:hover {
    opacity: 0.7;
  }
  #main_visual ul li.anc_houto_01 a {
    width: 80px;
    height: 135px;
    background: url(../img/howto/sp/anc_houto_01.png) no-repeat center;
    background-size: cover;
  }
  #main_visual ul li.anc_houto_02 a {
    width: 54px;
    height: 139px;
    background: url(../img/howto/sp/anc_houto_02.png) no-repeat center;
    background-size: cover;
  }
  #main_visual ul li.anc_houto_03 a {
    width: 43px;
    height: 163px;
    background: url(../img/howto/sp/anc_houto_03.png) no-repeat center;
    background-size: cover;
  }
  #main_visual ul li.anc_houto_04 a {
    width: 55px;
    height: 84px;
    background: url(../img/howto/sp/anc_houto_04.png) no-repeat center;
    background-size: cover;
  }
    #main_visual ul li.anc_houto_05 a {
	width: 47.5px;
	height: 143.5px;
	background: url("/2024img/img-shittori.png") no-repeat center;
	background-size: cover;
  }
    #main_visual ul li.anc_houto_06 a {
	width: 43px;
	height: 155px;
	background: url("/2024img/img-milk.png") no-repeat center;
	background-size: cover;
  }

  #howto_lineup {
    width: 100%;
    padding: 0;
  }
  #howto_lineup .unit {
    padding: 42px 0 50px;
  }
  #howto_lineup .unit .inner {
    max-width: 375px;
    margin: 0 auto;
  }
  #howto_lineup .unit .inner h2 {
    margin-bottom: 20px;
    color: #595757;
    font-size: 24px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    line-height: 1.3;
  }
  #howto_lineup .unit .inner h2 span {
    font-size: 20px;
  }
  #howto_lineup .unit .inner h3 {
    width: 286px;
    margin: 0 auto 16px;
    color: #595757;
    font-size: 19px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    text-align: left;
    line-height: 1.5;
  }
  #howto_lineup .unit .inner p {
    width: 286px;
    margin: 0 auto 10px;
    font-size: 14px;
    line-height: 1.66;
  }
  #howto_lineup .unit .inner p span {
    vertical-align: text-top;
    font-size: 10px;
  }
  #howto_lineup .unit .inner p.attention {
    margin-bottom: 20px;
    font-size: 10px;
  }
  #howto_lineup .unit .inner .btn {
    width: 286px;
    margin: 0 auto 10px;
  }
  #howto_lineup .unit .inner .btn a {
    display: inline-block;
    height: 33px;
    padding: 0 20px;
    background-color: #fff;
    border-radius: 18px;
    line-height: 33px;
    font-size: 11px;
    text-decoration: none;
  }
  #howto_lineup .unit .inner .btn a:after {
    position: relative;
    bottom: 1px;
    display: inline-block;
    content: "";
    width: 5px;
    height: 5px;
    margin-left: 0.5em;
    border: 1px solid;
    border-color: transparent transparent #f49f7e #f49f7e;
    transform: rotate(-135deg);
  }
  #howto_lineup .unit .inner .how_to_use_area {
    width: 100%;
    max-width: 375px;
    margin: 40px auto 0;
    overflow: revert;
  }
  #howto_lineup .unit .inner .how_to_use_area h3 {
    margin-bottom: 26px;
    font-size: 23px;
    font-family: 'Alegreya Sans', sans-serif;
    text-align: center;
    letter-spacing: 4px;
    line-height: 1;
  }
  #howto_lineup .unit .inner .how_to_use_area h3 span {
    display: block;
    font-size: 13px;
    letter-spacing: 0;
  }
  #howto_lineup .unit .inner .how_to_use_area .use {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 92%;
    margin: 0 auto;
    overflow: revert;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div {
    position: relative;
    width: 46%;
    max-width: 159px;
    height: 113px;
    margin: 0 0 10px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    box-shadow: 0px 0px 12px 3px rgba(233, 142, 88, 0.2);
  }
  #howto_lineup .unit .inner .how_to_use_area .use div a {
    display: block;
    height: 135px;
    text-decoration: none;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    line-height: 1.2;
    font-size: 14px;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_01 {
    background: #fff url(../img/howto/sp/icn_howto_01.png) no-repeat center 48px;
    background-size: contain;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_02 {
    background: #fff url(../img/howto/sp/icn_howto_02.png) no-repeat center 48px;
    background-size: contain;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_03 {
    background: #fff url(../img/howto/sp/icn_howto_03.png) no-repeat center 48px;
    background-size: contain;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_04 {
    background: #fff url(../img/howto/sp/icn_howto_04.png) no-repeat center 48px;
    background-size: contain;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_05 {
    background: #fff url(../img/howto/sp/icn_howto_05.png) no-repeat center 48px;
    background-size: contain;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_06 {
    background: #fff url(../img/howto/sp/icn_howto_06.png) no-repeat center 48px;
    background-size: contain;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_07 {
    background: #fff url(../img/howto/sp/icn_howto_07.png) no-repeat center 48px;
    background-size: contain;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_08 {
    background: #fff url(../img/howto/sp/icn_howto_08.png) no-repeat center 48px;
    background-size: contain;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.howto_09 {
    background: #fff url(../img/howto/sp/icn_howto_09.png) no-repeat center 48px;
    background-size: contain;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div.none {
    background-color: transparent;
    box-shadow: none;
  }
  #howto_lineup .unit .inner .how_to_use_area .use div:hover {
    opacity: 0.7;
  }
  #howto_lineup #lineup_anzu,#howto_lineup #lineup_anzu3 {
    margin-bottom: 10px;
    padding-bottom: 60px;
    background-color: #ffece4;
  }
  #howto_lineup #lineup_anzu .img {
    width: 180px;
    height: 220px;
    margin: 0 auto 20px;
    background: url(../img/howto/sp/img_howto_01.jpg) no-repeat center;
    background-size: cover;
  }
#howto_lineup #lineup_anzu2 .img {
    width: 99px;
    height: 298px;
    margin: 0 auto 20px;
    background: url("/2024img/img-shittori2.png") no-repeat center;
    background-size: cover;
  }
    #howto_lineup #lineup_anzu3 .img {
    width: 99px;
    height: 310px;
    margin: 0 auto 20px;
    background: url("/2024img/img-milk2.png") no-repeat center;
    background-size: cover;
  }
  #howto_lineup #lineup_hair_hand,#howto_lineup #lineup_anzu2 {
    margin-bottom: 10px;
    padding-bottom: 60px;
    background-color: #fdf4f3;
  }
  #howto_lineup #lineup_hair_hand .img {
    width: 263px;
    height: 210px;
    margin: 0 auto 20px;
    background: url(../img/howto/sp/img_howto_02.jpg) no-repeat center;
    background-size: cover;
  }
  #howto_lineup #lineup_shower {
    margin-bottom: 10px;
    padding-bottom: 60px;
    background-color: #ffece4;
  }
  #howto_lineup #lineup_shower .img {
    width: 263px;
    height: 273px;
    margin: 0 auto 20px;
    background: url(../img/howto/sp/img_howto_03.jpg) no-repeat center;
    background-size: cover;
  }
  #howto_lineup #lineup_creambalm {
    padding-bottom: 56px;
    background-color: #fdf4f3;
  }
  #howto_lineup #lineup_creambalm .img {
    width: 321px;
    height: 138px;
    margin: 0 auto 20px;
    background: url(../img/howto/sp/img_howto_04.jpg) no-repeat center;
    background-size: cover;
  }
  #howto_lineup #lineup_creambalm .amount_to_use {
    margin-top: 40px;
  }
  #howto_lineup #lineup_creambalm .amount_to_use h4 {
    margin-bottom: 16px;
    font-size: 14px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
  }
  #howto_lineup #lineup_creambalm .amount_to_use .flex_box {
    display: flex;
    justify-content: space-around;
    width: 320px;
    margin: 0 auto;
  }
  #howto_lineup #lineup_creambalm .amount_to_use .flex_box .unit {
    width: 48%;
    padding: 0;
    border-top: 1px solid #f9cbb9;
    border-bottom: 1px solid #f9cbb9;
    background-color: #fff;
  }
  #howto_lineup #lineup_creambalm .amount_to_use .flex_box .unit div {
    text-align: center;
    font-size: 12px;
    line-height: 28px;
  }
  #howto_lineup #lineup_creambalm .amount_to_use .flex_box .unit div + div {
    border-top: 1px dashed #f9cbb9;
  }

  #colorbox {
    padding-bottom: 20px;
  }

  #cboxOverlay {
    background-color: #ffece4;
  }

  #cboxContent {
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    box-shadow: 0px 0px 16px 5px rgba(233, 142, 88, 0.2);
  }

  #cboxLoadedContent {
    background: #fff;
    border-radius: 10px;
  }

  #colorbox, #cboxOverlay, #cboxWrapper {
    overflow: inherit !important;
  }

  #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
    top: -18px;
    right: -13px;
    width: 46px;
    height: 46px;
    background: url(../img/howto/sp/modal/icn_modal_close.png) no-repeat 0 0;
    background-size: cover;
  }

  .howto_modal_unit {
    box-sizing: border-box;
    width: 326px;
    padding: 26px 12px;
    text-align: center;
  }
  .howto_modal_unit p {
    margin-bottom: 16px;
    font-size: 13px;
  }
  .howto_modal_unit p.lead {
    width: 308px;
    margin: 0 auto;
    text-align: left;
    font-size: 13px;
  }
  .howto_modal_unit p.lead span {
    display: block;
    margin-top: 6px;
    font-size: 10px;
  }
  .howto_modal_unit .inner {
    margin: 0 auto;
  }
  .howto_modal_unit .inner + .inner {
    margin-top: 27px;
    padding-top: 28px;
    border-top: 1px solid #dcdddd;
  }
  .howto_modal_unit h2 {
    margin-bottom: 20px;
    padding-bottom: 6px;
    font-size: 18px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
  }
  .howto_modal_unit h3 {
    margin-bottom: 14px;
    font-size: 12px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
  }
  .howto_modal_unit table {
    width: 275px;
    margin: 0 auto 26px;
  }
  .howto_modal_unit table th, .howto_modal_unit table td {
    width: 33.3%;
    padding: 3px 0;
    border: 1px solid #e5e5e5;
    font-size: 12px;
    text-align: center;
  }
  .howto_modal_unit table th.single_al, .howto_modal_unit table td.single_al {
    padding: 5px 9px;
    text-align: left;
  }
  .howto_modal_unit .table_caption {
    width: 275px;
    margin: -20px auto 20px;
    font-size: 10px;
    text-align: left;
  }
  .howto_modal_unit#howto_01_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m01.png) no-repeat center bottom;
    background-size: 168px 20px;
  }
  .howto_modal_unit#howto_02_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m02.png) no-repeat center bottom;
    background-size: 115px 20px;
  }
  .howto_modal_unit#howto_03_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m03.png) no-repeat center bottom;
    background-size: 230px 20px;
  }
  .howto_modal_unit#howto_04_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m04.png) no-repeat center bottom;
    background-size: 280px 20px;
  }
  .howto_modal_unit#howto_05_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m05.png) no-repeat center bottom;
    background-size: 160px 20px;
  }
  .howto_modal_unit#howto_06_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m06.png) no-repeat center bottom;
    background-size: 225px 20px;
  }
  .howto_modal_unit#howto_07_pop h2 {
    background: url(../img/howto/sp/modal/ttl_body_01.png) no-repeat center bottom;
    background-size: 175px 20px;
  }
  .howto_modal_unit#howto_07_pop h2.ttl2 {
    background: url(../img/howto/sp/modal/ttl_body_02.png) no-repeat center bottom;
    background-size: 175px 20px;
  }
  .howto_modal_unit#howto_08_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m07.png) no-repeat center bottom;
    background-size: 230px 20px;
  }
  .howto_modal_unit#howto_09_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m08.png) no-repeat center bottom;
    background-size: 166px 20px;
  }
  .howto_modal_unit#howto_10_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m09.png) no-repeat center bottom;
    background-size: 145px 20px;
  }
  .howto_modal_unit#howto_11_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m10.png) no-repeat center bottom;
    background-size: 185px 20px;
  }
  .howto_modal_unit#howto_12_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m11.png) no-repeat center bottom;
    background-size: 115px 20px;
  }
  .howto_modal_unit#howto_13_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m12.png) no-repeat center bottom;
    background-size: 168px 20px;
  }
  .howto_modal_unit#howto_14_pop h2 {
    background: url(../img/howto/sp/modal/ttl_bg_m13.png) no-repeat center bottom;
    background-size: 145px 20px;
  }
  .howto_modal_unit .flex_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .howto_modal_unit .flex_box .unit {
    width: 144px;
  }
  .howto_modal_unit .flex_box .unit p {
    margin-left: 7px;
    font-size: 12px;
    text-align: left;
  }
  .howto_modal_unit .flex_box .unit p span {
    display: block;
    margin-top: 6px;
    font-size: 10px;
  }
  .howto_modal_unit .flex_box .unit .img {
    width: 144px;
    height: 146px;
    margin-bottom: 6px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m01_1 {
    background: url(../img/howto/sp/modal/img_modal_01_1.png) no-repeat center;
    background-size: 143px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m01_2 {
    background: url(../img/howto/sp/modal/img_modal_01_2.png) no-repeat center;
    background-size: 143px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m01_3 {
    background: url(../img/howto/sp/modal/img_modal_01_3.png) no-repeat center;
    background-size: 143px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m01_4 {
    background: url(../img/howto/sp/modal/img_modal_01_4.png) no-repeat center;
    background-size: 143px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m01_5 {
    background: url(../img/howto/sp/modal/img_modal_01_5.png) no-repeat center;
    background-size: 143px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m02_1 {
    background: url(../img/howto/sp/modal/img_modal_02_1.png) no-repeat center;
    background-size: 144px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m02_2 {
    background: url(../img/howto/sp/modal/img_modal_02_2.png) no-repeat center;
    background-size: 144px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m02_3 {
    background: url(../img/howto/sp/modal/img_modal_02_3.png) no-repeat center;
    background-size: 144px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m02_4 {
    background: url(../img/howto/sp/modal/img_modal_02_4.png) no-repeat center;
    background-size: 144px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_m02_5 {
    background: url(../img/howto/sp/modal/img_modal_02_5.png) no-repeat center;
    background-size: 144px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_body_01_1 {
    background: url(../img/howto/sp/modal/img_body_01_1.png) no-repeat center;
    background-size: 136px 136px;
  }
  .howto_modal_unit .flex_box .unit .img.img_body_02_1 {
    background: url(../img/howto/sp/modal/img_body_02_1.png) no-repeat center;
    background-size: 136px 136px;
  }
  .howto_modal_unit .flex_box .unit .img.img_body_01_2 {
    background: url(../img/howto/sp/modal/img_body_01_2.png) no-repeat center;
    background-size: 143px 146px;
  }
  .howto_modal_unit .flex_box .unit .img.img_body_02_2 {
    background: url(../img/howto/sp/modal/img_body_02_2.png) no-repeat center;
    background-size: 137px 146px;
  }
  .howto_modal_unit .oil_01 {
    width: 298px;
    height: 56px;
    margin: 0 auto;
    background: url(../img/howto/sp/modal/img_oil_01.png) no-repeat center;
    background-size: cover;
  }
  .howto_modal_unit .oil_01 span {
    display: none;
  }
  .howto_modal_unit .oil_02 {
    width: 298px;
    height: 56px;
    margin: 0 auto;
    background: url(../img/howto/sp/modal/img_oil_02.png) no-repeat center;
    background-size: cover;
  }
  .howto_modal_unit .oil_02 span {
    display: none;
  }
  .howto_modal_unit .oil_03 {
    width: 298px;
    height: 56px;
    margin: 0 auto;
    background: url(../img/howto/sp/modal/img_oil_03.png) no-repeat center;
    background-size: cover;
  }
  .howto_modal_unit .oil_03 span {
    display: none;
  }
}

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