@charset "UTF-8";
@import url('style.css');


/* CSS Document */
/* スマートフォン向けのスタイル */


.bg1{
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #D9D9D9;
    background-image: url("../assets/BG1.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 0 36px 0;
    position: relative; /* 擬似要素のために相対位置を設定 */
}

.bg1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/BG1_before.png"); /* オーバーレイ画像 */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /*z-index: 1;  オーバーレイ画像を一番上のレイヤーに設定 */
    pointer-events: none; /* マウスイベントを無視する */
}

.bg2{
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #D9D9D9;
    background-image: url("../assets/BG2.png");
    background-position: center center;
    background-size: cover;
    padding: 0 0 36px 0;
    position: relative; /* 擬似要素のために相対位置を設定 */
}

.bg2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/BG2_before.png"); /* オーバーレイ画像 */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /*z-index: 1;  オーバーレイ画像を一番上のレイヤーに設定 */
    pointer-events: none; /* マウスイベントを無視する */
}

.top_container{
    width: 90%;
    overflow: hidden;
    hight: auto;
    display: flex;
    padding: 32px 6% 0px 6%;
    justify-content: center;
    flex-direction: column;
}


.top_container2{
    width: auto;
    overflow: hidden;
    hight: auto;
    display: flex;
    padding: 32px 0 0 0;
    justify-content: center;
    
}

.one_container{
    overflow: hidden;
    hight: auto;
    display: flex;
    padding: 32px 0% 0px 0%;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    gap:32px;
}


 .left_container,
.right_container{
    display: flex;
    flex-direction: column;
    gap:32px;
    }


.concept_card {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 38px 36px 36px 36px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 24px;
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.business-container{
    display: flex;
    flex-direction: row;
    gap:16px;
}

.business-cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    gap: 8px;
}



/* スマートフォン向けのスタイル */
@media screen and (max-width: 600px) {

        .left_container,
    .right_container {
        width: 100%;
        margin: 0;
    }
    .left_container {
        margin-bottom: 16px; /* 左コンテナの下にマージンを追加 */
    }
    .right_container {
        margin-top: 16px; /* 右コンテナの上にマージンを追加 */
    }
    .concept_card {
        width: 100%;
    }
    .one_container{
        width: 90%;
    }
}

/* PC向けのスタイル */
@media screen and (min-width: 601px) {
    .top_container {
        display: flex;
        max-width: 920px;
        flex-direction: row;
        gap: 16px;
    }
    .left_container,
    .right_container{
        width: 50%;
        align-self: stretch;
        gap: 16px;
    }
}


.image_card{
    width: 100%;
    padding-top: 56.25%;
    background-image: url("../assets/kazu.png");
    background-size: cover;
    background-position: center center;
    border-radius: 12px;
}

.kazu_yellow{
    height: 5em;
}
.card_profile{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding:0;
    gap: 12px;
}

.prof_li{
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.card_btn_container{
    display: flex;
    width:100%;
    flex-direction: row-reverse;
}