/* -----------------------------------------------------------------------------------------------
	hsb
-------------------------------------------------------------------------------------------------- */
.hsb {
    padding: 0 60px;
    position: relative;
}

.hsb p {
    line-height: 1.5;
}

.hsb h3 {
    font-size: 4.4rem;
    letter-spacing: 0.2em;
    color: #000;
}


.hsb li {
    font-size: 1.8rem;
    margin-bottom: 12px;
    line-height: 1.2;
}
.hsb li span {
    color: #b00;
    font-weight: bold;
}

/* index */
.section_present {
    background: #fce2ba;
    border-radius: 10px;
    padding: 15px 30px;
}
.section_present p {
    font-size: 1.8rem;
}
.section_web_entry {
    border: 5px solid #009999;
    border-radius: 10px;
    padding: 15px 30px;
}
.section_web_entry h2 {
    text-align: center;
}



.hsb_photoindex {
    margin: 30px 0 80px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
    background: #f0f0f0;
    
}
.hsb_photo_each {
    flex: 0 1 auto;
    width: 33.333333%;
    padding: 2px;
    border: 1px solid #dbdbdb;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.hsb_photo_2p_each {
    width: 24.9%;
}
.hsb_photo_full_each {
    width: 100%;
}


/* each photo */

.hsb_photo {
    position: relative;
}
.hsb_photo:before{
    content: "";
    display: block;
    padding-top: 66.56%;
  }
.hsb_photo img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: contain;
}



.hsb_cover {
    position: absolute;
    top:0 ; left: 0;
    z-index: 20; 
    width: 100%;
    height: 100%;
}
.hsb_photo_number {
    position: absolute;
    top:2px ; left: 2px;
    z-index: 1; 
    text-align: right;
    background: rgba( 255,255,255, 0.7);
    color: #000000;
    padding: 1px 4px;
    font-size: 1.4rem;
}


.hbs_photo_selected {border: 3px solid #f60;}
.hbs_photo_selected .hsb_photo_number {
    color :#ffffff;
    background: rgba( 255, 120, 0, 0.7);
}

#hsb_tocart {
    position: fixed;
    width: 70%;
    left: 50px;
    bottom:0;
    background: #009999;
    color: #fff;
    padding: 6px;
    z-index: 200;
    text-align: center;
}
#hsb_tocart .btn {
    display: none;
}



@media screen and (max-width:800px) {
    .hsb {
        padding: 0;
    }

    .hsb_photo_each {
         width: 50%;
    }
}

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

    .hsb {
        padding: 0;
    }

    .hsb_photoindex{
        padding: 4px;
    }
    .hsb_photo_each {
        width: 100%;
    }
    .hsb_photo_2p_each {
        width: 49.5%;
    }

    .hsb_photo_number {
        font-size: 1.7rem;
    }

    
    .hb_entry {
        padding: 10px;
    }
    .hb_schoolname {
        font-size: 2.0rem;
    }
    .hb_present , .hb_presentp {
        font-size: 1.7rem;
        width: 100%;
    }
    .hb_schoolselect li {
        width: 48%;
    }
    .hsb_photoindex_mainimage {
        display: none;
    }
    .section_present p {
        font-size: 1.6rem;
    }
}



/* kaijo */


.hsb .caution {
    color: #f00;
    font-size: 1.8rem;
    line-height: 1.75;
    margin-bottom: 40px;
}
.hsb .caution span {
    font-weight: bold;
    font-size: 2.2rem;
}

.kaijo_blocks {
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
}
.block_each {
    flex: 0 1 auto;
    width: 45%;
    padding: 5px 0 0 0;
    background-image: url(/img/hsb2024/hokkaido/back_a.jpg);
    background-size: cover;
    margin: 0 0 10px 0;
    border-top: 3px solid #c48819;
}
.block_width {
    width:100%;
}

.block_each h2, .block_each h2 a {
    color: #e3007f;
    font-weight: bold;
    font-size: 3.2rem;
    line-height: 1.5;
    border: none;
    padding: 0;
}
.block_line {
    font-size: 2.0rem;
    line-height: 1.5;
    margin: 4px 0;
    font-weight: bold;
}
.block_line span {
    display:inline-block;
    background: #000000;
    color: #ffffff;
    padding: 4px 10px;
    font-size: 1.7rem;
    border-radius: 4px;
    margin-right: 4px;
}
.hsb_map {
    margin: 40px 0;
}
.hsb_credit {
    border-top: 3px solid #c48819;
    padding: 30px;
    text-align: center;
    font-size: 1.8rem;
}


.formNames div {
	display: inline-block;
	width: 46%;
    border: 1px solid #f00;
}
.formNames input {
	width: 80%;
}




@media screen and (max-width: 480px) {
    .block_each {
        flex: 0 1 auto;
        width: 100%;
    }
    .hsb .caution {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }
    .hsb h3 {
        font-size: 2.4rem;
    }
    .block_each h2, .block_each h2 a {
        font-size: 3.2rem;
    }
    
    .block_line {
        font-size: 1.8rem;
    }
    .block_line span {
        font-size: 1.5rem;
    }
}