@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700&display=swap');
.content_main h4,.content_main h3 {
    color: #e5eced;
    text-shadow: none;
}
.content_main {
    background:#20323f;
    background: url(img/design/basepattern.jpg);
}
.content_main h4 {
    font-size: 18px;
    min-height: 64px;
}
.content_main .number {
    background: linear-gradient(#40abff 0%, #02bfb9 100%);
    color: #e5eced;
    color: #d79748;
}
.content_main section {
    filter: drop-shadow(2px 4px 6px #333);    
}
.content_main section:first-child::before {
    content: none;
}
.content_main section p{
    border: none;
    font-family: 'Shippori Mincho', serif;
    line-height: 1.4;
}
.content_main section:nth-child(odd) {
    background: #20323f;
}
.content_main section:nth-child(odd) .number {
    background: #185f77;
}
.content_main section:nth-child(even) {
    background: #185f77;
}
.content_main section:nth-child(even) .number {
    background: #20323f;
}
section.title img {
    max-width: 100%;
}
section.title .text-area h1 {
    border-bottom: 5px solid #FFFFFF;
    color: #fff;
    margin-top: 10px;
}
.shop_message {
    background-color: #333;
    text-align: center;
}
.shop_message img {
    margin:10px 0;
    max-height: 50px;
    max-width: 70%;
}
section.title .text-area .headtext {
    display: inline-block;
    margin: 30px 0 15px 0;
    color: #fff;
    min-height: 120px;
    white-space: pre-wrap;
}
.content_main section .img_box {
    background-color: #000;
    background-image: url(./img/design/hydorogen.jpg);
    background-position: center;
    background-size: 60%;
    background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
    section.title {
        order: 15;
    }   
    .content_main section:first-child {
        background: url(img/design/backimg.jpg) !important;
        background-repeat: no-repeat!important;
        background-size: cover!important;
    }
       

    section.title .text-area {
        position: absolute;
        bottom: 50px;
        left: 15px;
        width: calc((100% - 30px) * 0.6);
        margin-right: calc((100% - 30px) * 0.05);
    }
    section.title .image-area {
        position: absolute;
        top: 15px;
        right: 15px;
        width: calc((100% - 30px) * 0.35);
    }
    section.title .image-area img:first-child {
        text-align: right;
    }
    section.title .image-area img:last-child {
        text-align: left;
    }
}
@media screen and (max-width: 767px) {
    .content_main section:first-child {
        display: flex;
        flex-direction: column;       
        background:#000 url(img/design/backimgsp.jpg) no-repeat!important ;
        background-size: 100%!important;
        height: calc(100vw * 1.67);
    }
    .content_main section:first-child .text-area{
        position: absolute;
        bottom: 0;
        width: calc(100% - 30px);
    }
    section.title .image-area {
        display: flex;
        justify-content: space-around;
    }
    section.title .image-area img{
        width: 45%;
        height: 45%;
    }
    section.title .image-area img:first-child{
        order: 2;
    }
    section.title .image-area img:last-child{
        order: 1;
    }
}
.content_main section .img_box img {
    transform: rotate(30deg);
    filter: drop-shadow(4px 8px 6px #FFF);
}
.content_main section .img_box::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    filter: blur(100px);
    background: #333;
}