/*//color//*/
.green{color:#4AB134;}
.sky{color:#00A7EA;}
.white{color:#FFF;}
.tbs_blue{color:rgba(0,80,255,1);}
/*//other//*/
.btn{
font-family: ab-yurumin, sans-serif;
font-style: normal;
font-weight: 400;
}

/*//main//*/
#relay_vehicle .mainArea{
width:100%;
background-image: linear-gradient(0deg, rgba(211, 240, 252, 1), rgba(255, 255, 255, 1) 77%, rgba(211, 240, 252, 1));
text-align: center;
}

#relay_vehicle .mainArea .btn{
text-align: center;
display: inline-block;
background: #4AB134;
color:#fff;
border-radius: 30px;
margin-top: 3em;
}

#relay_vehicle .mainArea .btn::after{
content:'';
display: inline-block;
background:url(../img/icon1.png) center center no-repeat;
background-size: contain;
width: 30px;
height:25px;
}
#relay_vehicle .btn:hover{
opacity:0.8;
}

@media all and (min-width:961px) {
#relay_vehicle{
background:url(../img/bubbleB.png) left 50px bottom 50px no-repeat;
background-size:8%;
}
#relay_vehicle .mainArea{
width:100%;
margin:0 auto;
}
#relay_vehicle .main_pos{
margin:0 auto;
}
#relay_vehicle .main_pos{
background:url(../img/main.png?new1026) center center no-repeat;
width:100%;
height:0;
padding-top:50.2777777777778%;
background-size:contain;
}
#relay_vehicle .mainArea .btn{
font-size: 220%;
padding:15px 25px;
}

.mainArea .in_box {
	width: 600px;
	margin:6em auto 0;
}

}

@media all and (max-width:960px) {
#relay_vehicle{
background:url(../img/bubbleB.png) left 10px bottom 180px no-repeat;
background-size:10%;
}
#relay_vehicle .main_pos{
background:url(../img/main_smp.png?new1026) center center no-repeat;
width:100%;
height:0;
padding-top: 117.7333333333333%;
background-size: contain;
}
#relay_vehicle .mainArea .btn{
font-size: 140%;
padding:15px 25px;
}
#relay_vehicle .mainArea .btn::after{
width: 25px;
height:20px;
}
.mainArea .in_box {
	width: 90%;
	margin:3em auto 2em;
	}

}

@media all and (max-width:340px) {
#relay_vehicle .mainArea .btn{
font-size: 120%;
padding:12px 20px;
}

}

/*//content//*/
#relay_vehicle .content article{
width: 100% !important;
}

@media all and (min-width:961px) {
#relay_vehicle .content article{
padding:8em 0 4em 0!important;
}
#relay_vehicle .content article:last-of-type{
padding:8em 0 !important;
}
#relay_vehicle .content article:nth-child(3){
background:url(../img/bubbleA.png) right 50px top 0 no-repeat;
background-size:8%;
}
}
@media all and (max-width:960px) {
#relay_vehicle .content article{
padding:4em 0 2em 0 !important;
}
#relay_vehicle .content article:last-of-type{
padding:4em 0 !important;
}
#relay_vehicle .content article:nth-child(3){
background:url(../img/bubbleA.png) right 10px top 0 no-repeat;
background-size:10%;
}
}


/*//Event Info//*/
#event h2{
background-image: url(../img/event_title.png);
background-repeat: no-repeat;
background-size: contain;
}

/*
#event h3 .midashi{
font-family: ab-yurumin, sans-serif;
font-style: normal;
font-weight: 400;
font-variant-ligatures:none;
letter-spacing:0 !important;
line-height:1.8;
}
#event h3 .midashi{
padding-bottom: .5em;
text-decoration:underline;
text-decoration-style:wavy;
text-underline-offset: 0.3em;
}
#event .btn{
display: block;
background:url(../img/event_btn.png) center center no-repeat;
background-size: contain;
}
*/

#event h3 .midashi{
display: block;
background: url(../img/event_h3-A.png) center center no-repeat;
background-size: contain;
width: 100%;
aspect-ratio:617/348;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

#event p.txt_box a{
  color:blue;
}
#event p.txt_box a:hover{
  color:rgba(0,80,255,1);
}


#event .btn{
font-family: noto-sans-cjk-jp, sans-serif;
display: block;
color: #4AB134;
background: #fff;
text-align: center;
width: 220px;
border-radius: 10px;
margin-top:2em;
padding:1em 0;
}
#event .btn span{
text-align: center;
}
#event .btn span::after{
content: " ➡︎";
}


#event .event_logo span{
display: block;
background:url(../img/event_logo.jpg) center center no-repeat;
background-size: contain;
width: 100%;
height: 0;
padding-top: 43.0939226519337%;
}
#event .btn2{
display: block;
background:url(../img/event_btn2.png) center center no-repeat;
background-size: contain;
}

#event .btn:hover,
#event .btn2:hover
{opacity: 0.8;}

#event p small{
font-size: 90%;
line-height: 1.5;
}

#event .in_box2 li:nth-child(2) p{
display: flex;
width:100%;
margin-top: 1em;
}
#event .in_box2 li:nth-child(2) p span:first-child{
white-space: nowrap;
color:#4AB134;
font-family: ab-yurumin, sans-serif;
font-weight: 400;
padding-right: 1em;
}
#event .in_box2 li:nth-child(2) p span:first-child span{
border: solid 2px;
border-radius: 30px;
padding:.2em 1em;
}

@media all and (min-width:961px) {
/*/in_box/*/
#event h2{
width:980px;
height:80px;
margin: auto;
background-position: left center;
}

#event h3{
width:300px;
}

/*
#event h3 .midashi{
font-size: 156%;
}
#event .btn{
width:190px;
margin:1em 0;
height:80px;
}
*/
#event p.txt_box{
height:300px;
line-height: 1.5 !important;
}
#event .in_box{
display: table;
table-layout: fixed;
width: 100%;
height:660px;
color:#fff;
margin: auto;
color:#fff;
}

#event .in_box ul{
display:table-cell;
vertical-align: middle;
background:url(../img/event_bg/img2.png) center center no-repeat;
width:1076px;
height:660px;
margin: auto;
}

#event .in_box li{
display:flex;
align-items: center;
margin: auto;
width:800px;
height:660px;
}
#event .in_box li div.set1,
#event .in_box li div.set2{
width: 400px;
}
#event .in_box .item1{
background:url(../img/event_bg/img1.png) right center no-repeat;
}
#event .in_box .item2{
background:url(../img/event_bg/img3.png) left center repeat-x;
}

#event .in_box .item1,
#event .in_box .item2{
display:table-cell;
vertical-align: middle;
width:auto;
}

#event .in_box .item1_smp,#event .in_box .item2_smp{
display:none;
}
/*/in_box2/*/
#event .in_box2 {
width: 100%;
background:url(../img/deco1.png) left 30px center no-repeat;
background-size:auto 150px;
}

#event .in_box2  ul{
display: flex;
align-items: center;
justify-content:space-between;
width:980px;
color: #00A7EA;
margin: auto;
}

#event .in_box2 li{
width:470px;
}
#event .in_box2 li:nth-child(1){
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}


#event .event_logo{
width:464px;
}

#event .btn2{
width: 150px;
height:49px;
margin-top:1em;
}
}


@media all and (max-width:960px) {
/*/in_box/*/
#event h2{
width:100%;
height:60px;
margin: auto;
background-position: center center;
}
#event h3{
width:50%;
position:absolute;
top:25%;right:10%;
}
/*
#event h3 .midashi{
font-size: 140%;
}
*/
#event p.txt_box{
height:300px;
font-size: 110%;
padding-right:30px;
}

#event .btn{
width:35%;
position:absolute;
top:55%;right:25%;
padding:.5em 0;
font-size: 100%;
}

/*
#event .btn{
width:35%;
height:25%;
position:absolute;
top:50%;right:25%;
}
*/
#event .in_box{
width: 100%;
color:#fff;
margin: auto;
color:#fff;
}

#event .in_box ul{
width:100%;
}

#event .in_box li{
display:flex;
flex-wrap: wrap;
margin:auto;
width:100%;
}
#event .in_box li div{
display:flex;
flex-wrap: wrap;
align-items: center;
}

#event .in_box li div.set1{
position: relative;
background:url(../img/event_bg/img_smp1.png?new) right center no-repeat;
background-size: contain;
width:100%;
height:0;
padding-top:80.7319698600646%;
}

#event .in_box li div.set2{
position: relative;
background:url(../img/event_bg/img_smp2.png?new) left center no-repeat;
background-size: contain;
width:100%;
height:0;
padding-top:80.7319698600646%;
}
#event .in_box li div.set2 p{
position:absolute;
/*top: 42%;*/
top: 40%;
left: 48%;
transform: translate(-50%, -40%);
-webkit-transform: translate(-50%, -40%);
-ms-transform: translate(-50%, -40%);
width:80%;
}

#event .in_box .item1,#event .in_box .item2{
display:none;
}

/*/in_box2/*/
#event .in_box2 {
width: 100%;
}

#event .in_box2  ul{
width:90%;
color: #00A7EA;
margin: auto;
}

#event .in_box2 li{
width:100%;
}
#event .in_box2 li:nth-child(1){
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
#event .event_logo{
width:95%;
margin-right:5%;
}
#event .btn2{
width: 150px;
height:49px;
margin:1em 5% 1em 0;
}
}

@media all and (max-width: 480px) {
#event h3 .midashi{
font-size: 110%;
}
#event p.txt_box{
font-size: 85%;
/*height:60%;*/
padding-right:10px;
}
#event .btn{
font-size: 80%;
}
}

@media all and (max-width:380px) {
#event h3{
width:50%;
position:absolute;
top:25%;right:10%;
}
#event h3 .midashi{
font-size: 106%;
}
#event .btn{
width:35%;
position:absolute;
top:55%;right:25%;
padding:.5em 0;
font-size: 80%;
}
}


@media all and (max-width:500px) {
#event .in_box li div.set2 p{
line-height: 1.4;
}
}
@media all and (max-width:340px) {
#event .in_box li div.set2 p{
line-height: 1.2;
font-size: 90%;
}
}
/*//About FCEV//*/
#about h2 {
background-image: url(../img/about_title.png);
background-repeat: no-repeat;
background-size: contain;
}

#about h2 small{
color:#4AB134;
display: block;
}
#about h2 span{
color:#00A7EA;
}

#about {
width: 100%;
}

#about .in_box{
display: table;
table-layout: fixed;
width: 100%;
color:#fff;
}
#about .in_box .item{
display:table-cell;
vertical-align: middle;
width:auto;
}


#about .in_box ul{
display:table-cell;
vertical-align: middle;
background: rgba(0,80,255,1);
border-radius: 0 30px 30px 0;
}
#about .in_box h3 span{
background:url(../img/about_h3-1.png) center center no-repeat;
background-size: contain;
}
#about .in_box2 h3 span{
background:url(../img/about_h3-2.png) center center no-repeat;
background-size: contain;
}
#about h3 span{
display: block;
width: 100%;
height:0;
padding-top: 52.9527559055118%;
margin-bottom:2em;
}

#about .no1 .midashi_smp .lazy,
#about .no2 .midashi .lazy,
#about .no3 .midashi .lazy
{
display: block;
background-size: contain;
width:100%;
height:0;
padding-top:23.4042553191489%;
}

#about .figure1{
display: block;
margin-bottom:1em;
}
#about .figure1 .lazy{
display: block;
width: 100%;
height:0;
padding-top:55.5427251732102%;
background-size: contain;
}

#about .figure2 .lazy{
display: block;
width: 100%;
height:0;
padding-top:56.3444108761329%;
background-size: contain;
}
#about .in_box2 ul{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:0;
}
#about .source{
text-align: left;
margin:4em auto 0;
display:block;
word-break:keep-all;
}

@media all and (min-width:961px) {
#about {
background:url(../img/deco2.png) right 30px center no-repeat;
background-size:auto 300px;
}
#about h2{
width:980px;
height:80px;
margin:0 auto 2em;
background-position: left center;
}

#about .in_box ul{
width:85%;
padding:100px 0 100px 0;
text-align: right;
}

#about .in_box ul li{
width:790px;
display: flex;
justify-content: flex-start;
margin: auto;
padding-left: 2em;
}

#about .no1 div:nth-child(1){
width:260px;
}

#about .no1 div:nth-child(2){
width:460px;
margin-left: 70px
}

#about .no1 .midashi_smp{
display:none;
}

#about .no1 .midashi{width: 300px}
#about .no1 .midashi .lazy{
display: block;
background-size: contain;
width:100%;
height:0;
padding-top: 53.4246575342466%;
}

#about .no2{
margin-top:50px !important;
margin-bottom:50px !important;
}

#about .no2 div:nth-child(1),
#about .no3 div:nth-child(1){
width:420px;
}

#about .no2 div:nth-child(2),
#about .no3 div:nth-child(2){
width:300px;
margin-left: 70px
}

#about .in_box2 ul{
width:980px;
margin:100px auto 0;
}

#about .in_box2 li:nth-child(1){
width:260px;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
#about .in_box2 li:nth-child(2){
width:260px;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
#about .in_box2 li:nth-child(3){
width:640px;
grid-column: 2 / 3;
grid-row: 1 / 3;
}
#about .source
{font-size: 90%;}
#about .in_box .source{
width:820px;
}
#about .in_box2 .source{
width:980px;
}
}

@media all and (max-width:960px) {
#about h2{
width:100%;
height:60px;
margin:0 auto 2em;
background-position: center center;
}
#about h3{
width: 200px;
margin: auto;
}

#about .in_box ul{
width:95%;
padding:4em 0;
}
#about .in_box li{
width:75%;
margin:auto;
padding-left:5%;
}

#about .in_box ul li div:first-child{
margin-bottom: 1em;}

#about .no1 .midashi{
display:none;
}
#about .no2{
margin-top:3em !important;
margin-bottom:3em !important;
}
#about .in_box2{
margin-top:3em;
}
#about .in_box2 ul{
width:80%;
margin: auto;
grid-template-columns: 1fr;
}
#about .in_box2 li:nth-child(1){
grid-row: 1 / 2;
}
#about .in_box2 li:nth-child(2){
margin-top:1em;
grid-row: 3 / 4;
}
#about .in_box2 li:nth-child(3){
grid-column: 1 / 2;
grid-row: 2 / 3;
}
#about .source
{font-size:70%;}
#about .in_box2 .source{
width:80%;
margin:2em auto 0;
}
}


/*//TBS’S CHALLENGE//*/
#challenge h2 {
background:url(../img/challenge_title.png) center bottom 10px no-repeat #00A7EA;
}

#challenge .in_box{
width: 100%;
color: #fff;
}

#challenge .car .lazy{
display: block;
background-size: contain;
width:100%;
height:0;
padding-top:61.375%;
}

#challenge .button{
text-align: center;
margin:0 auto;
font-family: ab-yurumin, sans-serif;
font-style: normal;
font-weight: 400;
font-variant-ligatures:none;
letter-spacing:0 !important;
line-height:1.8;
}

#challenge .button a{
display:block;
background: rgba(0,80,255,1);

border-radius: 50px;
color:#fff;
padding:.1em 0;
}

#challenge .button a:hover{
opacity: 0.8;
}

#challenge .button a span::before{
content: '▶︎ ';
font-size: 60%;
vertical-align: text-top;
}


@media all and (min-width:961px) {
#challenge h2{
height:300px;
background-size:580px;
border-radius: 50% / 100% 100% 0 0;
}

#challenge .button{
font-size: 160%;
width:340px !important;
}

#challenge .in_box{
background:url(../img/deco3.png) left 30px center no-repeat #00A7EA;
background-size:auto 150px;
}

#challenge .in_box p{
width: 800px;
margin:0 auto;
padding-top:2em;
}
#challenge .car{
display:inline;
width: 400px;
padding:0 30px 20px 0;
float: left;
}


#challenge .item{
height:300px;
background:#00A7EA;
border-radius: 50% / 0 0 100% 100%;
}
}

@media all and (max-width:960px) {

#challenge h2{
height:100px;
background-size:auto 45px;
border-radius: 50% / 100% 100% 0 0;
}


#challenge .button{
font-size: 120%;
width:60% !important;
}


#challenge .in_box{
width:100%;
margin:auto;
background: #00A7EA;
}

#challenge .in_box p{
width: 80%;
margin:0 auto;
padding-top:2em;
}
#challenge .car{
display:block;
width:60%;
margin:0 auto 2em;
}

#challenge .item{
height:100px;
background:#00A7EA;
border-radius: 50% / 0 0 100% 100%;
}
}
@media all and (max-width:340px) {
#challenge h2{
height:80px;
background-size:auto 40px;
}
#challenge .item{
height:80px;
}
}


/*//Let’s Make!//*/
#make h2 span{display: block;}
#make .btn{
text-align: center;
display: inline-block;
background: #4AB134;
color:#fff;
padding:10px 20px;
border-radius: 15px;
}
#make .btn span{
display: inline;
height:20px;
}
#make .btn span::after{
content:'';
display: inline-block;
background:url(../img/icon2.png) center center no-repeat;
background-size: contain;
width: 30px;
height:25px;
vertical-align:middle;
}

#make .btn:hover
{opacity: 0.8;}

#make p.caption{
text-align: right !important;
font-size: 80%;
}
#make p.att{
position: relative;
margin-top:.5em;
padding-left: 20px;
font-size: 90%;
line-height: 1.2;
}
#make p.att::before{
content:'※';
position: absolute;
left:0;
}

#make div.mov-box{
border:dashed 3px #4AB134;
padding:10px;
border-radius: 10px;
margin-top:2em;
cursor: pointer;
}

@media all and (min-width:961px) {

#make h2{
background:url(../img/make_title.png?new) center center no-repeat;
background-size: contain;
height:140px;
}
#make .in_box{
width: 600px;
margin:auto;
}
#make ul{
display: flex;
justify-content:space-between;
margin-bottom: 1em;
}
#make p.caption{
margin-top: .5em;
}
#make .btn{
margin-top: 3em;
min-width:240px;
}
#make .btn span{
font-size: 140%;
}
}

@media all and (max-width:960px) {
#make h2{
width:80%;
margin:auto;
}
#make h2 span{
background:url(../img/make_title_smp.png) center center no-repeat;
background-size: contain;
width: 100%;
height:0;
padding-top:68.75%;
}
#make .in_box{
width:90%;
margin:auto;
}
#make div.mov-box{
margin-bottom: .5em;
}
#make p.caption{
margin-bottom: 2em;
}
#make ul{
margin-bottom: 2em;
}
#make li{
text-align: center;
margin-top:1em;
}
#make .btn{
min-width:240px;
}
#make .btn span{
font-size: 120%;
}
}

/*	YouTube
============================== */
div.mov-inner {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-color:#000;
}
div.mov-inner iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

/*///////////////// lazy ////////////////*/
.lazy {position:relative;display:block;background:center top no-repeat;background-size:cover;margin:0 auto;}
.lazy img{position:absolute;top:0;left:0;}

/*///////////////// tbs player ////////////////*/
 div.mov-box{
	border:dashed 3px #4AB134;
	padding:10px;
	border-radius: 10px;
	margin-top:2em;
	cursor: pointer;
	}

/*///////////////// instagram ////////////////*/
#timelineArea {margin-top: 3em;}
#instagram h2{
font-family: ab-yurumin, sans-serif;
font-style: normal;
font-weight: 400;
font-variant-ligatures:none;
letter-spacing:0 !important;
line-height:1.8;
margin: 2em auto 1em;
}
#instagram h2 a{
display: block;
background: #00A7EA;
color:#fff;
border-radius: 8px;
padding:.1em 0;
}
#instagram h2 a:hover{
opacity: 0.8;
}
#timelineArea .gaibu{
font-size: 70%;
color:#00A7EA;
text-align: left !important;}

div.insta ul li {
	float:left;
	width:33.333333333333333%;
}
div.insta ul li span, div.insta ul li a, div.insta ul li a img {
	display:block;
}
div.insta ul li a, div.insta ul li a img {
	background-position:center center;
	background-repeat:no-repeat;
}
div.insta ul li a {
	background-size:cover;
	position:relative;
	height:0;
	padding-top:100%;
}
div.insta ul li a:hover img {
	background-color:hsla(216,82%,13%,0.25);
}
div.insta ul li a img {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border:3px solid #fff;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.insta ul li a img.icon-video {
	background-image:url(/um/img/play.png);
}
div.insta ul li:nth-child(3n-2) {
clear:both;
}

@media all and (min-width: 768px) {
#instagram h2 a{
font-size: 200%;
}

div.insta {padding: 0; height: auto; /*height: 455px;*/}
div.insta ul li:nth-child(3n-2) > span {
	margin-right:8px;
}
div.insta ul li:nth-child(3n-1) > span {
	margin-left:4px;
	margin-right:4px;
}
div.insta ul li:nth-child(3n) > span {
	margin-left:8px;
}
div.insta ul li {
	margin-bottom:12px;
}

}
@media all and (max-width: 767px) {
#instagram h2 a{
font-size: 160%;
}
div.insta {padding: 2px 0 1px;}
div.insta ul li:nth-child(3n-2) > span {
	margin-right:6px;
}
div.insta ul li:nth-child(3n-1) > span {
	margin-left:3px;
	margin-right:3px;
}
div.insta ul li:nth-child(3n) > span {
	margin-left:6px;
}
div.insta ul li {
	margin-bottom:9px;
}
}