@charset "UTF-8";

/* contents
======================================================================*/

#contents.hosekibako .inner{
	max-width: 1060px;
    padding: 80px 40px 0px;
}

/* hosekibako_pht
===================================*/

#hosekibako_pht {
    width: 100%;
    position: relative;
    z-index: 2;
}

#hosekibako_pht h2 {
	margin-bottom: 2em;
    text-align: left;
}

#hosekibako_pht p.read {
	font-size: 1.6rem;
    letter-spacing: 0.1rem;
    line-height: 2.0;
    margin-bottom: 3em;
}

#hosekibako_pht .photo{
    width: 100%;
    position: relative;
}

#hosekibako_pht .photo img{
    max-width: 100%;
    height: auto;
}

#hosekibako_pht .ico_shippo{
    position: absolute;
    z-index: 9;
    right: 0px;
    bottom: -100px;
    text-align: right;
}




/* hosekibako_bottom
===================================*/

#hosekibako_bottom {
    position: relative;
    width: 100%;
    padding: 200px 40px 120px;
    margin-top: -70px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(../../hosekibako/images/hosekibako_bg.png);
    background-repeat: repeat;
    background-position: center top;
}

.hoseki_wrap{
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    background-color: #ffffff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.oshinagaki {
    width: 32%;
    max-width: 320px;
    text-align: left;
    position: absolute;
    z-index: 3;
    top: -50px;
}

.oshinagaki img{
    max-width: 100%;
    height: auto;
}

.oshinagaki_txt {
    padding: 40px 40px 40px 400px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ill_musubi {
    position: absolute;
    top: 0px;
    right: -76px;
    z-index: 11;
}

#hosekibako_bottom h4{
    margin-bottom: 2em;
}

#hosekibako_bottom p{
    margin-bottom: 2em;
}

#hosekibako_bottom p.sub {
	font-size: 1.2rem;
    margin-bottom: 0em;
}


/* ==============================================================================

[Media Queries] smart phone : Landscape

============================================================================== */

@media only screen and (min-width:1px) and (max-width:740px) {


/* hosekibako_pht
===================================*/

#hosekibako_pht .ico_shippo{
    right: -20px;
    bottom: -100px;
}

#hosekibako_pht .ico_shippo img{
    max-width: 80%;
    height: auto;
}
    

/* hosekibako_bottom
===================================*/

.oshinagaki {
    width: 40%;
    top: -50px;
}

.oshinagaki_txt {
    padding: 40px 40px 40px 50%;
}

.ill_musubi {
    right: -90px;
}

.ill_musubi img{
    max-width: 80%;
    height: auto;
}

} /*@mediaEnd*/








/* ==============================================================================

[Media Queries] smart phone : Portrait

============================================================================== */

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

#contents.hosekibako .inner{
    padding: 100px 40px 0px;
}

#hosekibako_pht h2 img{
	max-width: 90%;
    height: auto;
}

#hosekibako_pht p.read {
	font-size: 1.4rem;
}
    
#hosekibako_pht .ico_shippo{
    right: -20px;
    bottom: -60px;
}

#hosekibako_pht .ico_shippo img{
    max-width: 40%;
    height: auto;
}
    
    

/* hosekibako_bottom
===================================*/

.oshinagaki {
    width: 60%;
    margin: 0 auto;
    position: relative;
}

.oshinagaki_txt {
    padding: 0px 40px 40px 40px;
}

.ill_musubi {
    right: -100px;
}

.ill_musubi img{
    max-width: 60%;
    height: auto;
}

#hosekibako_bottom p{
    font-size: 1.2rem;
}

#hosekibako_bottom p.sub{
    font-size: 1.1rem;
}
    
} /*@mediaEnd*/