@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi&display=swap');

/* 基本設定 */
* { line-height: 170%; box-sizing: border-box; }
body { 
    color: #333; 
    background-color: #f8f8f2; 
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
}
.base { margin: 0 auto; max-width: 1600px; }

/* ヘッダーとメニューのスタイル */
.header { 
    position: fixed; 
    top: 0; 
    width: 300px; 
    height: 100%; 
    padding: 10px; 
    margin: 0; 
    text-align: center; 
    background-color: #e1dad9; 
    color: #fff;
    z-index: 1001;
}
.header-title { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 30px; 
    width: 100%; 
}
.header h1 { 
    font-size: 130%; 
    font-weight: normal; 
    margin: 0; 
    font-family: 'Kaisei HarunoUmi', serif; 
    flex: 1; 
}
.header h1 a { color: #fff; text-decoration: none; }

.main-menu-toggle { 
    display: none; 
    background: none; 
    border: none; 
    font-size: 24px; 
    cursor: pointer; 
    color: #fff; 
    padding: 5px;
    border-radius: 3px;
    transition: background-color 0.3s;
}
.main-menu-toggle:hover {
    background-color: rgba(255,255,255,0.2);
}

.menu { 
    margin: 0; 
    padding: 10px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    font-size: 100%; 
    font-family: 'Kaisei HarunoUmi', serif; 
}
.menu .item { 
    padding: 12px 15px; 
    border-radius: 5px; 
    transition: all 0.3s ease; 
    margin: 2px 0;
}
.menu .item a { 
    color: #fff; 
    text-decoration: none; 
    display: block; 
}
.menu .item:hover { 
    background-color: rgba(255,255,255,0.2); 
    transform: translateX(5px); 
}

/* メインコンテンツ */
.box { 
    margin: 0 5px; 
    padding: 30px 10px; 
    display: flex; 
    flex-direction: row; 
}
.work { 
    padding: 10px 10px 10px 320px; 
    margin: 0; 
    width: calc(100% - 330px); 
}
.subwork { 
    padding: 10px; 
    margin: 0 0 20px 0; 
    width: 300px; 
}

/* World メニュー */
.world-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.world-title h3 {
    margin: 0;
    flex: 1;
}
.menu-toggle { 
    display: none; 
    background: none; 
    border: none; 
    font-size: 24px; 
    cursor: pointer; 
    color: #7A5E5B; 
    padding: 5px;
    border-radius: 3px;
    transition: background-color 0.3s;
}
.menu-toggle:hover {
    background-color: rgba(122, 94, 91, 0.1);
}

.header_world { 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    background: linear-gradient(135deg, #faf5f4, #f0eae9); 
    border-bottom: 2px solid #e1dad9; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    backdrop-filter: blur(10px); 
    margin: 0 -20px 30px; 
    padding: 15px 20px; 
}
.menu_world { 
    display: flex; 
    justify-content: center; 
    gap: 5px; 
    font-family: 'Kaisei HarunoUmi', serif; 
    flex-wrap: wrap; 
}
.menu_world .item { 
    position: relative; 
    padding: 10px 20px; 
    border-radius: 25px; 
    background: #fff; 
    border: 1px solid #e1dad9; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}
.menu_world .item:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(122, 94, 91, 0.2); 
    background: linear-gradient(135deg, #7A5E5B, #9d7571); 
}
.menu_world .item a { 
    color: #7A5E5B; 
    text-decoration: none; 
    font-weight: 500; 
    transition: color 0.3s ease; 
}
.menu_world .item:hover a { color: #fff; }
.menu_world .item.active { 
    background: linear-gradient(135deg, #7A5E5B, #9d7571); 
    color: #fff; 
}
.menu_world .item.active a { color: #fff; }

/* コンテンツスタイル */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
.section { margin-bottom: 40px; padding-top: 20px; }
.text { margin: 5px 0; padding: 10px; line-height: 180%; }
img { max-width: 100%; height: auto; }

/* タグスタイル */
h1 { font-size: 130%; font-weight: normal; margin-bottom: 10px; font-family: 'Kaisei HarunoUmi', serif; }
.story { font-size: 100%; font-weight: normal; margin-bottom: 10px; font-family: 'Kaisei HarunoUmi', serif; }
h2 { font-size: 110%; font-weight: normal; margin: 10px; text-align: center; }
h2:before { content: '✥'; color: #ccc; font-size: 24px; margin-right: 10px; }
h2:after { content: '✥'; color: #ccc; font-size: 24px; margin-left: 10px; }
h3 { font-size: 130%; font-weight: normal; text-align: center; margin: 20px 0; font-family: 'Kaisei HarunoUmi', serif; }
h3 span { display: block; margin-top: 0; color: #999; font-size: 60%; }
h3:first-letter { font-size: 150%; }
h4 { font-size: 130%; font-weight: normal; text-align: left; margin: 20px 0; font-family: 'Kaisei HarunoUmi', serif; }
h4 span { display: block; margin-top: 0; color: #999; font-size: 60%; }
h4:first-letter { font-size: 150%; }
h5 { font-size: 130%; font-weight: normal; margin: 20px 0; border-width: 0 0 1px 0; border-style: solid; text-align: right; border-color: #aaa; font-family: 'Kaisei HarunoUmi', serif; }
h6 { font-size: 130%; font-weight: normal; text-align: center; margin: 20px 0; border-width: 1px 0 1px 0; border-style: solid; border-color: #e1dad9; font-family: 'Kaisei HarunoUmi', serif; }
p { text-align: left; margin: 10px 0; padding: 7px; font-size: 90%; }
em { background: linear-gradient(transparent 60%, #fff799 60%); font-style: normal; }
strong { font-weight: normal; color: #fff; background-color: #f08080; }
small { font-size: 70%; }
big { font-size: 130%; }
ins { background-color: #d8f1eb; }
i { font-style: italic; }
a:link { color: #7A5E5B; }
a:visited { color: #7A5E5B; }
h1 a:link { color: #fff; text-decoration: none; }
h1 a:visited { color: #fff; text-decoration: none; }
.item a:link { text-decoration: none; }
.item a:visited { text-decoration: none; }
blockquote { position: relative; padding: 10px 10px 10px 50px; box-sizing: border-box; margin: 15px; font-size: 90%; border-radius: 3px; background-color: #dadcdb; }
blockquote:before { display: inline-block; position: absolute; top: 15px; left: 15px; vertical-align: middle; content: '\00275e'; color: #fff; font-size: 30px; }
li { padding: 5px; margin: 0 0 0 20px; }
ul { margin: 10px 0; }
ol { margin: 10px 0; }
dl { padding-left: 3px; margin: 10px 0; }
dt { padding-left: 5px; }
dd { padding-left: 10px; }
address { font-size: 75%; font-family: 'Kaisei HarunoUmi', serif; }
cite { font-size: smaller; }

/* クラススタイル */
.item { text-align: center; margin: 5px; padding: 5px; }
.list1 { list-style-type: circle; }
.list2 { list-style-type: upper-roman; }
.hr1 { margin: 5px 0; border-top: 1px #ccc; border-bottom: 1px #fff; border-style: solid; }
.hr2 { margin: 5px 0; border-top: 1px #aaa; border-style: dashed; }
.hr3 { margin: 5px 0; height: 20px; border-width: 0; }
.p1 { background-color: #fff; border-radius: 3px; }
.p2 { background-color: #fff; box-shadow: 1px 1px 3px -1px #888; }
.p3 { border-style: solid; border-width: 1px; border-color: #e1dad9; border-radius: 3px; background-color: #fff; }
.memo { background-color: #fff; font-size: 85%; padding: 0 10px; height: 200px; overflow: auto; margin: 5px 5px; border-color: #7A5E5B; border-width: 1px; border-style: solid; border-radius: 3px; }
.img1 { box-shadow: 1px 1px 3px -1px #888; }
.pagetop { position: fixed; bottom: 10px; right: 14px; }
.pagetop a { display: block; text-decoration: none; }
.pagetop:hover { opacity: 0.7; }
.auto-style3 { color: #FF0000; }
.auto-style4 { color: #FF0000; }

.footer { padding: 30px 0 0 0; text-align: center; }

/* モバイル用スタイル (1000px以下) */
@media screen and (max-width: 1000px) {
    .base { width: auto; margin: 0; padding: 0; }
    .box { margin: 0; flex-direction: column; width: auto; padding: 0; }
    .work { 
        width: 100%; 
        margin: 0; 
        padding: 10px 15px 40px; 
    }
    .subwork { width: 100%; margin: 0; padding: 0; }
    
    .header { 
        position: relative; 
        width: 100%; 
        height: auto;
        padding: 15px 20px; 
        z-index: 1002;
    }
    .header-title { 
        width: 100%; 
        padding-right: 0;
        justify-content: space-between;
    }
    .main-menu-toggle { 
        display: block; 
        margin: 0; 
        order: 2;
    }
    
    .menu { 
        display: none; 
        width: 100%;
        margin-top: 15px;
        padding: 0;
        position: relative;
        z-index: 1002;
    }
    .menu.open { 
        display: flex; 
        flex-direction: column; 
        gap: 5px; 
        animation: slideDown 0.3s ease-out;
        background-color: #e1dad9;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    .header_world { 
        position: sticky; 
        top: 0; 
        margin: 0 -15px 20px; 
        padding: 15px; 
        width: calc(100% + 30px);
        z-index: 999;
    }
    .menu_world { 
        gap: 8px; 
        justify-content: center;
    }
    .menu_world .item { 
        padding: 8px 15px; 
        font-size: 90%; 
    }
}

/* モバイル用スタイル (500px以下) */
@media screen and (max-width: 500px) {
    .world-title {
        position: sticky;
        top: 0;
        background: linear-gradient(135deg, #faf5f4, #f0eae9);
        z-index: 999;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 15px;
        margin: 0 -15px 0;
        border-bottom: 2px solid #e1dad9;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .world-title h3 {
        text-align: left;
        margin: 0;
        flex: 1;
    }
    .menu-toggle { 
        display: block; 
        margin: 0;
        flex-shrink: 0;
        background: rgba(122, 94, 91, 0.1);
        border-radius: 5px;
    }
    
    .header_world { 
        position: static;
        padding: 0; 
        margin: 0;
        width: 100%;
        background: none;
        border: none;
        box-shadow: none;
        z-index: 998;
    }
    
    .menu_world { 
        display: none; 
        position: fixed;
        left: 15px;
        right: 15px;
        width: calc(100vw - 30px);
        background: #fff;
        border: 1px solid #e1dad9;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        z-index: 1000;
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
        max-height: 70vh;
        overflow-y: auto;
        margin-top: 5px;
    }
    .menu_world.open { 
        display: flex; 
        animation: slideDown 0.3s ease-out;
    }
    
    .menu_world .item { 
        width: 100%; 
        text-align: center; 
        margin: 0;
        padding: 15px 20px;
        background: #fff;
        border: none;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #f0f0f0;
        transform: none;
        transition: background-color 0.3s ease;
    }
    .menu_world .item:last-child {
        border-bottom: none;
    }
    .menu_world .item:hover {
        transform: none;
        background: linear-gradient(135deg, #7A5E5B, #9d7571);
    }
    .menu_world .item:hover a {
        color: #fff;
    }
    
    .header-title { 
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .header h1 {
        flex: 1;
        text-align: left;
    }
    .main-menu-toggle { 
        margin: 0;
        flex-shrink: 0;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}