@charset "UTF-8";


/*--------------------------------------------------------------------------------------------------------------
  トップページ
--------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------
information
------------------------------------------*/

#main-visual .txt > div {
  display: table-row;
}

#main-visual .txt > div > h2 {
  height: 200%;
	letter-spacing: 0.19em;
  display: table-cell;
  vertical-align: bottom;
  font-size: 103px;
  line-height: 1.4;
  text-shadow: 0 0 15px #000;
}
#main-visual .txt > div > h2 span {
  font-size: .5em;
  display: block;
}

#main-visual .txt > div > h2 img {
  margin: 40px auto 0;
  max-width: 380px;
  width: 60%;
  display: block;
}
#main-visual .txt > div > p {
	letter-spacing: 0.1em;
  display: table-cell;
  vertical-align: top;
  font-size: 30px;
  line-height: 2;
  text-shadow: 0 0 15px #000;
  padding-top: 5%;
}
#main-visual .txt > div > p span {
  display: block;
  font-size: .7em;
  text-shadow: 0 0 5px #000;
}
/*------------------------------------------
  information
------------------------------------------*/

.information {
background: url(../img/bg/bg03.png) no-repeat center top;
background-size: cover;
}


/*------------------------------------------
  top-box01
------------------------------------------*/

.top-box01 {
width: 1000px;
text-align: center;
padding: 80px 20px 60px;
/*background: url(../img/bg/bg09.png) no-repeat center;*/
background-size: cover;
}

.top-box01 .logo {
margin-bottom: 50px;
}

.top-box01 .top-txt {
font-size: 18px;/*34px;*/
margin-bottom: 80px;
position: relative;
clear: both;
}

.top-box01 .top-txt span {
display: block;
font-size: .6em;
line-height: 120%;
}

.top-box01 .top-txt:after {
width: 300px;
height: 1px;
background: #fff;
display: block;
content: "";
left: 0;
right: 0;
bottom: -40px;
position: absolute;
margin: auto;
} 

.top-box01 .sub-txt02 {
font-size: 14px;
margin-top: 40px;
}

.top-box01 .more {
    float:right;
    width: 200px;
    text-align: center;
    margin: 2% auto 4%;
}
.top-box01 .more a {
    padding: 10px;
    display: block;
    border: 1px solid #fff;
    font-size: 0.8em;
}
.top-box01 .more .sp {
    margin-right: 10px;
}
.top-box01 .information {
    clear: both;
}

.top-box01 #eng {
    padding-top: 150px;
}


.btn-box01 {
    margin: 5% 20% 10%;
}
.btn-box01 .more {
width: 44%;
    text-align: center;
    margin: 2% 3% 4%;
}
.btn-box01 .more a {
    padding: 10px;
    display: block;
    border: 1px solid #fff;
}
.top-box01 .wide {
    margin: 5% 20px;
}
.top-box01 .top-det {
    font-size: 25px;
    margin: 10% auto 5%;
}
.top-box01 .sub-txt01.left {
    margin: 5% 0%;
    text-align: left;
}
.top-box01 .sub-txt01.left.wide {
    min-height: 0 !important;
}
.top-box01 .imgright {
    float: right;
    width: 40%;
    margin-left: 2%;
    margin-right: 5%;
position: relative;
}
.top-box01 .imgright.top {
    margin-top: 5%;
}
.top-box01 .imgright:after, .top-box01 .picright:after, .top-box01 .picleft:after {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    -moz-box-shadow: inset 0px 0px 15px 15px #000;
    -webkit-box-shadow: inset 0px 0px 15px 15px #000;
    box-shadow: inset 0px 0px 15px 15px #000;
    content: " ";
}
.top-box01 .picleft {
    float: left;
    width: 28%;
    margin-left: 20%;
position: relative;
}
.top-box01 .picright {
    width: 28%;
    float: right;
    margin-right: 20%;
    margin-bottom: 5%;
position: relative;
}

.top-box01 .cle {
clear: both;
}
.top-box01 .clebox {
clear: both;
}

.top-box01 .bn {
    width: 100%;
    margin: 0 auto;
/*    width: 23%;*/
}
.top-box01 .bnp {
text-align: left;
    font-size: 14px;
}
.bn a img {
    width: 210px;
    margin: 1% 5px;
}
.bn a img.width2 {
width: 202px;
}
.bn a img.width4 {
width: 206px;
}

.talogo {
    width: 210px;
}

/*------------------------------------------
  top-box02
------------------------------------------*/

.top-box02 article {
/*
max-width: 1600px;
margin: 0 auto;
padding-top: 70px;
overflow: hidden;
*/
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 70px;
    overflow: hidden;
}

.top-box02 .tb02-inner {
	display: -webkit-box;
	display: -moz-box;
display: box;
	display: -webkit-flex;
display: flex;
	-ms-flex-pack: center;/*--- IE10 ---*/
	-webkit-justify-content: center;
justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
align-items: center;
position: relative;
display: table;
}

.top-box02 .tb02-img {
height: 100%;
width: 50.1%;
position: relative;
z-index: 2;
    display: table-cell;
}

.top-box02 .tb02-img img {
width: 99%;
}

article .tb02-img img {
    margin: 0; padding: 0;
    border: 0;
}
article .tb02-img {
    position: relative;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
article .tb02-img:after {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    -moz-box-shadow: inset 0px 0px 15px 15px #000;
    -webkit-box-shadow: inset 0px 0px 15px 15px #000;
    box-shadow: inset 0px 0px 15px 15px #000;
    content: " ";
}

.top-box02 article:nth-of-type(even) .tb02-img {
text-align: right;
}

.top-box02 .txt {
width: 50%;
z-index: 3;
padding-top: 10px;
display: table-cell;
    vertical-align: top;
}
.top-box02 .txt-inner {
/*
display: table;
min-height: 380px;
*/
text-align: left;
padding-left: 5%;
}
.top-box02 h3 {
letter-spacing: 0.02em;
font-size: 32px;
margin-bottom: 3%;
line-height: 140%;
}

.top-box02 .top-txt {
font-size: 32px;
font-weight: bold;
margin-bottom: 40px;
position: relative;
}

.top-box02 .top-txt:after {
width: 80px;
height: 1px;
background: #fff;
display: block;
content: "";
left: 0;
bottom: -20px;
position: absolute;
}

.top-box02 .top-txt span {
display: block;
font-size: 14px;
line-height: 160%;
}

.top-box02 th {
width: auto;
padding-right: 10px;
/*width: 70px;*/
}

.top-box02 .more {
width: 200px;
text-align: center;
margin: 4% auto 0 0;
}

.top-box02 .more a {
padding: 10px;
display: block;
border: 1px solid #fff;
}

.top-box02 .more a:hover {
color: #000;
background: #fff;
opacity: 1;
}


/* 回りこみの順番 */
/*
.top-box02 article:nth-of-type(odd) .txt,
.top-box02 article:nth-of-type(even) .tb02-img {
order: 1;
}

.top-box02 article:nth-of-type(even) .txt,
.top-box02 article:nth-of-type(odd) .tb02-img {
order: 0;
}

.top-box02 article:nth-of-type(odd) .txt-inner {
margin: 0 auto 0 0;
padding-left: 20px;
}

.top-box02 article:nth-of-type(even) .txt-inner {
margin: 0;
padding-left: 60px;
}
*/

/* 背景色 */
/*
.top-box02 .bg {
position: absolute;
width: 170%;
height: 100%;
bottom: 0;
margin: auto;
z-index: -2;
}

.top-box02 article:nth-of-type(odd) .bg {
	-moz-transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
	-moz-transform: skewX(19deg);
	-webkit-transform: skewX(19deg);
transform: skewX(19deg);
left: 110%;
}

.top-box02 article:nth-of-type(even) .bg {
	-moz-transform-origin: 100% 0;
	-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
	-moz-transform: skewX(19deg);
	-webkit-transform: skewX(19deg);
transform: skewX(19deg);
right: 110%;
}

.top-box02 article:nth-of-type(1) .bg {
background: #3a1d35;
}

.top-box02 article:nth-of-type(2) .bg {
background: #661738;
}

.top-box02 article:nth-of-type(3) .bg {
background: #334744;
}

.top-box02 article:nth-of-type(4) .bg {
background: #818181;
}
*/

/* 筆文字 */
/*
.top-box02 .txt:before {
content: "";
display: block;
width: calc(30 * 1vw);
height: calc(30 * 1vw);
max-height: 470px;
bottom: 10%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: absolute;
z-index: -1;
}

.top-box02 article:nth-of-type(odd) .txt:before {
right: 10%;
}

.top-box02 article:nth-of-type(even) .txt:before {
right: 50%;
}

.top-box02 article:nth-of-type(1) .txt:before {
background-image: url(../img/img/img_yorokobi.png);
}

.top-box02 article:nth-of-type(2) .txt:before {
background-image: url(../img/img/img_odoroki.png);
}

.top-box02 article:nth-of-type(3) .txt:before {
background-image: url(../img/img/img_nuki.png);
}

.top-box02 article:nth-of-type(4) .txt:before {
background-image: url(../img/img/img_shinobi.png);
}
*/

/* 4つ目 */

.tb02-c04 .sub-txt {
font-size: 14px;
margin-bottom: 10px;
}

.tb02-c04 p span {
font-size: 16px;
font-weight: bold;
}


/*--------------------------------------------------------------------------------------------------------------
  media query
--------------------------------------------------------------------------------------------------------------*/

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

.tb02-c04 .sub-txt span {
font-size: 12px;
}

.tb02-c04 .sub-txt {
font-size: 10px;
margin-bottom: 0;
}

}


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

  #main-visual .txt > div > h2 {
    height: 200%;
    font-size: 67px;
    font-size: 7vw;
  }

  #main-visual .txt > div > h2 span {
    font-size: .6em;
  }

  #main-visual .txt > div > p {
    letter-spacing: 0.02em;
    font-size: 29.5px;
    font-size: 3.1vw;
    line-height: 1.8;
    padding-top: 12.5%;
  }
    #main-visual .txt > div > p span {
    letter-spacing: 0.05em;
    font-size: 0.9em;
  }
  .top-box02 .txt-inner {
    min-height: 268px;
  }
.top-box02 h3 {
font-size: 24px;
}

.top-box02 .top-txt {
font-size: 16px;
margin-bottom: 30px;
}

.top-box02 .top-txt span {
  font-size: 12px;
  line-height: 1.5;
}

.top-box02 .top-txt:after {
bottom: -15px;
}

.top-box02 th,
.top-box02 td {
font-size: 14px;
}

}



@media screen and (max-width: 767px) {
  /*--------------------------------------------------------------------------------------------------------------
  mainvisual
  --------------------------------------------------------------------------------------------------------------*/

  #main-visual .txt > div > h2 {
    font-size: 20px;
    font-size: 7vw;
    line-height: 1.4;
    height: 95%;
  }

.top-box01 {
    width: 100%;
}

/*------------------------------------------
  information
------------------------------------------*/

.information {
background-size: contain;
}


/*------------------------------------------
  top-box01
------------------------------------------*/

.top-box01 {
width:100%;
padding: 30px 15px;
}

.top-box01 .logo {
max-width: 220px;
width: 40%;
margin-bottom: 30px;
}

.top-box01 .top-txt {
font-size: 16px;
font-size: 5vw;
}

.top-box01 .sub-txt01 {
font-size: 16px;
}

.btn-box01 {
    margin: 0;
}
.top-box01 .more, .btn-box01 .more {
width: 45%;
margin: 5% 2%;
    font-size: 0.8em;
}
.btn-box01 .more a {
    padding: 5px;
    font-size: 0.8em;
}
.top-box01 .top-det {
    font-size: 16px;
    margin: 15% auto;
}
.top-box01 .sub-txt01.left {
    font-size: 12px;
    margin: 5%;
}
.top-box01 .imgright {
    width: 45%;
    margin-right: 5%;
}
.top-box01 .picleft {
    width: 42%;
    margin-left: 5%;
}
.top-box01 .picright {
    width: 42%;
    margin-right: 5%;
}
.top-box01 .bn {
    width: 100% !important;
}
.top-box01 .bn img {
    width: 40%;
}
.top-box01 .bn.cmp img {
    width: 100% !important;
}
.bn a img.width2,.bn a img.width4 {
width: 39% !important;
}
.talogo {
    width: 35%;
}

/*------------------------------------------
  top-box02
------------------------------------------*/

.top-box02 article {
padding: 0;
}

.top-box02 .tb02-inner {
display: block;
z-index: 1;
}

.top-box02 .tb02-img {
/*width: 100%;*/
height: 100%;
    width: 50.1%;
    position: relative;
    z-index: 2;

}

.top-box02 .tb02-img img {
width: 100%;
padding: 30px 0px;
}

.top-box02 .txt {
width: 100%;
padding: 30px 10px;
text-align: center;
position: relative;
}

.top-box02 .txt-inner {
display: block;
padding: 0 !important;
  height: 100%;
min-height: auto;
}

.top-box02 h3 {
font-size: 20px;
}

.top-box02 .top-txt {
font-size: 18px;
}

.top-box02 .top-txt:after {
left: 0;
right: 0;
margin: auto;
}


.top-box02 th,
.top-box02 td {
display: block;
width: 100%;
}

.top-box02 th {
font-weight: bold;
border-bottom: 1px solid #fff;
}

.top-box02 td {
padding-bottom: 15px;
}

.top-box02 .more {
margin: 20px auto 0;
}


/* 背景色 */

.top-box02 article:nth-of-type(odd) .bg {
left: 168%;
}

.top-box02 article:nth-of-type(even) .bg {
right: 150%;
}


/* 筆文字 */

.top-box02 .txt:before {
width: 80%;
height: 80%;
max-width: 400px;
max-height: 289px;
left: 0 !important;
right: 0 !important;
top: 0;
bottom: 0 !important;
margin: auto;
}

}



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

  #main-visual .txt > div > h2 {
    height: 95%;
  }
  #main-visual .txt > div > p {
    font-size: 0.65em;
    font-size: 3vw;
    letter-spacing: -.01em;
    padding-top: 17%;
  }
  #main-visual .txt > div > p span {
    font-size: 1em;
  }

  .mv-img .img2 {
    object-position: 65% 0;
  }
  .mv-img .img3 {
    object-position: 60% 0;
  }

  .mv-img .img5 {
    object-position: 55% 0;
  }

  .mv-img .img6 {
    object-position: 30% 0;
  }

}