@charset "UTF-8";
@media screen and (min-width: 768px){
 .sp {
  display: none
 }


html,
body,
.animation-box-style {
 height: 100%;
}

body {
 font-family: "MS PGothic", "Osaka", Arial, sans-serif;
 line-height: 1.6;
 background-image: url(../_image/bg.png);
 color: #333;
}

.contents {
 background-color: #fff;
}


/* リード----------------------------------------*/

.read {
 font-size: 0;
 width: 100%;
 margin: 0 auto;
 background-color: #f3f3f3;
}

.read-ill {
 width: 50%;
 display: inline-block;
 background-image: url(../_image/read.png);
 height: 250px;
 background-repeat: no-repeat;
 background-position: right;
}

.read-txt {
 vertical-align: top;
 display: inline-block;
 width: 34%;
 font-size: 20px;
 padding: 2% 0 0 0;
}


/* 本文----------------------------------------*/

.interviewWrap {
 background-image: url(../_image/bg3.png);
 background-repeat: repeat-y;
 background-position: center;
 background-color: #fff;
}

.interview {
 /*
 text-align: justify;
text-justify: inter-word;
 */
 background-color: #fff;
 width: 660px;
 border-left: 1px solid #d2d2d2;
 border-right: 1px solid #d2d2d2;
 margin: 0 auto;
 padding: 10px 60px 30px;
}

p {
 margin-top: 32px;
 font-size: 1.2em;
}

.interview-ttl {
 background: linear-gradient(transparent 0%, #ff9000 0%);
 line-height: 1.3em;
 font-size: 2em;
}

.interviewer {
 color: #ff9000;
}

.point {
 width: 75px;
 margin: 40px auto;
}

ul {
 font-size: 0;
 margin: 32px auto 0;
}

li {
 display: inline-block;
 width: 31.111%;
 margin: 1%;
 text-align: center;
}

li img {
 width: 100%;
 border:  1px solid #ccc;
}

/* SNS----------------------------------------*/
 ul.sns-list{
  margin: 20px auto;
  text-align: right;
  padding: 0;
 font-size: 0;
 }
ul.sns-list li{
  display: inline-block;
  width: 50%;
 margin: 0;
 }
ul.sns-list li img{
width: 60px;
 border: none;
 padding: 1px;
 }
ul.sns-list li a{
  display:block;
 }
.tw{background-color: #54abee;}
.fb{background-color: #385495;}


/* end media----------------------------------------*/
}




/* アニメーション1----------------------------------------*/

@keyframes anime {
 0% {
  width: 0;
  height: 100%;
  
 }
 50% {
  width: 100%;
  height: 100%;
 }
 100% {
  height: 645px;
  width: 100%;
 }
}

.animation-box {
 animation-name: anime;
 animation-duration: 2s;
 animation-timing-function: ease-in-out;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 animation-direction: forwards;
}

.animation-box-style {
 height: 100%;
 width: 0;
 background-repeat: no-repeat;
 background-position: top center;
 background-image: url(../_image/bg2.png);
}


/* アニメーション2----------------------------------------*/

@keyframes anime2 {
 0% {
  width: 0;
  height: 100%;
  left: -50px;
 }
 100% {
  height: 645px;
  width: 645px;
 }
}

.animation-box2 {
 animation-name: anime2;
 animation-delay: 2s;
 animation-duration: 1s;
 animation-timing-function: ease-in-out;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 animation-direction: forwards;
}

.animation-box-style2 {
 position: absolute;
 top: 0;
 left: 30%;
 background-repeat: no-repeat;
 background-image: url(../_image/main.png);
}


/* アニメーション3----------------------------------------*/

@keyframes anime3 {
 0% {
  width: 0;
  height: 100%;
    left: -50px;

 }
 100% {
  height: 314px;
  width: 482px;
 }
}

.animation-box3 {
 animation-name: anime3;
 animation-delay: 3s;
 animation-duration: 1s;
 animation-timing-function: ease-in-out;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 animation-direction: forwards;
}

.animation-box-style3 {
 position: absolute;
 top: 320px;
 left: 15%;
 background-repeat: no-repeat;
 background-image: url(../_image/ttl.png);
}


/* アニメーション4----------------------------------------*/

@keyframes anime4 {
 0% {
  width: 0;
  height: 100%;
  top: -100px;

 }
 50% {
  top: 40px;

 }
 100% {
  height: 314px;
  width: 482px;
 }
}

.animation-box4 {
 animation-name: anime4;
 animation-delay: 3.5s;
 animation-duration: 1s;
 animation-timing-function: ease-out-out;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 animation-direction: forwards;
}

.animation-box-style4 {
 position: absolute;
 top: 10px;
 left: 18%;
 background-repeat: no-repeat;
 background-image: url(../_image/launch.png);
}
















































@media screen and (max-width: 767px){
 .pc {
  display: none
 }

 img{
  max-width: 100%;
 }
 

body {
 font-family: "MS PGothic", "Osaka", Arial, sans-serif;
 line-height: 1.6;
 background-image: url(../_image/bg.png);
 color: #333;
}

.contents {
 background-color: #fff;
}


/* リード----------------------------------------*/

.read {
 font-size: 0;
 width: 100%;
 margin: 0 auto;
 background-color: #f3f3f3;
 padding-top: 96%;

}

.read-ill {
 width: 40%;
 display: inline-block;
 background-image: url(../_image/read.png);
 min-height: 250px;
 background-repeat: no-repeat;
 background-size: 250%;
  background-position: top 22% right 10%;

}

.read-txt {

 vertical-align: top;
 display: inline-block;
 width:52%;
 font-size: 14px;
 padding: 4%;
}


/* 本文----------------------------------------*/

.interviewWrap {
 background-image: url(../_image/bg3.png);
 background-repeat: repeat-y;
 background-position: center;
 background-color: #fff;
}

.interview {
 background-color: #fff;
 border-left: none;
 border-right: none;
 margin: 0 auto;
 padding: 10px 6% 30px;
}

p {
 margin-top: 32px;
 font-size: 1em;
}

.interview-ttl {
 background: linear-gradient(transparent 0%, #ff9000 0%);
 line-height: 1.3em;
 font-size: 1.5em;
}

.interviewer {
 color: #ff9000;
}

.point {
 width: 55px;
 margin: 40px auto;
}

ul {
 font-size: 0;
 margin: 32px auto 0;
}

li {
 display: inline-block;
 width: 31.111%;
 margin: 1%;
 text-align: center;
}

li img {
 width: 100%;
 border:  1px solid #ddd;
}

/* SNS----------------------------------------*/
 ul.sns-list{
  margin: 20px auto;
  text-align: right;
  padding: 0;
 font-size: 0;
 }
ul.sns-list li{
  display: inline-block;
  width: 50%;
 margin: 0;
 }
ul.sns-list li img{
width: 60px;
 border: none;
 padding: 1px;
 }
ul.sns-list li a{
  display:block;
 }
.tw{background-color: #54abee;}
.fb{background-color: #385495;}


 

/* アニメーション2----------------------------------------*/

@keyframes anime2 {
 0% {
  width: 0;
    left: 50px;
  
  
 }
100% {
  width: 100%;
  height: 100%;

 }
}

.animation-box2 {
 animation-name: anime2;
 animation-delay: .5s;
 animation-duration: .5s;
 animation-timing-function: ease-in-out;
 -webkit-animation-fill-mode: forwards;
 animation-direction: forwards;
}

.animation-box-style2 {
 position: absolute;
 top: 0;
  left: 0;
 background-repeat: no-repeat;
 background-size: 100%;
 background-image: url(../_image/mainSP.png);
}


 
/* end media----------------------------------------*/
}