/* 全体のリセット */

body, h1, h2, h3, p, a {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Roboto', sans-serif;

    color: #333;

    background: linear-gradient(120deg, #ececec, #eaeaea);

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}



a {

    text-decoration: none;

    color: inherit;

}



.main-contents-wrapper {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

}



.main-contents {

    background-color: #ffffff;

    padding: 30px 0 50px 50px;

    border-radius: 30px;

    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);

    width: 60%;

    text-align: left;

    position: relative; /* 親要素としての基準 */

    overflow: hidden; /* 子要素が枠外に出るのを防ぐ */

    z-index: 1; /* テキストのスタック順を画像より上に設定 */

}



.main-contents img {

    position: absolute;

    right: 10%;

    top: 50%;

    transform: translateY(-50%) translateX(30%);

    width: auto;

    height: 80%;

    opacity: 1;

    pointer-events: none;

    z-index: -1; /* 画像をテキストの後ろに配置 */

    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

}



h3 {

    font-weight: 600;

}



h2 {

    margin: 0.4em 0;

    font-weight: 600;

    font-size: 3em;

    color: #1a1a1a;

}



h3 {

    font-size: 1.5rem;

    color: #555;

}



p {

    font-size: 1rem;

    color: #777;

    line-height: 1.6;

}



.hidden {

    opacity: 1;

    animation: fadeIn 1s ease-in-out;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.footer-content-wrapper {

    background-color: #f4f4f4;

    padding: 20px 0;

    text-align: center;

}



.footer-content-wrapper p {

    font-size: 0.9rem;

    color: #999;

}



/* レスポンシブデザイン */

@media (max-width: 950px) {

    h3 {

        font-size: 1.2rem;

    }



    p {

        font-size: 0.9rem;

    }

.main-contents {

    background-color: #ffffff;

    padding: 30px 0 50px 50px;

    border-radius: 30px;

    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);

    width: 100%;

    text-align: left;

    position: relative; /* 親要素としての基準 */

    overflow: hidden; /* 子要素が枠外に出るのを防ぐ */

    z-index: 1; /* テキストのスタック順を画像より上に設定 */

}


}