@charset "UTF-8";

/*------------------------------------------------------------
CSS Document

Basic CSS for SFgo page

SINCE 260201
-------------------------------------------------------------*/


/*------------------------------------------------------------
Structure

Header
Effect for hamburger menu button
Slide menu
Article
Hero for YouTube
Hero
For top page
Common section
for brand section (New layout)
Concept
About
Gallery
Spec
Model list
Contact
CTA
Specified commercial transactions
for Twitter API img
Footer
Youtubeレスポンシブ対応
Cookie popup
Slider
-------------------------------------------------------------*/


/*------------------------------------------------------------
for loading Web font
-------------------------------------------------------------*/

/*
html {
visibility: hidden;
}
html.wf-active {
visibility: visible;
}
*/

/*--------------------------------------------------------
Only for Japanese
--------------------------------------------------------*/
/*

article p:lang(ja) {
text-align: justify !important;
font-feature-settings: "palt";
word-break: normal;
word-wrap: break-word;
}


table th:lang(ja),
table td:lang(ja),
footer #attention {
font-feature-settings: "palt";
word-break: normal;
word-wrap: break-word;
}


h2:lang(ja),
h3:lang(ja) {
font-feature-settings: "palt";
word-break: normal;
word-wrap: break-word;
}
*/


/* Modal for Japanese */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 10000000000000;
}

.btn_area {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background-color: rgba(43,43,43,1.0);
color: rgba(255,255,255,1.0);
z-index: 10000000000001;
padding: 2rem;
text-align: center;
}

.btn_area p{
padding: 60px 10% 60px 10%;
box-sizing: border-box;
}

.btn_area a{
color: rgba(255,255,255,1.0);
}

.btn_area button  {
float: right;
background: none;
border: none;
cursor: pointer;
color: rgba(255,255,255,1.0);
}


/*------------------------------------------------------------
Basic setting
-------------------------------------------------------------*/

html {
overflow-y: scroll;
-webkit-text-size-adjust: none;

font-size: 62.5%;
}

html.open-menu,
body.open-menu{
overflow: hidden;
}


body {
margin:0;
padding:0;


background-color: rgba(247, 247, 247,1.0);
color: rgba(43,43,43,1.0);
width: 100%;
}


img { border:none; vertical-align: bottom; }

select,input,button,textarea,button{
font:99% arial,helvetica,clean,sans-serif;
}


table{font-size:inherit;font:100%;}

pre,code,kbd,samp,tt{
font-family:monospace;
*font-size:108%;
line-height:100%;
}

input, textarea {
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Osaka,sans-serif,arial,helvetica,clean,sans-serif;
}

ol,ul{
margin:0;
padding:0;
list-style: none;
}

li{
margin:0;
padding:0;
}

.clearboth{
clear: both;
}


/* reset.cssより移植 */
body,div,ul,ol,li,
h1,h2,h3,h4,h5,h6,p{
margin: 0;
padding: 0;
}

h1,h2,h3,h4,h5,h6{
/*font-size: 1em;*/
font-style: normal;
font-weight: normal;
}


/*HTML5対策 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}

figure{
margin: 0;
padding: 0;
}

.grecaptcha-badge{
z-index: 10000;
}

article a{
color: rgba(43,43,43,1.0);
text-decoration: underline;
}


/*------------------------------------------------------------
Basic layout
-------------------------------------------------------------*/

header,
article,
footer{
width: calc(100% - 300px);
}

@media screen and (max-width: 799px){

header,
article,
footer{
width: 100%;
}

}


/*------------------------------------------------------------
Font setting

Concept: vw
Other: rem
-------------------------------------------------------------*/

body{
font-family:  obvia, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*

font-size: 1.6rem;
font-weight:300;
line-height: 1.5em;
font-feature-settings: "palt";
}


#download li {
line-height: 1.1em;
font-size: 1.5rem;
font-weight: 700;
}


#gnavi li:last-child i{
font-size: 1.5em;
}

#download li.login a,
#snavi li.login a{
font-size: 1.4rem;
letter-spacing: 0.5px;
line-height: 3.8rem;
font-weight: 600;
}

#download li.login a{ line-height: 3.8rem; }
#snavi li.login a{ line-height: 4.0rem; }

#hero-youtube #h1-box h1,
#hero-youtube #h1-box p{
line-height: 1.2em;
}



/* vw */
#hero-youtube #h1-box h1{
font-size: 5.5vw;
}

#hero-youtube #h1-box p{
font-size: 3vw;
font-weight: 600;
}

#sfgo-summary p{
font-size: 2vw;
letter-spacing: 0.05em;
line-height: 1.6em;
}

#sfgo-summary h1,
#sfgo-summary h2{
font-weight: 500;
font-size: 3.5vw;
line-height: 1.2em;
}


#sfgo-plan li{
font-size: 1.5vw;
line-height: 1.3em;
}

#sfgo-plan li strong{
font-size: 3.0vw;
}

@media screen and (max-width: 769px){

#sfgo-summary p,
#sfgo-support-stakeholder p{
font-size: 4.5vw;
line-height: 2.0em;
}

#sfgo-plan li strong{
font-size: 7.0vw;
}

#sfgo-plan li {
font-size: 3.5vw;
}

}


/* rem */
.container{
font-size: 1.8rem;
line-height: 1.6em;
letter-spacing: 0.05em;
font-weight: 400;
}

.container h2,
.container h3{
font-weight: 800;
}

.container h2{
font-size: 3.6rem;
line-height: 1.2em;
}

.container h4{
font-size: 1.8rem;
line-height: 1.6em;
}

.cta-button a{
font-size: 1.8rem;
letter-spacing: 0.5px;
line-height: 4rem;
font-weight: 600;
}


.tab-container ul li {
font-weight: 500;
font-size: 1.3rem;
line-height: 1.0em;
}

.tab-container ul li.selected {
font-weight: 500;
}


#snavi li {
line-height: 1.0em;
font-size: 2.0rem;
font-weight: 400;
}

#snavi li.header {
font-weight: 600;
font-size: 1.2rem;
}


footer{
font-size: 1.6rem;
}

footer #fnavi ul li.icon p{
line-height: 1.0em;
font-size: 1.5rem;
}

footer #fnavi ul li.text{
line-height: 1.0em;
font-size: 1.2rem;
}

footer #fnavi ul:nth-child(2) li,
footer p.copyright small{
line-height: 1.0em;
font-size: 1.2rem;
font-weight: 400;
}



@media screen and (max-width: 769px){


}

/*------------------------------------------------------------
Header
-------------------------------------------------------------*/

header{
text-align:center;
/*width:100%;*/

height: 60px;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
perspective: 1000;
backface-visibility: hidden;

background-color:rgba(255,255,255,0.0);
transition: background 0.3s;

margin: 0;
box-sizing: border-box;
z-index: 100;

position: fixed;
top: 0;
}

header.selected	{
background-color:rgba(255,255,255,1.0);
}


#gnavi li,
#gnavi li a{
color: rgba(255,255,255,1.0);
}

#gnavi li{
top: 0;
bottom: 0;
}


#gnavi li:first-child{
height: 25px;
margin: auto;
position: absolute;

left: 2.5%;
/*
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
*/

fill: rgba(255,255,255,1.0);
}

#gnavi li svg{
height: 25px;
}


#gnavi li:first-child a{
fill: rgba(255,255,255,1.0);
}

header.selected #gnavi li:first-child a,
header.selected #gnavi li:first-child{
fill: rgba(43,43,43,1.0);
}

/*
#gnavi li:nth-child(2){
height: 16px;

margin: auto;
position: absolute;
left: 2.5%;
}
*/


#gnavi li:last-child{
height: 25px;

margin: auto;
position: absolute;

top: 15%;
right: 2.5%;
}

#gnavi li:last-child i{
/*font-size: 1.5em;*/
}

header.selected #gnavi li:last-child a{
color: rgba(43,43,43,1.0);
}


@media screen and (max-width: 749px){

header{
height: 65px;
}

#gnavi li:first-child,
#gnavi li:first-child svg{
height: 25px;
}

}




/*------------------------------------------------------------
Effect for hamburger menu button
-------------------------------------------------------------*/


#gnavi svg .st0{
fill: rgba(99,215,169,1.0);
}

#gnavi svg .st1{
fill: rgba(255,255,255,1.0);
}

#gnavi svg .st2,
header.selected  #gnavi svg .st1{
fill: rgba(0,0,0,1.0);
}


.menu-trigger,
.menu-trigger span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
cursor: pointer;
}

.menu-trigger {
position: relative;
width: 20px;
height: 16px;

}

.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;

background-color: rgba(255,255,255,1.0);
}


header.selected ul li:nth-child(2) .menu-trigger span,
#snavi .menu-trigger span{
background-color: rgba(43,43,43,1.0);
}


.menu-trigger span:nth-of-type(1) {
top: 0;
}

.menu-trigger span:nth-of-type(2) {
top: 7px;
}

.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

.menu-trigger {
-webkit-animation: menu-close .6s;
animation: menu-close .6s;
}

.menu-trigger.active {
-webkit-animation: menu-open .6s;
animation: menu-open .6s;
}


@-webkit-keyframes menu-close {
30% {
-webkit-transform: scale(0);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}

@keyframes menu-close {
30% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}

@-webkit-keyframes menu-open {
30% {
-webkit-transform: scale(0);
opacity: 0;
}

100% {
-webkit-transform: scale(1);
opacity: 1;
}
}

@keyframes menu-open {
30% {
transform: scale(0);
opacity: 0;
}

100% {
transform: scale(1);
opacity: 1;
}

}

.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(7px) rotate(-45deg);
transform: translateY(7px) rotate(-45deg);
}

.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-7px) rotate(45deg);
transform: translateY(-7px) rotate(45deg);
}

/*------------------------------------------------------------
Download area
-------------------------------------------------------------*/

#download {
/*width: 35%;*/
width: 300px;
/*max-width: 350px;*/
height: 100%;
transition: all 0.4s ease-out;
background-color: rgba(255,255,255,1.0); /*rgba(247,247,247,1.0)*/;
z-index: 300;
position: fixed;
top: 0;
right: 0;
text-align: center;
}

#download ul {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}

#download li {
margin: 0 auto;
width: 300px;
}

#download li img{
width: 100%;
height: auto;
}


#download li.login{
width: 230px;
margin: 0 auto 0 auto;
box-sizing: border-box;
position: absolute;
top: -12%;
left: 12%;
}

#snavi li.login{
width: 96%;
margin: 2rem auto 0 auto;
box-sizing: border-box
}

#download li.login a,
#snavi li.login a{
display: block;
border: 1.5px solid rgba(0, 158, 117, 1.0);
color: rgba(0, 158, 117, 1.0);
background: rgba(255, 255, 255, 1.0);

align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0.1rem 0 0.1rem 0;
border-radius: 0.75rem;

transition-duration: 200ms;
transition: 200ms;

text-align: center;

width: 100%;

text-decoration: none;
}

#download li.login a:hover,
#snavi li.login a:hover{
border: 1.5px solid rgba(0, 158, 117, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 158, 117, 1.0);
}

#download li.icon{
width: 80px;
margin: 0 auto 1.0rem auto;
}

#download li.text {
margin: 0 auto 3.0rem auto;
}

#download li.download-link{
width: 170px;
margin: 0 auto 2.0rem auto;
}

#download li.qr-code{
width: 100px;
margin: 0 auto 4.0rem auto;
}



@media screen and (max-width: 799px){
#download {
display: none;
}

#snavi li.login{
width: 92%;
}

}


/*------------------------------------------------------------
Slide menu
-------------------------------------------------------------*/

.open-menu #snavi {
width: 100%;
height: 100%;
transition: all 0.4s ease-out;
background-color:rgba(43,43,43,0.5);
z-index: 10000;
position: fixed;
top: 0;
left: 0;
}

#snavi nav {
background-color:rgba(255,255,255,0);
position: fixed;
z-index: 300;

height: 100%;

width: 100%;
top: 100%;
left: 0;

/*
width: 50%;
top: 0;
left: -50%;
*/

overflow: hidden;
text-align: left;
transition: all 0.4s ease-out;
box-sizing: border-box;

margin: 0;
padding: 0;
}

.open-menu #snavi nav {
background-color:rgba(255,255,255,1.0);

-webkit-transform: translateY(-100%);
transform: translateY(-100%);

/*
-webkit-transform: translateX(100%);
transform: translateX(100%);
*/
}


#snavi li {
color: rgba(43,43,43,1.0);
margin: 0 0 0 0;
}

#snavi li:first-child{
margin: 2rem 0 0 2rem;
}

#snavi li.linkbutton{
border-top: 1px solid rgba(240,240,240,1.0);
padding: 1.6rem 0 1.6rem 2rem;
}

#snavi li.linkbutton a:after {
font-family: "Font Awesome 5 Free";    font-weight: 800;     
color: rgba(61,61,61,1.0);
content: "\f054";
right: 2rem;
position: absolute;
}


#snavi li.bl{
border-bottom: 1px solid rgba(240,240,240,1.0);
}


#snavi li a {
color: rgba(0,0,0,1.0);
text-decoration: none;
transition: 0.8s;
width: 100%;
display: block;
}

#snavi li a:hover {
color: rgba(43,43,43,1.0);
}

#snavi li.header {
margin: 4.0rem 0 1rem 2rem;
color: rgba(176,176,176,1.0);
}



/*------------------------------------------------------------
Hero for YouTube
-------------------------------------------------------------*/

#hero-youtube{
background: rgba(0, 0, 0, 1) url( "/assets/img/loading.gif" ) no-repeat center center / 200px;
width: 100%;
text-align: center;
position: relative;
overflow: hidden;
/*height: 52.25vw;*/
height: 100vh;

}

#hero-youtube:before{
width:100%;
height:100%;
z-index: 1;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
transition: background 0.5s ease 0s;
}


#hero-youtube #youtube{
/*opacity: 0;*/
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*縦横幅指定*/
width: 300vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */

/*width: 177.77777778vh;*/ /* 16:9 の幅→16 ÷ 9＝ 177.77% */
height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
min-height: 100%;
min-width: 100%;
}

#hero-youtube #h1-box{
width: 95%;
text-align: center;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}


#hero-youtube #h1-box p{
/*
font-weight: 400;
font-size: 5.8vmin;
line-height: 1.2em;
letter-spacing: 0.01em;
*/


font-size: 3vw;
order: 1;

color: rgba(255,255,255,1.0);
padding: 0px 5px 0px 5px;
box-sizing: border-box;
}


#hero-youtube #h1-box h1{
margin:  0 0 0.5em 0;
color: rgba(255,255,255,1.0);
padding: 0px 2px 0px 2px;
box-sizing: border-box;
}


#hero-youtube #h1-box h1 img{
width: 90px;
height: auto;
order: 3;
text-align: center;
margin: 0;
}


#hero-youtube #h1-box h1 svg {
order: 3;
text-align: center;
color: rgba(255,255,255,1.0);
width: 100px;
margin: 0 0 1em 0;
text-shadow: 1px 1px 3px rgba(68,68,68,0.8);
}

#hero-youtube #h1-box h1 svg .st0{
fill: rgba(99,215,169,1.0);
}

#hero-youtube #h1-box h1 svg .st1{
fill: rgba(255,255,255,1.0);
}

#hero-youtube #h1-box h1 svg.st2{
fill: rgba(0,0,0,1.0);
}



@media screen and (max-width: 749px){

#hero-youtube{
height: 75vh;
}

#hero-youtube #h1-box h1 img{
width: 70px;
}

#hero-youtube #h1-box p {
font-size: 4.5vw;
margin: 0 0 0 0;
}

}

/*------------------------------------------------------------
Hero
-------------------------------------------------------------*/

#hero{
width: 100%;
text-align: center;
position: relative;
overflow: hidden;
}

#hero:before{
width:100%;
height:100%;
z-index: 1;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;

background: rgba(0, 0, 0, 0.5);
transition: background 0.5s ease 0s;

}

#hero img{
width: 100%;
height: auto;
}


#hero #h1-box{
width: 95%;
text-align: center;
position: absolute;
z-index: 2;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);


display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

#hero #h1-box h1{
/*
font-weight: 800;
font-size: 5.5vmin;
letter-spacing: 0.01em;
line-height: 1.2em;
text-transform:uppercase;
*/

order: 2;



color: rgba(255,255,255,1.0);
padding: 0px 5px 0px 5px;
box-sizing: border-box;
}

#hero #h1-box p{
/*
font-size: 3vmin;
letter-spacing: 0.05em;
line-height: 1.2em;
*/

order: 3;
color: rgba(255,255,255,1.0);
margin: 0.5em 0 0 0;
padding: 0px 2px 0px 2px;
box-sizing: border-box;
}


#hero #h1-box svg {
order: 1;
text-align: center;
color: rgba(255,255,255,1.0);
width: 170px;
margin: 0 0 1em 0;

/*

position: absolute;

top: 120px;
left: 50%;
z-index: 3;
width: 250px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
*/
text-shadow: 1px 1px 3px rgba(68,68,68,0.8);
}



#hero a[href="#concept"],
#hero a[href="#tech-session"] {
text-align: center;
color: rgba(255,255,255,1.0);
position: absolute;
bottom: 20px;
left: 50%;
z-index: 3;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
text-shadow: 1px 1px 3px rgba(68,68,68,0.8);
}


#hero .yureru-j {
animation: 0.8s ease-in-out 0s infinite alternate none running yureru-j;
}

@keyframes yureru-j {
0% {
transform: translate(0px, 2px);
}
50% {
transform: translate(0px, -2px);
}
}


@media screen and (max-width: 749px){

/*
#hero #h1-box p{
font-size: 3.5vmin;
margin: 0.5em 0 0 0;
}
*/

}


/*------------------------------------------------------------
Hero
-------------------------------------------------------------*/

#hero-img{
width: 100%;
text-align: center;
position: relative;
overflow: hidden;
}

/*
#hero-img:before{
width:100%;
height:100%;
z-index: 1;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;

background: rgba(0, 0, 0, 0.5);
transition: background 0.5s ease 0s;

}
*/

#hero-img img{
width: 100%;
height: auto;
}

/*
#hero-img #h1-box{
width: 95%;
text-align: center;
position: absolute;
z-index: 2;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);


display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

#hero-img #h1-box h1{
text-transform:uppercase;
font-weight: 800;
order: 2;
font-size: 5.5vmin;

letter-spacing: 0.01em;

color: rgba(255,255,255,1.0);

line-height: 1.2em;
padding: 0px 5px 0px 5px;
box-sizing: border-box;
}

#hero-img #h1-box p{
font-size: 3vmin;
order: 3;
margin: 0.5em 0 0 0;
letter-spacing: 0.05em;

color: rgba(255,255,255,1.0);
padding: 0px 2px 0px 2px;
line-height: 1.2em;
box-sizing: border-box;
}


#hero-img #h1-box svg {
order: 1;
text-align: center;
color: rgba(255,255,255,1.0);
width: 170px;
margin: 0 0 1em 0;


text-shadow: 1px 1px 3px rgba(68,68,68,0.8);
}



#hero-img a[href="#concept"],
#hero-img a[href="#tech-session"] {
text-align: center;
color: rgba(255,255,255,1.0);
position: absolute;
bottom: 20px;
left: 50%;
z-index: 3;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
text-shadow: 1px 1px 3px rgba(68,68,68,0.8);
}


#hero-img .yureru-j {
animation: 0.8s ease-in-out 0s infinite alternate none running yureru-j;
}

@keyframes yureru-j {
0% {
transform: translate(0px, 2px);
}
50% {
transform: translate(0px, -2px);
}
}


@media screen and (max-width: 749px){

#hero-img #h1-box p{
font-size: 3.5vmin;
margin: 0.5em 0 0 0;
}

}

*/


/*--------------------------------------------------------
For top page
--------------------------------------------------------*/

.container img{
width: 100%;
height: auto;
}

.container{
width: 100%;
margin: 3.0rem auto 3.0rem auto;
padding: 0 2.5% 0 2.5%;
box-sizing: border-box;
text-align: left;
}

.container h2,
.container h3,
.container p,
.container ul.rows2{
width: 100%;
margin: 0 auto;
}


.container ul.rows2 li{
width: 49%;
margin: 0 0 2rem 0;
display: inline-block;
border-radius: 2rem;
background-color: rgba(255,255,255,1.0);
vertical-align: top;
box-sizing: border-box;
border: 1px solid rgba(239,239,239,1.0);
}

.container ul.rows2 li img{
border-radius: 2rem 2rem 0 0;
}

.container ul.rows2 li:nth-child(even){
margin: 0 0 2rem 2%;
}

.container ul.rows2 h3,
.container ul.rows2 p{
width: 100%;
box-sizing: border-box;
}

.container ul.rows2 h3{
margin: 0 0 1rem 0;
padding: 1.5rem 1.5rem 0 1.5rem;
}

.container ul.rows2 p{
margin: 0;
padding: 0 1.5rem 1.5rem 1.5rem;
}


.container h2{
margin: 0 auto 3.0rem auto;
}

.container h3{
margin: 0 auto 1.0rem auto;
}

.container p{
margin: 0 auto 5.0rem auto;
}

/*
.container p .marking{
background: linear-gradient(transparent 70%, rgba(76, 230, 54, 1.0) 70%);
}
*/


@media screen and (max-width: 749px){

.container h2,
.container h3,
.container p,
.container ul.rows2 li{
width: 100%;
}


.container ul.rows2 li:nth-child(even){
margin: 0 0 2rem 0;
}


}


/*--------------------------------------------------------
#sfgo-summary
--------------------------------------------------------*/

#sfgo-summary,
#sfgo-support-stakeholder{
height: auto; /* スクロール領域を確保 */
/*background-color: rgba(0, 0, 0, 0.8);*/
background-size: cover;

margin: 0 auto 3.0rem auto;
padding: 6.0rem 2.5% 3.0rem 2.5%;

color: rgba(255,255,255,1.0);
}




#sfgo-summary {
background-color: rgba(0, 0, 0, 0.8);
background-blend-mode: hue;
background-blend-mode: hue;

background-image: url('/sfgo/assets/img/bg-sfgo-summary.png');
background-repeat: repeat-x; /* 背景を横に並べる */

/* スクロール連動アニメーションの設定 */
animation: bgScroll linear;
animation-timeline: scroll();
}


@keyframes bgScroll {
from {
background-position: -300px 0; /* 開始位置 */
animation-timing-function: ease-in;
}
to {
background-position: -1000px 0; /* 終了位置（移動量） */
animation-timing-function: ease-out;
}
}


#sfgo-support-stakeholder{
background-color: rgba(0, 158, 117, 1.0);
background-image: url('/sfgo/assets/img/bg-sfgo-support-stakeholder.png');
background-blend-mode: multiply;
background-position: center center;
}



#sfgo-for-circuit li{
width: 100%;
padding: 3rem 2rem 0 2rem;
margin: 0 0 2rem 0;
display: inline-block;
border-radius: 2rem;
vertical-align: top;
box-sizing: border-box;
border: 4px solid rgba(0, 158, 117, 1.0);
}

#sfgo-for-circuit li{
background-color: rgba(255,255,255,0.85);
background-blend-mode: lighten;
background-position: center center;
background-repeat: no-repeat;
background-size: 90%;
}


#sfgo-for-circuit li:first-child{
background-image: url(/sf3/wp/wp-content/uploads/2023/10/set.png);
}


#sfgo-for-circuit li:nth-child(2) {
background-image: url(/sf3/wp/wp-content/uploads/2024/03/SUPER-FORMULA-Round.1-BINGO.jpg.webp);
}

#sfgo-for-circuit li:last-child {
background-image: url(/sf3/wp/wp-content/uploads/2024/03/00ab2c956d7adaabd823dcc2712ef6fe.jpg.webp);
}




#sfgo-for-circuit li h3 {
color:rgba(0, 158, 117, 1.0);
}

#sfgo-for-circuit li p {
margin: 0 auto 4.0rem auto;
}

/*
#sfgo-for-circuit li img {
display: inline-block;
width: 30%;
height: auto;
}
*/


#sfgo-plan{
height: auto; /* スクロール領域を確保 */
background-image: url('/sfgo/assets/img/bg-sfgo-summary.png');
background-color: rgba(0, 0, 0, 0.8);
background-blend-mode: hue;
background-size: cover;

margin: 0 auto 3.0rem auto;
padding: 12.0rem 2.5% 3.0rem 2.5%;

color: rgba(255,255,255,1.0);
}

#sfgo-plan h1{
margin: 0 0 2rem 0;
}


#sfgo-plan li{
width: 50%;
text-align: center;
display: inline-block;
box-sizing: border-box;
}

#sfgo-plan li:first-child{
border-right: 1px solid rgba(255,255,255,1.0);
}




/*--------------------------------------------------------
Tab
--------------------------------------------------------*/


.tab-container {
position: relative;
}

.tab-container ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
background: #eeeeee;
border-radius: 48px;
padding: 6px;
position: relative;
}

.slide-indicator {
position: absolute;
top: 6px;
left: 6px;
width: calc(50% - 4px);
height: calc(100% - 12px);
/*background: linear-gradient(135deg, #4a4a4a 0%, #2c2c2c 100%);*/
background:rgba(0, 158, 117, 1.0);
border-radius: 48px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}





.tab-container ul li {
flex: 1;
padding: 14px 18px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 2;

color: #333333;
border-radius: 8px;
margin: 0 2px;
background: transparent;
}

.tab-container ul li.selected {
color: #ffffff;
/*text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);*/
}

.tab-container ul li:not(.selected):hover {
color: #aaaaaa;
background: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}

.tab-content {
display: none;
padding: 24px;
min-height: 150px;
background: #fefefe;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-top: 16px;
}

.tab-content.selected {
display: block;
animation: slideContentIn 0.3s ease-out;
}


.tab-container #tab-1 li img,
.tab-container #tab-2 li img{
margin: 0 auto 4rem auto;
display: block;
width: 40%;
height: auto;

}

.tab-container #tab-1 li img{
width: 40%;
}

.tab-container #tab-2 li img{
width: 70%;
}


.tab-container #tab-1 li img{
margin: 0 auto 4rem auto;
display: block;
width: 40%;
height: auto;
}

@keyframes slideContentIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}



/*--------------------------------------------------------
Contact
--------------------------------------------------------*/


#contact {
width: 100vw;
margin: 0 auto;
padding: 100px 2.5vw 100px 2.5vw;

box-sizing: border-box;
text-align: left;

font-size: 1.4rem;
background: rgba(255,255,255,1.0);
overflow: hidden;
}

#contact h2{
line-height: 1.2em;
text-transform: uppercase;

margin: 0 auto 1.6em auto;
width: 95vw;
text-align: center;
font-weight: 700;
font-size: 3.0rem;
}

#contact .cta-button{
margin: 0 auto 6.4em auto;
}


#contact h3{
line-height: 1.2em;
margin: 0 auto 0 auto;
width: 95vw;
text-align: center;
font-weight: 400;
font-size: 2.5rem;
}

#contact ul:first-of-type{
margin: 0 0 3.2em 0;
}

#contact ul li{
vertical-align: top;
width: 22.25vw;
display: inline-block;
margin: 0 2vw 2vw 0;
box-sizing: border-box;

text-overflow: ellipsis;

white-space: nowrap;
overflow: hidden;

color: rgba(43,43,43,0.8);
cursor: pointer;
text-align: center;
line-height: 1.1em;
}

#contact ul li h4{
text-align: center;
font-weight: 400;
font-size: 2.0rem;
margin: 0 0 0.8em 0;
}

#contact ul li p{
line-height: 1.7rem;
font-size: 1.2rem;
text-align: center !important;
}

#contact ul li:nth-child(4n+4){
margin: 0 0 2vw 0;
}


#contact ul li a{
margin: 1.0em 0 0 0;
color: rgba(0, 0, 0, 0.5);
display: inline-block;
transition: 0.8s;
}

#contact ul li a img{
width: 100%;
height: auto;
filter: grayscale(100%);
opacity: 0.5;
transition: 0.8s;
}


#contact ul li a:hover img{
opacity: 1.0;
}



#contact ul li.comingsoon img{
filter: grayscale(100%) blur(15px);
}


@media screen and (max-width: 1050px){

#contact h2{
width: 94.99vw;
}

#contact ul li{
width: 30.33vw;
}

#contact ul li,
#contact ul li:nth-child(4n+4){
margin: 0 0 2vw 0;
}

#contact ul li:nth-child(3n+2){
margin: 0 2vw 2vw 2vw;
}

}


@media screen and (max-width: 850px){

#contact h2{
width: 95vw;
}

#contact ul li{
width: 46.5vw;

max-width: 46.5vw;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

#contact ul li,
#contact ul li:nth-child(4n+4),
#contact ul li:nth-child(3n+2){
margin: 0 0vw 2vw 0vw;
}

#contact ul li:nth-child(even) {
margin: 0 0 2vw 2vw;
}

}


/*--------------------------------------------------------
Concept
--------------------------------------------------------*/

#concept {
background: rgba(255,255,255,1.0);
}

#concept h2{
}

#concept h2 .spbr{
display: none;
}

#concept p{
}


@media screen and (max-width: 749px){
}

@media screen and (max-width: 499px){

#concept h2 .spbr{
display: inline-block;
}

}


/*--------------------------------------------------------
About
--------------------------------------------------------*/

#about {
background-color: rgba(43,43,43,1.0);
color: #D9D9D9;
}

#about .one-story{
display: flex;
}

#about .one-story:first-of-type figure,
#about .one-story:last-of-type figure{
order: 1;
}


#about .one-story:first-of-type .one-story-text,
#about .one-story:last-of-type .one-story-text{
order: 2;
}

#about .one-story:nth-of-type(2) figure{
order: 2;
}

#about .one-story:nth-of-type(2) .one-story-text{
order: 1;
}


#about .one-story:first-child{
margin: 30px 0 0 0;
}

#about .one-story figure{
width: 50%;
margin: 0;
padding: 0;
box-sizing: border-box;
}

#about .one-story figure img.main-img{
width: 100%;
height: 400px;
object-fit: cover;
}

#about .one-story .one-story-text{
box-sizing: border-box;
width: 50%;
margin: 0 0 0 0;
position: relative;
}

#about .one-story .one-story-text .inner{
padding: 0 5% 0 5%;
text-align: left;
position: absolute;
top: 50%;
letter-spacing: 0.05em;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}

#about .one-story .one-story-text .inner h3{
margin: 0 0 2.0rem 0;
font-weight: 700;
font-size: 3.0rem;
line-height: 3.5rem;
}

#about .one-story .one-story-text .inner p{
line-height: 2.0em;
}


@media screen and (max-width: 749px){

#about .one-story{
display: block;
}

#about .one-story figure{
width: 100%;
}

#about .one-story .one-story-text{
width: 100%;
}


#about .one-story:first-of-type figure,
#about .one-story:last-of-type figure{
order: 1;
}

#about .one-story:first-of-type .one-story-text,
#about .one-story:last-of-type .one-story-text{
order: 2;
}

#about .one-story figure img.main-img{
height: 350px;
}

#about .one-story .one-story-text .inner{
padding: 30px 2.5% 30px 2.5%;
text-align: left;
position: inherit;
top: auto;
transform: none;
-webkit-transform:  none;
-ms-transform:  none;
}

}



/*--------------------------------------------------------
Contact
--------------------------------------------------------*/

#contact{
}


#contact table {
margin: 50px auto 50px auto;
width: 60%;
border-spacing: 0;
vertical-align: middle;
border: none;
padding: 0;
border-collapse: collapse;
box-sizing: border-box;
}


#contact table tbody tr th,
#contact table tbody tr td {
text-align: left;
font-size: 1.6rem;
box-sizing: border-box;
line-height: 1.0em;
}


#contact table tbody tr:first-child th{
padding: 0  0 0 0;
}

#contact table tbody tr th {
padding: 25px 0 0 0;
}

#contact table tbody tr th .red {
font-size: 1.0rem;
background: rgba(228, 0, 43,1.0);
color: rgba(255,255,255,1.0);
font-weight: normal;
padding: 3px 5px 1px 5px;
margin: 0 0 0 10px;
box-sizing: border-box;
display: inline-block;
vertical-align: bottom;
}



#contact table tbody tr:last-child td{
padding: 8px 0 0 0;
}

#contact table tbody tr td {
padding: 5px 0 15px 0;
}



#contact table tbody tr td.radio label:first-child{
margin: 5px 0 10px 0;
}

#contact table tbody tr td.radio label{
width: 100%;
display: block;
margin: 0 0 10px 0;
position: relative;


}
#contact table tbody tr td.radio label:last-child{
margin: 0 0 0 0;
}



#contact table tbody tr td.radio label input[type="radio"]{
position: relative;
top: -1px;
margin: 0 5px 0 0;
}



#contact table tbody tr td input[type="text"],
#contact table tbody tr td input[type="email"],
#contact table tbody tr td textarea{
width: 100%;
box-sizing: border-box;
font-size: 2.0rem;

border-radius: 0;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);

font-weight: 400;
letter-spacing: 0;
line-height: 1.4em;
background: rgba(255,255,255,1.0);
border-color: #CCC;
border: 1px solid #CCC;
color: #111;
}

#contact table tbody tr td input[type="text"],
#contact table tbody tr td input[type="email"]{
padding: 5px 10px 5px 10px;
height: 53px;
}

#contact table tbody tr td textarea{
padding: 10px 10px 10px 10px;
height: 10.0em;
}

#contact table tbody tr th.wordscounter{
font-size: 1.3rem;
font-weight: normal;
text-align: right;
vertical-align: bottom;
}



#contact input.error,
#contact textarea.error{
border: 1px solid rgba(228, 0, 43,1.0) !important;
}


#contact label.error{
color: rgba(228, 0, 43,1.0);
font-size: 1.3rem;
margin: 5px 0 0 0;
display: inline-block;
}

#contact .ppcheck{
text-align: center;
font-size: 1.2rem;
}

#contact .ppcheck input{
margin: 0 0.5rem 0 0;
vertical-align: middle;
}


@media screen and (max-width: 749px){

#contact table {
width: 100%;
}

}


/*------------------------------------------------------------
CTA
-------------------------------------------------------------*/

.cta-button{
margin: 4.0rem auto 8.0rem auto;
}

.cta-button a{
margin: 0px auto 0px auto;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 6px 0 6px 0;
cursor: pointer;
border-radius: 4rem;
transition-duration: 200ms;
/*
font-size: 1.3rem;
letter-spacing: 1.0px;
line-height: 4rem;
*/
flex-shrink: 0;
flex-grow: 0;
text-align: center;
width: 270px;

color: rgba(255, 255, 255, 1.0);
background: rgba(0, 158, 117, 1.0);
border: 1.5px solid rgba(255, 255, 255, 0.0);

text-decoration: none;
transition: 200ms;
}

.cta-button a:hover{	
color: rgba(0, 158, 117, 1.0);
background: #FFF;
border: 1.5px solid rgba(0, 158, 117, 1.0);

}


@media screen and (max-width: 599px){

.cta-button a {
text-align: center;
width: 65%;
}

}


/*--------------------------------------------------------
for Twitter API img
--------------------------------------------------------*/


blockquote,
#tagline {
margin: 0;
padding: 0;
}



#hero blockquote img,
#hero #tagline img{
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
perspective: 1000;
backface-visibility: hidden;


width: 100%;
height: 52.25vw;
object-fit: cover;


}


#hero blockquote,
#hero #tagline{
background: url(/assets/img/bg-noise.png) repeat left top;
}

@-webkit-keyframes expansion2 {
0% {
-webkit-transform: scale(1);
transform: scale(1) rotate(0);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1) rotate(-3deg);
}
}


blockquote ,
#tagline {
position: relative;
width: 100%;
}

blockquote .twitter-api ,
#tagline .twitter-api {
position: absolute;
bottom: 12px;
display: table;
vertical-align: middle;
z-index: 100;
}



#story .one-story:first-of-type figure blockquote .twitter-api,
#story .one-story:last-of-type figure blockquote .twitter-api,
#about .one-story:first-of-type figure blockquote .twitter-api,
#about .one-story:last-of-type figure blockquote .twitter-api{
left: 2.0%;
}

#story .one-story:nth-of-type(2) figure blockquote .twitter-api,
#about .one-story:nth-of-type(2) figure blockquote .twitter-api,
#hero .twitter-api{
right: 2.0%;
}


blockquote .twitter-api a {
display:table-cell;
vertical-align: middle;
font-size: 0.6rem;
line-height: 1.0em;
margin: 0;
padding: 0;
color: rgba(255,255,255,1.0);
text-decoration: none;
text-shadow:0px 0px 5px rgba(0,0,0,0.5);
}


blockquote .twitter-api a:hover{
text-decoration: none;
}

blockquote .twitter-api i{
top: 1.2px;
margin: 0 0 0 0.1em;
position: relative;
font-size: 0.9rem;
}



@media screen and (max-width: 749px){

#hero blockquote img,
#hero #tagline img{
height: 120vw;
}

}




/*--------------------------------------------------------
Footer
--------------------------------------------------------*/

footer{
background-color: rgba(43,43,43,1.0);
color: rgba(255,255,255,1.0);

margin: 0;
padding: 2rem 2.5% 1rem 2.5%;
box-sizing: border-box;

text-align: left;
}


footer #fnavi ul{
text-align: left;
margin: 0 0 1.6rem 0;
}


footer #fnavi ul li{
margin: 0 0 1rem 0;
}

footer #fnavi ul li img{
width: 100%;
height: auto;
}

footer #fnavi ul li.icon{
/*vertical-align: middle;*/
margin: 0 0 2rem 0;
}

footer #fnavi ul li.icon p{
display: inline-block;
vertical-align: top;
margin: 1.5rem 0 1.5rem 0.5rem;
}

footer #fnavi ul li.icon img{
width: 6rem;
}

footer #fnavi ul li.text{
margin: 0 0 0.3rem 0;
}


footer #fnavi ul li.download-link{
margin: 0 ;
display: inline-block;
}

footer #fnavi ul li.download-link,
footer #fnavi ul li.download-link img{
height: 40px;
}

footer #fnavi ul li a{
color: rgba(255,255,255,1.0);
text-decoration: none;
transition: 0.8s;
}

footer #fnavi ul li a:hover{
color: rgba(255,255,255,0.4);
}


footer #fnavi ul li:last-child{
margin: 0 0 0 1.0rem;
}

footer #fnavi ul:nth-child(2) {
text-align: right;
margin: 0 0 0.8rem 0;
}

footer #fnavi ul:nth-child(2) li{
display: inline-block;
margin: 0 0 0 1.5rem;
}

footer #fnavi ul:nth-child(2) li a{
color: rgba(128,128,128,1.0);
}


footer p.copyright {
text-align: right;
border-top: 1px solid rgba(128,128,128,1.0);
padding: 0.5rem 0 0 0;
}

footer p.copyright small{
/*
line-height: 1.0em;
font-size: 1.2rem;
*/
color: rgba(128,128,128,1.0);
text-transform: uppercase;
}



/*------------------------------------------------------------
Youtubeレスポンシブ対応
-------------------------------------------------------------*/

.YoutubeWrapper{
position: relative ;
margin-top: 1.2em ;
margin-bottom: 1.2em ;
padding-top: 69px ;
padding-bottom: 50% ;
overflow: hidden ;
}

.YoutubeWrapper iframe {
position: absolute ;
top: 0 ;
left: 0 ;
height: 100% ;
width: 100% ;
}



/*------------------------------------------------------------
第2回 技術セッション
-------------------------------------------------------------*/

#tech-vol2 #tech-session{
color: rgba(255,255,255,1.0);
/*background: linear-gradient(-15deg, #00daa6, rgba(0, 158, 117, 1.0));
background: -webkit-linear-gradient(-15deg, #00daa6, rgba(0, 158, 117, 1.0));
*/
background: #353534;
}

#tech-vol2 table.event-overview tbody tr th{
width: 25%;
padding: 10px 0 10px 0;
text-transform: uppercase;
text-align: left;

background: #353534;

color: rgba(255, 255, 255, 1.0);
/*background: linear-gradient(-15deg, #00daa6, rgba(0, 158, 117, 1.0));
background: -webkit-linear-gradient(-15deg, #00daa6, rgba(0, 158, 117, 1.0));
*/
clip-path:  polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);

text-align: center;

}


/*
#tech-vol2 .cta-button a {
color: rgba(255, 255, 255, 1.0);
background: linear-gradient(-45deg, #eae710, #a2ca2b);
border: 1.5px solid #FFF;
}


#tech-vol2 .cta-button a:hover {
color: #a2ca2b;
background: #FFF;
border: 1.5px solid #a2ca2b;

}
*/

/* ==========================
   SUPER FORMULA Partner Day | Tech Session #2
   Scoped to #tech-vol2
   ========================== */

#tech-vol2 {
  --sf-black: #111;
  --sf-white: #fff;
  --sf-red: #e60012;
  --sf-red-600: #c90010;
  --sf-gray-100: #f5f5f5;
  --sf-gray-200: #eee;
  --sf-gray-500: #6b7280;
  --sf-shadow-sm: 0 6px 16px rgba(0,0,0,.08);
  --sf-shadow-md: 0 10px 24px rgba(0,0,0,.14);
}

/* --------------------------
   1) CTA Buttons
   -------------------------- */

/*
/* Outline variant */
#tech-vol2 .cta-button--outline {
  background: var(--sf-white);
  color: var(--sf-black);
  border: 2px solid var(--sf-black);
}
#tech-vol2 .cta-button--outline:hover {
  background: var(--sf-black);
  color: var(--sf-white);
}

/* Light variant */
#tech-vol2 .cta-button--light {
  background: var(--sf-white);
  color: var(--sf-black);
}
#tech-vol2 .cta-button--light:hover {
  background: var(--sf-gray-100);
}

/* CTA stack (mobile) */
@media (max-width: 640px) {
  #tech-vol2 .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  #tech-vol2 .cta-button {
    justify-content: center;
    width: 100%;
  }
}


#tech-vol2 .keynote-table {
border-collapse: collapse;
table-layout: fixed;

width: 100%;
/*
width: 60vw;
max-width: 1200px;
*/
overflow: hidden;
text-align: center;
border-spacing: 0;
font-size: 1.6rem;
line-height: 1.6em;
margin: 0 auto;
}


#tech-vol2 .keynote-table tr {
background-color: transparent;/* linear-gradient(-45deg, #eae710, #a2ca2b);/*#e6f1f6;*/
}

#tech-vol2 .keynote-table tr:nth-child(even) {
background-color: #fff;
}


#tech-vol2 .keynote-table th, #tech-vol2 .keynote-table td {
  padding: 1em;
}
#tech-vol2 .keynote-table thead th {
  background-color: rgba(0, 158, 117, 1.0);
  color: #fff;
  font-weight: bold;
  text-align: center;
}
#tech-vol2 .keynote-table tbody th {
  color: rgba(0, 158, 117, 1.0);
      text-align: left;

}

#tech-vol2 .keynote-table td {
      text-align: left;

}

#tech-vol2 .keynote-table td img {
width: 100%;
height: auto;

}


@media screen and (max-width: 787px) {
  #tech-vol2 .keynote-table {
    border-radius: 0;
    text-align: left;

  }
  #tech-vol2 .keynote-table thead {
    display:none;
  }
  #tech-vol2 .keynote-table tr {
    background-color: unset;
  }
  #tech-vol2 .keynote-table th, #tech-vol2 .keynote-table td {
    display: block;
    border: 0;
/*    border-bottom: 1px solid #CCC;*/
  }
  #tech-vol2 .keynote-table tbody th{
    background: rgba(0, 158, 117, 1.0);
    color:#fff;
    text-align: center;
  }
/*  #tech-vol2 .keynote-table td::before{
    content: attr(data-label);
    background-color: #e6f1f6;
    font-weight: bold;
    display: inline-block;
    width: 20%;
    min-width: 4em;
    text-align: center;
    margin-right: 0.5em;
    padding: 4px;
    border-radius: 100vh;
  }*/
}