@charset "utf-8";

/* PCサイズレスポンシブ */
@media(min-width:1000px){
body {
    background-color: rgb(246, 241, 235); /* 柔らかいベージュ色の背景 */
    color: rgb(57, 30, 9); /* テキストの濃いブラウン色 */
    font-family: "Merriweather", serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-width: 1000px;
}

/* リセット */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Header Styling */
.header {
    text-align: center;
    padding: 20px 0;
    /* background-color: #0066cc; */
    /* color: white; */
}

.header h1 {
    margin: 0;
    font-size: 2rem;
}

/* Main Styling */
.main {
    display: flex; /* 横並びにする */
    flex-wrap: nowrap; /* 折り返しなし */
    gap: 20px; /* 子要素間のスペース */
    align-items: center; /* 縦方向の中央揃え */
    margin: 20px 0;
}

.main1 {
    flex: 1; /* 写真の幅 */
    min-width: 250px; /* 最小幅 */
}

.main1 img {
    max-width: 100%; /* 親要素内での最大幅 */
    height: auto; /* アスペクト比を維持 */
    border-radius: 10px; /* 角丸 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影 */
}

.main2 {
    flex: 2; /* テキスト部分を広く設定 */
    font-size: 1rem;
    line-height: 1.6;
    min-width: 250px;
}

/* Skill Section */
.skill {
    background-color: #f4eae5;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

.skill h2 {
    margin-top: 0;
    font-size: 1.5rem;
    /* color: #0066cc; */
}

.skill ul {
    list-style-type: none;
    padding: 0;
}

.skill li {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.skill li:last-child {
    border-bottom: none;
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 10px;
    /* background-color: #0066cc; */
    /* color: white; */
    font-size: 0.9rem;
    margin-top: 20px;
}
}


/* ipadサイズレスポンシブ */
@media(min-width:600px) and (max-width:999px){
    body {
        background-color: rgb(246, 241, 235); /* 柔らかいベージュ色の背景 */
        color: rgb(57, 30, 9); /* テキストの濃いブラウン色 */
        font-family: "Merriweather", serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        min-width: 600px;
        max-width: 999px;
    }
    
    /* リセット */
    body, h1, h2, p, ul, li {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    
    .container {
       width: 100%;
    }
    
    /* Header Styling */
    .header {
        text-align: center;
        padding: 20px 0;
        /* background-color: #0066cc; */
        /* color: white; */
    }
    
    .header h1 {
        margin: 0;
        font-size: 2rem;
    }
    
    /* Main Styling */
    .main {
        display: flex; /* 横並びにする */
        flex-wrap: nowrap; /* 折り返しなし */
        gap: 20px; /* 子要素間のスペース */
        align-items: center; /* 縦方向の中央揃え */
        margin: 20px 0;
    }
    
    .main1 {
        flex: 1; /* 写真の幅 */
        min-width: 250px; /* 最小幅 */
    }
    
    .main1 img {
        max-width: 100%; /* 親要素内での最大幅 */
        height: auto; /* アスペクト比を維持 */
        border-radius: 10px; /* 角丸 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影 */
    }
    
    .main2 {
        flex: 2; /* テキスト部分を広く設定 */
        font-size: 1rem;
        line-height: 1.6;
        min-width: 250px;
    }
    
    /* Skill Section */
    .skill {
        background-color: #f4eae5;
        padding: 20px;
        border-radius: 10px;
        margin: 20px 0;
    }
    
    .skill h2 {
        margin-top: 0;
        font-size: 1.5rem;
        /* color: #0066cc; */
    }
    
    .skill ul {
        list-style-type: none;
        padding: 0;
    }
    
    .skill li {
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
    }
    
    .skill li:last-child {
        border-bottom: none;
    }
    
    /* Footer Styling */
    footer {
        text-align: center;
        padding: 10px;
        /* background-color: #0066cc; */
        /* color: white; */
        font-size: 0.9rem;
        margin-top: 20px;
    }
}


/* SPサイズレスポンシブ */ 
@media(max-width:599px){
    body {
        background-color: rgb(246, 241, 235); /* 柔らかいベージュ色の背景 */
        color: rgb(57, 30, 9); /* テキストの濃いブラウン色 */
        font-family: "Merriweather", serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        max-width: 599px;
    }
    
    /* リセット */
    body, h1, h2, p, ul, li {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    
    .container {
       width: 100%;
    }
    
    /* Header Styling */
    .header {
        text-align: center;
        padding: 20px 0;
        /* background-color: #0066cc; */
        /* color: white; */
    }
    
    .header h1 {
        margin: 0;
        font-size: 2rem;
    }
    
    /* Main Styling */
    .main {
        display: flex; /* 横並びにする */
        flex-direction: column;
        flex-wrap: nowrap; /* 折り返しなし */
        gap: 20px; /* 子要素間のスペース */
        align-items: center; /* 縦方向の中央揃え */
        margin: 20px 0;
    }
    
    .main1 {
        flex: 1; /* 写真の幅 */
        min-width: 250px; /* 最小幅 */
       text-align: center;
    }
    
    .main1 img {
        max-width: 60%; /* 親要素内での最大幅 */
       
        height: auto; /* アスペクト比を維持 */
        border-radius: 10px; /* 角丸 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影 */
    }
    
    .main2 {
        flex: 2; /* テキスト部分を広く設定 */
        font-size: 1rem;
        line-height: 1.6;
        min-width: 250px;
    }
    
    /* Skill Section */
    .skill {
        background-color: #f4eae5;
        padding: 20px;
        border-radius: 10px;
        margin: 20px 0;
    }
    
    .skill h2 {
        margin-top: 0;
        font-size: 1.5rem;
        /* color: #0066cc; */
    }
    
    .skill ul {
        list-style-type: none;
        padding: 0;
    }
    
    .skill li {
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
    }
    
    .skill li:last-child {
        border-bottom: none;
    }
    
    /* Footer Styling */
    footer {
        text-align: center;
        padding: 10px;
        /* background-color: #0066cc; */
        /* color: white; */
        font-size: 0.9rem;
        margin-top: 20px;
    }
}