@charset "UTF-8";

/*--------------------------
>>  mqcontents
--------------------------*/

/*--------------------Reset*/
* {
  margin: 0px;
  padding: 0px;
}

body {
  padding-top: 55px!important;
}

#mqWrapper {
	width: 100%;
	position: static;
}

#mqWrapper main {
	width: 100%;
	margin: 0;
	padding-bottom: 0;
}

#mq_ysl2206 section {
  padding: 0 !important;
}

/*--------------------Common*/
#mq_ysl2206 {

}

#mq_ysl2206 section {
  width: 750px;
  margin: 0 auto;
  background-color: #fff;
}

#mq_ysl2206 p {
  font-size: 18px;
  line-height: 1.714285714;
}

#mq_ysl2206 .bold {
  font-weight: bold;
}

#mq_ysl2206 .sup {
  font-size: 8px;
}

#mq_ysl2206 a:hover img {
  opacity: .6;
  transition: all ease .6s;
}

#mq_ysl2206 .is-pc {
  display: block;
}


#mq_ysl2206 .is-sp {
  display: none;
}

#mq_ysl2206 br.is-pc {
  display: inline-block;
}


#mq_ysl2206 br.is-sp {
  display: none;
}


/*--------------------Layout*/
#mq_ysl2206 .container {
	margin: 0 auto;
	width: 690px;
}


/*--------------------------------------------------------------------------------------
ysl2206
-------------------------------------------------------------------------------------- */

/*-------------------------------------------------------------------------------- pr */
#mq_ysl2206 .pr {

}

/*----------------------------------------------------------------------------contact/credit/share */
#mq_ysl2206 .btn {
  width: 315px;
  height: 70px;
  margin: 0 auto;
  transition: all .5s;
}

#mq_ysl2206 .btn:hover {
  opacity: .6;
}

#mq_ysl2206 .btn a {
  font-size: 14px;
  line-height: 70px;
}

#mq_ysl2206 .btn a::before {
  right: 30px;
  width: 0.633333vw;
  height: 1.1333333vw;
  background-size: 0.633333vw 1.1333333vw;
}


#mq_ysl2206 .contact {
  font-size: 21px;
  margin-bottom: 80px;
  margin-top: 60px;
}

#mq_ysl2206 .contact a:hover {
  opacity: .6;
}

#mq_ysl2206 .credit {
  font-size: 15px;
  margin-bottom: 35px;
}

#mq_ysl2206 .share {
  padding-bottom: 45px;
}

#mq_ysl2206 .share_headings {
  width: 53.5px;
  margin-bottom: 15px;
}

#mq_ysl2206 .share_item {
  width: 50px;
  margin: 0 8px;
}

#mq_ysl2206 .caution {
  font-size: 15px;
}

/*-------------------------------------------------------------------------------- bg */
#mq_ysl2206 section {
  position: relative;
  width: 750px;
  z-index: 2;
}

#mq_ysl2206 .bg {
  display: block;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  transition: all 1s;
  opacity: 0;
}

#mq_ysl2206 .bg.is-show {
  opacity: 1;
}

#mq_ysl2206 #bg {
  background-color: #dae6f3;
}

#mq_ysl2206 #bg01 {
  background: linear-gradient(to bottom, #dae6f2,#f5f5f5);
}
#mq_ysl2206 #bg02 {
  background: linear-gradient(to bottom, #fae8d9,#f2eeeb);
}
#mq_ysl2206 #bg03 {
  background: linear-gradient(to bottom, #dae6f2, #dae6f2);
}
#mq_ysl2206 #bg04 {
  background: linear-gradient(to bottom, #f2eeeb, #fae8d9);
}
#mq_ysl2206 #bg05 {
  background: linear-gradient(to bottom, #f2eeeb,#dae6f2);
}
#mq_ysl2206 #bg06 {
  background: linear-gradient(to bottom, #dae6f2,#f2eeeb);
}


footer {
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding-top: 100px;
}


/*---------------------------------------------------------------------------- makeupitems */
#mq_ysl2206 .makeupitems {
  margin: 0 40px;
  padding-bottom: 20px;
}

#mq_ysl2206 .makeupitems_headings {
  height: 15px;
  margin: 0 auto 30px;
  padding-left: 30px;
}

#mq_ysl2206 .makeupitems_headings img {
  width: 188.25px;
}

#mq_ysl2206 .makeupitems_headings:hover {
  cursor: pointer;
}

#mq_ysl2206 .makeupitems_headings::before {
  width: 36px;
  height: 36px;
  background-size: 36px 36px;
  left: calc(50% + 112.5px);
}

#mq_ysl2206 .makeupitems_contents {

}

#mq_ysl2206 .makeupitems_text {
  font-size: 16px;
}


/*---------------------------------------------------------------------------- reason */
#mq_ysl2206 .reason {
  padding-bottom: 50px;
}

#mq_ysl2206 .reason_ph {
  width: 750px;
  height: 938px;
  margin-left: -30px;
  margin-bottom: 30px;
}

#mq_ysl2206 .reason_number {
  margin-bottom: 20px;
}

#mq_ysl2206 .reason_number::after {
  bottom: -10px;
  left: 31px;
}

#mq_ysl2206 .is-active .reason_number::after {
  width: 42.39px;
}

#mq_ysl2206 .reason_number img {
  height: 27.75px;
}

#mq_ysl2206 .reason_headings {
  font-size: 24px;
  margin-bottom: 25px;
}

#mq_ysl2206 .reason_headings span.line {
}

#mq_ysl2206 .reason_text {
  margin-bottom: 20px;
}


/*-------------------------------------------------------------------------------- mv */
#mq_ysl2206 .mv {
  margin-bottom: 80px;
}

#mq_ysl2206 .mv .container {
  width: 750px;
  height: 932px;
}

#mq_ysl2206 .mv_title1 {
  width: 228.5px;
  height: 103px;
  bottom: 166px;
}

#mq_ysl2206 .mv_title2 {
  width: 701px;
  height: 103px;
  bottom: 42px;
}


/*---------------------------------------------------------------------------- block01 */
#mq_ysl2206 .block01 {

}

#mq_ysl2206 .block01_lead {
  font-size: 24px;
  margin-bottom: 15px;
}

#mq_ysl2206 .block01_lead::before {
  height: 4px;
  left: -30px;
  transition: all 1s linear 1.7s;
}

#mq_ysl2206 .block01_lead.is-show::before {
  width: 750px;
}

#mq_ysl2206 .block01_headings {
  font-size: 33px;
  margin-bottom: 25px;

}
#mq_ysl2206 .block01_text {
  margin-bottom: 30px;
}


/*---------------------------------------------------------------------------- block02 */
#mq_ysl2206 .block02 {
  padding-top: 40px;
  padding-bottom: 50px;
}

#mq_ysl2206 .block02_ph {
  width: 0;
  height: 691px;
  margin-left: 183px;
  margin-bottom: 60px;
}


#mq_ysl2206 .block02_ph-inner {
  width: 437px;
}

#mq_ysl2206 .block02_ph.is-active {
  width: 437px;
}

#mq_ysl2206 .block02_ph::before {
  width: 563px;
  height: 664px;
  background-size: 563px 664px;
  bottom: 33.8px;
  left: -120px;
}

#mq_ysl2206 .block02_headings {
  padding-left: 67.5px;
  font-size: 24px;
  margin-bottom: 15px;
}

#mq_ysl2206 .block02_headings::before {
  width: 54px;
  height: 24px;
  background-size: 54px 24px;
}

#mq_ysl2206 .block02_text {
  margin-bottom: 10px;
}

#mq_ysl2206 .block02 .caution {
  margin-bottom: 35px;
}


/*---------------------------------------------------------------------------- block03 */
#mq_ysl2206 .block03 {

}

#mq_ysl2206 .comment_headings {
  width: 215px;
  margin: 0 auto 30px;
}

#mq_ysl2206 .comment_list {
  margin-bottom: 45px;
}

#mq_ysl2206 .comment_item {
  padding: 15px;
  margin-bottom: 15px;
}

#mq_ysl2206 .comment_text {
  margin-bottom: 15px;
}

#mq_ysl2206 .comment_name {
}

#mq_ysl2206 .comment_name::before {
  width: 50px;
  left: -64.5px;
}

#mq_ysl2206 .comment_name span.small {
  font-size: 16px;
}

/*---------------------------------------------------------------------------- block04 */
#mq_ysl2206 .block04 {
  padding-bottom: 75px;
}

#mq_ysl2206 .block04_ph {
  margin-bottom: 25px;
}

#mq_ysl2206 .block04_lead {
  margin-bottom: 10px;
}

#mq_ysl2206 .block04_text {
  margin-bottom: 15px;
  text-align: left;
}

#mq_ysl2206 .block04_name {
  font-size: 24px;
}

#mq_ysl2206 .block04_name::before {
  width: 70px;
  left: -80px;
}


/*---------------------------------------------------------------------------- block05 */
#mq_ysl2206 .block05 {

}

#mq_ysl2206 .block05_headings {
  font-size: 30px;
  margin-bottom: 25px;
}

#mq_ysl2206 .block05_text {
  margin-bottom: 15px;
}

#mq_ysl2206 .block05 .credit {
  margin-bottom: 40px;
  font-size: 18px;
}


#mq_ysl2206 .block05 .reason_number::after {
  left: 28px;
}

/*---------------------------------------------------------------------------- block06 */
#mq_ysl2206 .block06 .reason_number::after {
  left: 31px;
}