@charset "utf-8";
/* ===================================================================
CSS information
 file name  :  top.css
 style info :  スタイル指定
=================================================================== */

/* slider
----------------------------------------------------------------------------- */
.slider img{
    width: 100%;
}
.slide-arrow{
  position: absolute;
  top: 50%;
  margin-top: -3vw;
}
.prev-arrow{
    width: 8vw!important;
    height: 8vw!important;
    left: 1vw;
    z-index: 1;
    top: 46%;
}
.next-arrow{
    width: 8vw!important;
    height: 8vw!important;
    right: 1vw;
    z-index: 1;
    top: 46%;
}

/* c02
----------------------------------------------------------------------------- */
#c02{
    width: 100%;
    position: relative;
    margin-top: -20px;
}
#c02 > img{
    width: 100%;
}
#c02 .wrapper{
    position: absolute;
    top: -55px;
    right: 0;
    left: 0;
}
#c02 .box{
    background: #da0012;
    border-radius: 1vw;
    padding: 3vw 5vw;
    margin: 0 auto 0;
    color: #fff;
    width: 40vw;
    height: auto;
    z-index: 100;
}
#c02 .box h2{
    font-size: 2vw;
}
#c02 .box h4{
    font-size: 5vw;
    line-height: 1.2;
    margin-top: 2vw;
}
#c02 .box p{
    font-size: 1.5vw;
    margin-top: 2vw;
    text-align: left;
}
#c02 .box a{
    margin-top: 2vw;
    display: block;
    font-size: 1.5vw;
    line-height: 5.5vw;
    background: #000;
    width: 100%;
    position: relative;
    text-decoration: none!important;
}
#c02 .box a::after{
	content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1vw;
}

/* c03
----------------------------------------------------------------------------- */
#c03{
	width: 100%;
	background: linear-gradient(#1a1a1a 0%, #ffffff 0%);
	padding-top: 32vw;
}
#c03 h2{
    font-size: 5vw;
    color: #da0012;
    letter-spacing: 0.8vw;
    line-height: 1.3;
}
#c03 h3{
    font-size: 2vw;
    color: #da0012;
}
#c03 .wrapper{
    padding: 0 5vw;
    margin-top: -8vw;
    display: flex;
    justify-content: space-between;
}
#c03 .wrapper .img_box{
    width: 48%;
}
#c03 .wrapper .img_box a:hover img{
    opacity: 0.8;
}
#c03 .wrapper .img_box img{
    width: 100%;
}

/* c04
----------------------------------------------------------------------------- */
#c04{
    width: 100%;
    position: relative;
}
#c04 > img{
    width: 100%;
}
#c04 .wrapper{
    padding: 0 5vw;
    position: absolute;
    left: 0;
    bottom: 3vw;
}
#c04 .wrapper .box{
    background: #da0012;
    padding: 3vw 3vw;
    margin: 0 auto 0;
    color: #fff;
    width: 42vw;
    height: 30vw;
    z-index: 100;
}
#c04 h2{
    font-size: 5vw;
    color: #fff;
    letter-spacing: 0.8vw;
    line-height: 1.3;
}
#c04 h3{
    font-size: 2vw;
    color: #fff;
}
#c04 .box p{
    font-size: 1.5vw;
    margin-top: 2vw;
    text-align: left;
}
#c04 .box a{
    margin-top: 2vw;
    display: block;
    font-size: 1.5vw;
    line-height: 5.5vw;
    background: #000;
    width: 100%;
    position: relative;
    text-decoration: none!important;
}
#c04 .box a::after{
	content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1vw;
}

/* c05
----------------------------------------------------------------------------- */
#c05{
    background-color: rgba(219,219,219,0.7);
    padding:12vw 0;
}
#c05  .wrapper{
    padding: 0 5vw;
}
#c05 h2{
    font-size: 5vw;
    color: #da0012;
    letter-spacing: 0.8vw;
    line-height: 1.3;
    margin-bottom: 3vw;
}
#c05 dl{
    text-align: left;
    width: 60vw;
    padding: 1vw 5vw;
    margin: 0 auto;
    border-bottom: 1px solid #cfcfcf;
}
#c05 dl dt{
    color: #666;
    font-size: 1.2vw;
}
#c05 dl dd{
    color: #000;
    text-decoration: underline;
    font-size: 1.3vw;
}
#c05 .banner{
    margin: 5vw auto 0;
    display: block;
    border: 1px solid #0068b4;
    width: 26vw;
}
#c05 .banner > img{
    width: 100%;
}

/* c06
----------------------------------------------------------------------------- */
#c06{
    background: url("../images/top/contents05_bg.png") no-repeat;
    background-size: 100%;
    position: relative;
    padding: 11vw 0 10vw;
}
#c06 .title1{
    padding: 0 5vw;
    position: absolute;
    right: 0;
    top: -4.5vw;
}
#c06 h2{
    font-size: 5vw;
    color: #da0012;
    letter-spacing: 0.8vw;
    line-height: 1.3;
}
#c06 h3{
    font-size: 2vw;
    color: #da0012;
    padding-right: 21vw;
}
#c06 a,
#c6 a:hover{
    color: #000 !important;
    text-decoration: none!important;
}
#c06 .list{
    display: flex;
    justify-content: space-between;
    padding: 0 5vw;
}
#c06 .list .box{
    width: 28vw;
    text-align: left;
    font-weight: bold;
    color: #000;
}
#c06 .slider_sp .box{
    padding: 0 5vw;
}
#c06 .list .box a > img{
    width: 100%;
}
#c06 .list .box .title2{
    font-size: 1.3vw;
    padding-top: 1vw;
}
#c06 .list .box .name{
    font-size: 1vw;
    padding-top: 1vw;
}
#c06 .list .box .name span{
    font-family: Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
    color: #da0012;
}

/* c07
----------------------------------------------------------------------------- */
#c07{
    width: 100%;
    position: relative;
}
#c07 > img{
    width: 100%;
}
#c07 .wrapper{
    padding: 0 5vw;
    position: absolute;
    left: 0;
    top: 2vw;
}
#c07 .wrapper .box{
    background: #000;
    padding: 3vw 3vw;
    margin: 0 auto 0;
    color: #fff;
    width: 42vw;
    height: 30vw;
    z-index: 100;
}
#c07 h2{
    font-size: 5vw;
    color: #fff;
    letter-spacing: 0.8vw;
    line-height: 1.3;
}
#c07 h3{
    font-size: 2vw;
    color: #fff;
}
#c07 .box p{
    font-size: 1.5vw;
    margin-top: 2vw;
    text-align: left;
}
#c07 .box a{
    margin-top: 2vw;
    display: block;
    font-size: 1.5vw;
    line-height: 5.5vw;
    background: #da0012;
    width: 100%;
    position: relative;
    text-decoration: none!important;
}
#c07 .box a::after{
	content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1vw;
}
/* c08
----------------------------------------------------------------------------- */
#c08{
    padding: 4vw 0 6vw;
    background: #da0012;
    color: #fff;
}
#c08 .wrapper{
    padding: 0 5vw;
}
#c08 h2{
    font-size: 5vw;
    color: #fff;
    letter-spacing: 0.8vw;
    line-height: 1.3;
}
#c08 h3{
    font-size: 2vw;
    color: #fff;
    padding-bottom: 4vw;
}
#c08 .inner{
    display: flex;
    justify-content: space-between;
}
#c08 .inner .img_box{
    width: 28vw;
}
#c08 .inner .img_box img{
    width: 100%;
}
#c08 a.btn{
    margin: 4vw auto 0;
    display: block;
    font-size: 1.5vw;
    line-height: 5vw;
    background: #000;
    width: 25vw;
    position: relative;
    text-decoration: none!important;
}
#c08 a.btn::after{
	content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1vw;
}

/* BreakPoint 769px
=============================================================*/
@media only screen and (max-width: 769px) {

/* c01
----------------------------------------------------------------------------- */
    #c01{
        padding: 14vw 0 0;
    }
.prev-arrow {
    width: 13vw!important;
    height: 13vw!important;
    left: 1vw;
    z-index: 1;
}
.next-arrow {
    width: 13vw!important;
    height: 13vw!important;
    right: 1vw;
    z-index: 1;
}
.slide-arrow {
    position: absolute;
    top: 52%;
    margin-top: -10vw;
}
/* c02
----------------------------------------------------------------------------- */
#c02 .wrapper {
    position: absolute;
    top: -9vw;
    right: 0;
    left: 0;
}
#c02 .box {
    background: #da0012;
    border-radius: 1vw;
    padding: 3vw 0;
    margin: 0 auto 0;
    color: #fff;
    width: 50vw;
    height: auto;
    z-index: 100;
}
#c02 .box h2 {
    font-size: 3vw;
}
#c02 .box h4 {
    font-size: 7vw;
    line-height: 1.2;
    margin-top: 2vw;
    padding: 0 0 0 2vw;
}
#c02 .box p {
    font-size: 3vw;
    margin-top: 2vw;
    text-align: left;
    padding: 0 4vw;
    line-height: 2;
}
#c02 .box a {
    margin-top: 2vw;
    display: block;
    font-size: 3vw;
    line-height: 8vw;
    background: #000;
    width: 81%;
    margin: 2vw auto;
    position: relative;
    text-decoration: none!important;
}
/* c03
----------------------------------------------------------------------------- */
#c03 {
    width: 100%;
    padding-top: 57vw;
}
#c03 .wrapper {
    padding: 0 5vw 7vw;
    margin-top: -8vw;
    display: flex;
    justify-content: space-between;
}
#c03 h2 {
    font-size: 6vw;
    color: #da0012;
    letter-spacing: 0.8vw;
    line-height: 1.3;
}
#c03 h3 {
    font-size: 3vw;
    color: #da0012;
}
#c03 .wrapper {
    padding: 0 5vw 7vw;
    margin-top: -8vw;
    display: flex;
    justify-content: space-between;
}
/* c04
----------------------------------------------------------------------------- */
#c04 h2 {
    font-size: 8vw;
    color: #fff;
    letter-spacing: 0.8vw;
    line-height: 1.3;
}
#c04 h3 {
    font-size: 4vw;
    color: #fff;
}
#c04 .wrapper {
    padding: 0 5vw;
    position: absolute;
    left: 0;
    bottom: -32vw;
    width: 100%;
}
#c04 .wrapper .box {
    background: #da0012;
    padding: 3vw 5vw 5vw;
    margin: 0 auto 0;
    color: #fff;
    width: 100%;
    height: auto;
    z-index: 100;
}
#c04 .box p {
    font-size: 3vw;
    margin-top: 2vw;
    text-align: left;
}
#c04 .box a {
    display: block;
    font-size: 4vw;
    line-height: 11vw;
    background: #000;
    margin: 4vw auto 0;
    position: relative;
    width: 45vw;
    text-decoration: none!important;
}
#c04 .box a::after{
    right: 3vw;
}
/* c05
----------------------------------------------------------------------------- */
#c05 {
    background-color: rgba(219,219,219,0.7);
    padding: 38vw 0 5vw;
}
#c05 h2 {
    font-size: 8vw;
    color: #da0012;
    letter-spacing: 0.8vw;
    line-height: 1.3;
    margin-bottom: 3vw;
}
#c05 dl {
    text-align: left;
    width: 100%;
    padding: 1vw 0;
    margin: 0 auto;
    border-bottom: 1px solid #cfcfcf;
}
#c05 dl dt {
    color: #666;
    font-size: 2.5vw;
}
#c05 dl dd {
    color: #000;
    text-decoration: underline;
    font-size: 2.7vw;
}
#c05 .banner {
    margin: 5vw auto 0;
    display: block;
    border: 1px solid #0068b4;
    width: 46vw;
}
/* c06
----------------------------------------------------------------------------- */
#c06 {
    background: url(../images/top/contents05_bg_sp.png) no-repeat;
    background-size: 100%;
    position: relative;
    padding: 11vw 0 10vw;
}
#c06 .title1 {
    padding: 0 5vw;
    position: absolute;
    right: 0;
    left: 0;
    top: -7vw;
}
#c06 h2 {
    font-size: 8vw;
    color: #da0012;
    letter-spacing: 0.8vw;
    line-height: 1.3;
}
#c06 h3 {
    font-size: 3vw;
    color: #da0012;
    padding-right: 0;
}
#c06 .slick-slide img {
    width: 85%;
    height: auto;
}

#c06 .next-arrow {
    width: 13vw!important;
    height: 13vw!important;
    right: 6vw;
    z-index: 1;
}
#c06 .prev-arrow {
    width: 13vw!important;
    height: 13vw!important;
    left: 6vw;
    z-index: 1;
}
#c06 .slick-dotted.slick-slider {
    margin-top: 3vw;
}
#c06 .title2{
    font-size: 3vw;
    text-align: left;
    margin: auto;
    width: 85%;
}
#c06 .name{
    font-size: 3vw;
    text-align: left;
    margin: 2vw auto 0;
    width: 85%;
}
#c06 .name span{
    font-family: Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
    color: #da0012;
}
/* c07
----------------------------------------------------------------------------- */
#c07{
    margin-bottom: 255px;
    margin-top: 155px;
}
#c07 .wrapper {
    padding: 0 5vw;
    position: absolute;
    left: 0;
    top: auto;
    right: 0;
    bottom: -35vw;
    width: 95%;
    margin: 0 auto;
}
#c07 .wrapper .box {
    background: #000;
    padding: 3vw 5vw 5vw;
    margin: 0 auto 0;
    color: #fff;
    height: auto;
    z-index: 100;
    width: 100%;
}
#c07 h2 {
    font-size: 8vw;
    color: #fff;
    letter-spacing: 0.8vw;
    line-height: 1.3;
}
#c07 h3 {
    font-size: 3vw;
    color: #fff;
    padding-right: 0;
}
#c07 .box p {
    font-size: 3vw;
    margin-top: 2vw;
    text-align: left;
}
#c07 .box a {
    display: block;
    font-size: 4vw;
    line-height: 11vw;
    margin: 4vw auto 0;
    position: relative;
    width: 45vw;
}
#c07 .box a::after{
    right: 3vw;
}
/* c08
----------------------------------------------------------------------------- */
#c08 {
    padding: 40vw 0 6vw;
    background: #da0012;
    color: #fff;
}
#c08 h2 {
    font-size: 8vw;
    color: #fff;
    letter-spacing: 0.8vw;
    line-height: 1.3;
}
#c08 h3 {
    font-size: 3vw;
    color: #fff;
    padding-right: 0;
}
#c08 .inner {
    display: flex;
    flex-wrap: wrap;
}
#c08 .inner .img_box {
    width: 90%;
    margin: 0 auto 3vw;
}  
#c08 a.btn {
    display: block;
    font-size: 2.7vw;
    line-height: 8vw;
    margin: 4vw auto 0;
    position: relative;
    width: 45vw;
}
#c08 a.btn::after{
    right: 3vw;
}

    
    
    
    
    
    
    
}