﻿body {
background: url("../img/common/bg_pc.jpg") top left no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
img {
width: 100%;
height: auto;
}
#print_area {
display: none;
margin: 0;
padding: 0;
}

/*maincontents*/
#maincontents {
	width: 88%;
	margin: 100px auto 60px;
	background-color: #FFF;
	max-width: 1920px;
	position: relative;
}
#maincontents .contents_inner {
width: 87.5%;
max-width:1050px;
margin: 0 auto;
padding-bottom: 80px;
}


/*style_title*/
#maincontents .style_title {
margin: 0 auto 0;
padding: 140px 0 30px;
}
#maincontents .style_title h1 {
font-size: 34px;
line-height: 1.25;
margin-bottom: 10px;
color: #333;
}
#maincontents .style_title p {
font-size: 15px;
line-height: 2.14;
color: #333;
}
#maincontents .style_title .tag {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
text-align: left;
margin: 10px auto 0;
}
#maincontents .style_title .tag li {
font-size: 14px;
line-height: 1;
color: #333;
border: 1px solid #333;
border-radius: 18px;
margin-right: 10px;
padding: 2px 0;
}
#maincontents .style_title .tag li span {
padding: 0 8px 0 9px;
}

/*image_wrapper*/
#maincontents .image-info_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: left;
margin: 0 auto 50px;
}
#maincontents .image_wrapper {
width: 52%;
margin: 0 auto 0 0;
}
#maincontents .slick {
width: 97%;
position: relative;
z-index: 1;
}
#maincontents .slick::after {
content: "";
display: block;
position: absolute;
width: 97%;
height: 97%;
z-index: -1;
background: 0 0 no-repeat;
background-size: 100% 100%;
right: -3%;
bottom: -3%;
}
#maincontents .bg_bob .slick::after {
background-image: url("../img/style/bg01.jpg")
}
#maincontents .bg_short .slick::after {
background-image: url("../img/style/bg02.jpg")
}
#maincontents .bg_long .slick::after {
background-image: url("../img/style/bg03.jpg")
}
#maincontents .bg_medium .slick::after {
background-image: url("../img/style/bg04.jpg")
}
#maincontents .image_nav {
margin: 40px 0 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
}
#maincontents .image_nav li {
position: relative;
width: 24%;
margin: 0 1% 1% 0;
cursor: pointer;
transition: 0.5s cubic-bezier(0,.6,.6,1);
display: block;
}
#maincontents .image_nav li:hover {
opacity: 0.7;
}
#maincontents .image_nav .slick-track {
transform: scale(0.98) translate3d(0,0,0)!important;
}
#maincontents .image_nav .slick-current::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 4px solid #80BABD;
box-sizing: border-box;
}

/*info*/
#maincontents .info_wrapper {
width: 36%;
margin: 0 0 0 auto;
}
#maincontents .info_before h3 {
font-size: 16px;
color: #333;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 100;
text-align: center;
margin-bottom: 12px;
}
#maincontents .before_img {
width: 66.7%;
margin: 0 auto 55px;
}
#maincontents .info_item {
text-align: center;
margin: 4px auto;
border: 1px solid #D8D8D8;
}
#maincontents .info_item h3 {
font-size: 16px;
color: #333;
background: #D8D8D8;
padding: 15px;
}
#maincontents .info_item ul.item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
margin: 5px 15px 15px;
}
#maincontents .info_item ul.item li {
margin: 0 4px;
width: 30%;
}
#maincontents .info_item ul.item li br.show_pc {
display: block !important;
}
#maincontents .info_item ul.item li .show_pc {
display: inline !important;
}
#maincontents .info_item ul.item li .img {
margin-bottom: 5px;
}
#maincontents .info_item ul.item li p {
font-size: 12px;
line-height: 1.2;
position: relative;
z-index: 10;
letter-spacing: -0.02em;
color: #333;
}
#maincontents .info_item .link_brand {
width: 90%;
max-width: 240px;
margin: 0 auto 25px;
}
#maincontents .info_item .link_brand li img {
height: 15px;
margin: 0 auto;
}
#maincontents .info_item .link_brand li a {
display: block;
padding: 15px 40px;
background-color: #E7D2DA;
text-align: center;
}
#maincontents .link_print {
width: 90%;
max-width: 240px;
margin: 20px auto 25px;
}
#maincontents .link_print li img {
height: 15px;
margin: 0 auto;
}
#maincontents .link_print li a {
display: block;
padding: 15px 40px;
background-color: #80BABD;
text-align: center;
}


/*howto*/
#maincontents .howto_wrapper {
width: 90%;
max-width: 768px;
margin: 120px auto 30px;
}
#maincontents .howto_wrapper h3 {
font-size: 28px;
color: #333;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 100;
text-align: center;
margin-bottom: 35px;
padding-bottom: 20px;
position: relative;
}
#maincontents .howto_wrapper h3::after {
content: "";
display: block;
position: absolute;
border-bottom: 1px solid #333;
width: 25px;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
}
#maincontents .howto_wrapper .mov_wrapper {
width: 100%;
height: 0;
padding-top: 56.25%;
position: relative;
}
#maincontents .howto_wrapper .mov_wrapper::after {
content: "";
display: block;
position: absolute;
width: 85%;
height: 97%;
z-index: 0;
background: #80BABD;
right: -15px;
bottom: -15px;
}
#maincontents .howto_wrapper .mov_wrapper iframe {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 1;
}
#maincontents .howto_wrapper .howto_info {
margin: 75px auto 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
text-align: left;
}
#maincontents .howto_wrapper .howto_info dl {
width: 46%;
margin: 0 2% 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: left;
position: relative;
}
#maincontents .howto_wrapper .howto_info dl::after {
content: "";
width: 1px;
height: 100%;
border-right: 1px solid #333;
position: absolute;
top: 0;
left: 10%;
}
#maincontents .howto_wrapper .howto_info dt {
width: 10%;
font-size: 34px;
color: #333;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 100;
}
#maincontents .howto_wrapper .howto_info dt.double {
text-indent: -0.2em
}
#maincontents .howto_wrapper .howto_info dd {
width: 85%;
font-size: 14px;
line-height: 1.8;
color: #333;
}
#maincontents .stylist_wrapper {
width: 90%;
max-width: 768px;
margin: 0 auto;
padding: 50px 0;
border-top: 1px solid #333;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
-webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}
#maincontents .stylist_wrapper .stylist_title {
width: 30%;
margin: 0 auto;
}
#maincontents .stylist_wrapper h3 {
width: 60%;
margin: 0 0 0 auto;
font-size: 28px;
color: #333;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 100;
text-align: center;
padding-bottom: 20px;
position: relative;
}
#maincontents .stylist_wrapper h3::after {
content: "";
display: block;
position: absolute;
border-bottom: 1px solid #333;
width: 25px;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
}
#maincontents .stylist_wrapper .stylist_image {
width: 30%;
max-width: 150px;
margin: 0 auto;
}
#maincontents .stylist_wrapper .stylist_info {
width: 40%;
margin: 0 auto;
}
#maincontents .stylist_wrapper .stylist_info h4 {
font-size: 16px;
margin-bottom: 10px;
color: #333;
}
#maincontents .stylist_wrapper .stylist_info p {
font-size: 12px;
line-height: 1.25;
color: #333;
}
#maincontents .stylist_wrapper .stylist_info .insta_link {
width: 43px;
margin: 5px auto 0 -4px;
}


/*other style*/
#other_style {
width: 87.5%;
max-width:1050px;
margin: 0 auto;
padding-bottom: 80px;
}
#other_style h3 {
font-size: 28px;
color: #333;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 100;
text-align: center;
margin-bottom: 35px;
padding-bottom: 20px;
position: relative;
}
#other_style h3::after {
content: "";
display: block;
position: absolute;
border-bottom: 1px solid #333;
width: 25px;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
}
#other_style ul.other_link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
text-align: left;
width: 101%;
margin: 0 -0.5%
}
#other_style ul.other_link li {
width: 19%;
margin: 0 0.5% 1% 0.5%;
position: relative;
}
#other_style ul.other_link li a {
transition: 0.5s cubic-bezier(0,.6,.6,1);
display: block;
}
#other_style ul.other_link li a:hover {
opacity: 0.7;
}
#other_style ul.btn_to_styletop {
width: 90%;
max-width: 240px;
margin: 30px auto 70px;
}
#other_style ul.btn_to_styletop li img {
height: 15px;
margin: 0 auto;
}
#other_style ul.btn_to_styletop li a {
display: block;
padding: 15px 40px;
background-color: #E7D2DA;
text-align: center;
}


@media only screen and (max-width: 1024px) {
#maincontents .link_print {
display: none !important;
}
}

@media only screen and (max-width: 768px) {
body {
background: url("../img/common/bg_sp.jpg") top left no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}


/*maincontents*/
#maincontents {
	width: 88%;
	margin: 50px auto 50px;
}
#maincontents .contents_inner {
width: 87.5%;
max-width:1050px;
margin: 0 auto;
padding-bottom: 30px;
}


/*style_title*/
#maincontents .style_title {
margin: 0 auto 0;
padding: 85px 0 25px;
}
#maincontents .style_title h1 {
font-size: 21px;
line-height: 1.25;
margin-bottom: 10px;
}
#maincontents .style_title p {
font-size: 11px;
line-height: 2.14;
}
#maincontents .style_title .tag {
margin: 2px auto 0;
}
#maincontents .style_title .tag li {
font-size: 11px;
border-radius: 15px;
margin-right: 6px;
margin-top: 6px;
padding: 2px 0;
}
#maincontents .style_title .tag li span {
padding: 0 6px 0 7px;
}

/*image_wrapper*/
#maincontents .image-info_wrapper {
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
text-align: left;
margin: 0 auto 50px;
}
#maincontents .image_wrapper {
width: 100%;
margin: 0 auto 0 0;
}
#maincontents .slick {
width: 97%;
position: relative;
z-index: 1;
}
#maincontents .slick::after {
content: "";
display: block;
position: absolute;
width: 97%;
height: 97%;
z-index: -1;
background: 0 0 no-repeat;
background-size: 100% 100%;
right: -3%;
bottom: -3%;
}

#maincontents .image_nav {
margin: 25px 0 0;
}
#maincontents .image_nav .slick-current::after {
border: 2px solid #80BABD;
}

/*info*/
#maincontents .info_wrapper {
width: 100%;
margin: 40px 0 0 auto;
}
#maincontents .info_before h3 {
font-size: 16px;
color: #333;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 100;
text-align: center;
margin-bottom: 5px;
}
#maincontents .before_img {
width: 60%;
margin: 0 auto 25px;
}
#maincontents .info_item {
text-align: center;
margin: 4px auto;
border: 1px solid #D8D8D8;
}
#maincontents .info_item h3 {
font-size: 12px;
color: #333;
background: #D8D8D8;
padding: 10px;
}
#maincontents .info_item ul.item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
margin: 3px 10px 10px;
}
#maincontents .info_item ul.item li {
margin: 0 4px;
width: 30%;
}
#maincontents .info_item ul.item li br.show_pc {
display: block !important;
}
#maincontents .info_item ul.item li .show_pc {
display: inline !important;
}
#maincontents .info_item ul.item li .img {
margin-bottom: 3px;
}
#maincontents .info_item ul.item li p {
font-size: 10px;
letter-spacing: -0.05em;
line-height: 1.15;
position: relative;
z-index: 10;
transform: scale(0.9);
}
#maincontents .info_item .link_brand {
width: 90%;
max-width: 240px;
margin: 0 auto 25px;
}
#maincontents .info_item .link_brand li img {
height: 15px;
margin: 0 auto;
}
#maincontents .info_item .link_brand li a {
display: block;
padding: 10px 40px;
background-color: #E7D2DA;
text-align: center;
}
#maincontents .link_print {
display: none !important;
}


/*howto*/
#maincontents .howto_wrapper {
width: 100%;
max-width: 768px;
margin: 70px auto 20px;
}
#maincontents .howto_wrapper h3 {
font-size: 18px;
margin-bottom: 22px;
padding-bottom: 12px;
position: relative;
}
#maincontents .howto_wrapper h3::after {
width: 13px;
}
#maincontents .howto_wrapper .mov_wrapper {
width: 100%;
height: 0;
padding-top: 56.25%;
position: relative;
}
#maincontents .howto_wrapper .mov_wrapper::after {
right: -6px;
bottom: -6px;
}
#maincontents .howto_wrapper .howto_info {
margin: 25px auto 20px;
}
#maincontents .howto_wrapper .howto_info dl {
width: 100%;
margin: 0 auto 20px;
}
#maincontents .howto_wrapper .howto_info dl::after {
content: "";
width: 1px;
height: 100%;
border-right: 1px solid #333;
position: absolute;
top: 0;
left: 8%;
}
#maincontents .howto_wrapper .howto_info dt {
width: 8%;
font-size: 21px;
}
#maincontents .howto_wrapper .howto_info dd {
width: 87%;
font-size: 11px;
line-height: 1.8;
color: #333;
}
#maincontents .stylist_wrapper {
width: 100%;
margin: 0 auto;
padding: 40px 0 20px;
border-top: 1px solid #333;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
-webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}
#maincontents .stylist_wrapper .stylist_title {
width: 100%;
margin: 0 auto;
}
#maincontents .stylist_wrapper h3 {
width: 100%;
margin: 0 auto 22px;
font-size: 18px;
padding-bottom: 12px;
}
#maincontents .stylist_wrapper h3::after {
width: 13px;
}
#maincontents .stylist_wrapper .stylist_image {
width: 100%;
max-width: 140px;
margin: 0 auto;
}
#maincontents .stylist_wrapper .stylist_info {
width: 100%;
margin: 10px auto 0;
text-align: center;
}
#maincontents .stylist_wrapper .stylist_info h4 {
font-size: 12px;
margin-bottom: 5px;
color: #333;
}
#maincontents .stylist_wrapper .stylist_info p {
font-size: 10px;
line-height: 1.25;
color: #333;
}
#maincontents .stylist_wrapper .stylist_info .insta_link {
width: 43px;
margin: 5px auto;
}


/*other style*/
#other_style {
width: 75%;
padding-bottom: 20px;
}
#other_style h3 {
font-size: 18px;
margin-bottom: 22px;
padding-bottom: 12px;
}
#other_style h3::after {
width: 13px;
}
#other_style ul.other_link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
text-align: left;
width: 101%;
margin: 0 -0.5%
}
#other_style ul.other_link li {
width: 48%;
margin: 0 1% 2% 1%;
position: relative;
}
#other_style ul.btn_to_styletop {
width: 90%;
max-width: 240px;
margin: 30px auto 70px;
}
#other_style ul.btn_to_styletop li img {
height: 15px;
margin: 0 auto;
}
#other_style ul.btn_to_styletop li a {
display: block;
padding: 10px 40px;
background-color: #E7D2DA;
text-align: center;
}
}
@media print {
body {
background-image: none!important;
}
header,#maincontents,#other_style,#sns,footer{
display: none;
}
#print_area {
display: block !important;
margin: 0 auto;
padding: 0;
width: 96%;
}
#print_area img {
width: 100%;
height: auto;
}
}