@charset "utf-8";


/*======================



gx96.css



======================*/
.wid1000 {width:1000px;margin:0 auto;}
main {margin-top:85px;}
body {
  background:url(../img/bg_page.png) no-repeat center top;
  background-attachment:fixed;
  background-size:100%;
}


/*スクロールエフェクト
=================================*/

/*--1秒--*/
.fade_anim_1s {
  opacity : 0;
  visibility: hidden;
  transition: 1s;
}
.fade_anim_1s_active {
  opacity: 1;
  visibility: visible;
}

/*--2秒--*/
.fade_anim_2s {
  opacity : 0;
  visibility: hidden;
  transition: 2s;
/*  transform: translateY(30px);*/
}
.fade_anim_2s_active {
  opacity: 1;
  visibility: visible;
/*  transform: translateY(0);*/
}
/*--3秒--*/
.fade_anim_3s {
  opacity : 0;
  visibility: hidden;
  transition: 3s;
}
.fade_anim_3s_active {
  opacity: 1;
  visibility: visible;
}

/*--右からフェードイン--*/
.right_fade_anim {
  transition: 1s;
  transform: translateX(50%);
}
.right_fade_active {
  visibility: visible;
  transform: translateX(0);
}
/*--左からフェードイン--*/
.left_fade_anim {
  transition: 1s;
  transform: translateX(-50%);
}
.left_fade_active {
  visibility: visible;
  transform: translateX(0);
}
/*--下からフェードイン--*/
.under_fade_anim {
  transition: 2s;
  transform: translateY(30%);
}
.under_fade_active {
  visibility: visible;
  transform: translateX(0);
}


/*
1stView
======================*/
h1 {
/*  transform: translateX(-10%);*/
}
h1 img {
  width:110%;
}
#first .area_border {
  padding-bottom:0;
}
/*
各エリア共通
======================*/
.area_border {
  border-top:5px solid #e10a0a;
  border-bottom:5px solid #e10a0a;
  background:#000;
  margin-bottom:80px;
  padding-bottom:30px;
}
.inner01 {
  width:70%;
  min-width:920px;
  margin:0 auto;
}
.inner02 {
  width:80%;
  min-width:1000px;
  margin:0 auto;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom:10px;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.area_line {
  position:relative;
  padding-bottom:6%;
  margin-bottom:60px;
}
.area_line::after {
  content:"";
  background:url(../img/img_arealine.png) no-repeat center center;
  width:100%;
  min-height:34px;
  position:absolute;
  bottom:0;
  background-size:cover;
}

/*
area01
======================*/
#area01 {
  background:url(../img/bg_area1.png) no-repeat center top;
  background-size:cover;
  padding:26px 0 2.2%;
}
#area01 * {
  color:#000000;
}
#area01 .inner01 .clearfix {
  margin-bottom:120px;
}
#area01 .inner01 h2 {
  float:right;
  width:54%;
  text-align:center;
  margin-bottom:30px;
}
#area01 .inner01 h2 + p {
  float:left;
  width:42%;
}
#area01 .inner01 h2 + p img {
  width:100%;
}
#area01 .inner01 h2 + p + p,
#area01 .inner01 h2 + p + p + p {
  float:right;
  width:54%;
  font-weight:bold;
}
.h_icon01 {
  font-size:1.5em;
  margin-bottom:20px;
  position:relative;
  padding-left:60px;
  line-height:1;
}
.h_icon01::before {
  content:"";
  background:url(../img/ic_border01.png) no-repeat left top;
  width:57px;
  height:22px;
  background-size:contain;
  top:0;
  left:0;
  position:absolute;
}

#area01 .area01_movie {
  background:#000;
  border:3px solid #e10a0a;
  padding:10px 30px;
  width:84%;
  margin:0 auto;
}
#area01 .area01_movie * {
  color:#ffffff;
}
#area01 .area01_movie h3 {
  position:relative;
  line-height:1;
  padding:16px 0 10px 60px;
  margin-bottom:15px;
}
#area01 .area01_movie h3::before {
  content:"";
  background:url(../img/common/ic_bs01.png) no-repeat center center;
  width:48px;
  height:48px;
  background-size:contain;
  position:absolute;
  left:0;
  top:0;
}

/*
area02
======================*/
#area02 .inner02 {
  position:relative;
  margin-top:-80px;
}
#area02 .inner02::before {
  content:"";
  background:url(../img/area02_arrow01.png) no-repeat center top;
  width:153px;
  height:77px;
  position:absolute;
  left:45%;
  top:47%;
  z-index:1;
}
#area02 .inner02 p {
  float:left;
  width:49%;
}
#area02 .inner02 p + p {
  float:right;
}
#area02 .inner02 p img {
  width:100%;
}

/*
area03,area04
======================*/
/*--h2--*/
.tf2021_h2_box {
  margin-bottom:20px;
  position:relative;
}
.tf2021_h2_box:before {
  content:"";
  display:block;
  width:30%;
  height:52px;
  background:linear-gradient(to right,#e51417, #750000 70%,#e51417);
  position:absolute;
  z-index:1;
  top:0;
}
.tf2021_h2_box:after {
  content:"";
  display:block;
  position:absolute;
  width:60px;
  height:54px;
  top:-1px;
  left:30%;
  z-index:1;
/*  background:linear-gradient(to right,#f02630, #f82224);*/
  background:#e51417;
  transform: scaleY(2.5) perspective(.6em) rotateX(-15deg);
  -webkit-transform:scaleY(2.5) perspective(.6em) rotateX(-15deg);
  transform-origin: top left;
}
.tf2021_h2_box h2 {
  color:#ffffff;
  margin-left:16%;
  font-size:1.5em;
  padding-top:5px;
  position:relative;
  z-index:2;
}
#area03 {
  overflow:hidden;
}
#area03 .area03_01block p,
#area04 .area04_01block .area04_01block_txt {
  margin-left:16%;
}
#area03 .area03_01block p + p {
  margin-top:-14%;
}
#area03 .area03_01block p + p img {
  width:100%;
}
.block_2col {
  margin-bottom:20px;
}
.block_2col p {
  float:left;
  width:48%;
}
.block_2col p img,
.area03_02block p img,
.area03_03block p img,
.area04_01block .clearfix p img {
  width:100%;
}
.block_2col p + p {
  float:right;
}
.area03_02block p {
  float:left;
  width:60%;
}
.area03_02block p + p {
  float:right;
  width:36%;
}
.area03_03block .clearfix {
  margin-bottom:20px;
}
.area03_03block .area03_03block_1 {
  float:left;
  width:43%;
}
.area03_03block_1_txt {
  margin-bottom:10px;
}
.area03_03block .area03_03block_2 {
  float:right;
  width:54.2%;
  position:relative;
}
.area03_03block_2_txt {
  position:absolute;
  top:10%;
  right:3%;
}
.area04_01block .clearfix p {
  float:left;
  width:49%;
  background:url(../img/area04_img_under_flash01.png) no-repeat top center;
  background-size:cover;
  padding-left:3%;
}
.area04_01block .clearfix {
  margin-top:-80px;
  margin-bottom:30px;
}
.area04_01block .clearfix p + p {
  float:right;
  background:url(../img/area04_img_under_flash02.png) no-repeat top center;
  background-size:cover;
}
/*
area05
======================*/
#area05 {
  padding-top:3%;
}
#area05 .h_icon01,
#area05 .h_icon01 + p,
#area05 .h_icon01 + p + p + p {
  float:right;
  width:80%;
}
#area05 .h_icon01 + p {
  font-size:1.2em;
  margin-bottom:10px;
  font-weight:bold;
}
#area05 .h_icon01 + p + p {
  float:left;
  width:16%;
  margin-top:-44px;
}
#area05 .h_icon01 + p + p img {
  width:100%;
}
#area05 .inner01 h3 {
  float:left;
  width:8.8%;
}
#area05 .inner01 h3 img {
  width:100%;
}
#area05 h3 + div {
  float:right;
  width:90%;
}
/*
area06
======================*/
#area06 {
  font-size:1.1em;
  padding-top:10px;
}
.syoutenlogo {
  margin-bottom:20px;
}
.syoutenlogo + p {
  text-align:center;
  margin-bottom:30px;
}

#area06 h3 {
  font-size:1.2em;
  font-weight:bold;
  margin-bottom:6px;
}
#area06 dt {
  float:left;
  width:23%;
}
#area06 dd {
  float:left;
  width:77%;
  position:relative;
}
#area06 dd:before {
  content:"：";
  position:absolute;
  top:0;
  left:-2em;
}

#area06 dl + p {
  text-align:center;
  margin:30px auto 0;
}
/*.detail_link_area {
  width:100%;
  text-align:center;
  margin-bottom:60px;
}*/
.cr {
  color:#ffffff;
  font-size:1.1em;
  margin-bottom:60px;
  text-shadow:0 0 3px #000;
}