/* ==================================================== */
/* COMMON */
/* ==================================================== */
body{
  overflow-x:hidden;
}
section{
  display:block;
}
#content{
  font-size:14px;
  line-height: 1.8rem;
  color:#fff;
}
ul li{
  list-style-type: none;
}
img{
  backface-visibility: hidden;
}
#content.felt{
  padding-top:70px;
  min-width:1000px;
  font-family: 'ヒラギノ角ゴ ProN W6', 'ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro','メイリオ', Meiryo, 'ＭＳ Ｐゴシック','ＭＳ ゴシック', Osaka, sans-serif!important;
}
.bg-green{
  background-image:url(../img/felt/bg-green.jpg);
  background-size:100%;
}
.bg-white{
  position:relative;
  z-index:1;
  background-image:url(../img/felt/bg-white.png);
  background-size:cover;
  margin-top: -38px;
  background-position:center top;
}
.section{
  width:100%;
  max-width:1000px;
  margin:0px auto;
}
.pc{
  display:inline-block;
}
.sp{
  display:none;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom:30px;

}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/* ==================================================== */
/* MAIN-TITLE */
/* ==================================================== */
.main-visual{
  margin-bottom:-72px;

}
.main-visual .inner{
  width:1000px;
  margin:0px auto;
}


/* ==================================================== */
/* ARTICLE*/
/* ==================================================== */
.gouwan-content{
  width:960px;
  margin:0px auto;
  background:#fff;
  position:relative;
  z-index:1;
  padding:0px 114px 140px;
  margin-bottom:55px;
}
.gouwan-content::before{
  content:'';
  display:block;
  
  width:972px;
  height:264px;
  background-image:url(../img/felt/gouwan/common/fire.png);
  background-size:972px 264px;
  position:absolute;
  top:-102px;
  left:-12px;
  z-index:-1;

}

.gouwan-content h3{
      font-weight: 600;
    color: #000;
    text-align: center;
    margin-bottom: 58px;
    font-size: 42px;
}

.gouwan-content p{
font-size: 28px;
    color: #000;
    line-height: 1.8;
    position: relative;
    margin-bottom: 45px;
    -webkit-font-smoothing: antialiased;
    font-weight: 600;
}
.gouwan-content p.person{
  padding-left:86px;

}
.gouwan-content p.person::before{
  content:'';
  display:inline-block;
  width:70px;
  height:70px;
  background-size:70px;
  position: absolute;
  left: 0;
  top: -14px;  
}
.gouwan-content p.kobashi::before{
  background-image:url(../img/felt/gouwan/common/kobashi.png);
}
.gouwan-content p.sensei::before{
  background-image:url(../img/felt/gouwan/common/sensei.png);
}

.gouwan-content p.size-18{
  font-size:18px; 
}
.gouwan-content p.size-22{
  font-size:22px; 
}
.gouwan-content p.size-24{
  font-size:24px; 
}
.gouwan-content p.size-32{
  font-size:34px; 
}
.gouwan-content p.size-34{
  font-size:34px; 
}
.gouwan-content p.size-60{
  font-size:60px; 
}

.gouwan-content p.size-40{
  font-size:40px; 
  line-height:1.2;
}

.gouwan-content span.small{
  font-size:18px;
}
.gouwan-content span.big{
  font-size:40px;
      vertical-align: sub;
}

.gouwan-content span.size-28{
  font-size:28px;
}
.gouwan-content span.size-34{
  font-size:34px;
}
.gouwan-content span.aka{
  color:#ff0000;

}
.gouwan-content span.ao{
  color:#0030ff;
}

.gouwan-content p.break{
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

.gouwan-content p img{
  display: block;
    margin: 0px auto;
    width: auto;
  max-width: 100%;;
}
.gouwan-content p.full img{
  width:100%;
}
.gouwan-content .note{
  border:1px solid #dbd5e0;
  border-radius: 5px;
  padding:27px;
      margin-bottom: 60px;
}
.gouwan-content .note p{
  font-size:14px;
  font-weight:300;
  margin-bottom:0;
}
.ps-60{
  padding-bottom:60px;
}
.ps-300{
  padding-bottom:300px;
}
.gouwan-content p.mb-55{
  margin-bottom:100px;
}
.gouwan-content p.mb-35{
  margin-bottom:80px;
}
.gouwan-content p.mb-75{
  margin-bottom:120px;
}
.gouwan-content p.mb-50{
  margin-bottom:95px;
}
.gouwan-content p.mb-40{
  margin-bottom:85px;
}
.gouwan-content p.mb-200{
  margin-bottom:245px;
}
.gouwan-content p.mb-20{
  margin-bottom:65px;
}
.gouwan-content p.mb-100{
  margin-bottom:145px;
}
.gouwan-content p.mb-150{
  margin-bottom:195px;
}
.gouwan-content p.mb-80{
  margin-bottom:125px;
}
.gouwan-content p.mb-60{
  margin-bottom:105px;
}
.gouwan-content p.mb-300{
  margin-bottom:345px;
}
.gouwan-content p.nmb-20{
  margin-bottom:25px;
}
.gouwan-content p.nmb-10{
  margin-bottom:35px;
}
.gouwan-content .note.mb-30{
  margin-bottom:90px;
}
/* ==================================================== */
/* ROUND00*/
/* ==================================================== */
.round0{
  padding-top:80px;
}

/* ==================================================== */
/* ROUND00*/
/* ==================================================== */
.round1{
  padding-top:197px;
}
#playbtn{
  display:block;
    width: 297px;
    margin: 0px auto;
    position: relative;
    left: 40px;
}

/* ==================================================== */
/* ROUND00*/
/* ==================================================== */
.round2{
  padding-top:197px;
}
h3.omake{
  padding-top:40px;
  font-size:50px;
  color:#000;
  text-align:left;
}


/* ==================================================== */
/* SNS*/
/* ==================================================== */

#social_links.wh{
  background:none;
}
section.sns-area{
  padding-bottom: 60px;
}
section.sns-area .snswrap{
  width: 356px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
section.sns-area .snsbox{
  position:relative;
}
section.sns-area .snsbox a{
  display:block;
  opacity:1;
  transition:300ms;
}
section.sns-area .snsbox a:hover{
  opacity:0.6;
}
section.sns-area .snsbox .pc{
  display:inline;
}
section.footer-area .banners,
section.footer-area .banners.wrap{
  border-top:none;
  padding: 49px 0px 39px;
}

/* ==================================================== */
/* FOOTER*/
/* ==================================================== */

section.footer-area .grid6{
  text-align:center;
}
section.footer-area .grid6 .recommend-title{
  margin-bottom:-30px;
}
section.footer-area .grid6 .recommend-title:hover{
  opacity:1;
}
section.footer-area .grid6:nth-child(2) .recommend-title{
  margin-bottom:-34px;
}

/* ==================================================== */
/* HOVER*/
/* ==================================================== */

/* ==================================================== */
/* ANIMATION */
/* ==================================================== */
.twitterbtn{
  display: block;
  overflow: hidden;
  width: 164px;
  height: 162px;
  overflow:hidden;
  background-repeat: no-repeat;
  background-image:url(../img/felt/twitter-btn-sprite.png);
  animation: keyframeSprite 2.8s steps(2) infinite;
  text-indent: -9999px;
  transition:0;
}

.facebookbtn{
  display: block;
  overflow: hidden;
  width: 159px;
  height: 157px;
  overflow:hidden;
  background-repeat: no-repeat;
  background-image:url(../img/felt/facebook-btn-sprite.png);
  animation: keyframeSprite 2.8s steps(2) infinite;
  text-indent: -9999px;
  transition:0;
}

@-webkit-keyframes keyframeSprite {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 200%;
  }
}

@keyframes keyframeSprite {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 200%;
  }
}

@media screen and (max-width: 640px) {
  #content.felt{
    padding-top:79px;
    min-width:640px;
  }
  .section{
    width:100%;
  }
  .bg-green{
    background-size:200%;
  }
  .bg-white{
    background-position: 34% 100%;
  }
  .pc{
    display:none;
  }
  .sp{
    display:inline-block;
  }



  .main-visual .inner{
    width:100%;
    padding-left:16px;
    padding-top:27px;
  }
  .main-visual{
  margin-bottom:20px;

  }
  .main-visual .inner img{
    width:100%;
  }
  .gouwan-content::before{
  width:613px;
  height:106px;
  background-size:613px;
  left:-4px;
  top:-75px;

  }
  .gouwan-content{
    width:calc(100% - 34px);
    padding:0px 34px 40px;
  }
  /*
  .gouwan-content p{
    font-size:14px;
    margin-bottom: 52px;
  }*/
  /*
  .gouwan-content p.size-18{
  font-size:12px;

  }
  .gouwan-content span.big{
    font-size:19px;
    line-height: 1.2;
    vertical-align: middle;
  }
  .gouwan-content p.size-22{
  font-size:12px;

  }
  .gouwan-content p.size-34{
  font-size:15px;

  }
  .gouwan-content p.size-24{
  font-size:12px;

  }
  .gouwan-content .note p{
    font-size:10px;
  }
  .gouwan-content span.size-28{
  font-size:15px;

  }
  .gouwan-content span.size-34{
  font-size:15px;

  }
  .gouwan-content p.size-60{
    font-size:30px;
  }*/

  /*head*/
  .head-title h1 .head-subtitle{
    width:297px;
  }
  .head-title h1 .main-title{
    width:402px;
  }
  .section.lead .lead-title{
    margin-bottom:23px;
  }
  .head-title h1 {
    margin-bottom: 16px;
  }
  .head-title .felt-hoshino {
    width: 142px;
    height: 235px;
    top: 140px;
    right: -1px;
    background-size: 142px 235px;
  }
  .head-title .felt-yoshioka {
    width: 130px;
    height: 239px;
    top: 87px;
    left: 11px;
    background-size: 130px 239px;
  }
  .section.lead{
    margin-bottom: 38px;
  }
  .lead .lead-text{
    width:510px;
  }
  .section.lead .granprix-detail{
    padding:0px 40px;
  }
  .section.lead .granprix-detail p.firstpara{
    text-align:center;
    font-size:104%;
  }
  .section.lead .granprix-detail p.secondpara{
    font-size:11px;

  }
  .section.lead .granprix-detail a.agreement{

  }
  .section.lead .granprix-detail a.agreement::before{
    width:13px;
    height:13px;
    background-size:13px 13px;
    background-repeat:no-repeat;
    bottom:2px;

  }
  .section.lead .granprix-detail .ornament-crown{
    display: block;
    justify-content: center;
    align-items: flex-start;
  }
  .section.lead .granprix-detail .crown-main,
  .section.lead .granprix-detail .crown-sub{
    position:relative;
    top:0;
    right:0;
    padding:0px 40px;
  }
  .section.lead .granprix-detail .crown-main{
    margin-bottom:32px;

  }
  .section.lead .granprix-detail .crown-sub{
    padding:0px;

  }
  .section.lead .granprix-detail .crown-main img{
    max-width:100%;

  }
  .section.lead .granprix-detail .crown-sub img{
    max-width:106%;
  }
  

  .pre-granprix .supplement{
    width:500px;
    top:-17px;
    left:0px;
  }
  .pre-granprix .supplement img{
    width:100%;
  }

  .pre-granprix .oagebox::after{
    background-image:url(../img/felt/pre-granprix/ornament-right-sp.png);
    background-size:145px 336px;
    width:145px;
    height:336px;
    right:-71px;
    top:78px;
  }
  .pre-granprix .oagebox .text01.sp{
    width:400px;
  }
  .pre-granprix .oagebox .text02.sp{
    width:348px;
  }
  .pre-granprix .oagebox .text03.sp{
    width:250px;
  }
  .pre-granprix .attention{
    -webkit-text-size-adjust: 100%;
    max-height:100%;
    font-size:1.2em;
    width:90%;
  }

  .pre-granprix .attention a::after{
    background-size:10px 12px;
    width:10px;
    height:12px;
  }
  .movie{
    padding:0px 40px;
    margin-bottom: 89px;
  }

  .movie .youtube-wrapper .youtube-base{
    width: 573px;
    height: 333px;
    position: absolute;
    top: -15px;
    left: -21px;
    z-index: 1;
    background-size: 567px 333px;
  }
  .movie .youtube-wrapper::before,
  .movie .youtube-wrapper::after{
    display:none;
  }
  .movie .ornament-hoshino{
    width: 130px;
    height: 204px;
    bottom: 83px;
    right: -54px;
    background-size: 130px 204px;
  }
  .movie .ornament-yoshioka{
    width: 125px;
    height: 196px;
    bottom: -65px;
    left: -51px;
    background-size: 125px 196px;
  }

  .slider-howto-sp{
    width:100%;
    padding: 0px 80px;
  }
  .slider-howto-sp img{
    max-width:100%;
  }

  .slider-howto-sp .slide{
    text-align:center;
  }
  .slider-howto-sp .slide img{
    display:inline;
  }
  .slider-howto-sp.slick-dotted.slick-slider{
  }
  .slider-howto-sp .slick-dots{
    position:relative;
    bottom: 0;
    margin-top:33px;
    margin-bottom:54px;
  }
  .slider-howto-sp .slick-dots li{
    width:40px;
    height:32px;
    background-image:url(../img/felt/howto/dot.png);
    background-size:40px 32px;
    background-position:center;
    margin:0px -2px;
  }
  .slider-howto-sp .slick-dots li.slick-active{
    background-image: url(../img/felt/howto/dot-active.png);
    width: 42px;
    height: 40px;
    background-size: 42px 40px;
    position: relative;
    top: 3px;
    left: 4px;
    margin-right: -7px;;
  }
  .slider-howto-sp .slick-prev,
  .slider-howto-sp .slick-next{
    width:90px;
    height:90px;
    background-image:url(../img/felt/howto/prev.png);
    background-size:90px 90px;
    background-position:center;
    z-index: 3;
    top: 21%;
  }
  .slider-howto-sp .slick-prev{
    left:17px;
  }
  .slider-howto-sp .slick-next{
    background-image:url(../img/felt/howto/next.png);
    right:-9px;
  }

  .section.howto .dl-btn{
    display:flex;
    padding:0px 40px; 
  }
  .section.howto .dl-title{
    margin-bottom:15px;

  }
  .section.howto .dl-btn a:nth-child(2){
    position:relative;
    top:-10px;

  }


  .section.making-top .inner{
    width:100%;
    height:auto;
    padding-left:0px;
  }
  .section.making-top .inner .sp .titlearea-sp{
    max-width:100%;
    position:relative;
    right:-2px;
  }

  .section.making-top .inner .sp .making-btn{
    bottom: 103px;
    left: 119px;
    display: block;

  }
  .section.making-top .inner .sp .making-btn img{
    width:417px;
    height:auto;
  }
  section.sns-area .snsbox.twitter{
    margin-bottom:0px;
  }
  section.footer-area .gird6 a{
    display:block;
  }
  section.footer-area .grid6:first-child{
    margin-bottom:0px;
  }
  section.footer-area .grid6:first-child img{
    width: 102.3%;
  }
  .mobile #common_banners{
    background:none;
    padding: 0px 60px;
  }
  section.footer-area .banners,
  section.footer-area .banners.wrap{
    padding: 67px 0px 8px;
  }
}


/* modal */
body.is-modal-open {
  height: 100%;
  overflow: hidden;
}
.body_title h1{
  font-weight: 600;
}
.modal_event {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  overflow: auto;
  z-index: 101;
}
.modal_event img {
  width: 100%;
}
.modal_event.is-active {
  display: block;
}
.modal_event.is-active .close-area{
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translate3d(0, 0, 0px);
}
.modal_event > .inner {
  position: relative;
  z-index:2;
  transform: translate3d(0, 0, 1px);
  top: 0;
  left: 0;
  border: 5px solid #fff;
  margin: 174px auto;
  width: 73.73%;
  max-width: 1105px;
}
.modal_event > .inner > .close {
  position: absolute;
  top: -45px;
  right: -45px;
}
.modal_event > .inner > .body {
  padding: 50px 16%;
  border: 3px solid #003f21;
  background: #fff;
}
.modal_event > .inner > .body > .body_title {
  padding-bottom: 0px;
  text-align: center;
  border-bottom: 1px solid #bfbfbf;
}
.modal_event > .inner > .body > .content {
  padding: 0;
  margin-top: 45px;
  margin-bottom: 30px;
  padding-bottom: 60px;
  border-bottom: 1px solid #bfbfbf;
}
.modal_event > .inner > .body > .content:last-child {
  border-bottom: none;
  padding-bottom:0;
}
.modal_event > .inner > .body > .content > h1 {
  margin-bottom: 0;
  font-weight: bold;
  font-size: 27px;
}
.modal_event > .inner > .body > .content > .note {
  margin-top: 20px;
  color: #003f21;
  font-weight: bold;
  font-size: 19px;
  text-align: center;
  border-radius: 4px;
  background: #d9e3df;
}
.modal_event > .inner > .body > .content > .note > p {
  padding: 10px 0;
}
.modal_event > .inner > .body > .content > .detail {
  margin-top: 25px;
}
.modal_event > .inner > .body > .content > .detail p:first-child{
  margin-bottom: 5px;
}
.modal_event > .inner > .body > .content > .detail p:last-child{
  letter-spacing: 0;
  line-height: 2;
}
.modal_event > .inner > .body > .content > .detail > .detail_each {
  font-size: 17px;
}
.modal_event > .inner > .body > .content > .detail > .detail_each li{
  text-indent:-1em;
  padding-left:1em;
  list-style: none;
  line-height: 2;
}
.modal_event > .inner > .body > .content > .detail > .detail_each .attention{
  font-size:14px;
}
.modal_event > .inner > .body > .content > .detail > .detail_each + .detail_each {
  margin-top: 35px;
}
.modal_event > .inner > .body > .content > .detail > .detail_each > .bold {
  color: #003f21;
  font-weight: bold;
}
.modal_event > .inner > .body > .content > .btn {
  margin-top: 30px;
  text-align: center;
}
.modal_event > .inner > .body > .content > .btn > a {
  display: block;
  position: relative;
  margin:0px auto 12px;
  top: 0;
  left: 0;
  padding: 10px 0;
  width: 195px;
  color: #fff;
  font-size: 11px;
  text-decoration: none;
  border-radius: 20px;
  background: #003f21;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
}
.modal_event > .inner > .body > .content > .btn > a:hover {
  opacity: 0.8;
}
.modal_event > .inner > .body > .content > .btn > a::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 5px;
  width: 16px;
  height: 14px;
  background: url(../img/modal/arrow.png);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "";
}
.modal_event > .inner > .body > .content > .btn > .attention{
  font-size:12px;
}
@media screen and (max-width: 750px) {
  .modal_event > .inner {
    width: 94.7%;
  }
  .modal_event.is-active .close-area{
    cursor:pointer;
  }
  .modal_event > .inner > .close {
    top: 7px;
    right: 7px;
    z-index: 9999;
  }
  .modal_event > .inner > .body {
    padding: 8% 6.6%;
  }
  .modal_event > .inner > .body > .body_title {
    padding: 0 17.5px 27.5px;
  }
  .modal_event > .inner > .body > .body_title > img {
    width: 248px;
    backface-visibility: hidden;
  }
  .modal_event > .inner > .body > .content > h1 {
    font-size: 22px;
  }
  .modal_event > .inner > .body > .content > .note {
    padding: .5% 2.5%;
    margin: 1.8% 0 30px;
    font-size: 18px;
    text-align: left;
  }
  .modal_event > .inner > .body > .content > .note p {
    text-align: center;
    line-height: 1.38;
    letter-spacing: 1px;
  }
  .modal_event > .inner > .body > .content > .detail {
    margin-top: 2.5%;
  }
  .modal_event > .inner > .body > .content > .detail p:first-child {
    margin-bottom: 7px;
  }
  .modal_event > .inner > .body > .content > .detail > .detail_each {
    font-size: 16px;
  }
  .modal_event > .inner > .body > .content > .detail > .detail_each .attention{
    font-size:14px;
  }
  .modal_event > .inner > .body > .content > .detail > .detail_each + .detail_each {
    margin-top: 25px;
  }
  .modal_event > .inner > .body > .content > .btn {
    margin-top: 7%;
  }
  .modal_event > .inner > .body > .content > .btn > a {
    padding: 2% 0;
    width: 100%;
    font-size: 14px;
    border-radius: 40px;
  }
  .modal_event > .inner > .body > .content > .btn > a:hover {
    opacity: 1;
  }
  .modal_event > .inner > .body > .content > .btn > a::after {
    right: 7%;
  }
}