@charset "utf-8";
/*=======================================================
	style
=======================================================*/
#moya .wrapper{position: relative;}
#moya{width:100%;font-size:14px;}
#moya img{width:100%;display: block;}
#moya a{color:#000;}
#moya a:hover{opacity: 0.8;}
#moya .clearfix::after{content:"";display: block;clear:both;}
#moya .mgB0{margin-bottom:0!important;}
/* メインビジュアル */
#moya .mv{position: relative;margin-bottom:3%;}
/* フロー */
#moya .flow > div,#moya .flow > p{
  position: relative;
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
}
/* 目次 */
#moya .anchor-tit{
  width:80%;
  max-width:300px;
  margin:0 auto 1%;
}
#moya .anchor{width:94%;margin:0 3% 3%;}
#moya .anchor  a{
  height:180px;
  padding:20px 15px 15px;
  display: inline-block;
  background: url(/elis/asamade/moyamoya/img/tw-bg-pc.png)no-repeat;
}
#moya .anchor a div img{width:50px;}
#moya .anchor a div h2{
  float:right;
  width:210px;
  color:#000;
  font-size:16px;
  font-weight: normal;
  margin-bottom:10px;
}
/* メインコンテンツ */
#moya .wrapper{position: relative;width:100%;}
/* サイドカラム PCのみ */
#moya .aside{
  opacity:0;
  visibility: hidden;
  position: fixed;
  width:270px;
  margin-left:700px;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
#moya .aside .anchor,
#moya .aside .link{width:90%;margin:0 3% 3%;}
#moya .aside .link a{display: block;margin-bottom:5px;}
#moya .aside .anchor  a{
  height:105px;
  padding:15px;
  display: inline-block;
  background: #fff url(/elis/asamade/moyamoya/img/tw-bg-aside.png)no-repeat;
  background-size: 245px;
}
#moya .aside .anchor a div img{width:30px;}
#moya .aside .anchor a div h2{
  float:right;
  width:170px;
  color:#000;
  font-size:12px;
  font-weight: normal;
  margin-bottom:10px;
}
/* メインカラム */
#moya .main{
  width:100%;
  max-width:680px;
  margin:0 auto 3%;
  padding-bottom: 0.1px;
}
#moya .box{
  background:url(../img/bg.jpg);
  padding:3%;
  margin-bottom:3%;
}
#moya .box .bln{
  margin:-3.2% -3.2% 3%;
  background:url(../img/bg_bln.jpg);
  padding:30px 150px;
}
/* 漫画 */
#moya .box .ill > div{
  background: #fff;
  padding:5% 3%;
  margin:0 auto 3%;
}
#moya .box .ill .tit > img{width:70px;}
#moya .box .ill .tit div{
  float:right;
  margin-left:10px;
  width:78%;
}
#moya .box .ill .tit h2{font-size:24px;font-weight: normal;}
#moya .box .ill p{margin:0 auto 3%;}
/* コラム */
#moya .clm{
  border:1px solid #f875b3;
  background-color: #fff;;
  padding:5%;
  margin-bottom:3%;
}
#moya .clm-tit{margin-bottom:20px;}
#moya .clm-tit img{
  width:70px;
  margin-right:20px;
   float:left;
}
#moya .clm-tit h3{
  font-size:20px;
  line-height: 1.4;
  color:#f875b3;
}
#moya .clm p{font-size:14px;line-height: 1.7;}
#moya .clm p:not(:last-of-type){margin-bottom:3%;}
#moya .clm .bd-btm{
  padding-bottom:5%;
  border-bottom:1px solid #f875b3;
  margin-bottom:5%;
}
#moya .clm h4{
  margin:3% 0 2%;
  color:#f875b3;
  font-size:16px;
}
#moya .clm h5{font-size:14px;font-weight: bold;}
#moya .link-area{padding:3%;background-color: #ffecf5;}
#moya .clm .clm-box{
  padding:3%;
  border:1px solid #f875b3;
  margin-bottom:5%;
}
#moya .clm .clm-box h5{color:#f875b3;}
/* サプリコラム */
#moya .clm-spl{
  border-radius: 20px;
  border:3px solid #f875b3;
  margin-bottom:0;
}
#moya .clm-spl .clm-spl-tit{width:40%;margin-bottom:3%;}
#moya .clm-spl .clm-tit h3{color:#333;}
#moya .clm-spl .clm-tit img{width:80px;}
/* 商品 */
#moya .pdc{
  font-size:16px;
  border:1px solid #577cd0;
  background-color: #fff;;
  padding:5%;
  border-radius: 20px;
  text-align: center;
  margin-bottom:3%;
}
#moya .pdc .bd-btm-bl{
  padding-bottom:5%;
  border-bottom:1px dotted #b2def2;
  margin-bottom:5%;
}
#moya .pdc .bd-btm-gr{
  padding-bottom:5%;
  border-bottom:1px dotted #aaa;
  margin-bottom:5%;
}
#moya .pdc h3{
  color:#193b58;
  font-size:20px;
  margin-bottom:3%;
}
#moya .pdc h3 span{
  font-size:70%;
  display: inline-block;
  margin-top:-10px;
}
#moya .pdc-detail{display: block;margin:3% 0;}
#moya .pdc-btn{
  display: block;
  color:#fff;
  background-color: #1da1f3;
  padding:20px;
  width:300px;
  margin:0 auto;
}
/* プロフィール */
#moya .thanks{
  background-color: #fff;;
  padding:5%;
  margin-bottom:3%;
}
#moya .prof{
  background-color: #fff;;
  padding:5%;
  margin-bottom:3%;
}
#moya .prof img{
  width:28%;
  float:left;
  padding-right:3%;
}
#moya .prof-name{
  font-weight: bold;
  font-size:16px;
  display: block;
}
#moya .prof a{
  border:1px solid #ccc;
  padding:2%;
  border-radius: 5px;
  text-align: center;
  margin-top: 3%;
  display: block;
}
#moya .ill-prof-right {padding-left:31%;}
#moya .ill-prof-right a{width:95%;}
#moya .ist-link{
  background:url(/elis/asamade/moyamoya/img/logo_ist.png) no-repeat;
  background-size: 25px;
  background-position: 3% center;;
}
#moya .tw-link{
  background:url(/elis/asamade/moyamoya/img/logo_tw.png) no-repeat;
  background-size: 25px;
  background-position: 3% center;;
}
#moya .ex-link{
  background:url(/elis/asamade/moyamoya/img/icon_exlink.png) no-repeat;
  background-size: 15px;
  background-position: 97% center;;
}

/* ===========================================
	モーダル
=========================================== */
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
}
.modal__bg{
    background: rgba(201,241,251,0.9);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    max-width:900px;
}
.modal .link{
  background-color: #fff;
  margin:0 auto;
  padding:5%;
  border:2px solid #71d5ee; 
  text-align: center;
}
.modal .link a{display: inline-block;margin-bottom:1%;}
.modal .close-btn{
  width:200px;
  color:#1da1f3;
  padding:1.5%;
  border:1px solid #71d5ee; 
  font-size:18px;
  border-radius:5px;
  background:url(/elis/asamade/moyamoya/img/icon_close.png) no-repeat;
  background-position: 90% center;
  background-size: 15px;
  margin-top:2%;
}

/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
  #moya .smp{display:none!important;}
  #moya .main{margin-left:20px;}
  #moya .mv .txt{
    position: absolute;
    top: 420px;
    left: 40px;
    width: 600px;
    font-size: 14px;
    line-height: 1.8;
  }
  #moya #anchor-main .anchor{display: flex;justify-content: space-between;}
  #moya .box .ill{padding:0 7%;}
  #moya .ill-prof-right a:not(:last-of-type){width:44%;display:inline-block;}
  #moya .ill-prof-right a:first-of-type{margin-right:1.5%;}
}
/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	#brand_wrap.brand_wrap_btm{padding-bottom: 40px;}
  #moya .pc{display:none!important;}
  #moya .mv .txt{padding:3%;font-size: 14px;line-height: 1.8;}
  #moya .anchor a{height:41vw;background: url(/elis/asamade/moyamoya/img/tw-bg-smp.png) no-repeat;background-size:100%;}
  #moya .anchor a div img{width:18%;}
  #moya .anchor a div h2{width:80%;font-size:4.5vw;}
  #moya .anchor a >img{width: 80%;margin: 0 auto;}    
  #moya .box .bln {padding: 30px 50px;}
  #moya .box .ill .tit h2 {font-size: 16px;}
  #moya .box .ill .tit > img {width: 50px;}
  #moya .clm h4 {font-size: 14px;}
  #moya .clm-tit h3 {font-size: 16px;}
  #moya .clm-tit img {width: 50px;}
  #moya .clm-spl .clm-tit img {width: 60px;}
  #moya .pdc h3 {font-size: 14px;}
  #moya .pdc {font-size: 12px;}
  #moya .pdc-btn{width:80%;}
  #moya .prof .prof-name {font-size: 14px;}
  #moya .prof a.ex-link{font-size:12px;}
  #moya .modal .link a{margin-bottom:3%;}
  #moya .go-anchor-btn{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:10;
    width:50px;
    opacity: 1;
  }
}