@charset "UTF-8";

html{font-family: Arial, sans-serif;}
body, html {margin: 0;padding: 0;}
a{text-decoration: none!important;}
ul {list-style: none; padding-left: 0;}
.cb{clear:both;}

.pc_only{display:block;}
.sp_only{display:none;}

/***************************************
                 header 
****************************************/
header{
    width:100%;
}
header #logo-img{width:350px;margin-top: 5px;}
.search-form-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 3px;
    width: 600px;
    margin: 0 150px;
}

.search-form-3 input {
    width: 550px;
    height: 40px;
    padding: 5px 15px 5px 0;
    border: none;
    box-sizing: border-box;
    font-size: 1em;
    outline: none;
    background-color: transparent;
}
.search-form-3 input::placeholder{color: #fff;}
.search-form-3 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.h-ul-main{
    display: flex;
    padding: 25px 50px;
    justify-content: space-between;
    background:#cf121b;
}
.h-ul-sub{
    display: flex;
}
.mr50{margin-right:50px;}
.mt8{margin-top:8px;}
.w50{width:50px;}



/* header pulldown */
.pull-area {
  position: relative;
  background: #fff;
  z-index: 10;
}
.pulldown-head {
  display: flex;
  padding: 0 50px 13px;
  list-style: none;
  margin: 0;
}
.pulldown-head > li {position: relative;}
.parent-menu {
  padding: 20px 40px 20px 0;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}
.children-menu {
  position: fixed;
  top: 130px;
  left: 0;
  width: 100vw;
  background-color: #fff;
  z-index: 5;
  
  opacity: 0;
  visibility: hidden;

  margin: 10px 0 0;
  padding: 30px 70px 90px;
  border-top: 2px solid #ccc;
}
.pulldown-head > li:hover > .children-menu {
  opacity: 1;
  visibility: visible;
}


/* tab */
#tab-v {
    display: flex;
    column-gap: 3em;
    margin: 1em;
    width: 85%;
}
#tab-v .tab-elem {
    display: block;
    color: #000;
    position: relative;
    font-size: 18px;
    font-weight: bold;
    width: 140px;
    padding: 0 20px 50px;
}
#tab-v .tab-elem:hover { cursor: pointer;}
#tab-v .tab-elem.active {color: #fff;padding: 20px;background: #707070;margin: 0 0 50px;}
#tab-v .tabbody-v {
    display: flex;
    flex: 1;
    flex-direction: column;
}
#tab-v .tabbody-elem {
    flex-grow: 1;
    max-width: 100%;
}


/* tab 中 */ 
.h-top-brand{
    display: flex;
    border-bottom: 2px solid #ccc;
    max-width: 1200px;
    align-items: center;
    padding: 15px 0;
}
.h-top-brand li:first-child{width:100px;}
.h-top-brand li{   
    width: 200px;
    margin-right:20px;
    vertical-align: middle;
}
.h-top-brand li:last-child{
    margin-right:0;
}
.h-top-brand li a{
    color:#000;
}
.h-top-brand li a img{
    color:#000;
}
.h-top-brand li a span{
    color:#707070;
}


/* big img */
.relative{position:relative;}
#h-main-txt{
    position:absolute;
    color:#fff;
    font-weight:bold;
    font-size:40px;
    top: 22%;
    right: 5%;
    margin: 0;
}
#h-sub-txt{
    position:absolute;
    color:#fff;
    font-size:24px;
    top: 33%;
    right: 4.5%;
    margin: 0;
}


/* panel */
.h-search-panel{
    background:#fff;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    z-index:2;
}
.h-search-panel ul{
    display:flex;
    background:#000;
    padding: 35px 20px;
    color:#fff;
    justify-content: center;
}
.h-search-panel select{
    background:transparent;
    color:#fff;
    padding: 12px 10px;
    font-size: 14px;
    margin-right: 10px;
}
.h-search-panel p{
    font-weight:bold;
    margin-right: 50px;
}
.h-search-panel button{
    background-color: #cf121b;
    color:#fff;
    border:none;
    height:44px;
    width:100px;
    text-align:center;
    font-size:16px;
    font-weight:bold;
}


/*****************************
            footer 
******************************/
footer{
    width:100%;
    background:#cf121b;
}
footer img{width:350px;}
footer p{
    text-align:center;
    color:#fff;
    padding-bottom: 20px;
}
.f-ul-main{
    display: flex;
    justify-content: center;
    padding: 40px 0 20px;
     margin:0;
}
.f-ul-sub{
    display: flex;
    padding-top: 8px;
}
.f-ul-sub li{
    padding: 0 20px;
    border-right: 2px solid #fff;
}
.f-ul-sub li:last-child{border-right: none;}
.f-ul-sub li a{color:#fff;}



/***********************************
        pankuzu
*************************************/
#pankuzu {
	border: 1px solid #bbbbbb;
	background-color: #CCCCCC;
	background-image: url(https://www.gtnet.co.jp/images/common/gtnet/pankuzu_back.png);
	background-repeat: repeat;
	margin:0 0 10px;
}
#pankuzu li {
	line-height: 1.1em;
	float: left;
	height:16px;
	background-image: url(https://www.gtnet.co.jp/images/common/gtnet/pankuzu.png);
	background-repeat: repeat-x;
}
#pankuzu a {
	font-weight: bold;
	color: #666666;
	text-decoration: none;
	display: block;
	padding-right: 20px;
	background-image: url(https://www.gtnet.co.jp/images/common/gtnet/pankuzu_next.png);
	background-repeat: no-repeat;
	background-position: right;
	height: 14px;
	padding-top: 2px;
	padding-left: 8px;
	float: left;
}
#pankuzu a:hover {
	color: #000000;
}
#pankuzu a.end {
	background-image: url(https://www.gtnet.co.jp/images/common/gtnet/pankuzu_end.png);
	background-repeat: no-repeat;
	background-position: right 0px;
	color: #000000;
}
#pankuzu a.start {
	color: #cc0000;
}
#pankuzu a.start:hover {
	color: #FF0000;
}



/**********************************************************
                        スマホ
***********************************************************/
@media screen and (max-width: 980px) {

    .pc_only{display:none;}
    .sp_only{display:block;}


    /*************************** header ***************************/
    .header-area{
        display: flex;
        justify-content: space-between;
        height: 65px;
        padding: 0 20px;
        align-items: center;
        background: #cf121b;
    }
    .hamburger{
        width: 60px;
        height: 25px;
        position: relative;
    }
    .hamburger span{
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #fff;
        transition: .5s;
    }
    .hamburger span:first-of-type{top: 0;}
    .hamburger span:nth-of-type(2){top: 40%;}
    .hamburger span:last-of-type{top: 80%;}
    .slide-menu{
        background-color: #cf121b;
        position: fixed;
        top: 49px;
        width: 100%;
        left: 0;
        transform: translateX(100%);
        transition: .5s;
        height: 100%;
    }
    .slide-menu li{
        color: #fff;
        line-height: 0%;
        text-align: center;
        padding: 2% 5%;
    }
    .hamburger.active span:first-of-type{top: 50%;transform: rotate(45deg);}
    .hamburger.active span:nth-of-type(2){opacity: 0;}
    .hamburger.active span:last-of-type{top: 50%;transform: rotate(-45deg);}
    .slide-menu.active{transform: translateX(0); overflow: auto;}


    /****** header tabの中 　タブパネル *******/
    .pulldown-head {
        display:block;
        padding: 0;
        overflow: auto;
    }
    .pulldown-head li{
        padding: 20px 0;
        text-align: center;
        /* width: 33%; */
        float: left;
    }
    .parent-menu {
        padding: 0;
        font-size: 16px;
        width: 100px;
        display: block;
        text-align: center;
    }
    #tab-v {
        display: block;
        width: 100%;
        margin: 0;
        column-gap: 0;
    }
    #tab-v .tab-elem {
        padding:20px 0;
        width: 33%;
        font-size: 16px;
    }
    .children-menu {
        padding:0;
        top:-10px;
    }
    .h-top-brand {
        flex-wrap: wrap;
        max-width: 100%;
        width: 90%;
        margin: 0 auto;
    }
    .h-top-brand li {
        width: 100%!important;
        text-align:left;
    }
    .h-top-brand li:first-child {padding:0 0 10px;}
    .tab-contena{
        float:left;
        width: 100%;
        margin: auto;
        text-align: center;
    }
    #tab-v .tabbody-v {
        clear:both;
        width: 100%;
    }


    /****** header tabの中 検索フォーム *******/
    .search-form-3 {width: 100%;margin: 0; justify-content: flex-start;}
    .search-form-3 input {width: 100%;}
    .h-search-panel {
        max-width: 100%;
        margin: 0 auto;
        padding: 0px;
        position: relative;
        top: 0;
        z-index: 0;
        overflow:auto;
        background:#000;
        height: 340px;
        clear: both;
    }
    .h-search-panel li{
        padding:0;
        float:left;
        width: 50%;
    }
    .h-search-panel li:first-child{width:100%;}
    .h-search-panel li p{text-align:center;margin-right:0;padding: 0 0 14px;}
    .h-search-panel ul {padding:20px 10px; display:block;}
    .h-search-panel select {width: 100%;}

    .h-search-panel button {
        width:200px;
        margin: 20px auto;
        position: absolute;
        top: 245px;
        left: 0;
        right: 0;
    }
    .pulldown-head li .tab-v .tabbody-v li{
        width:100%;
    }


    /****************** footer *******************/
    .f-ul-main {display:block; text-align:center;padding: 10px 0 0;}
    .f-ul-sub {display:block;background: #eee;overflow: auto; padding:0;}
    .f-ul-sub li {width: 49.5%;float: left;padding: 10px 0;border-right: none; border-bottom:1px solid #ccc; }
     .f-ul-sub li:nth-child(odd){border-right:1px solid #ccc;}
    .f-ul-sub li a{color:#000;}
    footer p {padding:0px 0 20px; clear:both;margin-block-end: 0;}
    footer img {width: 80%;}
}