/* ------main visiual------ */
#main-box > .full_img > .pc_img{
  width: 100%;
  height: calc(100vw*1094/1628);
}
#main-box > .full_img > .sp_img{
  width: 100%;
  height: calc(100vw*986/644);
}
/* ------word img------- */
#center-box > .word-img{
  margin-left: auto;
  margin-right: auto;
}

#end-box{
	max-width: 1100px;
　/*background-image: url(../img/top/index_intro_word-bg.png);
  background-repeat: repeat-y;*/
  display: flex;
  justify-content: space-between;
  margin:0 auto 50px;
  text-align:center;
}
#end-box .word-frame{
  max-width: 1100px;
  width: 80%;
  height: 500px;
  position: relative;

}
#end-box .word-frame iframe{
  overflow: scroll;
  /* border-style: solid;
  border-width: 30px; */
  /* border-left-color: var(--colorPink);
  border-top-color: var(--colorNavyBlue);
  border-bottom-color: var(--colorLightYellow);
  border-right-color: var(--colorGray); */
}
 /* Twitter　& News frame */
.frame{ 
	width: 50%;
	max-width: 600px;
	display: inline-block;
	margin:auto;
}
 
.frame_title_box{
	width:94%;	
	margin-bottom:0px;
	margin: auto;
}

.frame .frame-box{
	width: 94%;
	margin: auto;
}
#twitter_frame,
#news_frame {
	position: relative;
	height:600px;
	margin: 0 auto;
	background-image: url("../img/common/frame-bg.png");
	background-size: contain;
	padding: 1%;
	border-radius: 7px;
	} 
#end-box .frame-innerbox{
	background-color:#fff;
	height: 100%;
	border-radius: 4px;
	overflow: hidden;
}
.frame_decoration::before{
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 10px;
  height: 200px;
  background-color: var(--colorPink);
  border-style: solid;
  border-width: thin;
  border-color: var(--colorNavyBlue);
  transform: perspective(10px) rotateX(1deg);
}
.frame_decoration::after{
  content: "";
  position: absolute;
  right: 0px;
  top: 0px;
  width: 10px;
  height: 200px;
  background-color: var(--colorGray);
  border-style: solid;
  border-width: thin;
  border-color: var(--colorNavyBlue);
  transform: perspective(10px) rotateX(1deg);
}
.frame_decoration{
  position: absolute;
  top: 0px;
  width: 100%;
  height: 10px;
  background-color: var(--colorNavyBlue);
  border-style: solid;
  border-width: thin;
  border-color: var(--colorNavyBlue);
  transform: perspective(10px) rotateX(1deg);
}
.img-w{
	max-width:1060px;
	width: 100%;
	margin: 0 auto 50px;
}
.img-w >img{
	width: 100%;
}

@media screen and (max-width:750px){
	#center-box_3{
		margin-top: 26px;
	}
	#end-box{
    	display:block;
    }
	.frame{
		width: 98%;
		margin-top: 10%;
	}
	.frame_title_box{	
		width: 98%;
	}	
	.frame .frame-box{
		width: 98%;
	}
	.img-w{
	width: 96%;	
	}
}