/* --- ▼▼▼ ここからコピー ▼▼▼ --- */

/* body全体の設定（囲みは作らず、単独で書きます） */
body {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-family: "Yu Gothic regular", "Yu Gothic", YuGothic, sans-serif;
    letter-spacing: 1px;
}

/* ヘッダー周り */
#header {
    display: flex;
    justify-content: space-between;
}

#header img {
    height: 18px;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999;
}

.hd_text {
    margin: 10px 10px;
    color: #C2B8B8;
}

.empty {
    opacity: 0;
}

.ig1, .ig2, .contact {
    color: #C2B8B8;
    text-decoration: none;
    padding-bottom: 7px;
    background-repeat: no-repeat;
    background-position: bottom;
    /* 長いSVGデータは省略せずそのまま使用してください */
}

/* SVG画像の指定（ig1） */
.ig1 {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_レイヤー_1' data-name='レイヤー 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 159.45 12.07'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23000dff; stroke-linecap: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M1,5.17c3.46.09,13.27.22,18.84-.24,6.17-.52,11.59-1.78,14.21-1.72,2.92.07,5.34,3.57,11.15,5.91,4.28,1.72,9.79,1.81,14.3,1.94,1.72.05,2.3-.04,8.15-1.7,5.85-1.66,16.95-4.92,23.08-6.64,6.9-1.94,8.65-1.89,10.61-1.52,2.56.48,6.35,2.59,12.3,3.78,11.58,2.31,15.56-1.07,20.5-1.02,7.75.07,15.36,3.07,19.81,2.93,1.65-.23,2.06-.77,2.58-1.26.52-.5,1.12-.93,1.9-1.99'/%3E%3C/svg%3E");
}

/* SVG画像の指定（ig2） */
.ig2 {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_レイヤー_1' data-name='レイヤー 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125.65 13.83'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23000dff; stroke-linecap: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M1,1c0,.06.05.65.32,1.68.71,2.79,5.87,4.22,9.23,5.49,2.62.99,5.11-.22,13.12-2.48,6.38-1.8,10.79.31,16.89,2.48,3.47,1.24,7.98,1.91,14.39,2.35,6.41.44,14.66.43,19.67.26,9.96-.33,14.84-3.5,17.93-4.19,2.09-.47,4.02.06,8.08,1.21,9.59,2.71,17.45,5.19,20.22,5.02,1.06-.2,1.42-.63,1.94-1.74.52-1.11,1.17-2.9,1.87-5.13'/%3E%3C/svg%3E");
}

/* SVG画像の指定（contact） */
.contact {
    padding-bottom: 4px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_レイヤー_1' data-name='レイヤー 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125.65 13.83'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23000dff; stroke-linecap: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M1,1c0,.06.05.65.32,1.68.71,2.79,5.87,4.22,9.23,5.49,2.62.99,5.11-.22,13.12-2.48,6.38-1.8,10.79.31,16.89,2.48,3.47,1.24,7.98,1.91,14.39,2.35,6.41.44,14.66.43,19.67.26,9.96-.33,14.84-3.5,17.93-4.19,2.09-.47,4.02.06,8.08,1.21,9.59,2.71,17.45,5.19,20.22,5.02,1.06-.2,1.42-.63,1.94-1.74.52-1.11,1.17-2.9,1.87-5.13'/%3E%3C/svg%3E");
}

/* ホバー時の設定 */
.ig1:hover, .ig2:hover, .contact:hover {
    color: blue;
}

.hd_right {
    margin: 10px 10px 0px 10px;
    display: flex;
    align-items: flex-end;
}

/* メインコンテンツ周り */
.main {
    margin: 135px 10px;
    display: flex;
    align-items: flex-start;
}

.main_left {
    font-size: 13px;
    color: #C2B8B8;
    position: sticky;
    top: 135px;
}

.main_left p {
    margin: 0;
}

.main_left div {
    margin-bottom: 20px;
}

.main_right {
    width: 60%;
    margin-left: auto;
    flex-direction: column;
    display: flex;
}

.main_right img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border: 0.25px solid #ececec;
}

.main_right .main_text {
    font-size: 13px;
    color: #C2B8B8;
    margin-top: 40px;
}

/* フッター（時計） */
#footer {
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-top: 200px;
}

#digital-clock-container {
    width: 100%;
    height: 100%;
    display: block;
}

.back{
  margin-left:10px;
  font-size: 13px;
    color: #C2B8B8;
    margin-bottom:40px;
    z-index:9999;
  }
main{
  display:none;
  }


/* スマホ対応（レスポンシブ） */
@media screen and (max-width: 700px) {
    #header {
        flex-direction: column;
        gap: 0px;
    }
    
    br {
        display: none;
    }
    
    .img_container {
        grid-template-columns: 1fr;
    }
    
    #footer {
        height: 150px; /* スマホでは時計の高さを半分に */
    }
    
    .main {
        flex-direction: column-reverse;
    }
    
    .main_left {
        position: static;
        margin-top: 40px;
    }
    
    .main_right {
        width: 100%;
    }
}