/* ----------------------
    Common
------------------------------ */
:root{
    --width:1000px;
    --shadow: rgb(0 0 0 / 10%) 0px 0px 5px 0px, rgb(0 0 0 / 10%) 0px 0px 1px 0px;
}
.top_ttl{
    margin:2rem 0;
    border-bottom: 2px solid #53ab38;
    padding: 1rem 0;
    line-height:1.2;
    font-size:30px;
    height: 70px;
}
.top_ttl > span{
    display:block;
}
.top_ttl > span:nth-of-type(1) {
    color: #666;
    margin-left: 5px;
    font-size: 21px;
    font-weight: bold;
    position: inherit;
    text-align: left;
    border-left: none;
}
.top_ttl > span:nth-of-type(2) {
    font-weight: bold;
    padding: 0.25em 0.5em;
    color: #494949;
    border-left: solid 5px #53ab38;
    margin-top: 5px;
    margin-left: 0;
    font-size: 30px;
}

.wrap {
    width: 100%;
}

@media screen and (max-width: 767px) {
    :root{
        --width:100%;
    }
    .top_ttl {
        margin:1rem 0;
        font-size: 24px;
    }


}

/* ----------------------
    TOPimages
------------------------------ */

.top_img{
    background:url(https://hokkaido-labo.com/wp-content/uploads/2023/02/MicrosoftTeams-image-7.jpg) no-repeat center;
    background-size:100% auto;
    width: 100%;
}
.top_img-txt {
    text-align: center;
    padding: 15rem 0;
    font-size: 3rem;
    color: #fff;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 0 10px #333;
}
.top_img-txt > span{display:block;font-size:40px;}
.top_img-txt > span:nth-of-type(2){font-size:80px;}

@media screen and (max-width: 767px) {
    .top_img {
        background: url(https://gransea-n.com/golf/wp/wp-content/uploads/2022/05/8ccaf6aa855a05440df3c3bc653f6da3.jpg) no-repeat center;
        background-size: 100% 100%;
        /* margin-top: -20px; */
    }
    .top_img-txt {
        padding: 6rem 0;
        font-size: 1.5rem;
    }
}


/* ----------------------
    Golf list
------------------------------ */
.top_golf{
    width:var(--width);
    margin:0 auto;
}
.tg__tab {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5rem 0 1rem;
    justify-content: space-around;
    list-style: none;
}
.tg--img{width:100%;}
.tg__tab li {
    text-align: center;
    margin-right: 10px;
    width: 240px;
    font-weight: bold;
    line-height: 3;
    font-size: 20px;
    cursor: pointer;
    background: #d6dee3;
}
.tg__tab li.sel {
    border-bottom: 2px solid #35b4de;
    background: rgb(228 240 246);
}
.tg_list-sp {
    display: none;
}
.tg_list{
    display:flex;
    flex-wrap:wrap;
    justify-content: normal;
    list-style: none;
}
.tg_list a{display:block;}
.tg_list a:hover{color:#333;cursor: pointer;}
.tg_list::before,.tg_list::after{content:none;}
.tg_list li{
    width:calc(100% / 3 - 1rem);
    margin: 5px;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 10px 5px;
}

.top_golf .tg_list-area{
    display:flex;
    flex-wrap:wrap;
    justify-content: normal;
}

.top_golf .tg_list-area li{
    width:calc(100% / 3 - 1rem);
    margin: 5px;
}

@media screen and (max-width:767px) {
    .top_golf .tg_list-area {
        display:block;
    }

    .top_golf .tg_list-area li {
        width: 100%;
        margin: 0;
        margin-bottom: 10px;
    }
}


.tg--area{
    margin:1rem 0 0;
    font-size: 16px;
    color: #666;
}
.tg--name{
    height: 140px;
    font-weight: bold;
    font-size: 23px;
    margin: 0;
    line-height:1.5;
}
.tg--txt{
    margin:1rem 0;
    font-size: 15px;
    height: 135px;
}
@media screen and (min-width: 767px) {
    .tg--img{height:220px;}
}
@media screen and (max-width: 767px) {
    .top_golf {
        padding: 0 1rem;
    }

    .tg__scr{overflow-x:scroll;}
    .tg__tab{
        justify-content: space-between;
        flex-wrap: nowrap;
        column-gap: 10px;
    }
    .tg__tab li {
        width: calc(100% / 3 - 10px);
        margin:0;
        font-size:18px;
        line-height: 4;
    }

.tg_list li {
    width: 100%;
    margin: 10px 5px;
}
    .tg_list li a{
        display: flex;
        align-items: flex-start;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .tg__twrap{width:100%;}
    .tg_list li img{width: 100%;height: auto;}
    .tg__twrap {
    width: calc(100% - 1rem);
    font-size: 80%;
    }
    .tg--area {
        margin: 0 0 2px;
        font-size: 12px;
        line-height: 1;
    }
.tg--name {
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    height: auto;
}
    .tg--txt {
        margin: 0;
        font-size: 12px;
        line-height: 1.5;
        margin: 5px 0px;
        height: auto;
    }
}

.tg__twrap{
    margin:20px 0;
}

/*-------------------------
カテゴリーブースホバーエフェクト
-------------------------*/
.tg_list-ca{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    width: 100%;
}
.tg_list-ca a{display:block;}
.tg_list-ca::before,.tg_list::after{content:none;}
.tg_list-ca li{
    width:calc(100% / 3 - 1rem);
    margin: 5px;
}

.tg_list-ca .hover-parent {
    width: 300px !important;
    height: 220px !important;
    position: relative !important;
    overflow: hidden !important;
}

.tg_list-ca .hover-parent .hover-mask-parent {
    width: 300px !important;
    height: 220px !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    opacity: 0 !important;
    color: #fff !important;
    text-align: center !important;
    padding-top: 99px !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.tg_list-ca .hover-parent .hover-mask-parent:hover {
    opacity: 1 !important;
    transition: all 0.6s ease !important;
    padding-bottom: 0 !important;
}

.tg_list-ca .hover-parent .hover-mask-parent a .hover-mask-title {
    font-size: 16px !important;
    color: #fff;
}

.tg_list-ca .hover-parent .hover-mask-parent a .hover-mask {
    color: #fff;
}

/*------------------
カテゴリースマホ
------------------*/
@media screen and (max-width:767px) {
.tg_list-ca {
    display: none;
}

.tg_list-sp {
    display: block;
    width: 100%;
}

.list-wrap-sp {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 20px;
}

.list-wrap-sp a {
    width: 40%;
    display: flex;
    height: auto;
    align-items: center;
}
.text-wrap-sp {
    width: 60%;
    margin: auto;
}

.list-text-sp {
    width: 100%;
    text-align: left;
} 

.list-text-sp h1 {
    font-size: 16px;
    padding-left: 5px;
}

.list-text-sp p {
    font-size: 12px;
    padding-top: 10px;
    padding-left: 5px;
}
}

/* ----------------------
    pickup
------------------------------ */

.pickup {
    line-height: 1.5;
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 10PX;
    padding: 0.25em 0.5em;
    color: #494949;
    border-left: solid 5px #53ab38;
}


/* ----------------------
    tour
------------------------------ */
.top_tour{
    width:var(--width);
    margin:0 auto;
}
.top_tour li{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content: space-between;
    margin-bottom:2rem;
}
.tt_list::before,.tt_list::after{content:none;}
.tt_img {
    width: 550px;
    position: relative;
    margin-top: 30px;
}
.tt_img img{width:100%;}
.tt_img > span {
    font-size:14px;
    background: #333;
    color: #fff;
    position: absolute;
    padding: 0.5rem 2rem;
}
.tt_txt{
    width:calc(100% - 550px - 2rem);
    display:flex;
    flex-wrap:wrap;
}
.tt_t {
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 10px;
}
.tt_prc {
    font-size: 30px;
    color: #ab3850;
    font-weight: bold;
    display: flex;
    align-items: self-end;
}
.tt_btn {
    display: flex;
    align-items:center;
    justify-content:center;
    background: #333;
    text-align: center;
    padding: 10px 0;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    margin: 0 auto;
    border-radius: 40px;
    box-shadow: var(--shadow);
}

.tt_btn2 {
    display: flex;
    align-items:center;
    justify-content:center;
    background: #333;
    text-align: center;
    padding: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    margin: 5px 0;
    border-radius: 40px;
    box-shadow: var(--shadow);
}

.tt_btn:hover{color:#fff;}
@media screen and (max-width: 767px) {
    .top_tour{padding:0 1rem;}
    .tt_txt {
        width: 100%;
        font-size: 90%;
        margin: 1rem 0;
    }
    .tt_prc {
        font-size: 25px;
    }
    .top_tour li {
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        margin-bottom:2rem;
    }
    .top_tour li:last-of-type{border-bottom:none;}

}


/* ----------------------
    airplus
------------------------------ */

.top_tour .airbnr--img {   
    display: block; 
    width: 100%;
    height: auto;
    margin: 2rem 0;
}

.top_tour .airbnr-sp-img {
    display: none;
}

@media screen and (max-width: 767px) {
.top_tour .airbnr--img {    
        display: none;
    }

.top_tour .airbnr-sp-img {
        display: block;
        width: 100%;
        height: auto;
    }
}


/* ----------------------
    Osusume
------------------------------ */

.top_osusume{background:#eee;padding:5rem 0;margin-top: 30px;}
.top_osusume ul{
    width:var(--width);
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;   
}
.top_osusume ul::before,.top_osusume ul::after{content:none;}
.top_osusume li{
    width:calc(100% / 2 - 1rem);
    background:#fff;
}
.top_osusume img{width:100%;}
.to_txt{
    padding:2rem;
}
.to_txt b {
    display: block;
    font-size: 25px;
}
.to_txt span {
    display: block;
    font-size: 16px;
    color: #444;
    line-height: 1.8;
}
@media screen and (max-width: 767px) {
    .top_osusume {
        padding: 2rem;
    }
    .top_osusume li {
        width: 100%;
        margin-bottom: 2rem;
        box-shadow: 0 0 10px 0px #ccc;
    }
    .to_txt span{font-size:14px;}
}

/*ゴルフ紹介*/

.top_golfzyou{
    width:var(--width);
    margin:0 auto 3rem;
}
.tog_list{
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start; 
    row-gap: 8px;
    column-gap: 14px;
}
.tog_list img{
    width:100%;
    height: 135px;
}
.tog_list::before,.tog_list::after{content:none;}
.tog_list li {
    width: 15%;
    border: 1px solid #a8a8a8;
    border-radius: 6px;
    overflow: hidden;
    height: 270px;
}
.tog_list li a:hover{color:#333;}
.tog_list_btn {
    display: none;
}
.tog_list_btn2 { display: none;}
.tog_txt{padding:10px;}
.tog_txt > span:nth-of-type(1){
    background:#368bb4;
    color:#fff;
    display:inline-block;
    font-size:13px;
    padding:0 9px;
}
.tog_txt > span:nth-of-type(2) {
    margin-top: 10px;
    display: block;
    font-size: 14px;
    font-weight:bold;
}

@media screen and (max-width: 767px) { 
    .tog_list li {
        width: calc(100% / 2 - 0.5rem);
        height: 230px;
    }

    .tog_list_btn {
        width: 100%;
        font-size: 110%;
        margin-top: 5px;
        display: block;
        background: #333;
        text-align: center;
        padding: 1rem 0;
        color: #fff;
        font-weight: bold;
        margin: 2rem auto 0;
        border-radius: 6px;
    }

    .tog_list_btn.active {
        display: none;
    }

    .tog_list_btn2 {
        display: none;
    }

    .tog_list_btn2.active {
        width: 100%;
        font-size: 110%;
        margin-top: 5px;
        display: block;
        background: #333;
        text-align: center;
        padding: 1rem 0;
        color: #fff;
        font-weight: bold;
        margin: 2rem auto 0;
        border-radius: 6px;
    }

    .tog_list li:nth-child(n+5) {
        display: none;
    }

    .tog_list li:nth-child(n+5).active {
        display: block;
    }

    .tog_txt > span:nth-of-type(1){
        background:#368bb4;
        color:#fff;
        display:inline-block;
        font-size:13px;
        padding:0 9px;
    }

    .tog_txt > span:nth-of-type(2) {
        margin-top: 5px;
        font-size: 12px;
    }
}


/* ----------------------
    1人参加
------------------------------ */

.one-txt {
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 30px;
}

.onegolf_icon {
    background: #368bb4;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    padding: 0 10px;
    margin: 15px 5px 0;
} 

.onegolf_icon-red {
    background: #f12a04;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    padding: 0 10px;
    margin: 15px 5px 0;
} 

/* ----------------------
    北海道の魅力
------------------------------ */

.hok-point {
    font-weight: bold;
    font-size: x-large;
}




/* ----------------------
    top_article
------------------------------ */
.top_article{
    width:var(--width);
    margin:0 auto 3rem;
}
.ta_list{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between; 
}
.ta_list img{width:100%;}
.ta_list::before,.ta_list::after{content:none;}
.ta_list li {
    width: calc(100% / 4 - 1rem);
    border: 1px solid #a8a8a8;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 7px 5px 0 0 #aaaaaa4a;
}
.ta_list li a:hover{color:#333;}
.ta_txt{padding:1rem;}
.ta_txt > span:nth-of-type(1){
    background:#368bb4;
    color:#fff;
    display:inline-block;
    font-size:13px;
    padding:0 1rem;
}
.ta_txt > span:nth-of-type(2) {
    margin-top: 10px;
    display: block;
    font-size: 14px;
    font-weight:bold;
}
.ta_btn{
    display: block;
    background: #333;
    text-align: center;
    padding: 1rem 0;
    color: #fff;
    font-size: 120%;
    font-weight: bold;
    width: 300px;
    margin: 2rem auto 0;
    border-radius: 6px;
}
.ta_btn:hover{color:#fff;}
@media screen and (max-width: 767px) {
    .top_article {padding: 0 1rem;}   
    .ta_list li {
        width: calc(100% / 2 - 0.5rem);
        margin-bottom: 1rem;
    }
    .ta_btn {
        width: 100%;
        font-size: 110%;
        margin-top: 5px;
    }
    .ta_txt > span:nth-of-type(1) {
        background: none;
        font-size: 12px;
        padding: 0;
        color: #4671a1;
    }
    .ta_txt > span:nth-of-type(2) {
        margin-top: 5px;
        font-size: 12px;
    }
}

/* ----------------------
    faq
------------------------------ */
.top_faq{
    background:#eee;
    padding:2rem 0;
}
.tf_wrap{
    width:var(--width);
    margin:0 auto 3rem;
}
.top_faq dl{margin:0;}
.top_faq dl:after,.top_faq dl:before{content:none;}
.top_faq dt {
    font-weight:bold;
    cursor: pointer;
    display:flex;
    flex-wrap: wrap;
    width:100%;
    align-items: center;
    overflow: hidden;
    font-size: 18px;
    border-bottom: 1px solid #ccc;
    padding: 1rem 0;
}
.top_faq dt i{margin-left: auto;transition: .5s;}
.top_faq dt.on i {
    transform: rotate(180deg);
}
.top_faq dd {
    color: #333;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
}
.top_faq dd span{
    display:inline-block;
    line-height:1.8;
    width:calc(100% - 80px);
}
.top_faq dt::before {
    content: "Q";
    display: inline-block;
    width: 26px;
    text-align: center;
    background: #53ab38;
    color: #fff;
    padding: 1rem;
    border-radius: 50px;
    margin-right: 1rem;
}
.top_faq dd::before {
    content: "A";
    font-size: 125%;
    display: inline-block;
    width: 26px;
    text-align: center;
    background: #2db2dd;
    color: #fff;
    padding: 1rem;
    font-weight:bold;
    border-radius: 50px;
    margin-right: 1rem;
}

@media screen and (max-width: 767px) {
    .tf_wrap {
        padding:0 1rem;
    }
    .top_faq .top_ttl {
        margin: 0 0 2rem;
    }
    .top_faq dt span{
        display: block;
        width: calc(100% - 80px);
    }
    .top_faq dt::before,.top_faq dd::before {
        width: 40px;
        padding: 0.5rem 0;
    }
    .top_faq dd span {
        width: calc(100% - 40px - 1rem);
        font-size: 15px;
    }
    .top_img-txt > span{font-size:15px;}
    .top_img-txt > span:nth-of-type(2) {
        font-size: 30px;
    }
    .ta_txt {
        padding: 10px;
    }        
    .ta_list img { height: 120px;}
    .tt_t {font-size: 13px;}

    .to_txt b{font-size:20px;}
}

@media screen and (min-width: 767px) {
    .ta_list img{height:160px;}
}


/*----------------
フッター
-----------------*/

#sub_footer {
position: relative;
margin-top: 40px;
color: #fff;
}
#sub_footer a {
text-decoration: none;
color: #fff;
}
#sub_footer p {
    color: white;
}
#sub_footer a:hover {
text-decoration: underline;
}
#sub_footer .primary {
padding: 40px 20px;
background: #53ab38;
}
#sub_footer .primary .flex {
display: flex;
}
#sub_footer .primary .flex .left{
width: 40%;
}
#sub_footer .primary .flex .right{
display: flex;
flex-wrap: wrap;
width: 60%;
justify-content: center;
margin-top: 20px;
}
#sub_footer .secondary {
display: flex;
padding: 40px 20px;
background: #222;
}

@media screen and (max-width: 767px) {
#sub_footer .primary {
    padding: 20px 20px;
    background: #53ab38;
}
#sub_footer .primary .flex {
    display: block;
}
#sub_footer .primary .flex .left{
    width: 100%;
}
#sub_footer .primary .flex .right{
    width: 100%;
    display: block;
    margin-top: 0;
}
#sub_footer .secondary {
    display: block;
    padding: 20px 20px;
}
}

/* logo */

#sub_footer .logo {
position: relative;
padding: 0;
margin-left: 30px;
width: 200px;
font-size: 26px;
font-weight: bold;
}

#sub_footer .logo img {
    width: 200px;
}
@media screen and (max-width: 767px) {
#sub_footer .logo {
    font-size: 16px;
}
}

/* address */

#sub_footer .address {
margin: 10px 0 0 30px;
padding: 0;
}

@media screen and (max-width: 767px) {
#sub_footer .logo {
    margin-left: 0;
}

#sub_footer .address {
    font-size: 12px;
    margin-left: 0;
}
}

/* navi */

.navi-section {
display: flex;
flex-direction: column;
width: 45%;
margin-left: 20px;
}
#sub_footer .parent {
margin: 0 0 16px 0;
padding: 0;
font-weight: bold;
border-bottom: 1px dotted #fff;
}
#sub_footer .navi {
margin: 0;
padding: 0;
list-style: none;
}
#sub_footer .navi li {
margin: 8px 0 0 0;
padding: 0;
}
#sub_footer .navi li:first-child {
margin: 0;
}

@media screen and (max-width: 767px) {
.navi-section {
display: block;
width: 100%;
margin: 40px 0 0;
}
#sub_footer .parent {
font-size: 12px;
margin: 0 0 10px;
}
#sub_footer .navi {
    font-size: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
}
#sub_footer .navi li {
    border-top: 1px solid #444;
    padding-top: 10px;
    margin-top: 10px;
    font-size: 12px;
}
}