@charset "utf-8";

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

ボックス:01
class="l_pt_10 l_pb_10 box01 thema shape"
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.3);
=========================================================*/
.box01{
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05),0px 4px 5px -2px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
}
/*---------------------------*/
.box01.thema{
    background-color: #ecf7f6;
}
.box01.thema-1{
    background-color: #ffffff;
}
.box01.thema-2{
    background-color: none;
}
/*---------------------------*/
.box01.shape{
    border-radius: 10px;
}
.box01.shape-1{
    border-radius: 00px;
}

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

ボックス:02

=========================================================*/
/*
class=""
---------------------------------------------------------*/
.box02{
}

.box02.thema{
    background-color: #eef4f3;
}

.box02.shape{
    border-radius: 10px;
}

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

ボックス:03

=========================================================*/
/*
class=""
---------------------------------------------------------*/
.box03{
    border-bottom: solid 2px rgba(0, 0, 0, 0.1);
}
.box03:last-child{
    border-bottom: none;
}
.box03.type1{
    border: none;
}


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

ボックス:02

=========================================================*/
/*
class=""
---------------------------------------------------------*/
.img-box01 {
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05),0px 3px 4px 0px rgba(0, 0, 0, 0.2);
    width: 100%;
    border-radius: .5rem;
    overflow: hidden;
    height:400px;
}
.img-box01.type01{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.img-box01.type02{
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.img-box01.type03{
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
}

@media print,screen and (max-width: 678px)  {
    .img-box01 {
        height: 40vh;
        min-height: 300px;
    }
}
/*========================================================

ボックス:04

=========================================================*/
/*横幅は、汎用CSSで指定する*/
.box04{
    border: solid 1px #c7c7c7;
    position:relative;
    padding: 1em;
    border-radius: 3px;
    width: 100%;
}
.box04 .title{
    position: absolute;
    background: #897a24;
    color: #fff;
    top:-.7em;
    left: 1em;
    padding: .2em .5em .2em;
    border-radius: 3px;
}

/*
class=""
---------------------------------------------------------*/
.img-wrapper.type01 {
    max-width: 300px;
    width: 100%;
}
.img-wrapper.type01 img{
    width: 100%;
    height: auto;
    text-align: center;
}
/*
class=""
---------------------------------------------------------*/
.img-wrapper.type02 {
    max-width: 600px;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.img-wrapper.type02 img{
    width: 100%;
    height: auto;
}

/*
class=""
---------------------------------------------------------*/
.img-wrapper.type03 {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}
.img-wrapper.type03 img{
    max-width: 500px;
    width: 100%;
}

/*
class=""
---------------------------------------------------------*/
.img-wrapper.type04 {
    max-width: 600px;
    width: 100%;
}
.img-wrapper.type04 img{
    max-width: 600px;
    width: 100%;
    height: auto;
}