@charset "UTF-8";
@media only screen and (max-width: 750px) {
  html, body {
    overflow-x: hidden; }
  /*--------------------
    header
    --------------------*/
  header {
    border-bottom: solid 2px #c8c8c8;
    overflow: visible !important; }
    header .pc, header .lineup, header .subLineup {
      display: none; }
    header .sp {
      display: block;
      padding: 3px 17px 5px; }
      header .sp .logo {
        margin: 0 auto;
        width: 120px; }
        header .sp .logo a {
          display: block;
          width: 100%;
          margin: 0 auto; }
          header .sp .logo a img {
            display: block;
            width: 100%;
            margin: 0 auto; }
      header .sp .menuBtn {
        float: left;
        height: 28px;
        margin-top: 8px; }
        header .sp .menuBtn a img {
          display: block;
          width: auto;
          height: 100%;
          margin: 0 auto; }
      header .sp .spNav {
        display: none; }
      header .sp.open {
        background-color: #00a0e1;
        padding: 15px 0 30px; }
        header .sp.open .logo {
          margin: 0 auto;
          width: 80px; }
        header .sp.open .menuBtn {
          float: none;
          height: 18px;
          margin: 0;
          position: absolute;
          top: 15px;
          left: 15px; }
        header .sp.open .spNav {
          width: 100%;
          background-color: #00a0e1;
          position: absolute;
          top: 50px;
          left: 0;
          padding: 0 45px;
          z-index: 20; }
          header .sp.open .spNav ul {
            width: 100%;
            margin: 0 auto 20px;
            overflow: auto; }
            header .sp.open .spNav ul li {
              display: block;
              padding: 0 20px;
              margin-bottom: 20px;
              border-bottom: solid 1px #ffffff; }
              header .sp.open .spNav ul li:last-child {
                margin: 0;
                padding: 0 20px;
                border: none; }
              header .sp.open .spNav ul li a {
                display: block;
                font-size: 12px;
                color: #ffffff;
                line-height: 17px;
                text-decoration: none;
                margin: 0 auto 15px;
                position: relative; }
			 header .sp.open .spNav ul li a.sp_twitter {
             	background: url(/shared/images/bnr_bk_icon.png) no-repeat top left #00a0e9;
				background-position: 0 2px;
				padding-left: 22px;
				background-size: 16px;
			 }
                header .sp.open .spNav ul li a.aco:before {
                  content: '';
                  display: block;
                  width: 8px;
                  height: 17px;
                  background: url(/shared/images/aco_plus.png) no-repeat left center;
                  background-size: 100% auto;
                  position: absolute;
                  top: 0;
                  left: -20px; }
                header .sp.open .spNav ul li a.aco.on:before {
                  background: url(/shared/images/aco_minus.png) no-repeat left center; }
              header .sp.open .spNav ul li .snav {
                display: none;
                margin: 0 0 15px 20px; }
        header .sp.open .copy {
          font-size: 9px;
          color: #ffffff;
          line-height: 17px;
          margin: 0 auto 20px; }
        header .sp.open .company {
          display: block;
          width: 35%;
          margin: 0 0 50px; }
          header .sp.open .company img {
            display: block;
            width: 100%;
            margin: 0 auto; }
    header.fixed {
      z-index: 20;
      -webkit-transition: .3s;
      -o-transition: .3s;
      transition: .3s; }
  /*--------------------
    wrapper
    --------------------*/
  .wrapper {
    margin-top: 52px;
    padding: 25px 0 0; }
  /*--------------------
    breadClumbs
    --------------------*/
  .breadClumbs {
    margin-left: 25px;
	width: 100%;}
  /*--------------------
    title01
    --------------------*/
  .title01 {
    margin: 25px auto 0;
    background: url(/shared/images/h1_line_sp.png) no-repeat bottom center;
    background-size: 100% auto; }
    .title01 .titleInner {
      width: 100%;
      padding: 0 25px 22%; }
      .title01 .titleInner h1 {
        font-size: 16px; }
        .title01 .titleInner h1 span {
          font-size: 35px;
          line-height: 48px;
          text-align: center; }
          .title01 .titleInner h1 span br {
            display: none; }
			.title01 .titleInner h1 span .space {
            display: none; }
  /*--------------------
    title02
    --------------------*/
  .title02 {
    margin: 25px auto 0;
    background: url(/shared/images/h1_line_sp.png) no-repeat bottom center;
    background-size: 100% auto; }
    .title02 .titleInner {
      width: 100%;
      padding: 0 25px 22%; }
      .title02 .titleInner h1 {
        font-size: 16px; }
	
	/*--------------------
    title03
    --------------------*/
  .title03 {
    margin: 25px auto 0;
    background: url(/shared/images/h1_line_sp.png) no-repeat bottom center;
    background-size: 100% auto; }
    .title03 .titleInner {
      width: 100%;
      padding: 0 25px 22%; }
      .title03 .titleInner h1 {
        font-size: 16px; }
		
	/*--------------------
    title01 波線下グレー
    --------------------*/
  .title01.gray{
    background: url(/shared/images/h1_line02_sp.png) no-repeat bottom center;
    background-size: 100% auto; }
  /*--------------------
    contents
    --------------------*/
  .contents {
    width: 100%;
    padding: 45px 25px 50px; }
    .contents h2 {
      font-size: 25px;
      margin: 0 auto 35px; }
  /*--------------------
    footer
    --------------------*/
  footer {
    width: 100%;
    margin: 0 auto;
    border-top: solid 2px #c8c8c8;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
    background: -o-linear-gradient(top, #ffffff, #f0f0f0);
    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    background: -webkit-linear-gradient(top, #ffffff, #f0f0f0); }
    footer .footerInner {
      width: 100%;
      padding: 20px 15px 30px; }
      footer .footerInner .logo {
        width: 120px; }
      footer .footerInner .pcFooter {
        display: none; }
      footer .footerInner .spFooter {
        display: block;
        margin: 0 auto 25px; }
        footer .footerInner .spFooter ul {
          width: 100%;
          margin: 0 auto; }
          footer .footerInner .spFooter ul li {
            float: none;
            display: block;
            margin: 0 auto 15px;
            padding: 15px 30px 0;
            border-top: solid 1px #9e9e9e;
            position: relative; }
            footer .footerInner .spFooter ul li.open .aco:before {
              content: '-'; }
	footer .footerInner .spFooter ul li.sns{
		margin: 0 auto 8px;
		padding: 11px 30px 0;
	}
            footer .footerInner .spFooter ul li:last-child {
              padding: 15px 30px;
              border-bottom: solid 1px #9e9e9e;
              margin: 0 auto; }
            footer .footerInner .spFooter ul li a {
              display: block;
              font-size: 10px;
              font-weight: bold;
              color: #505050;
              text-decoration: none;
              margin: 0 auto;
              position: relative; }
		   footer .footerInner .spFooter ul li a.sp_twitter{
			   padding: 5px 0;
              }
	       footer .footerInner .spFooter ul li a.sp_twitter:before {
			   content: '';
                display: block;
                width: 16px;
                height: 18px;
			   background: url(/shared/images/twitter_icon_blue.png) no-repeat top left;
			   background-size: 16px;
               background-position: 0px;
			   position: absolute;
			   top: 0;
			   left: -25px;
              }
              footer .footerInner .spFooter ul li a.aco:before {
                content: '';
                display: block;
                width: 8px;
                height: 10px;
                background: url(/shared/images/aco_plus_b.png) no-repeat left center;
                background-size: 100% auto;
                position: absolute;
                top: 0;
                left: -20px; }
              footer .footerInner .spFooter ul li a.on:before {
                background: url(/shared/images/aco_minus_b.png) no-repeat left center; }
            footer .footerInner .spFooter ul li .snav {
              display: none;
              margin: 30px auto 0; }
              footer .footerInner .spFooter ul li .snav a {
                font-size: 9px;
                margin: 0 auto 15px; }
                footer .footerInner .spFooter ul li .snav a:last-child {
                  margin: 0 auto 20px; }
      footer .footerInner .bottomLink .left {
        float: none;
        margin: 0 auto 8px; }
        footer .footerInner .bottomLink .left a {
          margin-right: 15px;
          padding-right: 15px;
          border-right: solid 1px #9e9e9e; }
          footer .footerInner .bottomLink .left a:last-child {
            margin: 0;
            padding: 0;
            border: none; }
          footer .footerInner .bottomLink .left a:hover {
            color: #00a0e1; }
      footer .footerInner .bottomLink .right {
        float: none;
        margin: 0 auto;
        position: relative; }
        footer .footerInner .bottomLink .right .copy {
          display: inline-block;
          width: 61%;
          line-height: 17px;
          margin-right: 25px; }
        footer .footerInner .bottomLink .right a {
          width: 70px;
          position: absolute;
          bottom: 0;
          right: 0; }
          footer .footerInner .bottomLink .right a img {
            display: block;
            width: 100%;
            margin: 0 auto; }
  /*--------------------
    pagetop
    --------------------*/
  .pagetop {
    bottom: 10%;
    right: 0; }
  /*--------------------
    part
    --------------------*/
  br.pc {
    display: none !important; }
  br.sp {
    display: block !important; }
  /* ボタン共通 */
  .Button_b {
    width: 100%;
    height: auto; }
  .Button_p {
    width: 100%;
    height: auto; }
  .Button_qa {
    width: 100%;
    height: auto;
	margin:0; }
    .Button_qa a:hover {
      background-position: 7px center; }
	/* @コスメ */
	.Button_cosme {
		overflow: hidden;
		width: 100%;
	}
	.Button_cosme a {
		background-position: 4px center;
		/*padding-left: 60px;*/
		padding: 3px 0 0;
    line-height: 50px;
	}
	.Button_cosme a span {
		display: inline-block;
		/*background-position: left;*/
		background-position: left 16px;
	}
	/* フォーム用ボタン */
	.buttons-01 button {
		width:100%;
	}
	
	.buttons-02{
		width: 100%;
	}
	.buttons-02 button {
		width:120px;
	}

  /* 関連コンテンツ */
  .wrapper2 {
    padding: 25px 0 0; }
    .wrapper2 .contents {
      width: 100%;
      margin: 0 auto;
      padding: 30px 25px 20px; }
  .aside_contents h3 {
    font-size: 25px;
    border-bottom: 4px solid #b4b4b4; }
  .related_contents_box .bnr_box {
    width: 100%;
    height: 100%;
    margin: 0 auto 45px;
    display: block; }
    .related_contents_box .bnr_box a:hover {
      opacity: 1; } 
	
	.related_contents_box a p {
    font-size: 16px;
	}
	
	.title01 .titleInner h1 span.fs{
		font-size: 23px;
		line-height: 45px;
	}
	
	.contents p.ttl0a {
		font-size: 33px;
		line-height: 48px;
		margin: 0 auto 15px;
		text-align: center;
	}
	.contents p.ttl0a span{
		font-weight: bold;
	}
	.contents p.ttl0a span.fs{
		font-size: 23px;
		margin: 0;
		line-height: 45px;
	}
	/* ------------------
		TOPと敏感肌研究室　記事ページ
	  下のブルーのバナーエリア　
	--------------------- */
	
	.contents .bnrs_area .areaInner .bnr_area {
    	padding: 129px 0 28px;
	}
	
	.contents .bnrs_area .areaInner .bnr_area .bnr_box {
		float: none;
		width:90%;
		margin: 0 auto 20px;
	}
	
	.contents .bnrs_area .areaInner .bnr_area .bnr_box:last-child {
     	margin-right: auto; 
	 }
	
	.bnrs_wrap {
		padding: 40px 0 38px;
	}
	 
	 .bnrs_wrap .areaInner {
		 width:100%;
		 padding:0 5%;
	 }
	 
	 .bnrs_wrap .areaInner .bnr_area {
		 padding: 0 0 28px;
	}
		 
	.bnrs_wrap .areaInner .bnr_area .bnr_box {
		float: none;
		width:90%;
		margin: 0 auto 20px;
	}
	
	.bnrs_wrap .areaInner .bnr_area .bnr_box:last-child {
		margin-right: auto;
	}
	
	
	.campaign_mv{
		position: relative;
		margin-bottom: 25px;
	}
	.campaign_mv img{
		width: 100%;
	}
	.campaign_mv p{
		margin-bottom: 0;
	}
	.campaign_mv img.sp{
		display: block;
	}
	.campaign_mv img.pc{
		display: none;
	}
	.campaign_mv .link_list{
		position: static;
		width: 100%;
		bottom: 35px;
		right: 0;
		padding: 5px 0 5px 15px;
		background: #fff;
	}
	.campaign_mv .link_list li{
		padding-left: 10px;
		line-height: 1.8;
		line-height: 32px;
	}
	.campaign_mv .link_list li::before{
		position: absolute;
		top: 10px;
		bottom: auto;
		left: 0;
		width: 6px;
		height: 6px;
	}
	.campaign_mv .link_list li a{
		font-size: 12px;
	}
	
}