/* 災害時に備えた食品の家庭備蓄の例 モーダル */



/* PCレイアウト */
/*-------------------------------------------*/
.modal-bg {`
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background-color:#ffbe00;
}
.modal-wrap {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    z-index:100;
}
.modal-inner {
    overflow-y:auto;
    position:absolute;
    top:4%;
    left:0;
    right:0;
    background-color:#ffffff;
    width:92%;
    max-width:820px;
    height:92vh;
    margin:auto;
    padding:0;
    line-height:1.6;
    font-size:1.2em;
}
.modal-inner img {
    max-width:100%;
    height:auto;
}

/* close button */
.btn-close {
    position:absolute;
    margin:auto;
    z-index:1;
}
.btn-close span {
    display:inline-block;
    background-repeat:no-repeat;
    background-position:left center;
    background-image:url("../images/modal/icon_close.png");
    width:3em;
    padding-left:24px;
    font-size:1.4em;
    z-index:2;
    cursor:pointer;
    transition:opacity .3s ease-in;
}
.btn-close span:hover {
    opacity:.7;
}
.btn-close.close-top {
    top:1%;
    right:1%;
}
.btn-close.close-bottom {
    position:static;
}

.modal-inner h2 {
    margin:0 auto 1em;
}
.modal-inner h2 img {
    width:100%;
    max-width:inherit;
}
.modal-inner strong {
    color:#ff5000;
}
.modal-inner p {
    width:92%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}
.modal-inner p.lead {
    margin-bottom:1em;
    font-size:1.2em;
}
.modal-inner p.lead.bottom {
    margin-bottom:3em;
}

.modal-inner h3 {
    background-color:#ff5000;
    margin:0 auto;
    text-align:center;
}
.modal-inner h3 img {
    margin:0 auto;
}

.modal-inner .line_bg {
    background-repeat:repeat;
    background-position:center center;
    background-image:url("../images/bg_line.jpg");
    padding:4% 8%;
}
.modal-inner dl.list {
    
}
.modal-inner dl.list div {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:2em;
    padding-bottom:2em;
    border-bottom:3px solid #ff5000;
}
.modal-inner dl.list div:last-child {
    padding-bottom:0;
    border-bottom:0;
}
.modal-inner dl.list dt {
    display:flex;
    align-items:center;
    width:100px;
    background-color:#ff5000;
    border-radius:12px;
}
.modal-inner dl.list dd {
    position:relative;
    width:calc(100% - 140px);
    text-align:left;
    line-height:1.4;
    font-size:1.2em;
}
.modal-inner dl.list dd strong {
    font-size:1.1em;
}
.modal-inner span.illust {
    display:block;
    position:absolute;
    margin:auto;
}
.modal-inner span.illust img {
    display:block;
}
.modal-inner span.illust.illust01 {
    top:3%;
    right:9%;
    width:8.7%;
}
.modal-inner span.illust.illust02 {
    top:0;
    right:8%;
    width:10.3%;
}
.modal-inner span.illust.illust03 {
    right:4%;
    bottom:0;
    width:17.7%;
}
.modal-inner span.illust.illust04 {
    top:-30%;
    right:4%;
    width:50%;
}

.modal-inner .modal-bottom {
    position:relative;
}
.modal-inner ul.hint {
    padding:4% 6% 6%;
    text-align:left;
}
.modal-inner ul.hint li {
    margin-bottom:2em;
}

.modal-inner p.note {
    width:84%;
    padding-bottom:8%;
}

.modal-inner .illust05 {
    position:absolute;
    right:3%;
    bottom:0;
    width:12.19%;
}



/* 1200px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 1200px) {




}
/*-------------------------------------------*/
/* 1200px以下 END */



/* 950px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 950px) {




}
/*-------------------------------------------*/
/* 950px以下 END */



/* 768px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 768px) {


.btn-close span {
    font-size:1.2em;
}

.modal-inner span.note {
    display:inline-block;
    width:80%;
}

.modal-inner span.illust.illust01,
.modal-inner span.illust.illust02,
.modal-inner span.illust.illust03,
.modal-inner span.illust.illust04 {
    right:0;
}


}
/*-------------------------------------------*/
/* 768px以下 END */



/* 750px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 750px) {

.modal-inner {
    font-size:1.0em;
}

.modal-inner h2.first {
    padding-top:4%;
}


.modal-inner .line_bg {
    background-size:80%;
    padding:4% 4%;
}
.modal-inner dl.list dt {
    width:25%;
}
.modal-inner dl.list dd {
    width:68%;
    font-size:1.0em;
}

.modal-inner ul.hint li {
    display:block;
    width:100%;
}
.modal-inner p.note {
    width:70%;
    margin-left:8%;
    margin-right:inherit;
}
.modal-inner p.note a {
    word-wrap:break-word;
    word-break:break-all;
}

}
/*-------------------------------------------*/
/* 750px以下 END */




/* 640px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 640px) {




}
/*-------------------------------------------*/
/* 640px以下 END */



/* 420px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 420px) {




}
/*-------------------------------------------*/
/* 420px以下 END */



/* 375px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 375px) {


.modal-inner span.illust.illust04 {
    top:-20%;
    right:5%;
    width:40%;
}


}
/*-------------------------------------------*/
/* 375px以下 END */



/* 320px以下 */
/*-------------------------------------------*/
@media only screen and (max-width: 320px) {


.modal-inner span.illust.illust04 {
    top:-16%;
    width:40%;
}


}
/*-------------------------------------------*/
/* 320px以下 END */