@charset 'UTF-8';
/*  Add Custom CSS here.  */
#mesoceutical .previewProduct .link01{
    font-size: 18px;
    background-color: #BBBEC2;
    color: #fff;
    padding: 19px 0;
    margin: 11px 0;
    text-align: center;
    letter-spacing: 3px;
}
#mesoceutical .previewProduct .icon_ser{
    background: url(../img/product/ico_search.png) #BBBEC2 no-repeat;
    background-size: 17px;
    padding-left: 26px;
}
#mesoceutical .previewProduct .link02{
    font-size: 18px;
    color: #CCA431;
    padding: 17px 0;
    text-align: center;
    letter-spacing: 3px;
    border: 1px solid #CCA431;
}
@media screen and (max-width: 767px){
    #mesoceutical #wrap { margin-top: 50px !important; }
    #mesoceutical .previewProduct .link01, #mesoceutical .previewProduct .link02{
        font-size: 15px;
        padding: 10px 0;
        letter-spacing: 2px;
    }
    #mesoceutical .previewProduct .icon_ser{
        background-size: 12px;
        padding-left: 20px;
        background-position: left;
    }
    #mesoceutical header .mainMenu > ul > li:nth-child(3), #mesoceutical header .mainMenu > ul > li:nth-child(4){
        display: inline-block !important;
    }
}

@media only screen and (max-width: 767px){
    .common_News .lstNews02 li em{
        margin: 2px;
    }
    .login-control,.gmnoprint,.profile-photo.profile-photo-light{
        display: none !important;
        opacity: 0 !important;
    }

    .company .cont_w04 .inside .list .item img{
        width: 100%;
    }
}


@media only screen and (min-width: 768px){
.top__findstore .block__left__inner {

    background: url(../img/top/img_map.png) bottom -80px right/640px auto no-repeat;
}
.top__findstore .block__right .lst01 li.spec {
    height: 260px;
}
}

.top__findstore .block__right .lst01 li:last-child {

}

.gNavi > li ul li a{
    border-right: none  !important;
}
@media only screen and (max-width: 1500px){
/*    .top__visual__blk{
            margin-top: -212px;
    }
        .top__visual__blk__ttl img {
        max-width: 320px;
        width: 100%;
    }
    .top__visual__blk__txt {
        margin-top: -25px;
    }*/
}
@media only screen and (min-width: 768px){
#search .boxResult{
    margin-bottom: 100px;
}
}




#mesoceutical .kv-201910 { background: #e2e4e5;}
#mesoceutical .kv-201910 .lead { padding: 20px 0; background: #2d2f30;}
#mesoceutical .kv-201910 .inner{ position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 0 320px;
 background: url(../../mesoceutical/assets/img/sp/kv_201910.jpg) no-repeat 50% 100%;
}
#mesoceutical .kv-201910 h2 { width: 70%; max-width: 800px;}
#mesoceutical .kv-201910 h2:after{ content: ''; display: block; width: 90px; height: 11px; margin: 30px auto;
background: url(../../mesoceutical/assets/img/sp/mark_201910.png) no-repeat 50% 0; background-size: 100% auto;}
#mesoceutical .kv-201910 h2 img { width: 100%;}
#mesoceutical .kv-201910 p { width: 70%; max-width: 800px; font-size: 30px;}
#mesoceutical .kv-201910 p em { display: block; font-size: 40px; font-style: normal;}
#mesoceutical .kv-201910 p em sup{ vertical-align: text-top; font-size: 18px;}
#mesoceutical .kv-201910 .sign { position: absolute; width: 350px; right: 100px; bottom: -60px;}
#mesoceutical .kv-201910 .sign img { width: 100%;}


#mesoceutical .about-yamamoto { background: url(../../mesoceutical/assets/img/sp/bg-yamamoto_201910.jpg) no-repeat 50% 50%; background-size: cover;}
#mesoceutical .about-yamamoto .inner{ width: 94%; max-width: 1100px; margin: 0 auto; padding: 100px 0 80px;}
#mesoceutical .about-yamamoto .interview { display:flex; width: 100%; margin: 0 auto 60px;}
#mesoceutical .about-yamamoto .txt { width: 54%;}
#mesoceutical .about-yamamoto .txt h2 { width: 90%; max-width: 550px; margin: 0 0 25px;}
#mesoceutical .about-yamamoto .txt h2 img{ width: 100%;}
#mesoceutical .about-yamamoto .txt p { width: 90%; max-width: 550px; font-size: 16px; line-height: 2; text-align: justify;}
#mesoceutical .about-yamamoto .movie { width: 46%;}
#mesoceutical .about-yamamoto .movie .youtube { width: 100%; height: 300px; margin: 0 auto 20px;}
#mesoceutical .about-yamamoto .movie .youtube iframe { width: 100%; height: 100%;}
#mesoceutical .about-yamamoto .movie p { text-align: center;}
#mesoceutical .about-yamamoto .movie p img{ width: 100%; max-width: 500px;}
#mesoceutical .about-yamamoto .favorite h3 { margin: 0 auto 35px; text-align: center;}
#mesoceutical .about-yamamoto .favorite h3 img { width: 100%; max-width: 880px; margin: 0 auto;}
#mesoceutical .about-yamamoto .favorite h3 img.sp { display: none;}
#mesoceutical .about-yamamoto ul { font-size: 0; text-align: center;}
#mesoceutical .about-yamamoto ul li { display: inline-block; width: 24%;}
#mesoceutical .about-yamamoto ul li img { width: 94%; margin: 0 auto;}


#mesoceutical .program {}
#mesoceutical .program .inner { width: 100%; padding: 80px 0;}
#mesoceutical .program .ctn { display: flex; flex-direction: row-reverse; align-items: flex-end; width: 100%; margin: 0 auto 60px;}
#mesoceutical .program .ctn .txt { width: 40%;}
#mesoceutical .program .ctn .item{ width: 60%;}
#mesoceutical .program .ctn .txt .detail { width: 90%; max-width: 420px; padding: 3px 0;
 border-top: solid 1px #6b6969; border-bottom: solid 1px #6b6969;
}
#mesoceutical .program .ctn .txt .detail:before,
#mesoceutical .program .ctn .txt .detail:after { content: ''; display: block; width: 100%; height: 1px;
 background: #6b6969;
}
#mesoceutical .program .ctn .txt .detail:before{ margin: 0 auto 30px;}
#mesoceutical .program .ctn .txt h2 { margin: 0 auto 20px;}
#mesoceutical .program .ctn .txt h2 img{ width: 100%;}
#mesoceutical .program .ctn .txt h3 { position: relative; text-align: center;}
#mesoceutical .program .ctn .txt h3:after { content: ''; display: block; width: 100%; height: 1px; background: #000;
 position: absolute; left: 0; top: 50%; z-index: 1;
}
#mesoceutical .program .ctn .txt h3 span { position: relative; z-index: 2; display: inline-block; padding: 0 10px; background: #fff; font-size: 28px;}
#mesoceutical .program .ctn .txt h3 sup { vertical-align: text-top; font-size: 16px;}
#mesoceutical .program .ctn .txt p { margin: 0 auto 20px; font-size: 15px; text-align: justify;}
#mesoceutical .program .btn { width: 80%; max-width: 720px; margin: 0 auto; box-shadow: 0 0 8px #666;}
#mesoceutical .program .btn a { display: block;}
#mesoceutical .program .btn a img{ width: 100%;}

#mesoceutical .btn-bloc{ padding: 60px 0;}
#mesoceutical .btn-bloc .btn { width: 80%; max-width: 720px; margin: 0 auto; box-shadow: 0 0 8px #666;}
#mesoceutical .btn-bloc .btn a { display: block;}
#mesoceutical .btn-bloc .btn a img{ width: 100%;}

@media only screen and (max-width: 769px) {
	#mesoceutical .kv-201910 .inner{ padding: 50px 0 230px;
	 background: url(../../mesoceutical/assets/img/sp/kv_201910-sp.jpg) no-repeat 50% 100%;
	}
	#mesoceutical .kv-201910 h2 { width: 94%; margin: 0 auto;}
	#mesoceutical .kv-201910 h2:after{ content: none;}
	#mesoceutical .kv-201910 p span { display: block;}
	#mesoceutical .kv-201910 .sign { width: 280px;}

	#mesoceutical .about-yamamoto .interview { display: block;}
	#mesoceutical .about-yamamoto .txt { width: 100%; margin: 0 auto 30px;}
	#mesoceutical .about-yamamoto .txt h2 { margin: 0 auto 20px;}
	#mesoceutical .about-yamamoto .txt p { margin: 0 auto;}
	#mesoceutical .about-yamamoto .movie { width: 100%;}
	#mesoceutical .about-yamamoto .movie .youtube { width: 100%; max-width: 525px; height: 315px;}
	#mesoceutical .about-yamamoto .favorite h3 img { max-width: 556px;}

	#mesoceutical .program .ctn { display: block; margin: 0 auto;}
	#mesoceutical .program .ctn .txt { width: 100%; margin: 0 auto 20px;}
	#mesoceutical .program .ctn .txt .detail { margin: 0 auto;}
	#mesoceutical .program .ctn .item{ width: 100%;}
	#mesoceutical .program .btn { max-width: 482px;}
}
@media only screen and (max-width: 640px) {
	#mesoceutical .kv-201910 .inner{ padding: 40px 0 180px; background-size: 100% auto;}
	#mesoceutical .kv-201910 p { font-size: 24px;}
	#mesoceutical .kv-201910 p em { font-size: 36px;}
	#mesoceutical .kv-201910 .sign { width: 200px; right: 40px; bottom: -40px;}
	#mesoceutical .about-yamamoto ul li { display: inline-block; width: 48%; margin: 0 auto 10px;}
}
@media only screen and (max-width: 480px) {
	#mesoceutical .kv-201910 .lead { padding: 10px 0;}
	#mesoceutical .kv-201910 .lead img{ width: 80%;}
	#mesoceutical .kv-201910 .inner{ padding: 30px 0 120px; background-size: 100% auto;}
	#mesoceutical .kv-201910 p { font-size: 18px; line-height: 1.5;}
	#mesoceutical .kv-201910 p em { font-size: 22px;}
	#mesoceutical .kv-201910 p em sup{ font-size: 12px;}
	#mesoceutical .kv-201910 .sign { width: 140px;}

	#mesoceutical .about-yamamoto .inner{ padding: 60px 0 30px;}
	#mesoceutical .about-yamamoto .interview { margin: 0 auto 30px;}
	#mesoceutical .about-yamamoto .txt h2 { margin: 0 auto 8px; line-height: 1;}
	#mesoceutical .about-yamamoto .txt p { width: 88%; font-size: 15px;}
	#mesoceutical .about-yamamoto .movie .youtube { width: 92%; height: 180px;}
	#mesoceutical .about-yamamoto .movie p { width: 88%; margin: 0 auto;}

	#mesoceutical .about-yamamoto .favorite h3 { margin: 0 auto 15px;}
	#mesoceutical .about-yamamoto .favorite h3 img { width: 80%;}

	#mesoceutical .program .inner { padding: 40px 0;}
	#mesoceutical .program .ctn .txt h2 { width: 85%;}
	#mesoceutical .program .ctn .txt h3 span { font-size: 21px;}
	#mesoceutical .program .ctn .txt h3 sup { font-size: 12px;}
	#mesoceutical .program .ctn .txt p { font-size: 13px;}

	#mesoceutical .btn-bloc{ padding: 30px 0;}
}

.disabled {
    opacity: .6;
}

/* top */
/*.sec-brand {
  background: #f3f3f3 url(../img/top/bg_brand.jpg) center/100% no-repeat;
  padding: 100px 0;
  -webkit-font-feature-settings: "palt" 1;
  -moz-font-feature-settings: "palt" 1;
  -ms-font-feature-settings: "palt" 1;
  -o-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
}
.sec-brand .script {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.16em;
  color: #b9a73c;
  text-align: center;
  margin-bottom: 52px;
  font-family: "游明朝", "游明朝体", "Yu Mincho", YuMincho, "Sawarabi Mincho", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
.sec-brand .lst-brand {
  max-width: 1030px;
  padding: 0 15px;
  margin: 0 auto;
  font-size: 0;
}
.sec-brand .lst-brand .item {
  display: inline-block;
  width: calc(33.33% - 23px);
  margin-bottom: 34px;
}
.sec-brand .lst-brand .item:not(:nth-child(3n + 1)) {
  margin-left: 33px;
}
.sec-brand .lst-brand .item a {
  display: block;
  position: relative;
  background: center/cover no-repeat;
}
.sec-brand .lst-brand .item a:before {
  display: block;
  content: " ";
  width: 100%;
  padding-top: 100%;
}
.sec-brand .lst-brand .item a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.5s ease;
}
.sec-brand .lst-brand .item a .ttl {
  width: 100%;
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  z-index: 2;
  font-family: "游明朝", "游明朝体", "Yu Mincho", YuMincho, "Sawarabi Mincho", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  opacity: 0;
  transition: 0.5s ease;
}
.sec-brand .lst-brand .item a .ttl-jp {
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.14em;
  display: block;
}
.sec-brand .lst-brand .item a .ttl-en {
  color: #bbbec2;
  font-size: 13px;
  letter-spacing: 0.08em;
  display: block;
}
.sec-brand .lst-brand .item a:hover {
  opacity: 1;
}
.sec-brand .lst-brand .item a:hover:after, .sec-brand .lst-brand .item a:hover .ttl {
  opacity: 1;
}
.sec-brand .cm_btn {
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .sec-brand {
    padding: 50px 0 72px;
 }
  .sec-brand .sec_ttl {
    letter-spacing: 0.14em;
    margin-bottom: 5px;
 }
  .sec-brand .script {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 29px;
 }
  .sec-brand .lst-brand {
    margin-bottom: 8px;
 }
  .sec-brand .lst-brand .item {
    width: calc(50% - 7px);
    margin-bottom: 14px;
 }
  .sec-brand .lst-brand .item:not(:nth-child(3n + 1)) {
    margin-left: 0px;
 }
  .sec-brand .lst-brand .item:not(:nth-child(2n + 1)) {
    margin-left: 14px;
 }
  .sec-brand .lst-brand .item a .ttl-jp {
    font-size: 16px;
 }
  .sec-brand .lst-brand .item a .ttl-en {
    font-size: 11px;
 }
}*/