@charset "utf-8";

/* CSS Document */

html,
body {
    height: 100%;
}

body {
    -webkit-text-size-adjust: none;
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}


/*----------------------------------------
cmn
----------------------------------------*/

.bold {
    font-weight: bold;
}

.purple {
    color: #ff337c;
}

.aqua {
    color: #00B9CE;
}

.textlayout{
    text-align: justify;
    font-feature-settings : "palt";
}

img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}


.ie8 * {
    zoom: 1;
}

.cmn .box_main {
    margin-bottom: 20px;
}

.ie_7 #gnav li a {
    padding: 10px 0px;
}

.ie_7 .sp_pic_hasejo {
    display: none!important;
}

.ie_7 .box_gnav {
    position: relative;
    z-index: 2000!important;
}


.sp_only {
    display: none;
}


.wideslider_base {
    top: 0;
    position: absolute;
}

.wideslider_wrap {
    top: 0;
    position: absolute;
    overflow: hidden;
}
.bg_gray {
    clear: both;
    background-color: #efefef;
}

.bg_black {
    clear: both;
    background-color: #494a50;
}

.bg_white {
    clear: both;
    background-color: #ffffff;
}

.bg_pink {
    clear: both;
    background-color: #ff337c;
}

.bg_blue {
    clear: both;
    background-color: #00b9ce;
}



/* =======================================
    ClearFixElements
======================================= */

.wideslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}

.wideslider ul {
    display: inline-block;
    overflow: hidden;
}


#contents h1 {
    text-align: center;
    margin-bottom: 40px;
}

#contents .box_text {
    max-width: 670px;
    margin: 0px auto 40px;
}

#contents .box_text p {
    font-size: 87.5%;
    line-height: 24px;
}

.box_gray {
    background-color: #f6f5f9;
    clear: both;
    padding: 40px 0px;
    margin-bottom: 40px;
}

#contents h2 {
    text-align: center;
}

.flow {
    text-align: center;
    margin-bottom: 40px;
}

.address_gallery a {
    color: #62bccf;
}

.border_b{
	border-bottom: 1px solid #cccccc;
}

.border_pink{
  display:block;
  border-top: 2px solid #ff337c;
}
.border_green{
  display:block;
  border-top: 2px solid #00b9ce;
}

/*----------------------------------------
top
----------------------------------------*/

#top #contents {
    max-width: 1000px;
    margin: 0px auto;
}

#top .box_main {
	position: relative;
	width: 100%;
	display: block;
}

#flefle_hasejyo{
    position: relative;
    padding-top:70px;
    display: block;
}

.sec_img{
	position: absolute;
	width: 25%;
	top: 18%;
	bottom: 0;
	left: 0;
	right: 0;
	display:block;
}


#flefle_hasejyo .box_main_rightbox{
	position: relative;
	width:70%;
	padding: 20px 0 90px;
	display: block;
	margin: 0;
	float: right;
}

#flefle_hasejyo h2 {
width: 100%;
text-align: left;
    margin: 0 0 20px;
}
#flefle_hasejyo h2 img{
    width: 357px;
}

#flefle_hasejyo p{
	font-weight: normal;
	margin-bottom: 0px;
    font-feature-settings : "palt";
}

#flefle_hasejyo p span{
 display: block;
}

#build_hasejyo .box_main , #live_hasejyo .box_main , #story .box_main , #interview .box_main{
	padding: 40px 0 ;
	display: block;
}

#build_hasejyo img.sec_img , #live_hasejyo img.sec_img , #story img.sec_img{
	top: 50px;
}

#story h2 img.sec_img{
    width: 200px;
}

#build_hasejyo .box_main h2 + p , #live_hasejyo .box_main h2 + p{
	position: absolute;
    display: block;
    width: 270px;
	left:0;
	top: 225px;
    font-size:0.8em;
    line-height: 1.6;
    font-feature-settings : "palt";
}
#build_hasejyo .box_main h2 + p span , 
#live_hasejyo .box_main h2 + p span
{
    display: initialt;
}
#story .box_main h2 + p span{
    display: block;
}

#story .box_main h2 + p{
	position: absolute;
    display: block;
    width: 260px;
	left:0;
	top: 190px;
    font-size:0.8em;
     line-height: 1.6;
}
#story a.story_img {
   overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
	width: 100%;	/*画像の幅*/
    position: relative;
    overflow:hidden;
    display: inline-block; 
}

#story a.story_img img {
	display: block;
	transition-duration: 0.3s;	
}
#story a.story_img:hover img {
	transform: scale(1.1);	
	transition-duration: 0.3s;	
}

#build_hasejyo  a.linkbutton , #live_hasejyo  a.linkbutton {
	position: absolute;
	bottom: 40px;
}
 #story  a.linkbutton{
	position: absolute;
	bottom: 45px;
}

#build_hasejyo .box_main_rightbox , #live_hasejyo .box_main_rightbox , #story .box_main_rightbox{
	position: relative;
	width:70.5%;
	padding: 0px;
	display: block;
	margin: 0;
	float: right;
}

#live_hasejyo {
position: relative;
    display: block;
}
#interview ul{
    text-align: center;
}

#interview li {
	overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
	width: 340px;	/*画像の幅*/
	height: 200px;
    position: relative;
    overflow:hidden;
    margin: 0 25px ;
    padding: 0;
    display: inline-block;
vertical-align: top;
}

#interview li.coming{
     background: #bbbbbb;
    color: #ffffff;
}

#interview li.coming h3{
position: relative;
top:50%;
text-align: center;
    margin: 0;
    padding: 0;
    line-height: 0;
        
}

#interview li h2{
   position: absolute;
   z-index: 100;
   width: 106px;
}

#interview .imgWrap:hover h2 img {
	transform: none;	
}

#interview a h3.caption {
	text-align: center;
	padding:50px 0 10px;
	color:#ffffff;
    font-size: 1.2em;
    line-height: 1.6;
    font-style:italic; 
    border-bottom: 1px solid #ffffff;
    margin: 0 40px 10px;
}

#interview a p.caption {
	text-align: center;
	color:#ffffff;
    font-size: 0.8em;
    line-height: 1.6;
}

#interview a .caption span {
display: block;    
}
#interview .mask{
	opacity:		1;	/* マスクを表示しない */
}
#interview a:hover .mask{
    	opacity:0;	/* マスクを表示する */
}




/*----------------------------------------
team Build
----------------------------------------*/

#build_page{
    width: 100%;
    display: block;
}
#build_page #contents{
    text-align: left;
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 110px auto 60px;
    padding: 0;
}

#build_page .left_column{
    width: 22%;
    display: inline-block;
    margin: 0 3% 0 0;
    vertical-align: top;
}

#build_page .right_column{
    width: 74%;
    display: inline-block;
    margin: 0;
    padding: 0;

}
#build_page h1 img.sec_img{
position: relative;
width: 95%;
}

#build_page h1 + p{
    margin: -20px 0 0;
    padding: 0;
    line-height: 1.6em;
    font-size: 0.8em;
    font-feature-settings : "palt";
    letter-spacing: 0;
}
#build_page h1 + p span{
display: inline;
width: 100%;
text-align: justify;    
}

#build_page .linkbutton{
    width: 90%;
}

#build_page h2 {
    color: #ff337c;
    margin: 20px 0 0px;
    font-size: 1.7em;
    text-align: left;
    width: 100%;
}

#build_page h2 + p{
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 15px;
    padding: 0;
    width: 100%;  
}

#build_page .inner{
width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

#build_page .inner .in_first {
    display:inline-block;
    width: 48%;
    float: right;
    margin: 0 0px; 0 0;
    padding: 0;
    position: relative;
}

#build_page .inner .in_first p{
 font-size : 1em;
    line-height: 1.6;
    font-weight: bold;
    margin: 0 0 30px;
    text-align: justify;
}

#build_page .inner .in_first img{
        width:100%;
       margin: 0 0 30px;
    padding: 0;
    display: block;
}

#build_page .inner .in_first h3{
    color: #ff337c;
    font-size: 0.9em;
    letter-spacing: 1px;
}

#build_page .inner .in_first h3 + p {
    font-weight: normal;
    font-size: 0.8em;
    text-align: justify;
    font-feature-settings : "palt";    
}

#build_page .inner .in_second{
    display:inline-block;
    width: 49%;
    float: left;
     margin: 0;
    padding: 0;
    position: relative;
}

#build_page .inner .in_second img{
    width:100%;
    margin: 0;
    padding: 0;
    display: block;
}

#build_page figure.Innovation{
    display: block;
    width: 100%;
    clear: both;
    padding-top: 50px;
    margin: 0;
}

#build_page figure.Innovation .ino_title{
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
   display: block;
    text-align: left;
}

#build_page figure.Innovation .ino_title img{
    width: 155px;
    position: relative;
    left: 0;
    margin: 0 0 0 -20px;
    padding: 0;
    
}

#build_page figure.Innovation .ino_title h3{
    color: #ff337c;
    position: absolute;
    margin: -75px 0 0 165px;
    padding: 0;
}

#build_page figure.Innovation ul li{
    display: inline-block;
    margin: 0px 10px 10px 0;
    position: relative;
    padding: 0;
    top:-30px;
    border: 1px solid #dddddd;
}
#build_page figure.Innovation ul li img{
    height: 176px;
}
#build_page figure.Innovation ul li.pic_min{
    width: 200px;
}
#build_page img.dritsuka{
  width: 145px!important;
  float: right;
  shape-margin: 5px;
  shape-outside: polygon(115px 33px, 107.89% 29.22%, 107.32% 75.52%, 96px 102px, 25px 112px, -3px 54px, 64px 33px);
  -webkit-shape-outside：polygon(115px 33px, 107.89% 29.22%, 107.32% 75.52%, 96px 102px, 25px 112px, -3px 54px, 64px 33px);
}
#build_page .inner .in_first p.drituka-p{
  font-weight: normal;
  font-size: 0.8em;
  font-feature-settings: "palt";    
}

/*----------------------------------------
Createepage
----------------------------------------*/
#create_page{
    width: 100%;
    display: block;
}
#create_page #contents{
    text-align: left;
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 110px auto 60px;
    padding: 0;
}

#create_page .left_column{
    width: 22%;
    display: inline-block;
    margin: 0 3% 0 0;
    vertical-align: top;
}

#create_page .right_column{
    width: 74%;
    display: inline-block;
    margin: 0;
    padding: 40px 0 0 0;
    position: relative;
    background: white;
    z-index: 1;

}
#create_page h1 img.sec_img{
position: relative;
width: 95%;
}

#create_page h1 + p{
    margin: -20px 0 0;
    padding: 0;
    line-height: 1.6em;
    font-size: 0.8em;
    font-feature-settings : "palt";
    letter-spacing: 0
}
#create_page h1 + p span{
display: inline;
width: 100%;
text-align: justify;    
}
#create_page .linkbutton{
    width: 90%;
}

#create_page .title_box{
    position: relative
}
.mainphoto{
    width: 350px;
    margin-bottom: 30px; 
}
#create_page h2.cri_title{
    position: absolute;
    color: #00b9ce;
    border-bottom: 1px solid #00b9ce;
    text-align: left;
    margin: 0;
    padding: 0;
    top: 40px;
    right: 0;
    width: 49%;
    float: right;
}

#create_page h2.cri_title + p{
    position: absolute;
    top: 95px;
    font-size: 1.2em;
    font-weight: bold;
    left: 378px;
    line-height: 1.4;
}
#create_page h2.cri_title + p span ,
#create_page .criate_plofile span
{
    display: block;
}

#create_page .criate_plofile{
    position: absolute;
    top: 210px;
    left: 378px;
    font-size: 0.8em;
    line-height: 1.6;
    border-left: 1px solid #00b9ce;
    padding: 0 0 0 8px
}

#create_page .right_column .inner{
    border-top:1px solid #808080;
    padding: 30px 0 0 0;
}
#create_page .inner{
width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

#create_page .inner .in_first {
   display:inline-block;
    width: 36%;
    float: left;
     margin: 0;
    padding: 0;
    position: relative;
}

#create_page .inner .in_first p{
 font-size : 1em;
    line-height: 1.6;
    font-weight: bold;
    margin: 0 0 30px;

}

#create_page .inner .in_first img{
    width:100%;
    margin: 0 0 30px;
    padding: 0;
    display: block;
}

#create_page .inner .in_second p {
    font-weight: normal;
    text-align: justify;
    margin-top: -.5em;
}

#create_page .inner .in_second{
     display:inline-block;
    width: 61%;
    float: right;
    margin:  0;
    padding: 0;
    position: relative;
}

#create_page .layout-2{
  width: 100%;
    margin-top: -.5em;
    padding: 0;
  overflow: hidden;/*float解除*/    
    font-weight: normal;
    font-size: 0.8em;
    text-align: justify;
}
#create_page .layout-2 .space {
  float: right;/*画像の位置を右下にしたい場合はright*/
  height: 10em/*画像上の余白の高さ*/
}
#create_page .layout-2 .layout2-img {
  float: right;/*画像の位置を右下にしたい場合はright*/
  clear: both;/*.spaceのfloat解除*/
  margin: .5em  0 0 1.2em;/*画像の周りの余白*/
  width: 290px;
}
#create_page .inner p.interview_date{
    text-align: left;
    color: #5d5c5c;
    font-size: 0.7em;
    line-height: 3em;
    font-feature-settings : "palt";
}
#create_page .inner .layout-2 p.interview_date{
    text-align: left;
    color: #5d5c5c;
    font-size: 0.9em;
    line-height: 2.2em;
    font-feature-settings : "palt";
}

/*----------------------------------------
Story_page
----------------------------------------*/
#story_page .bb_glay{
position: relative;
top: 111px;
display: block;
z-index: 100;
margin: 0 0 0 500px;
}
#story_page{
    width: 100%;
    display: block;
}
#story_page #contents{
    text-align: left;
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 110px auto 60px;
    padding: 0;
}

#story_page .left_column{
    width: 22%;
    display: inline-block;
    margin: 0 3% 0 0;
    vertical-align: top;
}

#story_page .right_column{
    width: 74%;
    display: inline-block;
    margin: 0;
    padding: 50px 0 0 0;
    border-top:1px solid #808080; 

}
#story_page h1 img.sec_img{
position: relative;
width: 95%;
}

#story_page h1 + p{
    margin: -20px 0 0;
    padding: 0;
    line-height: 1.6em;
    font-size: 0.8em;
    font-feature-settings : "palt";
    letter-spacing: 0
}
#story_page  h1 + p span{
display: block;
width: 100%;
text-align: justify;    
}

#story_page h2{
    margin: 30px 0 10px;
    text-align: left;  
    color: #404040;
    font-size: 1.4em;
    line-height: 1.6;
}

#story_page h2 span{
 display: block;    
}

#story_page h2 + p , #story_page .pic_pju_01 , 
#story_page .pic_pju_01 +p{
    margin-bottom: 30px; 
}

#story_page .right_column .inner{
    padding: 0px 0 30px 0;
}


#story_page .inner{
width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    height: auto;
    position: relative;
    overflow: auto;
}

#story_page .inner .in_first {
   display:inline-block;
    width: 48.5%;
    float: left;
     margin: 0;
    padding: 0;
    position: relative;
}

#story_page .inner .in_first img{
    width:100%;
    margin: 0px;
    padding: 0;
    display: block;
}

#story_page .inner .in_second{
     display:inline-block;
    width: 48.5%;
    float: right;
    margin:  0;
    padding: 0;
    position: relative;
}

#story_page .inner .fig_cap{
  font-size: 0.8em;
  line-height: 1.6;
  color: #48494f;
   display: block;
    float: right;
    width: 80%;
    font-feature-settings : "palt";
    margin: 20px 0 0;
}



/*----------------------------------------
Interview_page
----------------------------------------*/

#interview_page{
      width: 100%;
    display: block; 
    margin: 0;
    padding: 100px 0 90px;
}

#interview_page #contents {
    text-align: left;
    position: relative;
    max-width: 800px;
    margin: 0px auto;
    padding: 60px 100px;
    display: block;
}

#interview_page .box_main{
    width: 100%;
    display: block;  
}

#interview_page .number{
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
        
}

#interview_page h1 img{
width: 393px;
}

#interview_page .textbox{
    margin: 30px 50px;
}

#interview_page p{
    letter-spacing: 1;
    font-feature-settings : "palt";
}
.comment{
    margin: 0  0 0 40px;
    text-align: justify;
}
.comment:before {
    content: '';
    position: absolute;
    margin: 0 0 0 -40px;
    font-weight: bold;
}

.tsuruta::before{
    content: '鶴田：';
    color: #00b9ce;
}
.hayasaka::before{
    content: '早坂：';
    color: #ff337c;
}

.interview_date{
    text-align: right;
    color: #5d5c5c;
    font-size: 0.8em;
}

#interview_plofile{
    border: 1px solid #808080;
    padding: 0px 30px 20px;
}

#interview_plofile ul li{
    display: inline-block;
    width: 47%;
    text-align: justify;
    margin: 0 30px 0 0 ;
    
}

#interview_plofile ul li:last-child{
    margin: 0;
    padding: 0;
    width: 48.5%;
}

#interview_plofile ul li p{
    font-size: 0.8em;
    line-height: 1.6;
}

#interview_plofile .img-wrap-left , 
#interview_plofile .img-wrap-right {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;   
}
#interview_plofile .job {
    position: absolute; 
    font-size: 14px;
    line-height: 1.5;
}
#interview_plofile .img-wrap-left .job{ 
    top:35px;
    left:162px;
}
#interview_plofile .img-wrap-right .job{ 
    top:35px;
    left:162px;
}


#interview_plofile .img-wrap-left .name{ 
    position: absolute;
    top:110px;
    left:162px;
    font-size: 17.5px;
    font-weight: bold;
    color: #00b9ce;
}
#interview_plofile .img-wrap-right .name{ 
    position: absolute;
    top:135px;
    left:162px;
    font-size: 17.5px;
    font-weight: bold;
    color: #ff337c;
}

#interview_plofile img{
    width: 315px;
    margin: 0 0 -10px 0;
    padding: 0;
    display: block;
}




/** VARIABLES
===================================*/

.pink {
    color: #ff337c;
}


/*-- 1200px 以上 --*/
@media screen and (min-width:1200px) {
    #story_page .bb_glay{
margin: 0 0 0 1000px;        
    }
}

/*-- 1024px ▶︎ --*/
@media screen and (max-width:1024px) {
    .inner {
        margin: 0px auto;
    }
    .box_gray .inner {
        max-width: 650px;
    }
    #top .box_detail_project dd {
        font-size: 65%;
    }

    #build_page #contents{
       width: 97%;
    }

    #contents .select_page {
        margin-bottom: 100px;
    }
    #contents .box_comment .inner_comment p {
        max-width: 320px;
    }


}


/*-------------------
960px タブレット ▶︎  PC
-----------------------*/
@media screen and (max-width:960px) {
#top #contents {
    max-width: 960px;
    margin: 0px auto;
    padding: 0 40px;
    height: auto;
    display: block;
}
    
/*-- ▼ TOP ▼--*/

#flefle_hasejyo .sec_img{
	position: relative;
	width: 35%;
	display:block;
    padding: 0;
    margin:  -20px auto 0;
}


#flefle_hasejyo .box_main_rightbox{
	position: relative;
	width:100%;
	padding: 20px 0 40px;
	display: block;
	margin: 0;
	float: right;
}
    
#flefle_hasejyo h2{
	text-align:center;
	margin-bottom: 20px;
}

#flefle_hasejyo p span{
 display:inline;
}

    
#build_hasejyo .box_main , #live_hasejyo .box_main , #story .box_main , #interview .box_main{
	padding: 10px 0;
}

#build_hasejyo img.sec_img , #live_hasejyo img.sec_img , #story img.sec_img{
	position: relative;
	width: 35%;
	display:block;
    padding: 0;
    margin: 0 auto;
   }

#build_hasejyo .box_main h2 + p , #live_hasejyo .box_main h2 + p{
	position: relative;
    display: block;
    width: 100%;
    top: 70px;
    font-size: 1em;
    text-align: center;
    margin: 0 0  20px 0;
    display: block;
}    
#build_hasejyo .box_main h2 + p span{
    display: block;
}
#build_hasejyo .box_main_rightbox , #live_hasejyo .box_main_rightbox , #story .box_main_rightbox{
	position: relative;
	width:100%;
	padding: 0px;
	display: block;
	margin: 0;
	float: none;
    top:60px;
}
#build_hasejyo  a.linkbutton , #live_hasejyo  a.linkbutton{
	position: relative;
    margin: 15px  auto 50px;
    height: auto;
    display: block;
    bottom: 0;
} 
#story  a.linkbutton{
	position: relative;
    margin: 60px  auto 50px;
    bottom: 0;
} 

#story .box_main h2 + p{
	position: relative;
    display: block;
    width: 100%;
    top: 60px;
    font-size:1em;
    text-align: center;
    margin: 10px auto 20px;
    float: none;
}
#interview ul{
    text-align: center;
    margin-bottom: 30px
}
#interview li {
	overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
	width: 340px;	/*画像の幅*/
	height: 200px;
    position: relative;
    overflow:hidden;
    margin: 30px 25px 0;
    padding: 0;
    display: inline-block;
}

#build_page{
    text-align: center;
    width: 100%;
    display: block;
}
#build_page #contents{
    text-align: left;
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 90px auto 60px;
    padding: 0;
}
#build_page .left_column{
    width: 100%;
    display: block;
    margin: 0;
    vertical-align: top;
    text-align: center;
}

#build_page .right_column{
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;

}
#build_page h1 img.sec_img{
position: relative;
width: 30%;
    margin: 0 auto;
}
#build_page h1 + p{
    margin: -20px auto 0;
    padding: 0;
    line-height: 1.4em;
    font-size: 1.1em;
    font-weight: bold;
    width: 90%
}
#build_page h1 + p span{
display:inline;  
}
#build_page .linkbutton{
    width: 30%;
    margin: 0 auto 40px;
}
#build_page h2 {
    margin: 30px auto 0;
    font-size: 1.7em;
    text-align: center;
    width: 100%;
}

#build_page h2 + p{
    font-weight: bold;
    margin: 0 0 15px;
    text-align: center;
}
#build_page .inner{
    margin: 0 auto ;
    width: 95%
}    
#build_page .inner .in_first p{
    margin: 0 0 20px;
}
#build_page .inner .in_first img{
       margin: 0 0 20px;
}
    
#interview_page #contents{
    padding-top: 60px;
    padding-bottom: 60px;
    }
 
     
#interview_page .textbox{
    margin: 3vw 3vw;
    }
#interview_plofile{
    padding: 3vw 3vw;        
    }
#interview_plofile ul li{
    margin: 0 3vw 0 0;
    vertical-align: top;
    width: 48%;
}
#interview_plofile ul li:last-child{
    width: 48%;
    margin: -3vw 0;
    }
#interview_plofile .img-wrap-left .job , 
#interview_plofile .img-wrap-right .job
    { 
    font-size: 13px;
}
#interview_plofile .img-wrap-left .name{ 
    font-size: 17px;
}
#interview_plofile .img-wrap-right .name{ 
    font-size: 17px;
}
    
#create_page #contents{
    text-align: left;
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 110px auto 60px;
    padding: 0;
}

#create_page .left_column{
    width: 100%;
    display: block;
    margin: 0;
    vertical-align: top;
    text-align: center;
}

#create_page .right_column{
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}
#create_page h1 img.sec_img{
position: relative;
width: 30%;
    margin: 0 auto;
}
#create_page h1 + p{
    margin: -20px auto 0;
    padding: 0;
    line-height: 1.4em;
    font-size: 1.1em;
    font-weight: bold;
    width: 90%;
    font-feature-settings : normal;
}
#create_page h1 + p span{
display:inline;  
}
#create_page .linkbutton{
    width: 30%;
    margin: 0 auto 40px;
}    
#create_page .inner{
    margin: 0 auto ;
    width: 95%;
}    
#create_page .inner .in_first p{
    margin: 0 0 20px;
}
#create_page .inner .in_first img{
       margin: 0 0 20px;
}
#create_page .title_box{
padding: 20px 3vw 0;
    margin:  0 auto;
    }
    #create_page .title_box .tite_box_left{
    width: 45%;
    display: inline-block;
    vertical-align: top;
    margin: 0 2vw 0 0;
    }
    #create_page .title_box .tite_box_right{
    width: 52%;
    display: inline-block;
    margin: 0;
    float:right;
    text-align: left;
    }
.mainphoto{
    width: 100%;
}
#create_page h2.cri_title{
    position: relative;
    border-bottom: 1px solid #00b9ce;
    text-align: left;
    margin: 0;
    padding: 0;
    top: 5vw;
    left: 0px;
    width: 100%;
    float: right;
}

#create_page h2.cri_title + p{
    position: relative;
    top:7vw;
    left: 0px;
}    
#create_page .criate_plofile{
    position: relative;
    top: 9vw;
    left: 0px;
    display: block;
}
    
/*Story page--*/
#story_page .bb_glay   {
display: none;
}  
#story_page #contents{
    text-align: left;
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 110px auto 60px;
    padding: 0;
}
#story_page .left_column{
    width: 100%;
    display: block;
    margin: 0;
    vertical-align: top;
    text-align: center;
}

#story_page .right_column{
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}
#story_page h1 img.sec_img{
position: relative;
width: 30%;
    margin: 0 auto;
}
#story_page h1 + p{
    margin: -20px auto 40px;
    padding: 0;
    line-height: 1.4em;
    font-size: 1.1em;
    font-weight: bold;
    width: 90%;
    font-feature-settings : normal;
}
#story_page h1 + p span{
display:inline;  
}
#story_page .inner{
    margin: 0 auto ;
    width: 100%;
}    
#story_page h2{
    font-weight: normal;
    margin: 30px 3vw 20px;
}
#story_page h2 + p , 
#story_page .pic_pju_01 +p , 
#inner03 + p{
     margin: 0px 3vw 30px;       
}
#inner01 .textlayout , 
#inner02 .in_second .fig_cap , 
#inner03 .textlayout{
    margin-right:3vw;       
}
#inner02 .textlayout{
    margin-left:3vw;       
}
}
/*-----------------------------
768px タブレット2 ▶︎ タブレット1
-------------------------------*/
@media screen and (max-width:768px) {
#interview_page {
        padding-bottom: 60px; 
    }
#interview_page #contents{
        padding: 60px 0 40px;
    }
#interview_page .textbox{
        margin: 3vw 6vw;
    }
#interview_plofile {
        margin: 3vw 6vw;
        
    }
    #interview_plofile ul li{
        display: block;
        width: 100%;
    }
    #interview_plofile ul li:last-child{
        width: 100%;  
        margin: 0 0 20px;
    }

	
}

/*---------------------
600px SP横 ▶︎ タブレット 
-----------------------*/
@media screen and (max-width:600px) {
/*-- ▼Top▼ --*/
#top #contents {
    max-width: 600px;
}
    
#flefle_hasejyo .sec_img{
	width: 200px;
    padding: 0 ;
    margin: -40px auto 0;
}
#flefle_hasejyo .box_main_rightbox{
	padding: 20px 0 30px;
    text-align: justify;
}
    
#build_hasejyo .box_main , #live_hasejyo .box_main , #story .box_main , #interview .box_main{
}
#build_hasejyo img.sec_img , #live_hasejyo img.sec_img , #story img.sec_img{
	width: 200px;
    top:20px;
   }
#build_hasejyo .box_main h2 + p , #live_hasejyo .box_main h2 + p{
    top: 40px;
    width: 80%;
    margin: 0 auto 20px;
    text-align: center;
}    
#build_hasejyo .box_main_rightbox , #live_hasejyo .box_main_rightbox , #story .box_main_rightbox{
    top:30px;
}
#build_hasejyo  a.linkbutton , #live_hasejyo  a.linkbutton {
    margin: -20px  auto 50px;
} 
#story  a.linkbutton{
    margin: 20px  auto 50px;
} 
#story .box_main h2 + p{
    top: 30px;
    width: 80%;
    text-align: center;
}
    
#build_page h1 img.sec_img , 
#create_page h1 img.sec_img ,
#story_page h1 img.sec_img{
width: 260px;
}
#build_page .linkbutton , 
#create_page .linkbutton{
    width: 60%;
}
#build_page .inner .in_first {
    display:inline-block;
    width: 100%;
    float: none;
    margin: 0 0px; 0 0;
    padding: 0;
    position: relative;
}
#build_page .inner .in_second{
    display:inline-block;
    width: 100%;
    float: none;
     margin: 0;
    padding: 0;
    position: relative;
}
    

#build_page figure.Innovation .ino_title{
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
   display: block;
    text-align: center;
}

#build_page figure.Innovation .ino_title img{
    width: 260px;
    position: relative;
    margin: 0px;
    padding: 0;
}

#build_page figure.Innovation .ino_title h3{
    position: relative;
    margin: 20px 0;
    padding: 0;
}

#build_page figure.Innovation ul li{
    display: inline-block;
    width: 100%;
    margin: 0px 0px 2vw 0px;
    position: relative;
    padding: 0;
    top: 0;
}
#build_page figure.Innovation ul li img{
    height: auto;
}
   #build_page figure.Innovation ul li.pic_min{
    width: 100%;
}


    
#create_page .right_column .inner{
    border-top:1px solid #808080;
    padding: 30px 0 0 0;
}
#create_page .title_box{
padding: 20px 3vw 0;
    margin:  0 auto;
    }
    #create_page .title_box .tite_box_left{
    width: 100%;
    display: block;
    margin: 0 2vw 0 0;
    float: none;
    }
    #create_page .title_box .tite_box_right{
    width: 100%;
    display: block;
    margin: 0;
    text-align: left;
    float: none;
    }
.mainphoto{
    display: block;
    width: 60%;
    margin: 0 auto;
}
#create_page h2.cri_title{
    border-bottom: 1px solid #00b9ce;
    text-align: center;
    margin: 20px 0;
    padding: 0;
    top: 0;
    right: 0;
    width: 100%;
    float: none;
}
#create_page h2.cri_title + p{
    display: block;
    margin: 0 auto 10px;
    text-align: center;
    top: 0;
    left: 0;
    width: 80%;
}
#create_page h2.cri_title + p span ,
#create_page .criate_plofile span {
    display: inline;
    }
#create_page .inner .in_first {
   display:block;
    width: 100%;
    float: none;
}
    #create_page .inner .in_first img{
        margin: 2.5vw 0;
    }
#create_page .inner .in_second{
     display:block;
    width: 100%;
    float: none;
}
#create_page .inner .in_second p {
    margin-top: 0em;
}

#create_page .criate_plofile{
    top: 0;
    left: 0;
    padding: 0 0 0 8px;
    width: 50%;
    margin: 0 auto 30px;     
}
#create_page .layout-2{
  margin-top: 0;
}
#create_page .layout-2 .space {
  float: none;/*画像の位置を右下にしたい場合はright*/
  height: 0em/*画像上の余白の高さ*/
}
#create_page .layout-2 .layout2-img {
  margin: 2.5vw 0;
  width:100%;
}
    
#story_page .inner .in_first {
   display:block;
    width: 100%;
    float: none;
margin: 0 0 30px 0;
}
#story_page .inner .in_second{
     display:block;
    width: 100%;
    float: none;
}
    #story_page .inner .fig_cap{
        width: 93%;
        float: none;
        margin:20px 3vw 0; 
        text-align: justify;
    }
#inner01 .textlayout ,  
#inner03 .textlayout , 
#inner02 .textlayout{
    margin:0 3vw 0;       
}
 
}

/*--------------- 
480px SP縦 ▶︎ SP横 
--------------------*/
@media screen and (max-width:480px) {

/*-- ▼Top▼ --*/
#top #contents {
    max-width: 480px;
    padding: 0 20px;
}
#build_hasejyo .box_main h2 + p , 
#live_hasejyo .box_main h2 + p , 
#story .box_main h2 + p{
    width: 90%;
    text-align: justify;
}    
    
#interview li {
	overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
	width: 100%;	/*画像の幅*/
	height: 165px;
    position: relative;
    overflow:hidden;
    margin: 20px auto 5px;
    padding: 0;
    display: inline-block;
}
#interview a h3.caption {
	padding-top:33px;
}
    #contents h1 {
        margin-bottom: 20px;
        text-align: center;
    }

#build_page #contents{
    text-align: left;
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 0;
}
#build_page h1 + p ,
#create_page h1 + p
    {
    margin:  0 auto;
}
    #interview_page #contents{
        padding: 50px 0;
    }
    #interview_page h1 img{
        width: 80%;
    }
#create_page #contents{
    text-align: left;
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 0;
}

#create_page h2.cri_title + p{
    width: 100%;
}
#create_page p.criate_plofile{
    width: 70%;
} 
#story_page h1 + p {
        margin: 0 auto 20px;
    }
#story_page #contents{
    text-align: left;
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 0;
}
#interview_plofile .img-wrap-left .job , 
#interview_plofile .img-wrap-right .job{ 
    top:35px;
    left:156px;
    font-size: 12px
}
#interview_plofile .img-wrap-left .name ,
#interview_plofile .img-wrap-right .name 
    { 
    left:156px;
    }
}