@@charset "UTF-8";

/*/////////// パソコン部トップページ///////////*/
.personal-computer_top-main-visual{
  background: #fff; 
}
.personal-computer_top-main-navigation{
  padding: 45px 65px 55px;
  background-image: url(images/common_top_main_bg_pinktail.png);
}

.personal-computer_top-main-navigation .speech-bubble{
  background: #fff;
  border-radius: 20px;
  padding: 25px 55px 30px;
  position: relative;
}
.personal-computer_top-main-navigation .speech-bubble-part{
  position: absolute;
  bottom: -38px;
  right: 75px;
}

.personal-computer_top-main-navigation .title{
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.personal-computer_top-main-navigation .menu-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.personal-computer_top-main-navigation .menu-list li{
  margin-bottom: 25px;
}

.personal-computer_top-kokoroe-navigation{
  padding: 55px 65px 110px;
  background-image: url(images/common_background_blueline.png);
  text-align: center;
}
.personal-computer_top-kokoroe-navigation .title{
  padding: 35px;
  background: #fff;
  border-radius: 15px;
  position: relative;
}
.personal-computer_top-kokoroe-navigation .tv-stand-part{
  position: absolute;
  bottom:-58px;
  left: 50%;
  transform: translateX(-50%);
}
.button-interview{
  background-image: url(images/top_button_bg.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  display: flex;
  align-items: center;
  width: 380px;
}
.button-interview:hover{
  opacity: 0.8;
}


a.button-interview-wrpper{
  color: #fff;
}
.button-interview-category{
  font-size: 1.5rem;
  text-decoration:underline wavy #fff;
  font-weight: bold;
}
.button-interview-name{
  font-size: 2.2rem;
  padding-bottom: 5px;
}
.button-interview-name-title{
  font-size: 1.4rem;
}
.button-interview-document{
  flex: 1;
  padding: 5px;
  text-align: center;
}

.button-interview-youtuber{
  background-color: #52bff4;
}
.button-interview-youtuber .button-interview-detail{
  color: #52bff4;
}
.button-interview-esports-caster{
  background-color: #eb82c8;
}
.button-interview-esports-caster .button-interview-detail{
  color: #eb82c8;
}
.button-interview-movie-producer{
  background-color: #fec446;
}
.button-interview-movie-producer .button-interview-detail{
  color: #fec446;
}
.button-interview-recording-engineer{
  background-color: #79d9b4;
}
.button-interview-recording-engineer .button-interview-detail{
  color: #79d9b4;
}
.button-interview-name-hint{
  font-size: 1.4rem;
  display: block;
}


.button-interview-detail{
  background: #fff;
  display: inline-block;
  padding: 0 15px;
  font-size: 2rem;
}




@media screen and (max-width: 768px){
  .personal-computer_top-main-navigation{
    background-size: 10vw;
    padding: 4vw 3vw 6vw;
  }
  .personal-computer_top-main-navigation .speech-bubble{
    border-radius: 10px;
    padding: 2vw 4vw 4vw;
  }
  .personal-computer_top-main-navigation .menu-list{
    display: block;
  }
  .personal-computer_top-main-navigation .menu-list li{
    margin-bottom: 2vw;
  }
  .personal-computer_top-main-navigation .speech-bubble-part{
    position: absolute;
    bottom: 0;
    right: 11vw;
  }
  .personal-computer_top-main-navigation .speech-bubble-part img{
    width: 4vw;
  }
  .personal-computer_top-kokoroe-navigation{
    background-size: 6vw;
    padding: 5vw 5vw 10vw;
    margin-bottom: 5vw;
  }
  .personal-computer_top-kokoroe-navigation .title{
    padding: 3.4vw;
    border-radius: 2vw;
  }
  .personal-computer_top-kokoroe-navigation .tv-stand-part{
    bottom: -6vw;
  }
  
  .button-interview{
    width: 86vw;
  }
  .button-interview img{
    width: 30vw;
  }
  .button-interview-category{
    font-size: 3.6vw;
    font-weight: bold;
  }
  .button-interview-name{
    font-size: 5.2vw;
    padding-bottom: 1vw;
  }
  .button-interview-name-title{
    font-size: 3.7vw;
  }
  .button-interview-name-hint{
    font-size: 4vw;
  }
}


/*/////////// パソコン部パソコンの基本５つの心得 ///////////*/

.kokoroe-block{
  padding: 70px;
  background: #fff;
  background-image: url(images/common_background_blueline.png);
}

.kokoroe-block .snsBlock{
  margin: 0;
  padding-top: 10px;
  background: rgba(255,255,255,.8);
}
.interview-block .snsBlock{
  margin: 0 0 20px;
}

.kokoroe-block-main-contents{
  background-color: #fff;
  background-color: rgba(255,255,255,.8);
  padding: 60px 0;
}

/* フォント設定 */
.kokoroe-headding-webfont{
  font-family:'G2サンセリフ-B','GSanSerif-B';
  
}

/* パソコンって何だろう？ */
.kokoroe-block-whats-personal-computer{
  margin-bottom: 50px;
  text-align: center;
}
.kokoroe-block-whats-personal-computer .title{
  font-size: 4.8rem;
  color:#53bff4;
  margin-bottom: 10px;
  text-align: center;
}
.kokoroe-block-whats-personal-computer .icon{
  text-align: center;
}
.kokoroe-block-whats-personal-computer .document{
  font-size: 2.2rem;
  line-height: 3.6rem;
}

/* 基本の名称を覚えよう！ */
.kokoroe-block-basic-name{
margin-bottom: 130px;
text-align: center;
}
.kokoroe-block-basic-name .icon{
  text-align: center;
}
.kokoroe-block-basic-name .title{
  font-size: 4.8rem;
  color:#53bff4;
}
.kokoroe-block-basic-name .sub-title{
  margin-top: -10px;
  margin-bottom: 34px;
  font-size: 3.4rem;
  color:#53bff4;
  text-decoration: underline #53bff4 wavy;
}
.kokoroe-block-basic-name .document{
  font-size: 2.2rem;
  line-height: 3.6rem;
}

.kokoroe-block-basic-name .about-os{
  margin-bottom: 70px;
}

.kokoroe-block-basic-name .image-desktop-pc{
  margin-bottom: 46px;
}
.kokoroe-block-basic-name .annotation{
  font-size: 1.4rem;
}
.kokoroe-block-basic-name .image-screen-structure{
  margin-bottom: 50px;
}


/* これが5つの心得だ！ */
.kokoroe-five-tips-icon{
  text-align: center;
}
.kokoroe-five-tips-title{
  text-align: center;
  margin-bottom: 54px;
}

/* 心得　その１ */
.kokoroe-five-tips-detail{
  padding: 0 30px 60px;
}
.kokoroe-five-tips .text-icon{
  position: relative;
  display: inline-block;
}
.kokoroe-five-tips .text-icon > span{
  position: absolute;
}
.kokoroe-five-tips .text-icon img{
  max-width: inherit;
}

.kokoroe-five-tips-detail .title{
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.kokoroe-five-tips-detail .multiline{
  align-items: flex-start;
}
.kokoroe-five-tips-detail .title-text{
  font-size: 4.2rem;
  color:#53bff4;
  display: inline-block;
}

.kokoroe-five-tips-detail .multiline .title-text{
position: relative;
top: -7px;
}

.kokoroe-five-tips-detail .step-number{
  display: inline-block;
  margin-right: 15px;
}

.text-icon-switch-on{
  top:-60px;
  left: 10px;
}

.kokoroe-five-tips-detail .title strong{
  color: #FEC446;
}

.kokoroe-five-tips-detail-part{
  margin-bottom: 30px;
  position: relative;
}

.kokoroe-five-tips-detail-part-title{
  font-size: 2.4rem;
  color: #fff;
  background: #53bff4;
  padding: 6px 10px 5px;
  display: inline-block;
  margin-bottom: 10px;
}


.kokoroe-five-tips-detail-part-document{
  font-size: 1.6rem;
}

.kokoroe-five-tips-detail-point-title{
  margin-top: 16px;
  margin-bottom: 4px;
  font-size: 2.0rem;
  color: #53bff4;
  border-bottom: solid 3px #53bff4;
}
.kokoroe-five-tips-detail-point-document{
  font-size: 1.6rem;
}

/* パソコン部ヒミツの心得 */
.secret-tip{
  padding: 60px 30px 30px 40px;
  position: relative;
}

.secret-tip-point{
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.secret-tip::after{
  display: block;
  content: "";
  clear: both;
  border: 7px dotted #53bff4;
  border-radius: 26px;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  top:0;
  left: 0;
}

.secret-tip::before{
  display: block;
  content: "";
  clear: both;
  background: #fff;
  border-radius: 22px;
  position: absolute;
  width: calc( 100% - 5px );
  height: calc( 100% - 5px );
  box-sizing: border-box;
  top:15px;
  left: 15px;
}

.secret-tip-title{
  position: relative;
  font-size: 3.6rem;
  line-height: 3.6rem;
  color: #53bff4;
  text-align: center;
  margin-bottom: 45px;
}

.secret-tip-point-title{
  font-size: 2.0rem;
  color: #53bff4;
  margin-bottom: 5px;
}

.secret-tip-point-document{
  font-size: 1.6rem;
}

.illust-dustbox{
  position: absolute;
  top:-13px;
  right: 130px;
}
.illust-dragicon{
  position: absolute;
  top:10px;
  right: 30px;
}

/* 表組み */
.mouse-oparation-list{
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}
.mouse-oparation-list td,
.mouse-oparation-list th{
  width:33%;
}
.mouse-oparation-list th{
  padding-bottom: 24px;
  position: relative;
  height: 80px;
}
.mouse-oparation-list td{
  font-size: 1.8rem;
  font-weight: bold;
  padding: 20px;
}
.mouse-oparation-list td:first-child{
  border-right : 6px #53bff4 solid;
  vertical-align: middle;
}
.mouse-oparation-list td:nth-child(3){
  border-left : 6px #53bff4 dotted;
  margin-left: 20px;
  margin-right: 20px;
}
.mouse-oparation-list td:not(:first-child){
  text-align: center;
}
.mouse-oparation-list tr:nth-child(n+2):nth-child(-n+5) td{
  border-bottom: 6px #53bff4 solid;
}
.mouse-oparation-list .table-head-baloon {
  position: absolute;
  display: flex;
  justify-content: center;
  margin: auto;
  padding: 7px 10px;
  width:95%;
  height: 75px;
  color: #fff;
  background: #53bff4;
  box-sizing: border-box;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mouse-oparation-list .table-head-baloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top: 16px solid #53bff4;
}

.mouse-oparation-list .table-head-baloon p {
  margin: 0;
  padding: 0;
  font-size: 2.2rem;
  line-height: 2.8rem;
  display: flex;
  align-items: center;
}

.mouse-oparation-list .action-name{
  font-size: 2.6rem;
  font-weight: bold;
  color: #53bff4;
  display: block;
}

.kokoroe-five-tips .illust-security-save-memo{
  display: block;
  margin: 30px 0 40px;
  text-align :center;
}


/* パソコン部ステップアップの心得 */
.stepup-tip{
  padding: 60px 30px 30px 40px;
  position: relative;
}

.stepup-tip-point{
  font-size: 2.0rem;
  font-weight: bold;
  color: #53bff4;
  margin-left: 45px;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.stepup-tip::after{
  display: block;
  content: "";
  clear: both;
  border: 7px dotted #53bff4;
  border-radius: 26px;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  top:0;
  left: 0;
}

.stepup-tip::before{
  display: block;
  content: "";
  clear: both;
  background: #fff;
  border-radius: 22px;
  position: absolute;
  width: calc( 100% - 5px );
  height: calc( 100% - 5px );
  box-sizing: border-box;
  top:15px;
  left: 15px;
}

.stepup-tip-title{
  position: relative;
  font-size: 4.2rem;
  line-height: 3.6rem;
  color: #53bff4;
  text-align: center;
  margin-bottom: 10px;
}
.stepup-tip-sub-title{
  position: relative; 
  color: #53bff4;
  font-size: 3.2rem;
  margin-bottom: 20px;
  text-align: center;
}

.stepup-tip-point-title{
  font-size: 2.0rem;
  color: #53bff4;
  margin-bottom: 5px;
}

.stepup-tip-point-document{
  margin-top: 10px;
  margin-left: 70px;
  font-size: 1.6rem;
  position: relative;
}

.for-parent-comment{
  font-size: 1.5rem;
  color:#EF5094;
  margin-bottom: 25px;
}
.for-parent-comment a{
  color:#EF5094;
}
.for-parent-comment a:hover{
  text-decoration: underline;
}
.tip-internet{
  margin-bottom: 25px;
}
.tip-internet-title{
  font-size: 2.0rem;
  font-weight: bold;
  color: #53bff4;
  border-bottom: 3px #53bff4 solid;
  margin-bottom: 10px;
}
.tip-internet-document{
  font-size: 1.6rem;
}
.illust-search-weather{
  text-align: center;
  position: relative;
  top:-20px;
}
.illust-search-filed{
  position: relative;
  text-align: center;
  margin: 10px 0;
}

.tip-stop-shutdown-wrapper{
  display: flex;
  padding-top:  20px;
  align-items: center;
}
.tip-stop-shutdown{
  margin-left: 30px;
}
  
.tip-stop-shutdown-title{
  font-size: 2.0rem;
  font-weight: bold;
  display: inline-block;
  border-bottom: 3px #FEC446 solid;
  margin-bottom: 15px;
}
.tip-stop-shutdown-document{
  font-size: 1.6rem; 
  position: relative;
}

.illust-shutdown{
  position: absolute;
  top: -40px;
  right: 0;
}

.menber-certification-title{
  text-align: center;
}
.menber-certification-block{
  display: flex;
  align-items:center;
  justify-content: center;
}
.menber-certification-document{
  margin-left: 20px;
  text-align: center;
  font-size: 2.0rem;
  line-height: 4.2rem;
}
.menber-certification-letsplay{
  text-align: center;
  margin-bottom: 30px;
}
.return-to-pc-club-button{
  text-align: center;
}
.return-to-pc-club-button img{
  background-color: #52bff4;
}


.return-to-top-button{
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 10001;
}

/* テキストアイコン */
/* 電源アイコン */
.text-icon-switch{
  width: 22px;
}
.text-icon-switch>span{
  bottom: -5px;
  left: 7px;
}
/* 鍵アイコン */
.text-icon-kokoroe-lock{
  width: 78px;
  height:48px;
}
.text-icon-kokoroe-up>span{
  bottom: -13px;
  left: 7px;
}
.text-icon-kokoroe-up{
  width: 54px;
  height:48px;
}
.text-icon-kokoroe-lock>span{
  bottom: -13px;
  left: 7px;
}
/* マウスポインター白 */
.text-icon-mouse-pointer-white{
  width: 18px;
}
.text-icon-mouse-pointer-white>span{
  bottom: -2px;
  left: 2px;
}
/* マウスポインターピンク */
.text-icon-mouse-pointer-pink{
  width: 18px;
}
.text-icon-mouse-pointer-pink>span{
  bottom: -2px;
  left: 2px;
}
/* ゴミ箱アイコン */
.text-icon-dustbox{
  width: 18px;
}
.text-icon-dustbox>span{
  bottom: -4px;
  left: -2px;
}
/* ノートパッドアイコン */
.text-icon-notepad{
  width: 18px;
}
.text-icon-notepad>span{
  bottom: -4px;
  left: -2px;
}
/* デリートキーアイコン */
.text-icon-deletekey{
  width: 28px;
}
.text-icon-deletekey>span{
  bottom: -2px;
  left: 1px;
}
/* カーソルアイコン */
.text-icon-cursorkey{
  width: 18px;
}
.text-icon-cursorkey>span{
  bottom: -2px;
  left: 2px;
}
/* バックスペースキーアイコン */
.text-icon-backspacekey{
  width: 30px;
}
.text-icon-backspacekey>span{
  bottom: -4px;
  left: 1px;
}
/* スペースキーアイコン */
.text-icon-spacekey{
  width: 60px;
}
.text-icon-spacekey>span{
  bottom: 1px;
  left: 3px;
}
/* エンターキーアイコン */
.text-icon-enterkey{
  width: 19px;
}
.text-icon-enterkey>span{
  bottom: -4px;
  left: 2px;
}
/* eアイコン白 */
.text-icon-e-white{
  width: 14px;
}
.text-icon-e-white>span{
  bottom: -2px;
  left: 2px;
}
/* eアイコンピンク */
.text-icon-e-pink{
  width: 22px;
}
.text-icon-e-pink>span{
  bottom: -4px;
  left: 2px;
}
/* スタートメニューアイコン */
.text-icon-start-menu{
  width: 34px;
}
.text-icon-start-menu>span{
  bottom: -4px;
  left: 2px;
}



@media screen and (max-width: 768px){
  .kokoroe-block{
    padding: 5px;
    margin-bottom: 5vw;
  }
  .kokoroe-block-main-contents{
    padding: 15px;
  }
  
  .kokoroe-block-whats-personal-computer .icon img {
    width: 14.4vw;
  }
  .kokoroe-block-whats-personal-computer .title {
    font-size: 7.8vw;
  }
  .kokoroe-block-whats-personal-computer .document {
    font-size: 4.4vw;
    line-height: 7vw;
    font-family: sans-serif;
    text-align: left;
  }
  .kokoroe-block-basic-name {
    margin-bottom: 50px;
  }
  .kokoroe-block-basic-name .icon img {
    width: 14.4vw;
  }
  .kokoroe-block-basic-name .title {
    font-size: 7.8vw;
    margin-bottom: 1.5vw;
  }
  .kokoroe-block-basic-name .sub-title{
    font-size: 7vw;
    margin-bottom: 4vw;
  }
  .kokoroe-block-basic-name .document {
    font-size: 4.4vw;
    line-height: 7vw;
    font-family: sans-serif;
    text-align: left;
  }
  .kokoroe-block-basic-name .image-note-pc{
    margin-bottom: 10px;
  }
  .kokoroe-block-basic-name .about-os {
    margin-bottom: 30px;
  }
  .kokoroe-block-basic-name .image-screen-structure {
    margin-bottom: 20px;
  }
  .kokoroe-five-tips-title{
    margin-bottom: 20px;
  }
  .kokoroe-five-tips-icon img{
    width: 14.4vw;
    margin-bottom: 3vw;
  }
  .kokoroe-five-tips-detail{
    padding: 0 0 20px;
  }
  .kokoroe-five-tips-detail .title-text{
    font-size: 7.2vw;
    line-height: 6vw;
    flex: 1;
    position: relative;
    top:-1vw;
  }
  .kokoroe-five-tips-detail .title{
    align-items: flex-start;
  }
  .kokoroe-five-tips-detail .title-text strong{
    font-size: 7.2vw;
  }
  .kokoroe-five-tips-detail-part-title{
    font-size: 4.8vw;
  }
  .kokoroe-five-tips-detail .step-number {
    margin-right: 5px;
  }
  .kokoroe-five-tips-detail .step-number img{
    width: 32px;
  }
  .kokoroe-five-tips-detail-part-document{
    font-size: 4.5vw;
  }
  .kokoroe-five-tips-detail-point-title{
    font-size: 4.5vw;
  }
  .kokoroe-five-tips-detail-point-document {
    font-size: 4.5vw;
  }
  .secret-tip {
    padding: 20px;
    margin-bottom: 30px;
  }
  .secret-tip-title{
    font-size: 5.3vw;
    margin-bottom: 15px;
  }
  .secret-tip::after{
    border: 4px dotted #53bff4;
    border-radius: 10px;
  }

  .secret-tip::before{
    border-radius: 8px;
    width: calc( 100% - 5px );
    height: calc( 100% - 5px );
    top:10px;
    left: 10px;
  }
  .secret-tip-point-title{
    font-size:4.5vw;
  }
  .secret-tip-point-document{
    font-size: 4vw;
  }
  .illust-dustbox{
    position: static;
    float: right;
    padding: 3vw;
    width: 12vw;
  }
  .illust-dragicon{
    position: static;
    float: right;
    padding: 3vw;
    width: 24vw;
  }
  .mouse-oparation-list .table-head-baloon p {
      font-size: 3.8vw;
      line-height: 5vw;
  }
  .mouse-oparation-list th {
      height: 14vw;
  }
  .mouse-oparation-list .table-head-baloon {
      height: auto;
      padding: 2vw
  }
  .mouse-oparation-list td:first-child{
    border-right-width: 3px;
  }
  .mouse-oparation-list td:nth-child(3){
    border-left-width: 3px;
  }
  .mouse-oparation-list tr:nth-child(n+2):nth-child(-n+5) td{
    border-bottom-width: 3px;
  }
  .mouse-oparation-list .action-name{
    font-size: 3.8vw;
  }
  .mouse-oparation-list td{
    vertical-align: middle;
    font-size: 3.8vw;
    padding: 1.4vw;
  }
  .mouse-oparation-list .mouse-left1click,
  .mouse-oparation-list .mouse-right1click{
    width: 11vw;
  }
  .mouse-oparation-list .trackpad-left1click,
  .mouse-oparation-list .trackpad-right1click,
  .mouse-oparation-list .trackpad-drag{
    width: 16vw;
  }

  .mouse-oparation-list .mouse-left2click,
  .mouse-oparation-list .mouse-drag{
    width: 24vw;
  }
  .mouse-oparation-list .trackpad-left2click{
    width: 27vw;
  }
  .mouse-oparation-list .mouse-wheel{
    width: 16vw;
    float: left;
    margin-right: 3vw;
  }
  .stepup-tip {
    padding: 20px 10px;
    margin-bottom: 30px;
  }
  .stepup-tip-title{
    font-size: 5vw;
    margin-bottom: 0;
  }
  .stepup-tip-sub-title{
    font-size: 4vw;
    margin-bottom: 3vw;
  }
  .stepup-tip::after{
    border: 4px dotted #53bff4;
    border-radius: 10px;
  }

  .stepup-tip::before{
    border-radius: 8px;
    width: calc( 100% - 5px );
    height: calc( 100% - 5px );
    top:10px;
    left: 10px;
  }
  .stepup-tip-point{
    margin-left: 2vw;
    font-size: 3.8vw;
    margin-bottom: 0;
  }
  .stepup-tip-point-title{
    font-size:4.5vw;
  }
  .stepup-tip-point-document{
    font-size: 3vw;
    margin-left: 2vw;
  }
  .illust-search-weather{
    top:0;
  }
  .tip-stop-shutdown-wrapper{
    align-items: flex-start;
  }
  .tip-stop-shutdown-wrapper .icon-caution{
    margin-top: 10px;
    width: 50px;
  }
  .tip-stop-shutdown-wrapper .tip-stop-shutdown{
    flex:1;
    margin-left: 10px;
  }
  .illust-shutdown{
    position: static;
    display: inline-block;
    float: right;
    width: 30vw;
    padding: 2vw;
  }
  .menber-certification-block {
    display: block;
  }
  .menber-certification-icon img{
    width: 28vw;

  }
  .menber-certification-icon{
    text-align: center;
    margin-bottom: 3vw;
  }
  .menber-certification-document{
    font-size: 4vw;
    line-height: 6vw;
    margin-left:0;
  }
  .return-to-pc-club-button{
    width: 50vw;
    margin: auto;
  }
  /* アイコン関係 */
  .text-icon-switch-on {
    top: 7vw;
    right: 15vw;
    left: inherit;
  }
  .text-icon-switch-on img{
    width: 17vw;
  }
  
  .text-icon-switch {
    width: 5vw;
  }
  .text-icon-switch img {
    width: 5vw;
  }
  .text-icon-switch>span {
    bottom: -0.5vw;
    left: 1.8vw;
  }
  .text-icon-kokoroe-lock{
    width: 11vw;
  }
  .text-icon-kokoroe-lock img{
    width:11vw;
    height: 12vw
  }
  .text-icon-kokoroe-lock>span {
      bottom: -2.4vw;
      left: 1vw;
  }
  .text-icon-backspacekey{
    width: 6vw;
  }
  .text-icon-backspacekey img{
    width: 7vw;
  }
  .text-icon-backspacekey>span{
    bottom: -1vw;
    left: 1vw;
  }
  .text-icon-kokoroe-up>span{
    bottom: -1vw;
    left: 6px;
  }
  .text-icon-kokoroe-up img{
    width: 6vw;
    height:auto;
  }
  .text-icon-kokoroe-up{
    width: 6vw;
    height: auto;
  }
  /* eアイコン白 */
  .text-icon-e-white{
    width: 4vw;
  }
  .text-icon-e-white>span{
    bottom: -1vw;
    left: 0.5vw;
  }
  .text-icon-e-white img{
    width: 4vw;
    height:auto;
  }
  /* eアイコンピンク */
  .text-icon-e-pink{
    width: 4vw;
  }
  .text-icon-e-pink>span{
    bottom: -1vw;
    left: 0.5vw;
  }
  .text-icon-e-pink img{
    width: 4vw;
    height:auto;
  }
  /* ナビゲーション */
  .kokoroe-smartphone-navigation{
    width: 40vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
  }
  .kokoroe-smartphone-navigation.single{
    justify-content: center;
  }
  .kokoroe-previous-button img{
    width: 14.7vw;   
  }
  .kokoroe-next-button img{
    width: 14.7vw;   
  }
}


/*/////////// インタビュー ///////////*/
/* フォント設定 */
.interview-webfont{
  font-family:'G2サンセリフ-B','GSanSerif-B';
}
.interview-block{
  padding: 70px;
}
.interview-block-inner{
  background: rgba(255,255,255,.8);
  padding-bottom: 90px;
}

.interview-block{
  background-image: url(images/interview_square_background.png);
  overflow: hidden;
}
/* いちなるTV個別設定 */
.interview-youtuber{ background-color: #52bff4; }
.icchi{ background-image: url(images/interview_youtuber_icchi.png);}
.naru{ background-image: url(images/interview_youtuber_naru.png);}
.interview-youtuber .interview-read-strong{ background-color: #52bff4;}
.interview-youtuber .interview-answer-document-text{ background-color: #52bff4; }
.interview-youtuber .interview-answer-name{ color: #52bff4; }
.interview-youtuber .profile-block{ background-color: #52bff4; }
.interview-youtuber .profile-title{ color: #52bff4; }
.interview-youtuber .profile-link-button a{ color: #52bff4; }
.interview-youtuber .return-to-pc-club-button img{ background-color: #52bff4;}

/* ゲームキャスター岸さん個別設定 */
.interview-esports-caster{ background-color: #eb82c8; }
.kishi{ background-image: url(images/interview_esports_kishi.png);}
.interview-esports-caster .interview-read-strong{ background-color: #eb82c8;}
.interview-esports-caster .interview-answer-document-text{ background-color: #eb82c8; }
.interview-esports-caster .interview-answer-name{ color: #eb82c8; }
.interview-esports-caster .profile-block{ background-color: #eb82c8; }
.interview-esports-caster .profile-title{ color: #eb82c8; }
.interview-esports-caster .profile-link-button a{ color: #eb82c8; }
.interview-esports-caster .return-to-pc-club-button img{ background-color: #eb82c8;}

/* 映画プロデューサー アッシュ・ヌクイさん個別設定 */
.interview-movie-producer{ background-color: #fec446; }
.nukui{ background-image: url(images/interview_movie_nukui.png);}
.interview-movie-producer .interview-read-strong{ background-color: #fec446;}
.interview-movie-producer .interview-answer-document-text{ background-color: #fec446; }
.interview-movie-producer .interview-answer-name{ color: #fec446; }
.interview-movie-producer .profile-block{ background-color: #fec446; }
.interview-movie-producer .profile-title{ color: #fec446; }
.interview-movie-producer .profile-link-button a{ color: #fec446; }
.interview-movie-producer .return-to-pc-club-button img{ background-color: #fec446;}

/* レコーディングエンジニア　SADAHARU YAGIさん個別設定 */
.interview-recording-engineer{ background-color: #79d9b4; }
.yagi{ background-image: url(images/interview_recording_yagi.png);}
.interview-recording-engineer .interview-read-strong{ background-color: #79d9b4;}
.interview-recording-engineer .interview-answer-document-text{ background-color: #79d9b4; }
.interview-recording-engineer .interview-answer-name{ color: #79d9b4; }
.interview-recording-engineer .profile-block{ background-color: #79d9b4; }
.interview-recording-engineer .profile-title{ color: #79d9b4; }
.interview-recording-engineer .profile-link-button a{ color: #79d9b4; }
.interview-recording-engineer .return-to-pc-club-button img{ background-color: #79d9b4;}




.interview-quetion-answer-block{
  padding: 0 30px 20px;
  position: relative;
}
.interview-read-document{
  font-size: 2rem;
  text-align: center;
  margin-bottom: 50px;
  line-height: 4rem;
  position: relative;
}
.interview-main-visual{
  margin-bottom: 30px;
}

.interview-quetion-document{
  font-size: 1.8rem;
  margin-bottom: 20px;
}
.interview-answer-document-text{
  font-size: 1.8rem;
  padding: 4px;
  color: #fff;
}
.interview-answer-block{
  padding: 0 0 20px 95px;
  background-repeat: no-repeat;
  background-size: 85px;
  min-height: 85px;
}
.interview-answer-name{
  font-size: 1.6rem;
}
.interview-answer-document{
  font-size: 1.5rem;
  margin-bottom: 15px;
  font-weight: 700;
}
.interview-point-visual{
  margin-bottom: 20px;
}

.profile-block{
  color:#fff;
  background-image: url(images/interview_deco_bg.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  min-height: 240px;
  margin: 100px 30px 80px 256px;
  padding: 30px 26px 30px 100px;
  position: relative; 
}

.profile-image{
  width: 300px;
  position: absolute;
  left: -220px;
  top:-30px;
}
.profile-image img{
  width: 100%;
}
.profile-title{
  font-family: 'UD Shin Go Conde60 B';
  font-size: 4.0rem;
  position: absolute;
  top:-44px;
  right: 0;
}
.profile-category-title{
  font-size: 4rem;
}
.profile-document{
  font-size: 1.6rem;
  padding-bottom: 10px;
}
.profile-link-button a{
  display: inline-block;
  background-color: #fff;
  font-size: 1.6rem;
  padding: 4px;
}
.illust-decoration{
  position: absolute;
  display: block;
}


/* デコレーション写真、イラスト */
  /* interview-01 */
.interview-01-deco-photo-01{
  top: -281px;
  left: -28px;
}
.interview-01-deco-photo-02{
  top: 49px;
  right:10px;
}
.interview-01-deco-illust-01{
  top: -111px;
  left: -98px;
}
.interview-01-deco-illust-02{
  top: -322px;
  right: -182px;
}
.interview-01-deco-illust-03{
  top: 17px;
  right: -12px;
}
.interview-01-deco-illust-04{
  top: 377px;
  right: -22px;
}
.interview-01-deco-illust-05{
  top: -20px;
  right: -222px;
}
.interview-01-deco-illust-06{
  top: -20px;
  right: 10px;
}
.interview-01-deco-illust-07{
  top: 250px;
  left: -22px;
}
.interview-01-deco-photo-03{
  top: -60px;
  left: 15px;
}
.interview-01-deco-photo-04{
  top: 59px;
  right:-20px;
}
  /* interview-02 */
.interview-02-deco-photo-01{
  top: -111px;
  right:-43px;
}
.interview-02-deco-illust-01{
  top: -312px;
  right: -17px;
}
.interview-02-deco-illust-02{
  top: -51px;
  left: -83px;
}
.interview-02-deco-illust-03{
  top: 87px;
  right:-118px;
}
.interview-02-deco-illust-04{
  top: 137px;
  left:-30px;
}
.interview-02-deco-illust-05{
  top: 87px;
  right:-30px;
}
.interview-02-deco-illust-06{
  top: 297px;
  left: -467px;
}
  /* interview-03 */
.interview-03-deco-photo-01{
  top: -51px;
  left: -28px;
}
.interview-03-deco-illust-01{
  top: -97px;
  right: -18px;
}
.interview-03-deco-illust-02{
  top: 0;
  right: -18px;
}
.interview-03-deco-illust-02-sp{
  display: none;
}
.interview-03-deco-illust-03{
  top: 230px;
  right: -18px;
}
.interview-03-deco-illust-04{
  top: 180px;
  right: -100px;
}
.interview-03-deco-illust-05{
  top: -20px;
  right: -18px;
}
.interview-03-deco-illust-05-sp{
  display: none;
}
/* interview-04 */
.interview-04-deco-photo-01{
top: 0px;
right: 10px;
}
.interview-04-deco-illust-01{
top: -250px;
right: -18px;
}
.interview-04-deco-illust-02{
top: -110px;
left: 40px;
}
.interview-04-deco-illust-03{
top: 20px;
right: -10px;
}
.interview-04-deco-illust-04{
top: -50px;
right: -100px;
}
.interview-04-deco-illust-05{
top: 20px;
right: -100px;
}
.interview-04-deco-illust-06{
top: 0px;
right: 20px;
}
.interview-04-deco-illust-07{
top: 30px;
right: -20px;
}
.interview-04-deco-illust-01-sp,
.interview-04-deco-illust-04-sp,
.interview-04-deco-illust-07-sp{
  display: none;
}

@media screen and (max-width: 768px){
  .interview-block{
    background-size: 100vw;
    padding: 1.3vw;
  }
  .interview-block-inner {
    padding-bottom: 20px;
  }
  .interview-main-visual {
    margin-bottom: 3vw;
  }
  .interview-read-document{
    font-size: 4vw;
    line-height: 7vw;
  }
  .interview-read-deco-margin{
    padding-bottom: 85vw;
    margin-bottom: 3vw;
  }
  .interview-read-document{
    overflow: hidden;
  }
  
  .interview-quetion-answer-block{
    padding: 0 1.3vw 8vw;
  }
  .interview-answer-block {
    padding: 0 0 2vw 17vw;
    background-repeat: no-repeat;
    background-size: 15vw;
    min-height: 15vw;
  }
  
  .profile-block{
    min-height: inherit;
    margin: 26vw 1.3vw 8vw 22vw;
    padding: 3vw;
  }

  .profile-image{
    width: 34vw;
    left: -20vw;
    top:-4vw;
  }
  .profile-title{
    font-size: 9vw;
    top:-10vw;
    right: 0;
  }
  .profile-category-title{
    font-size: 2rem;
    padding-left: 14vw;
  }
  .profile-document{
    font-size: 1.4rem;
    padding-bottom: 3vw;
    padding-left: 14vw;
  }
  .profile-link-button a{
    font-size: 3.7vw;
    padding: 1.3vw;
  }
  
  .interview-esports-caster .profile-block {
      margin-top: 6vw;
  }
  .interview-movie-producer .interview-read-deco-margin {
      padding-bottom: 55vw;
  }
  
  /* デコレーション写真、イラスト */
  .interview-01-deco-photo-01 img{ width: 40vw}
  .interview-01-deco-photo-01{
    top:inherit;
    bottom: 32vw;
    left: 8vw;
  }
  .interview-01-deco-photo-02 img{ width: 40vw}
  .interview-01-deco-photo-02{
    top:inherit;
    bottom: 9vw;
    right:5vw;
  }
  .interview-01-deco-illust-01 img{ width: 25vw}
  .interview-01-deco-illust-01{
    top:inherit;
    bottom: 6vw;
    left: -2px;
  }
  .interview-01-deco-illust-02 img{ width: 65vw}
  .interview-01-deco-illust-02{
    top:inherit;
    bottom: 40vw;
    right: -30vw;
  }
  
  .interview-01-deco-illust-03,
  .interview-01-deco-illust-04,
  .interview-01-deco-illust-05,
  .interview-01-deco-illust-06,
  .interview-01-deco-illust-07,
  .interview-01-deco-photo-03,
  .interview-01-deco-photo-04{
    display: none;
  }
  
  /* interview-02 */
  .interview-02-deco-photo-01 img{ width: 50vw}
  .interview-02-deco-photo-01{
    top: inherit;
    bottom: 4vw;
    right:1.9vw;
  }
  .interview-02-deco-illust-01,
  .interview-02-deco-illust-03,
  .interview-02-deco-illust-04,
  .interview-02-deco-illust-05{
    display: none;
  }
  .interview-02-deco-illust-02 img{ width: 46vw}
  .interview-02-deco-illust-02{
    top: inherit;
    bottom: 9vw;
    left: -8.8vw;
  }
  .interview-02-deco-illust-06 img{ width: 50vw}
  .interview-02-deco-illust-06{
    top: 39.2vw;
    left: -37.6vw;
  }
  
  /* interview-03 */
  .interview-03-deco-photo-01 img{ width: 50vw}
  .interview-03-deco-photo-01{
    top:inherit;
    bottom: 0;
    left: 3vw;
  }
  .interview-03-deco-illust-01 img{ width: 35vw}
  .interview-03-deco-illust-01{
    top:inherit;
    bottom: 16vw;
    left: 55vw;
    transform: rotateZ(18deg);
  }
  .interview-03-deco-illust-02{
    display: none;
  }
  .interview-03-deco-illust-02-sp img{ width: 20vw}
  .interview-03-deco-illust-02-sp{
    display: block;
    top: 34vw;
    left: -20vw;
  }
  .interview-03-deco-illust-03{
    display: none;
  }
  .interview-03-deco-illust-04{
    display: none;
  }
  .interview-03-deco-illust-05{
    display: none;
  }
  .interview-03-deco-illust-05-sp img{ width: 15vw}
  .interview-03-deco-illust-05-sp{
    display: block;
    top: 55vw;
    left: -20vw;
  }
  
  /* interview-04 */
  .interview-04-deco-photo-01 img{ width: 50vw}
  .interview-04-deco-photo-01{
    top:inherit;
    bottom: 15vw;
    left: 45vw;
  }
  .interview-04-deco-illust-01,
  .interview-04-deco-illust-02,
  .interview-04-deco-illust-03,
  .interview-04-deco-illust-04,
  .interview-04-deco-illust-05,
  .interview-04-deco-illust-06,
  .interview-04-deco-illust-07{
    display: none;
  }
  .interview-04-deco-illust-01-sp img{ width: 15vw}
  .interview-04-deco-illust-01-sp{
    display: block;
    top: 32vw;
    left: -8vw;
  }
  .interview-04-deco-illust-04-sp img{ width: 20vw}
  .interview-04-deco-illust-04-sp{
    display: block;
    top: 45vw;
    left: -17vw;
  }
  .interview-04-deco-illust-07-sp img{ width: 35vw}
  .interview-04-deco-illust-07-sp{
    display: block;
    bottom: 23vw;
    left: 5vw;
  }
}

@media (min-width: 430px) and (max-width: 768px) {
  .interview-02-deco-illust-06{
    top: 35.2vw;
    left: -48.6vw;
  }
  .kokoroe-five-tips-detail .step-number img{
    width: 8vw;
  }
}