@charset "UTF-8";

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

Basic CSS for Partnet day page

SINCE 250512
-------------------------------------------------------------*/


/*------------------------------------------------------------
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;

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

font-weight:300;
background-color: rgb(245, 247, 249,1.0);
color: rgba(43,43,43,1.0);
width: 100%;
line-height: 1.5em;

}


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;
}


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

/*
header{
text-align:center;
width:100%;
height: 90px;
-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: 65px;
margin: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
fill: rgba(255,255,255,1.0);
}

#gnavi li svg{
height: 65px;
}

#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;
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: 45px;
}

}
*/



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

/*
.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);
}
*/

/*------------------------------------------------------------
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: 200;
position: fixed;
top: 0;
left: 0;
}

#snavi li {
color: rgba(43,43,43,1.0);
margin: 0 0 0 0;
line-height: 1.0em;
font-size: 2.0rem;
font-weight: 200;
}

#snavi li a {
color: rgba(43,43,43,0.5);
text-decoration: none;
transition: 0.8s;
}

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

#snavi li.header {
margin: 2.0rem 0 0 0;
font-weight: 800;
}

#snavi li:last-child {
padding: 2.0rem 0 0 0;
font-size: 1.2rem;
}

#snavi li i{
padding: 0 0.5rem 0 0;
}

#snavi nav {
background-color:rgba(255,255,255,0);
position: fixed;
z-index: 300;
top: 0;
height: 100%;
left: -50%;
width: 50%;
overflow: hidden;
text-align: left;
transition: all 0.4s ease-out;
box-sizing: border-box;
padding: 25px;
}

.open-menu #snavi nav {
background-color:rgba(255,255,255,1.0);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}


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

#snavi nav {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
left: 0;
height: 60%;
width: 95%;
margin: 0 2.5% 0 2.5%;
padding: 15px 2.5% 0 2.5%;
top: 100%;
}


.open-menu #snavi nav {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}


}
*/


/*------------------------------------------------------------
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{
/*text-transform:uppercase;*/
font-weight: 400;
order: 1;
font-size: 5.8vmin;
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-youtube #h1-box h1{
font-size: 2vmin;
order: 2;
margin: 1.5em 0 0 0;
letter-spacing: 0.2em;

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



#hero-youtube a[href="#concept"],
#hero-youtube 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-youtube .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-youtube{
/*height: 120vw;*/
height: 75vh;
}

#hero-youtube #h1-box h1 {
font-size: 3vmin;
margin: 2.0em 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{
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 #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 #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
Vision, Logomark concept
--------------------------------------------------------*/


.top-content{
width: 100vw;
margin: 0 auto;
padding: 5.0em 2.5vw 5.0em 2.5vw;
box-sizing: border-box;
text-align: center;
font-size: 1.4rem;
}

.top-content h2{
line-height: 1.1em;
text-transform: uppercase;
margin: 0 auto 0.8em auto;
width: 60vw;
text-align: center;
font-weight: 700;
font-size: 3.5rem;
}

.top-content h3{
line-height: 1.1em;
text-transform: uppercase;
margin: 0 auto 0.8em auto;
width: 60vw;
text-align: center;
font-weight: 400;
font-size: 3.0rem;
}

.top-content h2 small,
.top-content h3 small{
line-height: 1.0em;
font-weight: 400;
font-size: 1.6rem;
}


.top-content p{
width: 60vw;
letter-spacing: 0.05em;
font-size: 1.6rem;
line-height: 1.6em;
margin: 0 auto 5.0rem auto;
text-align: center;
}

.top-content .pdf{
width: 60vw;
letter-spacing: 0.05em;
font-size: 1.4rem;
line-height: 1.4em;
margin: 0 auto 5.0rem auto;
text-align: center;
}


.top-content .pdf img{
width: 100%;
height: auto;
}




.top-content ul.sesstion-button{
margin: 0 0 4.0rem 0;
}

.top-content ul.sesstion-button li{
width: 45.0vw;
display: inline-block;
text-align: center;
height: 320px;
margin-bottom: 32px;
border-radius: 24px;

-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;

border: 0 solid transparent;
position: relative;

overflow: hidden;
margin: 0;

box-sizing: border-box;
cursor: pointer;

text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
}

.top-content ul.sesstion-button li:hover {
border: 10px solid #009e75;
}


.top-content ul.sesstion-button li a{
line-height: 2.5rem;
text-transform: uppercase;
text-align: center;
font-weight: 700;
font-size: 3.5rem;
text-decoration: none;

color: #009e75;
}




.top-content ul.sesstion-button li a small{
line-height: 1.0em;
font-weight: 400;
font-size: 1.8rem;
}


.top-content ul.sesstion-button li:first-child{
margin: 0 5.0vw 0 0;
}


.top-content ul.sesstion-button li:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
opacity: .3;
}

.top-content ul.sesstion-button li.tech:after{
background: url(/sf3/partner-day/assets/img/bg-tech.png) no-repeat;
background-size:cover;
}

.top-content ul.sesstion-button li.recruit:after{
background: url(/sf3/partner-day/assets/img/bg-recruit.jpg) no-repeat;
background-size:cover;
}


.top-content ul.sesstion-button li:hover:after {
opacity: .3;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

.top-content ul.sesstion-button li a {
width: 100%;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);

display: block;
align-items: center;
justify-content: center;
z-index: 2;
text-decoration: none;
}



.top-content table.news {
box-sizing: border-box;
width: 90%;
margin: 0 auto;
padding: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
background-color: rgba(255, 255, 255, 1.0);
}


.top-content table.news tbody tr th,
.top-content table.news tbody tr td {
box-sizing: border-box;
border-bottom: 1px solid rgba(0,0,0,0.3);
font-size: 1.5rem;
line-height: 1.5em;
}


.top-content table.news tbody tr th{


width: 85%;
text-align: left;
color: rgba(0,0,0,1.0);
background-color: #FFF;
padding: 10px 0.5em 10px 0.5em;
box-sizing: border-box;
font-weight: normal;
}


.top-content table.news tbody tr td {
width: 15%;
padding: 10px 0.5em 10px 0.5em;
text-transform: uppercase;
text-align: left;
}

.top-content table.news tbody tr td.enlarge {
font-size: 1.8rem;
}

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

.top-content ul.sesstion-button li{
width: 94.0vw;
}

.top-content ul.sesstion-button li:first-child{
margin: 0 0 4.0vw 0;
}


.top-content table.news{
width: 100%;
}


}


/* ------------------------------ */

table.upcomingevent {
box-sizing: border-box;
width: 90%;
margin: 0 auto 5.0em auto;
padding: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
background-color: rgba(255, 255, 255, 1.0);
}

table.upcomingevent thead tr th{
box-sizing: border-box;
border-bottom: 1px solid rgba(0,0,0,0.3);
font-size: 1.5rem;
line-height: 1.5em;


/*background-color: rgba(100, 100, 100, 1.0);*/

color: rgba(255, 255, 255, 1.0);
background: linear-gradient(-15deg, #00daa6, #009e75);
background: -webkit-linear-gradient(-15deg, #00daa6, #009e75);


height: 45px;
}

table.upcomingevent thead tr th.date{width: 15%}
table.upcomingevent thead tr th.title{width: 60%}
table.upcomingevent thead tr th.venue{width: 25%}


table.upcomingevent tbody tr th,
table.upcomingevent tbody tr td {
box-sizing: border-box;
border-bottom: 1px solid rgba(0,0,0,0.3);
font-size: 1.8rem;
line-height: 1.1em;
height: 60px;

text-align: center;
}


table.upcomingevent tbody tr th{
/*width: 85%;*/
color: rgba(0,0,0,1.0);
background-color: #FFF;
padding: 10px 0.5em 10px 0.5em;
box-sizing: border-box;
font-weight: normal;
}


table.upcomingevent tbody tr td {
padding: 10px 0.5em 10px 0.5em;
}



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



table.upcomingevent{
width: 100%;
}


}


/* ------------------------------ */



.top-content table.event-overview {
box-sizing: border-box;
width: 60%;
margin: 0 auto;
padding: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
background-color: rgba(255, 255, 255, 1.0);
}

.top-content table.event-overview thead tr th[colspan="2"] {
border-bottom: 1px solid rgba(0,0,0,0.3);
font-size: 2.2rem;
padding: 10px 0 10px 0;
font-weight: 200;
text-transform: uppercase;
color: rgba(255, 255, 255, 1.0);
background: linear-gradient(-15deg, #00daa6, #009e75);
background: -webkit-linear-gradient(-15deg, #00daa6, #009e75);
}


.top-content table.event-overview tbody tr th,
.top-content table.event-overview tbody tr td {
box-sizing: border-box;
border-bottom: 1px solid rgba(0,0,0,0.3);
font-size: 1.5rem;
line-height: 1.5em;
}


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

color: rgba(255, 255, 255, 1.0);
background: linear-gradient(-15deg, #00daa6, #009e75);
background: -webkit-linear-gradient(-15deg, #00daa6, #009e75);

clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);

text-align: center;

}


.top-content table.event-overview tbody tr td {
width: 75%;
text-align: right;
color: rgba(0,0,0,1.0);
background-color: #FFF;
padding: 0 0.5em 0 0.5em;
box-sizing: border-box;

}

.top-content table.event-overview tbody tr td.enlarge {
font-size: 1.8rem;
}

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

.top-content ul.sesstion-button li{
width: 94.0vw;
}

.top-content ul.sesstion-button li:first-child{
margin: 0 0 4.0vw 0;
}


.top-content table.event-overview{
width: 100%;
}


}

.top-content ul.clist {
text-align: left;
}


.top-content ul.clist:first-of-type{
margin: 0 0 3.2em 0;
}

.top-content ul.clist li{
vertical-align: top;
width: 22.25vw;
display: inline-block;
margin: 0 2vw 2vw 0;

}

.top-content ul.clist li figure img{
width: 100%;
height: auto;
}

.top-content ul.clist li h3,
.top-content ul.clist li h4{
text-align: center;
font-weight: 400;
font-size: 1.0rem;
line-height: 1.1em;
margin: 1.0em 0 0.8em 0;
width: 22.25vw;
text-transform: none;
}

.top-content ul.clist li:nth-child(4n+4){
margin: 0 0 2vw 0;
}



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


.top-content ul.clist li,
.top-content ul.clist li h3,
.top-content ul.clist li h4{
width: 30.33vw;
}

.top-content ul.clist li,
.top-content ul.clist li:nth-child(4n+4){
margin: 0 0 2vw 0;
}

.top-content ul.clist li:nth-child(3n+2){
margin: 0 2vw 2vw 2vw;
}

}


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


.top-content ul.clist li,
.top-content ul.clist li h3,
.top-content ul.clist li h4{
width: 46.5vw;

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

.top-content ul.clist li,
.top-content ul.clist li:nth-child(4n+4),
.top-content ul.clist li:nth-child(3n+2){
margin: 0 0vw 2vw 0vw;
}

.top-content ul.clist li:nth-child(even) {
margin: 0 0 2vw 2vw;
}

}




#about-partnerday,
#recruit-session{
background-color: rgba(255,255,255,1.0);
}

#time-table,
#company-list{
background:rgb(245, 247, 249,1.0);
}

#tech-session{
color: rgba(255,255,255,1.0);
background: linear-gradient(-15deg, #00daa6, #009e75);
background: -webkit-linear-gradient(-15deg, #00daa6, #009e75);
}

#overview{
background-color: #ffffff;
background-image: repeating-linear-gradient(-45deg, #f5f5f5, #f5f5f5 3px, transparent 0, transparent 6px);
border-bottom: 1px solid #F5F5F5;
}

/*
#tech-session img{
width: 95vw;
height: auto;
}

#about-partnerday img{
width: 25vw;
height: auto;
border-radius: 27px;
}
*/


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

.top-content h2,
.top-content h3,
.top-content p,
.top-content .pdf{
width: 94vw;
}

/*
#about-partnerday img{
width: 50vw;
}

#tech-session img{
width: 94vw;
}
*/


}

/*--------------------------------------------------------
Common section
--------------------------------------------------------*/

/*
.common-section{
width: 100%;
margin: 0 auto;
padding: 100px 2.5% 100px 2.5%;
box-sizing: border-box;
text-align: center;
font-size: 1.4rem;
}

.common-section-nosidespace{
width: 100%;
margin: 0 auto;
padding: 100px 0 100px 0;
box-sizing: border-box;
text-align: center;
font-size: 1.4rem;
}

.common-section h1,
.common-section-nosidespace h1,
.common-section h2,
.common-section-nosidespace h2{
font-size: 2.5rem;
font-weight: 400;
line-height: 1.2em;
text-transform: uppercase;
}

.common-section h1,
.common-section-nosidespace h1{
letter-spacing: 0.05em;
}

.common-section h1.avoid,
.common-section-nosidespace h1.avoid,
.common-section h2.avoid,
.common-section-nosidespace h2.avoid{
text-transform: none !important;
}


.common-section h1,
.common-section-nosidespace h1,
.common-section h2:first-of-type,
.common-section-nosidespace h2:first-of-type{
margin: 0 0 1.5em 0;
}

.common-section h2,
.common-section-nosidespace h2,
.common-section h2.ignoreh2{
margin: 3.0em auto 1.5em auto;
width: 60%;
text-align: left;
}


.common-section p.description-text,
.common-section-nosidespace p.description-text{
width: 60%;
letter-spacing: 0.05em;
line-height: 2.0em;
margin: 0 auto;
text-align: left;
}

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

.common-section{
padding: 50px 2.5% 50px 2.5%;
}

.common-section-nosidespace{
padding: 50px 0 50px 0;
}

.common-section p.description-text{
width: 100%;
}


}
*/



/*--------------------------------------------------------
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: 50px auto 0 auto;
}

.cta-button a,
#contact button[type="submit"]{
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: #009e75;
background: #FFF;
border: 1.5px solid #009e75;

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

.cta-button a i,
#contact button[type="submit"] i{
padding: 0 1rem 0 0;
}

.cta-button.white a {
color: rgba(255, 255, 255, 1.0);
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 1.0);

}


.cta-button a:hover,
#contact button[type="submit"]:hover{	
color: rgba(255, 255, 255, 1.0);
background: #009e75;
border: 1.5px solid rgba(255, 255, 255, 0.0);
}

.cta-button.white a:hover {
color: #009e75;
background: #FFF;
border: 1.5px solid #009e75;

}


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

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

}



#contact button[type="button"]{
font-weight: 300;
color: #5a5a5a;
display: block;
text-decoration: underline !important;
font-size: 1.3rem;
margin: 10px auto 25px auto;
background: none;
border: none;
cursor: pointer;
}

#contact button[type="button"]:hover{
opacity: 0.6;
}



/*--------------------------------------------------------
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(0,0,0,1.0);
color: rgba(255,255,255,1.0);

width: 100%;
margin: 0 auto;
padding: 3.6rem 2.5% 1.8rem 2.5%;
box-sizing: border-box;
font-size: 1.6rem;
text-align: center;
}


footer svg{
margin: 0 auto 3.6rem auto;
display: block;
width: 180px;
height: auto;
text-align: center;
}


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

footer #fnavi ul li.header{
color: rgba(255,255,255,1.0);
}

footer #fnavi ul li{
margin: 0 0 0 0;
line-height: 1.0em;
font-weight: 200;
display: inline-block;
}

footer #fnavi ul li.header{
margin: 3.0rem 0 0 0;
}

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:before {
content: "|";
margin: 0 1.0rem 0 0;
}

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


footer p small{
line-height: 1.0em;
font-size: 1.2rem;
text-align: center;
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% ;
}