/* 各セクションのタイトル */
/* *, *:before, *:after {
    box-sizing:content-box;
} */

*{
	box-sizing:border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
}
html{
    scroll-behavior:smooth;
}

main {
    overflow: hidden;
}

h2{
    text-align: center;
    margin: 0 0 50px 0;
    font-size: 1.1vw;
    line-height: 1.5;
    color: #444;
}

h2 span{
    font-size: 3.5vw;
    text-transform: uppercase;
    display: block;   
}

@media screen and (max-width:1130px) {
    h2{
        font-size: 0.9rem;
    }

    h2 span{
        font-size: 2.5rem;
    }
}

@media screen and (max-width:768px) {
    h2{
        font-size: 0.8rem;
        margin-bottom: 20px;
    }

    h2 span{
        font-size: 2rem;
    }
}

/* 動画紹介 */

#movie{
	position: relative;
    padding: 50px 0 100px 0;
    margin: 0 0 100px 0;

}

#movie:after{
	position: absolute;
	z-index: -1;
	content:'';
	top:10px;
	left:-30%;
	width:150%;
    height: 680px;
    
    /* background:#6FAE9E; */
    /* background:#6C8296; */
    background:linear-gradient(135deg,#6C8296,#7E95A8);

    /* background: #734e30; */
    /* background: #e7d0a9; */
	/* background: #4aa69d; */
	transform: rotate(-5deg);
}


#movie .movie-area{
    background:#efefef;
    padding: 40px;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.5);
    max-width: 1000px;
    width:70%;
    margin: 0 auto;
    border-radius:10px;
}

#movie h2{
	color: #fff;	
}

@media screen and (max-width:840px) {
    #movie{
        margin:0;
        padding: 50px 0;
    }

    #movie:after{
        height: 340px;
    }
    
    #movie .movie-area{
        padding: 20px;
        width:90%;
    }    
}



/* 新商品紹介 */
        .post {
            max-width: 1200px;
            margin: 0 auto;
            padding-left: 10px;
            padding-right: 10px;
            margin-top: 50px;

        }
        @media (max-width:767px){
            .post {
                margin-top: 30px;
            }
        }
        .products-box {
            padding-top: 2vh;
            /* margin-right: 2.778vw;
            margin-left: 2.778vw; */
        }
        @media (max-width:1260px){
            .products-box {
                margin-right: 2.778vw;
                margin-left: 2.778vw;
            }
    
        }

        .product-nav{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-bottom:40px;
        }

        .product-nav a{
        padding:8px 14px;
        border:1px solid #ddd;
        border-radius:20px;
        text-decoration:none;
        color:#333;
        font-size:14px;
        }

        .product-nav a:hover{
        background:#f5f5f5;
        }


        /* ダッシュ線 */
        /* .post-dash-default {
            border-top: dashed 3px #ddd;
        } */

        .heading {
            position: relative;
            padding-left: 2.4em;
            font-size:  2.2rem;
            font-family: "M PLUS 1p",sans-serif;
            font-weight: 500;
            color: #444;
            line-height: 1.3;
            margin-bottom: 2vh;
        }
        .heading::before {
            content: attr(data-num);
            position: absolute;
            top:0;
            left:0;
            margin-top: -5px;
            padding-bottom: 5px;
            color: #3073b9;
            font-size: 2.4rem;
            font-weight: 800;
            /* font-family: 'Courier New', Courier, monospace; */
            border-bottom: 1px solid #3073b9;
        }
        @media (max-width: 767px) {
            .heading {
                font-size:  1.8rem;
            }
            .heading::before {
                font-size: 2rem;
            }               
        }

        /* 共通 */
        .sec-title {
            /* border-bottom: 2px solid #4d4d4d; */
            margin-bottom: 15px;
            /* display: flex; */
        }
        .sec-title-left {
            width: auto;
        }
        .sec-title-right {
            width: auto;
        }

        .sec h2 {
            font-size: 1.225rem;
            font-weight: 700;
            line-height: 1.2;
            padding-bottom: 5px;

            /* display: flex; */
            /* font-family: "M PLUS 1p",sans-serif; */
        }
        .sec p {
            color: #444;
        }


        .sec p {
            font-size: 1rem;
            line-height: 1.5;
            text-align: justify;
            text-justify: inter-ideograph;
            font-family: "M PLUS 1p",sans-serif;
        }
        @media (max-width:896px) {
            .sec h2 {
                font-size: 1.225rem;
            }
        }

        /* NEW */
        .badge-new{
            display:inline-block;
            margin-left:8px;
            padding:2px 6px;
            font-size:11px;
            font-weight:700;
            color:#fff;
            background:#e60023;
            border-radius:3px;
            vertical-align:middle;
        }
        .badge-newcolor{
        display:inline-block;
        margin-left:8px;
        padding:2px 6px;
        font-size:11px;
        font-weight:700;
        color:#fff;
        background:#1e73be;
        border-radius:3px;
        }

        /* セクション1 */

        .sec01 {
            display: flex;
            padding-bottom: 40px;
            border-bottom: dashed 3px #ddd;
            /* border-bottom: dashed 1px #e8e8e8; */
        }
        .sec01 p {
            margin-bottom: 15px;
        }
        .sec01-1 {
            width: 50%;
        }
        .sec01-2 {
            margin-left: 2%;
            width: 48%;
        }
        .sec01-1 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .sec01-plan img {
            display: block;
            width: 100%;
            max-width: 300px;
            width: 80%;
        }

        @media (max-width: 767px) {
            .sec01 {
                display: block;
                flex-direction: column;
            }
            .sec01-1 {
                width: 100%;
                order: 2;
                margin-bottom: 15px;
            }
            .sec01-2 {
                width: 100%;
                margin-left: 0;
                order: 1;
            }
            .sec01-plan a {
                display: block;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }
            .sec01-plan img {
                max-width: none;
                width: 100%;
            }
            
        }


/* セクション2 */
        .sec-wrap {
            display: flex;
            box-sizing:content-box;
            border-bottom: dashed 3px #ddd;
        }
        .sec02 {
            box-sizing:content-box;
            width: 48%;
            padding-right: 2%;
            border-right: dashed 3px #ddd;
            justify-content: space-between;
            padding-top: 40px;            
            padding-bottom: 40px;
        }
        .sec02 p {
            margin-bottom: 30px;
        }

        .sec02-box {
            display: flex;
        }

        .sec02-img1 {
            height: 300px;
            width: 44%;
        }
        .sec02-img1 img {
            height: 100%;
            object-fit: cover;
        }
        .sec02-introduction {
            width: 54%;
            margin-left: 2%;
        }
        .sec02-img2 {
            margin-left: -60px;
            z-index: 1;
        }
        @media (max-width: 767px) {
            .sec-wrap {
                display: block;
            }
            .sec02 {
                width: 100%;
                padding-right: 0;
                border-right: none;
                border-bottom: dashed 3px #ddd;
            }
            .sec02 p {
                margin-bottom: 15px;
            }

            .sec02-box {
                display: block;
            }

            .sec02-img1 {
                height: auto;
                width: 100%;
            }
            .sec02-img1 img {
                display: block;
                width: 100%;
                height: auto;
                margin-bottom: 15px;
            }
            .sec02-introduction {
                width: 100%;
                margin-left: 0;
                margin-bottom: 15px;
            }
            .sec02-img2 {
                width: 100%;
                max-width: none;
                margin-left: 0;
            }
            .sec02-img2 img {
                display: block;
                width: 100%;
                height: auto;
            }
            .sec02-plan a {
                display: block;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }


        }

/* セクション3 */
        .sec03 {
            box-sizing:content-box;
            width: 48%;
            padding-left: 2%;
            padding-top: 40px;
            padding-bottom: 40px;

        }
        .sec03-img {
            margin-bottom: 15px;
        }
        .sec03-img img {
            display: block;
            width: 100%;
            height: auto;
        }
        @media (max-width: 767px) {
            .sec03 {
                width: 100%;
                margin-left: 0;
                padding-left: 0;
            }
            .sec03-img {
                margin-bottom: 15px;
            }
            .sec03-plan a {
                display: block;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }
        }

/* セクション4 */
        .sec04 {
            width: 48%;
            padding-right: 2%;
            border-right: dashed 3px #ddd;
            box-sizing:content-box;
            padding-top: 40px;
            padding-bottom: 40px;
        }
        .sec04-img {
            margin-bottom: 15px;
        }
        .sec04-img img {
            display: block;
            width: 100%;
            height: auto;
        }
        @media (max-width: 767px) {
            .sec04 {
                width: 100%;
                margin-left: 0;
                padding-right: 0;
                border-bottom: dashed 3px #ddd;
                border-right: none;
            }   
            .sec04-img {
                margin-bottom: 15px;
            }
            .sec04-plan a {
                display: block;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }
        }
        
/* セクション5 */
        .sec05 {
            width: 48%;
            padding-left: 2%;
            box-sizing:content-box;
            padding-top: 40px;
            padding-bottom: 40px;

        }
        .sec05 p {
            margin-bottom: 30px;
        }

        .sec05-box {
            display: flex;
        }

        .sec05-img1 {
            height: 300px;
            width: 44%;
        }
        .sec05-img1 img {
            height: 100%;
            object-fit: cover;
        }
        .sec05-introduction {
            width: 54%;
            margin-left: 2%;
        }
        .sec05-img2 {
            margin-left: -60px;
            z-index: 1;
        }
        @media (max-width: 767px) {
            .sec05{
                width: 100%;
                padding-right: 0;
                padding-left: 0;
                border-left: none;
            }
            .sec05 p {
                margin-bottom: 15px;
            }

            .sec05-box {
                display: block;
            }

            .sec05-img1 {
                height: auto;
                width: 100%;
                margin-bottom: 15px;
            }
            .sec05-img1 img {
                width: 100%;
                height: auto;
                object-fit: cover;
            }
            .sec05-introduction {
                width: 100%;
                margin-left: 0;
                margin-bottom: 15px;
            }
            .sec05-img2 {
                margin-left: 0;
                max-width: 300px;
                width: 80%;
            } 
            .sec05-plan a {
                display: block;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }


        }

    /* sec06 sec07 */
        .sec06 {
            border-top: dashed 3px #ddd;
            /* padding-top:20px; */
            padding-top: 40px;
            /* margin-bottom: 40px; */
        }
        .sec07 {
            /* padding-top: 20px; */
            padding-top:40px;
        }

    /* ここから下がボタンのCSS　*/
    /* ダークブルー#010066 */
        .btn-animation-02 {
            display: inline-block;
            width: 200px;
            text-align: center;
            background-color: #010066;
            border: 2px solid #010066;
            font-size: 16px;
            color: #010066;
            text-decoration: none;
            font-weight: normal;
            padding: 10px 24px;
            margin-top: 20px;
            /* border-radius: 4px; */
            position: relative;
        }
        .btn-animation-02 span {
            position: relative;
            z-index: 1;
        }
        .btn-animation-02::before,
        .btn-animation-02::after {
            content: "";
            display: block;
            background-color: #FFF;
            width: 50%;
            height: 100%;
            position: absolute;
            top: 0;
            transition: .2s;
        }
        .btn-animation-02::before {
            left: 0;
        }
        .btn-animation-02::after {
            right: 0;
        }
        .btn-animation-02:hover:before,
        .btn-animation-02:hover:after {
            width: 0;
            background-color: #FFF;
        }
        .btn-animation-02:hover {
            color: #FFF;
        }

        .btn-animation-02.btn-animation-add{
            width: 60%;
            margin-left: auto;
            margin-right: auto;
            max-width: 300px;
            background-color: #bf671c;
            border: 2px solid #bf671c;
            font-size: 16px;
            color: #bf671c;
        }
        .btn-animation-02.btn-animation-add:hover{
            color: #fff;
        }
        @media (max-width: 767px) {
            .btn-animation-02.btn-animation-add{
                width: 80%;
            }
        }

        /* スクロールに合わせて表示される */

        .flipRightTop{
        animation-name: flipRightTopAnime;
        animation-duration:0.5s;
        animation-fill-mode:forwards;
        opacity:0;
        }

        @keyframes flipRightTopAnime{
        from {
        transform: translate(-20px,80px) rotate(25deg);
        opacity: 0;
        }

        to {
        transform: translate(0,1) rotate(0deg);
            opacity: 1;
        }
        }

        /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
        .flipLeftTopTrigger{
            opacity: 0;
        }