@charset "utf-8";
/*
Theme Name: DYNAMITE BOAT RACE
Version:1.0
*/

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Utility
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.ffs-p{
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
}

.disp-no{
    display: none;
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

Common

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
body{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: normal;
    color: #000;
    font-weight: 400;
}
p{
    font-size: 16px;
    line-height: 1.5;
}
span,div{
    font-size: 16px;
    line-height: 1;
}

input[type='text'] {
    width: 100%;
    background-color: white;
    -webkit-rtl-ordering: logical;
    padding: 0 5px 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 18px;
    line-height: 48px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type='email'] {
    width: 100%;
    background-color: white;
    -webkit-rtl-ordering: logical;
    padding: 0 5px 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 18px;
    line-height: 48px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

textarea {
    width: 100%;
    max-width: 420px;
    min-height: 240px;
    background-color: white;
    -webkit-rtl-ordering: logical;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    resize: auto;
    cursor: text;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 5px;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="submit"],input[type="button"]{
    border: none;
    cursor: pointer;
}
input[type="submit"]:hover{
    opacity: .8;
}

/* sp - 640px ~ 320px ------------------------------*/
@media screen and ( max-width:640px) and (min-width:320px) {
p{
    font-size: 22px;
    line-height: 1.5;
}
span,div{
    font-size: 22px;
    line-height: 1;
}
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

input[type='text'] {
    font-size: 24px;
}
input[type='email'] {
    font-size: 24px;
}

input[type=radio] {
    display: none;      
}
input[type=radio] ~ span{
    position: relative;     
    padding: 0 0 0 28px;
}
input[type=radio] ~ span:nth-child(2n) {
    margin: 0 0 0 16px;
}
input[type=radio] ~ span:nth-child(2) {
    margin: 0 0 0 0;
}
input[type=radio] ~ span:after, input[type=radio] ~ span:before {
    position: absolute; 
    content: "";        
    display: block;     
    top: 50%;           
}
input[type=radio] ~ span:after {
    left: 0px;          
    margin-top: -11px;  
    width: 16px;        
    height: 16px;       
    border: 2px solid #ccc; 
    border-radius: 50%;     
}
input[type=radio] ~ span:before {
    left: 5px;          
    margin-top: -6px;   
    width: 10px;        
    height: 10px;       
    background: #f2171e;
    border-radius: 50%; 
    opacity: 0;         
}
input[type=radio]:checked + span:before {
    opacity: 1;     
}
input[type=radio] ~ span:hover:after {
    border-color: #f2171e;  
}
}



.pc{

}
.sp{
    display: none;
}
.sp-ib{
    display: none;
}
.d-none{
    display: none;
}
html,body{
    width: 100%;
}

img{
    max-width: 100%;
}

#pageWrap{
    width: 100%;
    min-width: 1200px;
    overflow: hidden;
}

main{
    width: 100%;
}

.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
}

.pointer{
    cursor: pointer;
}


/* sp - 640px ~ 320px ------------------------------*/
@media screen and ( max-width:640px) and (min-width:320px) {
.pc{
    display: none;
}
.sp{
    display: block;
}
.sp-ib{
    display: inline-block;
}
#pageWrap {
    min-width: auto;
}
}



/* -----------------------------------------------------------
Link
----------------------------------------------------------- */
a{
    font-weight: normal;
    color: #000;
    font-weight: 400;
    text-decoration: none;
    outline: none;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

a:hover {
    opacity: .8;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}


@media screen and ( max-width:640px) {
a{
    text-decoration: none;
    outline: none;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
a:hover {
    opacity: 1;
}
}



/* ------------------------------------------------------------
header
------------------------------------------------------------ */
header{
    width: 100%;
    min-width: 1200px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
header > .inner{
    width: 980px;
    padding: 30px 0 0;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
header .logo02{
    margin: 0 0 0 auto;
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
header{
    min-width: auto;
}
header > .inner{
    width: 100%;
    padding: 20px 20px 0;
}
}



/* ------------------------------------------------------------
#mv
------------------------------------------------------------ */
#mv{
    min-width: 1200px;
    line-height: 0;
    position: relative;
}
#mv > .inner{
    position: absolute;
    width: 980px;
    height: 100%;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
}
#mv .mv-maincatch{
    position: absolute;
    top: 49.5%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
#mv{
    min-width: auto;
}
#mv > .inner{
    width: 100%;
}
#mv .mv-maincatch{
    top: 63.9%;
}
}



/* ------------------------------------------------------------
.sec
------------------------------------------------------------ */
.sec > .inner{
    width: 980px;
    padding: 0;
    margin: 0 auto;
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
.sec > .inner{
    width: 100%;
}
}



/* ------------------------------------------------------------
#project01
------------------------------------------------------------ */
#project01{
    padding: 0px 0 0;
    margin-top: -3%;
    background: url(img/project01-bg.png) 0% 2%/100% no-repeat
}

#project01 .heading{
    position: relative;
}
#project01 .heading > .inner{
    width: 980px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
}
#project01 .heading .project01{
    position: absolute;
    top: -30px;
    left: 0;
}
#project01 .heading h2{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
#project01{
    padding: 90px 0 0;
    background: url(img/project01-bg-sp.png) 0% 2%/100% no-repeat
}

#project01 .heading > .inner{
    width: 100%;
}
#project01 .heading .project01{
    position: absolute;
    top: -70px;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
}
#project01 .heading h2{
    width: 550px;
}
}



/*-----------------------------------
#project01 .sec01
-----------------------------------*/
#project01 .sec01 > .inner{
    padding: 50px 0;
}
#project01 .sec01 .secHeading{
    padding: 0 0 30px;
}
#project01 .sec01 h3{
    text-align: center;
}
#project01 .sec01 h3 span{
    display: inline;
    padding: 0px 50px;
    font-size: 40px;
    line-height: 70px;
    background: #fff338;
    color: #000;
}

#project01 .sec01 .textArea{
    text-align: center;
}
#project01 .sec01 .textArea p{
    font-size: 20px;
    line-height: 42px;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: 1px;
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
#project01 .sec01 > .inner {
    padding: 50px 0 40px;
}
#project01 .sec01 h3 span{
    padding: 0px 20px;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: -2px;
}
#project01 .sec01 .textArea p{
    font-size: 28px;
    line-height: 48px;
}
}



/*-----------------------------------
#project01 .sec02
-----------------------------------*/
#project01 .sec02 > .inner{
    padding: 0 0 90px;
}
#project01 .sec02 .secHeading{
    padding: 0 0 60px;
    text-align: center;
}
#project01 .sec02 h3{
    display: inline-block;
    padding: 10px 20px;
    background: #ff4084;
    text-align: center;
    position: relative;
}
#project01 .sec02 h3:before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 14px 0 14px;
    border-color: #ff4083 transparent transparent transparent;
    position: absolute;
    bottom: -15px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
            transform: translate(-50%,0);
}
#project01 .sec02 h3 span{
    display: inline;
    padding: 0px 50px;
    font-size: 40px;
    line-height: 70px;
    color: #fff;
}

#project01 .sec02 .cnts ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
#project01 .sec02 .cnts li{
    width: 280px;
    margin: 0 70px 60px 0;
    line-height: 0;
    position: relative;
}
#project01 .sec02 .cnts li:nth-child(1){
    border: 5px solid #63c0ab;
}
#project01 .sec02 .cnts li:nth-child(2){
    border: 5px solid #fff338;
}
#project01 .sec02 .cnts li:nth-child(3){
    margin: 0 0 60px;
    border: 5px solid #58c3e0;
}
#project01 .sec02 .cnts li:nth-child(4){
    margin: 0 70px 0 0;
    border: 5px solid #58c3e0;
}
#project01 .sec02 .cnts li:nth-child(5){
    margin: 0;
    border: 5px solid #eb6d9a;
}
#project01 .sec02 .cnts li:after{
    content: '';
    display: block;
    width: 45px;
    height: 49px;
    background: url(img/arrow01.png) no-repeat;
    position: absolute;
    top: 49%;
    right: -61px;
    -webkit-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
            transform: translate(0,-50%);
}
#project01 .sec02 .cnts li:nth-child(3):after{
    content: none;
}
#project01 .sec02 .cnts li:last-child:after{
    content: none;
}
#project01 .sec02 .cnts li img{
    max-width: none;
    position: absolute;
    top: -5px;
    left: -5px;
    z-index: 1;
}
#project01 .sec02 .cnts li .textArea{
    padding: 155px 5px 20px 10px;
}
#project01 .sec02 .cnts li .textArea span{
    display: block;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
}
#project01 .sec02 .cnts li .kaijou{
    padding: 0 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#project01 .sec02 .cnts li .kaijou span{
    display: block;
    font-size: 18px;
    line-height: 1;
}
#project01 .sec02 .cnts li .kaijou span:nth-child(1){
    padding: 5px 14px;
    margin: 0 10px 0 0;
    background: #959595;
    color: #fff;
}
#project01 .sec02 .cnts li .nittei{
    padding: 0 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#project01 .sec02 .cnts li .nittei span{
    display: block;
    font-size: 18px;
    line-height: 1;
}
#project01 .sec02 .cnts li .nittei span:nth-child(1){
    padding: 5px 14px;
    margin: 0 10px 0 0;
    background: #959595;
    color: #fff;
}
#project01 .sec02 .cnts li .ibentojouhou{
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
#project01 .sec02 .cnts li .ibentojouhou span{
    display: block;
    font-size: 17px;
    line-height: 1;
}
#project01 .sec02 .cnts li .ibentojouhou span:nth-child(1){
    padding: 5px 14px;
    margin: 0 0 7px 0;
    background: #959595;
    color: #fff;
}
#project01 .sec02 .cnts li .ibentojouhou span:nth-child(2){
    line-height: 1.3;
}
#project01 .sec02 .cnts li .ibentojouhou span b{
    color:#777777;
    font-size: 16px;
}
/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
#project01 .sec02 > .inner {
    padding: 0 0 60px;
}
#project01 .sec02 h3 {
    display: inline-block;
    width: 600px;
    padding: 10px 10px;
    background: #ff4084;
    text-align: center;
    position: relative;
}
#project01 .sec02 h3 span{
    display: inline;
    padding: 0;
    font-size: 30px;
    line-height: 70px;
    color: #fff;
}

#project01 .sec02 .cnts ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 20px;
}
#project01 .sec02 .cnts li{
    width: 100%;
    margin: 0 0 70px 0;
    background: #fff;
    line-height: 0;
    position: relative;
}
#project01 .sec02 .cnts li:nth-child(1) {
    border: 10px solid #63c0ab;
}
#project01 .sec02 .cnts li:nth-child(2){
    border: 10px solid #fff338;
}
#project01 .sec02 .cnts li:nth-child(3){
    margin: 0 0 70px;
    border: 10px solid #58c3e0;
}
#project01 .sec02 .cnts li:nth-child(4){
    margin: 0 0 70px 0;
    border: 10px solid #58c3e0;
}
#project01 .sec02 .cnts li:nth-child(5){
    margin: 0;
    border: 10px solid #eb6d9a;
}
#project01 .sec02 .cnts li:after{
    content: '';
    display: block;
    width: 45px;
    height: 49px;
    background: url(img/arrow01.png) no-repeat;
    position: absolute;
    top: auto;
    right: 50%;
    bottom: -70px;
    -webkit-transform: translate(50%,0) rotate(90deg);
        -ms-transform: translate(50%,0) rotate(90deg);
            transform: translate(50%,0) rotate(90deg);
}
#project01 .sec02 .cnts li:nth-child(3):after{
    content: '';
}
#project01 .sec02 .cnts li img {
    top: -10px;
    left: -10px;
}
#project01 .sec02 .cnts li .textArea {
    padding: 192px 5px 20px 15px;
}
#project01 .sec02 .cnts li .kaijou{
    padding: 0 0 15px;
}
#project01 .sec02 .cnts li .kaijou span{
    font-size: 28px;
}
#project01 .sec02 .cnts li .kaijou span:nth-child(1){
    width: 105px;
    padding: 10px 14px;
    margin: 0 15px 0 0;
    font-size: 26px;
    text-align: center;
}
#project01 .sec02 .cnts li .nittei{
    padding: 0 0 15px;
}
#project01 .sec02 .cnts li .nittei span{
    font-size: 28px;
}
#project01 .sec02 .cnts li .nittei span:nth-child(1){
    width: 105px;
    padding: 10px 14px;
    margin: 0 15px 0 0;
    font-size: 26px;
    text-align: center;
}
#project01 .sec02 .cnts li .ibentojouhou{
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}
#project01 .sec02 .cnts li .ibentojouhou span{
    font-size: 28px;
}
#project01 .sec02 .cnts li .ibentojouhou span:nth-child(1){
    width: 105px;
    padding: 10px 0px;
    margin: 0 15px 0 0;
    font-size: 24px;
    text-align: center;
    letter-spacing: -1px;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
}
#project01 .sec02 .cnts li .ibentojouhou span:nth-child(2){
    line-height: 1.3;
}
}



/*-----------------------------------
#project01 .sec03
-----------------------------------*/
#project01 .sec03 .secHeading{
    position: relative;
}
#project01 .sec03 .secHeading > .inner{
    width: 980px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
}
#project01 .sec03 .secHeading .project01{
    position: absolute;
    top: -30px;
    left: 0;
}
#project01 .sec03 .secHeading h3{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

#project01 .sec03 > .inner{
    padding: 50px 0;
}
#project01 .sec03 .mainMovie{
    padding: 0 0 70px;
    text-align: center;
    line-height: 0;
    position: relative;
}
#project01 .sec03 .mainMovie .main-movie{
    position: relative;
    z-index: 1;
}
#project01 .sec03 .mainMovie .lateststory{
    position: absolute;
    top: -150px;
    left: 0;
    z-index: 0;
}
#project01 .sec03 .otherMovie ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
#project01 .sec03 .otherMovie li{
    width: 180px;
    height: 148px;
    line-height: 0;
}
#project01 .sec03 .otherMovie li .textArea{
    padding: 8px 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#project01 .sec03 .otherMovie li .textArea span:nth-child(1){
    padding: 5px 8px;
    border-radius: 30px;
    background: #ff4084;
    color: #fff;
    font-size: 14px;
}
#project01 .sec03 .otherMovie li .textArea span:nth-child(2){
    padding: 0 0 0 5px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -1px;
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
#project01 .sec03 .secHeading h3 {
    width: 470px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
#project01 .sec03 > .inner {
    padding: 170px 20px 20px;
}
#project01 .sec03 .mainMovie{
    padding-bottom: 100px;
}
#project01 .sec03 .mainMovie iframe{
    width: 100%!important;
    height: 385px!important;
}
#project01 .sec03 .mainMovie .lateststory{
    position: absolute;
    top: -160px;
    left: -20px;
    z-index: 0;
}
#project01 .sec03 .otherMovie ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
#project01 .sec03 .otherMovie li{
    width: 100%;
    height: 455px;
    margin: 0 0 50px;
    line-height: 0;
}
#project01 .sec03 .otherMovie li iframe.sp{
    width: 100%!important;
    height: 385px!important;
    margin: 0;
    line-height: 0;
    display: block;
}
#project01 .sec03 .otherMovie li .textArea {
    padding: 20px 0 0;
}
#project01 .sec03 .otherMovie li .textArea span:nth-child(1){
    width: 200px;
    padding: 10px 0px;
    border-radius: 50px;
    font-size: 30px;
    text-align: center;
}
#project01 .sec03 .otherMovie li .textArea span:nth-child(2){
    padding: 0 0 0 50px;
    font-size: 30px;
}
#project01 .sec03 .otherMovie .modal{
    display: none;
}
}






/* ------------------------------------------------------------
#project02
------------------------------------------------------------ */
#project02{
    background: url(img/project02-bg.png) 100% 50px/90.833333% no-repeat;
    position: relative;
    z-index: 1;
}

#project02 .heading{
    position: relative;
}
#project02 .heading > .inner{
    width: 980px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
}
#project02 .heading .project02{
    position: absolute;
    top: -30px;
    left: 0;
}
#project02 .heading h2{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
#project02 .heading > .inner{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
}
#project02 .heading .project02{
    position: absolute;
    top: -65px;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
}
}



/*-----------------------------------
#project02 .sec01
-----------------------------------*/
#project02 .sec01 > .inner{
    padding: 60px 0;
}
#project02 .sec01 .secHeading{
    padding: 0 0 30px;
}
#project02 .sec01 h3{
    text-align: center;
}
#project02 .sec01 h3 span{
    display: inline;
    padding: 0px 50px;
    font-size: 40px;
    line-height: 70px;
    background: #fff338;
    color: #000;
}

#project02 .sec01 .textArea{
    text-align: center;
}
#project02 .sec01 .textArea p{
    font-size: 20px;
    line-height: 42px;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: 1px;
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
#project02 .sec01 h3 span{
    padding: 0px 20px;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: -2px;
}
#project02 .sec01 .textArea p{
    font-size: 28px;
    line-height: 48px;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: 1px;
}
}



/*-----------------------------------
#project02 .sec01
-----------------------------------*/
#project02 .sec02{
    background: #00b0ec;
}
#project02 .sec02 > .inner{
    padding: 50px 0;
}
#project02 .sec02 ul{
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
#project02 .sec02 li{
    width: 310px;
    height: 200px;
    margin: 0 15px 20px 0;
    position: relative;
}
#project02 .sec02 li:nth-child(1){
    width: 100%;
    margin: 0 0 15px 0;
}
#project02 .sec02 li:nth-child(4){
    margin: 0 0 15px 0;
}
#project02 .sec02 li:nth-child(5){
    width: 315px;
    margin: 0 15px 0 0;
}
#project02 .sec02 li:nth-child(6){
    margin: 0;
}
#project02 .sec02 li > img{
    max-width: none;
    position: absolute;
    right: 0;
    bottom: 0;
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
#project02 .sec02 ul{
    padding: 0 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
#project02 .sec02 li {
    width: 600px!important;
    height: 180px;
    margin: 0 0 30px!important;
    background: #fff;
    position: relative;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
#project02 .sec02 li:nth-child(2){
    height: 187px;
}
#project02 .sec02 li:nth-child(2){
    height: 184px;
}
#project02 .sec02 li > img{
    max-width: none;
    position: relative;
    right: 0;
    bottom: 0;
    z-index: 2;
}
#project02 .sec02 li:after{
    content: '';
    display: block;
    width: 24px;
    height: 34px;
    background: url(img/arrow03.png) no-repeat;
    position: absolute;
    top: 73px;
    right: 36px;
    z-index: 2;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
#project02 .sec02 li.clicked:after{
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}
}



/*-----------------------------------
modal
-----------------------------------*/
.modalTrigger{
    cursor: pointer;
}
.modalTrigger .close{
    cursor: pointer;
}
.modalTrigger.clicked{
    cursor: auto;
}
.modal{
    visibility: hidden;
}
.modalTrigger.clicked .modal,
.modal.show{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    overflow: auto;
}
.modalTrigger.clicked .modal::-webkit-scrollbar,
.modal.show::-webkit-scrollbar{
  display: none;
}
.otherMovie .modalTrigger.clicked .modal,
.otherMovie .modal.show{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.modal > .inner{
    width: 980px;
    min-height: -webkit-max-content;
    min-height: -moz-max-content;
    min-height: max-content;
    max-height: none;
    padding: 70px 70px;
    margin: 0 auto;
    background: #fff;
    position: relative;
}
.modal .close{
    position: absolute;
    top: 30px;
    right: 30px;
}
.modal .movieWrap{
    padding: 30px 0 0;
    text-align: center;
}
.modalTrigger .movie{
    display: none;
}
.modalTrigger.clicked .modal .movie{
    display: block;
    margin: 0 auto;
}
.modal .heading h3{
    font-size: 32px;
    padding: 0 0 20px;
    border-bottom: 5px solid #00b0ec;
}
.modal .heading .headingBottom{
    padding: 15px 0 30px;
}
.modal .heading .headingBottom span{
    display: block;
    padding: 5px 0 0;
    text-align: right;
}
.modal .heading .headingBottom span:nth-child(1){
    font-size: 18px;
}
.modal .heading .headingBottom span:nth-child(2){
    font-size: 16px;
}
.modal .part{
    padding: 0 0 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 0;
}
.modal .part:nth-child(2n-1){
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.modal .part:last-child{
    padding: 0;
}
.modal .part .imgArea{
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
}
.modal .part .imgArea img{
    width: 330px;
}
.modal .part .textArea{
    width: 100%;
    padding: 0 0 0 30px;
}
.modal .part:nth-child(2n-1) .textArea{
    padding: 0 30px 0 0;
}
.modal .part .textArea p{
    font-size: 16px;
    line-height: 2;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: -1px;
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
#project02 .sec02 .modalTrigger.clicked{
    height: auto;
}
#project02 .sec02 .modalTrigger .modal,
#project02 .sec02 .modal{
    position: relative;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
}
#project02 .sec02 .modalTrigger.clicked .modal,
#project02 .sec02 .modal.show{
    width: 100%;
    height: 100%;
    padding: 0 0;
    background: rgba(0,0,0,.5);
    visibility: visible;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: auto;
    opacity: 1;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
#project02 .sec02 .modal > .inner{
    width: 100%;
    min-height: -webkit-max-content;
    min-height: -moz-max-content;
    min-height: max-content;
    max-height: none;
    padding: 20px;
    margin: 0 auto;
    background: #fff;
    position: relative;
}
.modalTrigger .close{
    display: none;
}
.modal .heading h3{
    font-size: 36px;
    line-height: 42px;
    padding: 0 0 10px;
    border-bottom: 5px solid #00b0ec;
}
.modal .heading .headingBottom {
    padding: 15px 0 30px;
    text-align: right;
}
.modal .heading .headingBottom span {
    display: inline;
    padding: 5px 0 0 10px;
    font-size: 24px;
    text-align: right;
}
.modal .part{
    padding: 0 0 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    line-height: 0;
}
.modal .part:nth-child(2n-1) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.modal .part .imgArea{
    width: 100%;
    min-width: auto;
    padding: 0 0 30px;
    text-align: center;
}
.modal .part .imgArea img{
    width: auto;
}
.modal .part .textArea {
    width: 100%;
    padding: 0;
}
.modal .part:nth-child(2n-1) .textArea {
    padding: 0;
}
.modal .part .textArea p{
    font-size: 28px;
    line-height: 48px;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: -1px;
}
}



/*-----------------------------------
footer
-----------------------------------*/
footer > .inner{
    padding: 30px 0;
    text-align: center;
    background: #000;
}
footer span{
    color: #fff;
    font-size: 14px;
}

/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
}



#project01 .sec03 .otherMovie li{
    position: relative;
}
.comingsoon{
    position: absolute;
    top:0;
    right:0;
    z-index: 1;
}
#project02 .sec02 li{
    position: relative;
}
@media screen and ( max-width:640px) {
    .comingsoon{
        position: absolute!important;
        top:0;
        right:auto!important;
        bottom:auto!important;
        left:0;
        z-index: 3!important;
    }
    #project02 .sec02 li:nth-child(1) > img{
        right:auto;
        bottom:auto;
    }
    .lateststory{
        /*display: none;*/
    }
    #project01 .sec03 > .inner{
        padding-top: 172px;
    }
}



.rule{
    text-align: center;
    margin: 50px 0 0;
}

/*-----------------------------------
#project01 .sec04
-----------------------------------*/
#project01 .sec04 .secHeading{
    position: relative;
}
#project01 .sec04 .secHeading > .inner{
    width: 980px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
}
#project01 .sec04 .secHeading .project01{
    position: absolute;
    top: -30px;
    left: 0;
}
#project01 .sec04 .secHeading h3{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

#project01 .sec04{
    width: 100%;
    /*height: 861px;*/
    /*height:540px;*/
    margin: 0 0 -20px;
    /*background: url(img/project01-sec04-bg.png) 50%/100% 100% no-repeat;*/
    position: relative;
    z-index: 1;
}
#project01 .sec04 > .inner{
    padding: 100px 0 0;
}
#project01 .sec04 .secHeading{
    padding: 0 0 40px;
}
#project01 .sec04 .textArea{
    text-align: center;
}
#project01 .sec04 h3{
    text-align: center;
}
#project01 .sec04 p{
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: 1px;
    color: #fff;
}
#project01 .sec04 p:nth-child(1){
    padding: 0 0 30px;
}
#project01 .sec04 p img{
    position: relative;
    /*left: 30px;*/
}
#project01 .sec04 span{
    display: inline-block;
    padding: 10px 20px;
    margin: 30px 0 0;
    border: 3px solid #fff;
    border-radius: 30px;
    font-size: 20px;
    color: #fff;
    line-height: 1;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: 1px;
}
#project01 .sec04 .btnArea{
    padding: 50px 0 0;
}
#project01 .sec04 .btnArea a:hover{
    opacity: .9;
}
#project01 .sec04 .sec04-content{
    background: url(img/project01-sec04-bg.png);
    background-position: center top;
   background-repeat: no-repeat;
    margin-top: -4%;
    padding: 10% 0 14%;
}
/* sp -　0px ~ 640px ------------------------------*/
@media screen and ( max-width:640px) {
#project01 .sec04{
    width: 100%;
    /*height: 1040px;*/
    height:910px;
    margin: 0 0 -10px;
    /*background: url(img/project01-sec04-bg-sp.png) 50%/100% 100% no-repeat;*/
    position: relative;
    z-index: 1;
}
#project01 .sec04 h3 img{
    width: 448px;
}
#project01 .sec04 p{
    text-align: center;
    font-size: 28px;
    line-height: 38px;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: 1px;
    color: #fff;
}
#project01 .sec04 p:nth-child(1) {
    padding: 0 0 50px;
}
#project01 .sec04 p img {
    position: relative;
    left: 30px;
}
#project01 .sec04 span{
    display: inline-block;
    padding: 15px 30px;
    margin: 50px 0 0;
    border: 3px solid #fff;
    border-radius: 30px;
    font-size: 26px;
    color: #fff;
    line-height: 1;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: 1px;
}
}

.about{
    text-align: center;
    margin: 30px 0 30px;
}
.btn{
    text-align: center;
}
.btn .txt{
    padding-bottom: 10px!important;
}
#project01 .sec03 .mainMovie > img{
 z-index: 1;
 position: relative;   
}




/*-----------------------------------
#project01 .sec05
-----------------------------------*/
#project01 .sec05 .secHeading{
    position: relative;
}
#project01 .sec05 .secHeading > .inner{
    width: 980px;
    margin: 0 auto;
}
#project01 .sec05 .secHeading .project01{
    position: absolute;
    top: -30px;
    left: 0;
}
#project01 .sec05 .secHeading h3{
    width: 100%;
    text-align: center;
    /*position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);*/
}

#project01 .sec05{
    width: 100%;
    /*height: 861px;*/
    /*height:540px;*/
    margin: -3% 0 -20px;
   background-image: url(img/project01-sec05-bg.png);
   background-position: center top;
   background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    padding: 10% 0 15%;
}
#project01 .sec05 > .inner{
    padding: 100px 0 0;
}
#project01 .sec05 .secHeading{
    padding: 0 0 40px;
}
#project01 .sec05 .textArea{
    text-align: center;
}
#project01 .sec05 h3{
    text-align: center;
}
#project01 .sec05 p{
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
    -webkit-font-feature-settings : "palt";
            font-feature-settings : "palt";
    letter-spacing: 1px;
    color: #fff;
}
#project01 .sec05 .sec05-content{
    text-align: center;
}
#project01 .sec05 ul{
    max-width: 980px;
    margin: 30px auto;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#project01 .sec05 ul li{
    width: calc(100% / 5 - 7.5px);
    height: 196px;
    overflow: hidden;
}
.bet_modal .heading h3{
    border-bottom: none;
}
.bet_modal table{
    width: 100%;
}
.bet_modal table tr td,
.bet_modal table tr th{
    border:1px solid #00b0ec;
    color:#b2b2b2;
    text-align: center;
    font-size: 18px;
    padding: 10px;
    height: 39px;
}
.bet_modal table tr td{
    width: 33.3333%;
}
.bet_modal table tr th{
    background-color: #dedede;
}
.bet_modal table .release tr th{
    background-color: #b0ebff;
    color:#008bba;
}

.bet_modal table .release tr td.hit{
    color:#ff0000;
}
.bet_modal table .release tr td{
    color:#000;
}
.bet_modal .total{
    border-bottom: 2px solid #00b0ec;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 30px;
    padding-bottom: 5px;
    font-size: 24px;
}
.bet_modal .total span{
    font-size: 24px;
}
.bet_modal .total span.total_num{
    color:#ff0000;
}
.bet_modal .total span.total_num b{
    font-size: 32px;
}
@media screen and ( max-width:640px) {
    #project01 .sec02 .cnts li .ibentojouhou span b{
        font-size: 26px;
        display: block;
    }
    #project01 .sec04{
        height:2015px;
    }
    #project01 .sec04 .sec04-content{
        background-image: url(img/project01-sec04-bg-sp.png);
        padding:70px 20px 105px;
        margin-top: -60px;
    }
    #project01 .sec04 p{
        font-size: 26px;
        line-height: 1.8;
        text-align: left;
    }
    #project01 .sec04 p:nth-child(1){
        text-align: center;
        margin-top: 40px;
    }
    #project01 .sec04 p:nth-child(1) img{
        left:0;
        margin-right: auto;
        margin-left: auto;
    }
    .about{
        margin-bottom: 110px;
        margin-top: 40px;
    }
    #project01 .sec05 .about{
        margin-bottom: 120px;
    }
    #project01 .sec05{
        background-image: url(img/project01-sec05-bg-sp.png);
        padding: 20% 0 28%;
    }
    #project01 .sec05 .secHeading img{
        margin-right: auto;
        margin-left: auto;
    }
    #project01 .sec05 .secHeading{
        padding-bottom: 50px;
    }
    #project01 .sec05 .sec05-content{
        padding:0px 20px 15px;
    }
    #project01 .sec05 p{
        font-size: 26px;
        line-height: 1.8;
        text-align: left;
    }
    #project01 .sec05 ul{
        max-width: none;
        margin: 40px auto;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    #project01 .sec05 ul li{
        width: calc(33.33333% - 15px);
        margin-right: 7.5px;
        margin-left: 7.5px;
        margin-bottom: 15px;
    }
    #project01 .sec05 .txt{
        text-align: center;
    }
    #project01 .sec05 .secHeading > .inner{
        width: auto;
    }
    #project02 .sec01 .textArea p{
        text-align: left;
        padding: 0 18px;
    }
    #project02 .sec02 li:nth-child(5){
        margin-bottom: 30px;
    }
    #project02 .sec02 li:nth-child(1){
        margin-bottom: 30px;
    }
    .sec05 .modal > .inner{
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }

    .sec05 .modalTrigger .close{
        display: block;
    }
    .rule img{
        margin-right: auto;
        margin-left: auto;
    }
    .bet_modal table tr th,.bet_modal table tr td{
        font-size: 22px;
    }
    .bet_modal table tr th{
        font-size: 26px;
    }
    #project01 .sec01 .textArea{
        text-align: left;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.movie02{
    margin-top: 100px;
    background-color: #d8eef3;
    padding-bottom: 100px;
    /*margin-bottom: 8%;*/
}
.movie02 .inner{
    width: 980px;
    margin: 0 auto;
    position: relative;
}
.movie02 h2{
    text-align: center;
    position: relative;
    z-index: 1;
    top: -22px;
}
.movie02 h3{
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
.movie02-wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: relative;
    z-index: 1;
    height: 200px;
    /*overflow: hidden;*/

}
.movie02-wrap-item{
    width: calc(100% / 3 - 15px);
}
.movi02-img{
    position: absolute;
    top: -90px;
    right: 20px;
    z-index: 0;
}
.movie02-wrap.sp{
    display: none;
}
.column-txt{
    text-align: center;
    font-size: 16px;
    color:#fff;
    margin-top: 20px;
}
@media screen and ( max-width:640px) {

    .movie02 .inner{
        width: 100%;
    }
    .movie02{
        margin-top: 20px;
        padding-bottom: 100px;
    }
    .movie02-wrap.sp{
        display: block;
        padding-right: 20px;
        padding-left: 20px;
        margin-top: -130px
    }
    .movie02-wrap.pc{
        display: none;
    }
    .movie02-wrap-item{
        width: 100%;
        margin-bottom: 30px;
    }
    .movie02-wrap-item img{
        width: 100%;
    }
    #project01{
        margin-top: -18%
    }
    .movie02-wrap{
        height: auto;
    }
    .column-txt{
        text-align: center;
        font-size: 20px;
        color:#fff;
        margin-top: 20px;
    }
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
#project02 .sec02 li > .release{
    position: absolute;
    top:-5px;
    left:-5px;
    z-index: 3;
}
@media screen and ( min-width:641px) {
    #project02 .sec02 li.modalTrigger00 > .release{
        position: absolute;
        top:49px;
    }
}

.column-box h3{
    margin-top: 30px;
    margin-bottom: 30px;
    padding-bottom: 8px;
    border-bottom: #d5d5d5 2px solid;
    font-size: 20px;
}
.column-box p{
    font-size: 15px;
    margin-bottom: 24px;
}
.column-box .matome{
    background-color: #f13e7b;
    position: relative;
    margin-top: 40px;
    text-align: center;
    padding: 20px 10px;
    margin-bottom: 100px;
}
.column-box:last-child .matome{
    margin-bottom: 0;
}
.column-box .matome img{
    position: absolute;
    right:0;
    bottom:0;
}
.column-box .matome h4{
    color:#fff;
    font-size: 30px;
}
.column-box .matome p{
    color:#fff;
    font-size: 20px;
    margin-bottom: 0;
}
@media screen and ( max-width:640px) {
    .column-box h3{
        font-size: 34px;
    }
    .column-box p{
        font-size: 28px;
    }
    .column-box .matome{
        margin-top: 130px;
        margin-bottom: 120px;
    }
    .column-box .matome h4{
        font-size: 32px;
    }
    .column-box .matome p{
        font-size: 28px;
    }
    .column-box .matome img{
        bottom:114px;
        left:50%;
        right:auto;
        margin-left: -112px;
    }
}