@charset "utf-8";
@import url(./style_smartphone.css) screen and (max-width: 480px);



/********** サイト全般の設定 **********/

* {
    margin: 0;
    padding: 0;
}

div, header, main, footer, section, nav,
h1, h2, h3, ul, li, a, span, figure {
    box-sizing: border-box;
}

html {
    /* スムーズスクロールの設定。ただしWindowsのシステム詳細情報でアニメーションOFFとカスタム設定されていたらChorome・Edgeではスムーズスクロールは適用されない。Firefoxは大丈夫。 */
    scroll-behavior: smooth;

    /* 色の設定 */
    --color-font-dark: #121212;
    --color-font-white: #F9F9F9;
    
    --color-background-dark: #2f256b;  /* 旧背景色 */
    --color-background-dark: #192353;
    --color-background-white: #F9F9F9;
}

svg {
    overflow: visible;
    /* svgの領域は仮で 100px * 100px などに設定。(viewBoxとスタイルのwidth・heightは合わせておく)
    overflow: visible; でその枠外にも描画する。 */
}

:target {
    scroll-margin-top: 50px;
}

body {
    background-color: var(--color-background-white);
}


div#container {
    width: 800px;
    margin: 0 auto;
    position: relative;
    left: 0;
    right: 0;
}

header {
    width: 800px;
    height: 250px;
    margin: 0 auto;
    padding: 20px 0 0;
    position: relative;
    left: 0;
    right: 0;
    z-index: 4;
}

.top header {
    z-index: 5;
    /* header要素とmain要素のz-indexについて。
    トップページでは header > main のようにz-indexを設定しないと
    header要素内のリンクをクリックできない不具合がでる。
    トップページ以外(例えばゲームのページ)では header > main だと
    ゲーム画面の上にheaderが乗ってしまうので header = main のz-indexにしておく。 */
}


div#svg0 {
    float: right;
    width: 300px;
    margin: 0 10px 0 0;
}

div#svg0 svg {
    width: 10px;
    height: 10px;
}

div#svg0 svg text {
    fill: var(--color-font-white);
    text-anchor: middle;
}

div#svg0 svg use {
    padding: 0 0;
    fill: none;
    stroke: var(--color-font-white);
    stroke-width: 1px;
}


header nav {
    clear: both;
    float: right;
    margin: -70px 10px 0 0;
}
header a#logo  {
    display: block;
    float: left;
    width: 120px;
    height: 120px;
    margin: 0 0 0 20px;
}

header a#logo img {
    width: 120px;
    height: 120px;
}

header nav ul {
    margin: 10px 20px 0 0;
    list-style-type: none;
}

header nav li {
    display: inline;
    margin: 0 0 0 20px;
}

header nav li a {
    color: var(--color-font-white);
    text-decoration-line: underline;
}

header nav li a:hover {
    text-decoration-line: none;
}

main {
    clear: both;
}

br.clear{
    clear: both;
}

/********** サイト全般の設定 END **********/




/********** トップページの設定 **********/

.top header {
    height: 150px;
}

.top main {
    position: relative;
    left: 0;
    right: 0;
    z-index: 4;
    width: 800px;
    margin: 0 auto;
    height: 5000px;
}

.top div#top_message {
    width: 760px;
    height: 110px;
    margin: 20px 20px 0;
    padding: 30px 30px 30px;
    background-image: url(./images/border_white.gif), url(./images/border_white.gif), url(./images/border_white.gif), url(./images/border_white.gif);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-position: top 10px left, bottom 10px left, top left 10px, top right 10px;
    opacity: 0;
    animation: top-message 3s 0s 1 both;
}

@keyframes top-message {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


div#top_message svg {
    width: 100px;
    height: 100px;  
}

#top_message #textline1 {
    /* 暫定だけどパスの長さ調整で少しx方向に縮める。
    パスに沿わせた文字の改行箇所を調節するため。 */
    transform: scaleX(calc(654/660));
}

#top_message #clip_rect rect {
    width: 1px;
    height: 20px;
}

#top_message svg text {
    clip-path: url(#clip_rect);
    font-size:  14px;
    line-height: 24px;
    stroke: none;
    fill: var(--color-font-white);
}


/* テキスト表示のアニメーション
クリッピングしている長方形の幅を変動させることで、順にテキストが見えるようになる。
テキスト表示スピードは、x方向に100pxあたり0.7秒。文の区切りで1.0秒の待機時間を入れている。
文の区切りの位置あたりでクリッピングの長方形の変動を止めるようにアニメーションの％を区切っている。
テキストの文字数など変更あればアニメーションの時間や％は再計算が必要。。 */

#top_message #clip_rc1 {
    animation: message-1 5.77s linear 2s 1 both;
}
@keyframes message-1 {
    0% { transform: scaleX(1); }
    30% { transform: scaleX(253); }
    48% { transform: scaleX(253); }
    100% { transform: scaleX(680); }
}

#top_message #clip_rc2 {
    animation: message-2 4.76s linear 8.77s 1 both; 
}
@keyframes message-2 {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(680); }
}

/* ▼矢印のアニメーションを外部ファイルのsvgに書いてみた。(svgの練習で)
設定変更する場合は外部svgを参照のこと。 */
div#top_message img.arrow {
    display: block;
    margin: -15px auto 0;
}




div#top_illust, div#top_game, div#top_photo {
    width: 800px;
    position: relative;
}

:is(#top_illust, #top_game, #top_photo) h2 {
    width: 640px;
    height: 200px;
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 6;
}

#top_illust h2 {
    margin: 80px 0 0 -180px;
}

#top_game h2 {
    margin: 30px 0 0 -380px;
}

#top_photo h2 {
    margin: 60px 0 0 -280px;
}

:is(#top_illust, #top_game, #top_photo) h2 img {
    position: absolute;
    top: 12px;
    left: 70px;
    z-index: 4;
    opacity: 0;
}

#top_illust h2 image.im1 {
    clip-path: url(#clip2_rc1);
}
#top_illust h2 image.im2 {
    clip-path: url(#clip2_rc2);
}
#top_illust h2 image.im3 {
    clip-path: url(#clip2_rc3);
}

#top_game h2 image.im1 {
    clip-path: url(#clip3_rc1);
}
#top_game h2 image.im2 {
    clip-path: url(#clip3_rc2);
}
#top_game h2 image.im3 {
    clip-path: url(#clip3_rc3);
}

#top_photo h2 image.im1 {
    clip-path: url(#clip4_rc1);
}
#top_photo h2 image.im2 {
    clip-path: url(#clip4_rc2);
}
#top_photo h2 image.im3 {
    clip-path: url(#clip4_rc3);
}


:is(#top_illust, #top_game, #top_photo) h2 svg {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

:is(#top_illust, #top_game, #top_photo) h2 svg rect {
    width: 640px;
    height: 200px;
}


body.top a.link {
    display: none;
}

body.top :is(.anime, .anime2, .anime3) a.link {
    display: inline-block;
}

:is(.anime, .anime2, .anime3) a.link {
    height: 80px;
    margin: 0 0 0 -350px;
    position: fixed;
    bottom: 70px;
    left: 50%;
    z-index: 6;
    font-size: 12px;
    color: #fff;
    background-image: url(./images/link_off_back1.png), url(./images/link_off_back3.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top right;
}

main :is(.anime, .anime2, .anime3) a.link_replace {
    top: 700px;
    left: 50%;
}

:is(.anime, .anime2, .anime3) a.link span {
    display: inline-block;
    height: 80px;
    margin: 0 20px;
    padding: 30px 30px 25px 10px;
    background-image: url(./images/link_off_back2.png);
    background-repeat: repeat-x;
    background-position: top;
}

:is(.anime, .anime2, .anime3) a.link span b {
    opacity: 1;
    font-weight: normal;
}

:is(.anime, .anime2, .anime3) a.link:hover {
    background-image: url(./images/link_on_back1.png), url(./images/link_on_back3.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top right;
    opacity: 1 !important;
}

:is(.anime, .anime2, .anime3) a.link:hover span {
    background-image: url(./images/link_on_back2.png);
    background-repeat: repeat-x;
    background-position: top;
}


img#top_illust_yura, img#top_illust_himeragi {
    width: 800px;
}

:is(#top_illust_yura, #top_illust_himeragi){
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

img#pic_game {
    width: 600px;
    margin: 0 0 0 -400px;
    display: block;
    position: fixed;
    top: 100px;
    left: 50%;
    z-index: 5;
    opacity: 0;
}

img#pic_photo1, img#pic_photo2 {
    display: block;
    position: fixed;
    left: 50%;
    top: 30px;
    z-index: 5;
    opacity: 0;
    width: 500px;
    border: 4px solid #fff;
    border-radius: 2px;
}


:is(.anime, .anime2, .anime3) h2 img {
    animation: top-h2 0.3s ease 1.8s 1 both;
}

:is(.anime #clip2_rc1, .anime2 #clip3_rc1, .anime3 #clip4_rc1) rect {
    animation: top-clip-rect1 0.2s ease 0s 1 both;
}

:is(.anime #clip2_rc2, .anime2 #clip3_rc2, .anime3 #clip4_rc2) rect {
    animation: top-clip-rect2 0.2s ease 0.3s 1 both;
}

:is(.anime #clip2_rc3, .anime2 #clip3_rc3, .anime3 #clip4_rc3) rect {
    animation: top-clip-rect3 0.2s ease 0.6s 1 both;
}

:is(.anime, .anime2, .anime3) a.link {
    animation: top-link 0.3s ease 2.2s 1 both;
}

.anime2 #pic_game {
    animation: top-game 0.5s ease 0.5s 1 both;
}

.anime3 #pic_photo1 {
    animation: top-photo1 0.5s ease 0.5s 1 both;
}
.anime3 #pic_photo2 {
    animation: top-photo2 0.5s ease 0.5s 1 both;
}

/* translate は単位pxが必要。0なら単位なしにしてもいいけど、
単位忘れ防止のため「0」でも「0px」と記載する方がいいかも。
なぜか動かなくて困るときはpx付け忘れだったりする。 */
@keyframes top-h2 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes top-clip-rect1 {
    0% { transform: translate(0px, 0px); }
    100% { transform: translate(640px, 0px); }
}
@keyframes top-clip-rect2 {
    0% { transform: translate(0px, 0px); }
    100% { transform: translate(640px, 0px); }
}
@keyframes top-clip-rect3 {
    0% { transform: translate(0px, 0px); }
    100% { transform: translate(640px, 0px); }
}
@keyframes top-link {
    0% { opacity: 0; }
    100% { opacity: 0.85; }
}

/* @keyframes top-game {
    0% {
        opacity: 0; 
        transform: perspective(500px) rotateX(0deg) rotateY(2deg) rotateZ(0deg) translate(0px, 0px);
    }
    100% {
        opacity: 1;
        transform: perspective(500px) rotateX(3deg) rotateY(-4deg) rotateZ(1deg) translate(70px, 30px);
    }
} */

@keyframes top-game {
    0% {
        opacity: 0;
        transform: perspective(450px) rotateX(6deg) rotateY(-2deg) rotateZ(-4deg) translate(0, 0);
    }
    100% {
        opacity: 1;
        transform: perspective(450px) rotateX(8deg) rotateY(-2deg) rotateZ(-4deg) translate(80px, 20px);
    }
}

@keyframes top-photo1 {
    0% {
        opacity: 0;
        transform: translate(-20px, 130px) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: translate(-70px, 150px) rotate(-2deg);
    }
}

@keyframes top-photo2 {
    0% {
        opacity: 0;
        transform: translate(-510px, 200px) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: translate(-460px, 220px) rotate(2deg);
    }
}


:is(.anime_re, .anime2_re, .anime3_re) h2 img {
    animation: top-h2-re 0.3s ease 0s 1 both;
}

:is(.anime_re #clip2_rc1, .anime2_re #clip3_rc1, .anime3_re #clip4_rc1) rect {
    animation: top-clip-rect1-re 0.2s ease 0.8s 1 both;
}

:is(.anime_re #clip2_rc2, .anime2_re #clip3_rc2, .anime3_re #clip4_rc2) rect {
    animation: top-clip-rect2-re 0.2s ease 0.5s 1 both;
}

:is(.anime_re #clip2_rc3, .anime2_re #clip3_rc3, .anime3_re #clip4_rc3) rect {
    animation: top-clip-rect3-re 0.2s ease 0.2s 1 both;
}

:is(.anime_re, .anime2_re, .anime3_re) a.link {
    animation: top-link-re 0.3s ease 0s 1 both;
}

.anime2_re #pic_game {
    animation: top-game-re 0.5s ease 0s 1 both;
}

.anime3_re #pic_photo1 {
    animation: top-photo1-re 0.5s ease 0s 1 both;
}

.anime3_re #pic_photo2 {
    animation: top-photo2-re 0.5s ease 0s 1 both;
}


@keyframes top-h2-re {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes top-clip-rect1-re {
    0% { transform: translate(640px, 0px); }
    100% { transform: translate(0px, 0px); }
}

@keyframes top-clip-rect2-re {
    0% { transform: translate(640px, 0px); }
    100% { transform: translate(0px, 0px); }
}

@keyframes top-clip-rect3-re {
    0% { transform: translate(640px, 0px); }
    100% { transform: translate(0px, 0px); }
}

@keyframes top-link-re {
    0% { opacity: 0.85; }
    100% { opacity: 0; }
}


/* @keyframes top-game-re {
    0% {
        opacity: 1;
        transform: perspective(500px) rotateX(3deg) rotateY(-4deg) rotateZ(1deg) translate(70px, 30px);
    }
    100% {
        opacity: 0; 
        transform: perspective(500px) rotateX(0deg) rotateY(2deg) rotateZ(0deg) translate(0px, 0px);
    }
} */

@keyframes top-game-re {
    0% {
        opacity: 1;
        transform: perspective(450px) rotateX(8deg) rotateY(-2deg) rotateZ(-4deg) translate(80px, 20px);
    }
    100% {
        opacity: 0;
        transform: perspective(450px) rotateX(6deg) rotateY(-2deg) rotateZ(-4deg) translate(0, 0);
    }
}

@keyframes top-photo1-re {
    0% {
        opacity: 1;
        transform: translate(-70px, 150px) rotate(-2deg);
    }
    100% {
        opacity: 0;
        transform: translate(-20px, 130px) rotate(-2deg);
    }
}

@keyframes top-photo2-re {
    0% {
        opacity: 1;
        transform: translate(-460px, 220px) rotate(2deg);
    }
    100% {
        opacity: 0;
        transform: translate(-510px, 200px) rotate(2deg);
    }
}


/********** トップページの設定 END **********/








/********** トップページ以外(主にフォト・イラスト)の設定 **********/

div#photo_large, div#illust_large {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color:  rgba(0, 0, 0, 0.85);
}

:is(#photo_large, #illust_large) a {
    display: inline-block;
    position: absolute;
    top: 5%;
    left: 5%;
}

:is(#photo_large, #illust_large) a:any-link {
    color: #fff;
}

:is(#photo_large, #illust_large) a:hover {
    text-decoration: none;
}

:is(#photo_large, #illust_large) span {
    display: inline-block;
    position: absolute;
    top: 5%;
    right: 5%;
}

:is(#photo_large, #illust_large) span:hover {
    cursor: pointer;
}

:is(#photo_large, #illust_large) img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    max-width: 80%;
    max-height: 80%;
    transform: translate(-50%, -45%);
}

div.animation_pic1{
    animation: pic-large1 0.3s cubic-bezier(0.5,0.2,0.2,0.5) 0s 1 both;
}

@keyframes pic-large1 {
    0% { transform: scale(0.5, 0.5); }
    100% { transform: scale(1, 1); }  
}




.category main {
    width: 800px;
    margin: 0 auto;
    padding: 40px 60px 70px;
    position: relative;
    left: 0;
    right: 0;
    z-index: 4;
    /* 上、下、左、右、の順で枠線を背景画像でまとめて設定 */
    background-image: url(./images/border_line1.gif), url(./images/border_line2.gif), url(./images/border_row1.gif), url(./images/border_row2.gif);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-position: top 20px left, bottom 20px left, top left 20px, top right 20px;
}


.category h1 {
    margin: 0 0 10px;
    font-size: 0.8em;
    font-weight: normal;
    color: var(--color-font-dark);
}

.category h2 {
    height: 56px;
    padding: 8px 0 0 70px ;
    background-image: url(./images/mark1.svg), url(./images/line1.svg);
    background-size: 64px 48px, 336px 8px;
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom left;
}

.category h2.longer {
    background-image: url(./images/mark1.svg), url(./images/line2.svg);
    background-size: 64px 48px, 480px 8px;
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom left;
}

main p {
    margin: 0 0 1.8em;
    font-size: 0.9em;
    line-height: 1.4em;
    color: var(--color-font-dark);
}

main section.intro {
    margin: 10px 0 0;
    padding: 0 0 20px;
}



section#photo_top, section#illust_top, section#about_top {
    position: relative;
    width: 680px;
}


.category #illust_top h2 {
    margin: 0 0 20px;
}


:is(#photo_top, #illust_top, #about_top) nav {
    position: absolute;
    top: 0;
    right: 0;
    padding: 18px 16px 22px 20px;
    border: solid 1px #3A3A3A;
    background-color: #EFD0DC;
    background-image: url(./images/pic_back_white.gif), url(./images/pic_back_white.gif), url(./images/pic_back_white.gif), url(./images/pic_back_white.gif);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-position: top, bottom, left, right;
}

#photo_top nav {
    width: 180px;
    margin: 0 -190px 0 0;
}

#illust_top nav {
    width: 180px;
    margin: 0 -190px 0 0;
}

#about_top nav {
    width: 220px;
    margin: 100px -230px 0 0;
}

:is(#photo_top, #illust_top, #about_top) ul {
    list-style-type: none;
}

:is(#photo_top, #illust_top, #about_top) li {
    font-size: 0.8em;
    line-height: 1.4em;
}

:is(#photo_top, #illust_top, #about_top) li a:any-link {
    display: inline-block;
    padding: 1px 0 0 13px;
    color: var(--color-font-dark);
    background-image: url(./images/listmark_off.svg);
    background-repeat: no-repeat;
    background-position: left center;
}

:is(#photo_top, #illust_top, #about_top) li a:hover {
    text-decoration: none;
    background-image: url(./images/listmark_on.svg);
    background-position: left 2px center;
}


section.illust_left {
    clear: both;
    padding: 30px 3px 30px 0;
    background-image: url(./images/page_break.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

.illust_left figure {
    float: left;
    shape-outside: border-box;
    shape-margin: 30px;
    width: 300px;
    margin: 0 40px 10px -80px;
    padding: 6px 0 5px;
    box-sizing: border-box;
    border: solid 1px #3A3A3A;
    background-color: #e8dce1;
    /* 背景に1pxの白画像を四辺に配置。黒いボーダーの内側に白いボーダーとして見えるようにしてる。 */
    background-image: url(./images/pic_back_white.gif), url(./images/pic_back_white.gif), url(./images/pic_back_white.gif), url(./images/pic_back_white.gif);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-position: top, bottom, left, right;
}

.illust_left figure img {
    display: block;
    width: 95%;
    margin: 0 auto;
    cursor: pointer;
}

.illust_left figcaption {
    padding: 4px 0 0;
    font-size: 0.8em;
    text-align: center;
}

.illust_left h3 {
    
    height: 64px;
    margin: 0 0 25px 250px;
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    background-image: url(./images/page_headline1.png);
    background-repeat: no-repeat;
    background-position: top left;
}

.illust_left h3 span {
    display: block;
    height: 64px;
    margin: 0 0 0 10px;
    padding: 17px 20px 10px 25px;
    background-color: #3A3A3A;
}

.illust_left h3 span b {
    font-weight: normal;
}

.illust_left p {
    margin: 0 0 1em;
}

.illust_left p.date {
    font-size: 0.7em;
    margin: 0 0 0.5em;
}

:is(.illust_left, .about) a.back:any-link {
    display: block;
    text-align: right;
    margin: 0 20px 1em 0;
    padding: 5px 0 0;
    font-size: 0.8em;
    color: var(--color-font-dark);
    text-decoration-line: underline;
    text-underline-offset: 3px;
}

:is(.illust_left, .about) a.back:hover {
    text-decoration-line: none;
}




section.photo {
    clear: both;
    padding: 50px 3px 30px 0;

}

.photo h3 {
    height: 64px;
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    background-image: url(./images/page_headline1.png);
    background-repeat: no-repeat;
    background-position: top left;
}

.photo h3 span {
    display: block;
    height: 64px;
    margin: 0 0 0 10px;
    padding: 17px 20px 10px 25px;
    background-color: #3A3A3A;
}

.photo h3 span a:any-link {
    float: right;
    padding: 6px 5px 0 0;
    color: #fff;
    font-size: 0.7em;
    text-decoration-line: underline;
    text-underline-offset: 3px;
}

.photo h3 span a:hover {
    text-decoration-line: none;
}

.photo ul {
    width: 720px;
    margin: 0 0 0 -40px;
}

.photo li {
    display: block;
    float: left;
    position: relative;
    list-style-type: none;
}

li.photo_w {
    margin: 0 0 0 -40px;
}

li.photo_h {
    margin: 0 0 0 -20px;
}

:is(.photo_w, .photo_h) figure {
    padding: 15px 18px 15px;
    border: solid 1px #3A3A3A;

    font-size: 12px;
    line-height: 18px;

    background-color: #EFEFEF;
    background-image: url(./images/pic_back_white.gif), url(./images/pic_back_white.gif), url(./images/pic_back_white.gif), url(./images/pic_back_white.gif);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-position: top, bottom, left, right;
}

.photo_w figure {
    width: 280px;
}

.photo_h figure {
    width: 260px;
}


:is(.photo_w, .photo_h) img:hover {
    cursor: pointer;
}

.photo_w img {
    display: block;
    width: 240px;
    margin: 0 0 10px;
}

.photo_h img {
    display: block;
    height: 240px;
    margin: 0 auto 10px;
}



section.about {
    padding: 0 3px 30px 0;
    background-image: url(./images/page_break.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

.about h2 {
    margin: 0 0 20px;
}

.about b {
    font-size: 1.1em;
}

.about img.pic1 {
    display: block;
    width: 660px;
    margin: 0 0 30px;
    box-sizing: border-box;
    border: 1px solid #CC1F62;
    cursor: pointer;
}

.about img.pic1_wide {
    width: 1178px;
}

.about img.profile {
    display: block;
    float: left;
    width: 300px;
    margin: 20px 30px 20px 0;
    clip-path: circle(50% at 50% 50%);
    shape-outside: circle(50%);
}


/********** トップページ以外(主にフォト・イラスト)の設定 END **********/





/********** 星の軌道アニメーションの設定 **********/

/* サイト全般にある星の軌道アニメーション。
トップページとその他で若干表示を変えている。 */
div#svg1 {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
}

body.top div#svg1 {
    position: fixed;
    /* トップページだけ fixed にして背景固定 */
    margin: 100px 0 0;
}


div#svg1 svg {
    margin: -700px -1000px;
    width: 200px;
    height: 200px;
    display: block;
    /* メモ: ブラウザのスタイルシートでsvgに適用されている「overflorw: hidden;」を打ち消すことで、svgのビューポート外でも描画されるようになるみたい？　少し意外。。 */
}

/* 時計回りにするクラス */
svg.clockwise {
    --rotation-frag: 1;
}

/* 反時計周りにするクラス */
svg.counterclockwise {
    --rotation-frag: -1;
}

div#svg1 rect {
    fill: var(--color-background-dark);
    clip-path: url(#path2);
    display: block;
    width: 2000px;
    height: 2000px;
}

body.top {
    /* スマホ等すごく縦長なビューポートの場合、svgで下の方を覆いきれないので、
    svgのrectと同色で背景色を設定しておく */
    background-color: var(--color-background-dark);
}

body.top div#svg1 rect {
    clip-path: none;
}

div#svg1 svg g {
    clip-path: url(#path2);
}

div#svg1 svg use {
    fill: none;
    stroke: var(--color-background-white);
    stroke-width: 2px;
    /* 星の色とbody背景色は揃えて重なったら見えなくする。 */
}

/* 北極星に相当する小さな円 */
div#svg1 svg circle {
    fill: var(--color-background-white);
}


/* 弧の軌道半径に応じて太さを変更
stroke-width = 基本の太さ2px ÷ transformのscale倍率   */
#star_s1 use {
    transform: scale(0.5, 0.5);
    stroke-width: 4px;
}
:is(#star_s2, #star_s3) use {
    transform: scale(0.43, 0.43);
    stroke-width: 4.7px;
}


#star_e3 use {
    transform: scale(0.95, 0.95);
    stroke-width: 2.2px;
}

:is(#star_e4, #star_e5) use {
    transform: scale(0.98, 0.98);
    stroke-width: 2.1px;
}

:is(#star_e6) use {
    transform: scale(0.9, 0.9);
    stroke-width: 2.3px;
}

:is(#star_b1, #star_b2) use {
    transform: scale(1.04, 1.04);
    stroke-width: 1.9px;
}

#star_b3 use {
    transform: scale(1.2, 1.2);
    stroke-width: 1.66px;
}

#star_b4 use {
    transform: scale(1.3, 1.3);
    stroke-width: 1.53px;
}

#star_b5 use {
    transform: scale(1.4, 1.4);
    stroke-width: 1.4px;
}

#star_b6 use {
    transform: scale(1.5, 1.5);
    stroke-width: 1.33px;
}

#star_b7 use {
    transform: scale(1.55, 1.55);
    stroke-width: 1.3px;
}

/* 星の回転の中心点の座標設定
x座標：svg領域の横の半分
y座標：基本の半径(300px) + svgのネガティブmargin-top */
#svg1 g {
    transform-origin: 1000px 1000px;
}

/* 星が周回するアニメーション。g要素で個別に設定。
真上が0deg、反時計周りに1周すると-360deg。 */
g#star_s1 { animation: rotation-s1 60s linear infinite; }
@keyframes rotation-s1 {
    0% { transform: rotate(-110deg); }
    100% { transform: rotate(calc(-110deg + 360deg * var(--rotation-frag))); }
}
g#star_s2 { animation: rotation-s2 60s linear infinite; }
@keyframes rotation-s2 {
    0% { transform: rotate(-100deg); }
    100% { transform: rotate(calc(-100deg + 360deg * var(--rotation-frag))); }
}
g#star_s3 { animation: rotation-s3 60s linear infinite; }
@keyframes rotation-s3 {
    0% { transform: rotate(18deg); }
    100% { transform: rotate(calc(18deg + 360deg * var(--rotation-frag))); }
}

g#star_e1 { animation: rotation-e1 60s linear infinite; }
@keyframes rotation-e1 {
    0% { transform: rotate(-204deg); }
    100% { transform: rotate(calc(-204deg + 360deg * var(--rotation-frag))); }
}

g#star_e2 { animation: rotation-e2 60s linear infinite; }
@keyframes rotation-e2 {
    0% { transform: rotate(-144deg); }
    100% { transform: rotate(calc(-144deg + 360deg * var(--rotation-frag))); }
}

g#star_e3 { animation: rotation-e3 60s linear infinite; }
@keyframes rotation-e3 {
    0% { transform: rotate(-135deg); }
    100% { transform: rotate(calc(-135deg + 360deg * var(--rotation-frag))); }
}

g#star_e4 { animation: rotation-e4 60s linear infinite; }
@keyframes rotation-e4 {
    0% { transform: rotate(-18deg); }
    100% { transform: rotate(calc(-18deg + 360deg * var(--rotation-frag))); }
}
g#star_e5 { animation: rotation-e5 60s linear infinite; }
@keyframes rotation-e5 {
    0% { transform: rotate(-300deg); }
    100% { transform: rotate(calc(-300deg + 360deg * var(--rotation-frag))); }
}

g#star_e6 { animation: rotation-e6 60s linear infinite; }
@keyframes rotation-e6 {
    0% { transform: rotate(-70deg); }
    100% { transform: rotate(calc(-70deg + 360deg * var(--rotation-frag))); }
}


g#star_b1 { animation: rotation-b1 60s linear infinite; }
@keyframes rotation-b1 {
    0% { transform: rotate(-278deg); }
    100% { transform: rotate(calc(-278deg + 360deg * var(--rotation-frag))); }
}

g#star_b2 { animation: rotation-b2 60s linear infinite; }
@keyframes rotation-b2 {
    0% { transform: rotate(-78deg); }
    100% { transform: rotate(calc(-78deg + 360deg * var(--rotation-frag))); }
}

g#star_b3 { animation: rotation-b3 60s linear infinite; }
@keyframes rotation-b3 {
    0% { transform: rotate(-90deg); }
    100% { transform: rotate(calc(-90deg + 360deg * var(--rotation-frag))); }
}

g#star_b4 { animation: rotation-b4 60s linear infinite; }
@keyframes rotation-b4 {
    0% { transform: rotate(-244deg); }
    100% { transform: rotate(calc(-244deg + 360deg * var(--rotation-frag))); }
}

g#star_b5 { animation: rotation-b5 60s linear infinite; }
@keyframes rotation-b5 {
    0% { transform: rotate(-334deg); }
    100% { transform: rotate(calc(-334deg + 360deg * var(--rotation-frag))); }
}

g#star_b6 { animation: rotation-b6 60s linear infinite; }
@keyframes rotation-b6 {
    0% { transform: rotate(-1deg); }
    100% { transform: rotate(calc(-1deg + 360deg * var(--rotation-frag))); }
}

g#star_b7 { animation: rotation-b7 60s linear infinite; }
@keyframes rotation-b7 {
    0% { transform: rotate(-134deg); }
    100% { transform: rotate(calc(-134deg + 360deg * var(--rotation-frag))); }
}

/* 弧の伸縮のアニメーション。use要素でクラスでまとめて設定。
160pxの破線(塗り部分)を25px/秒の速度で移動させていて、15秒・20秒・30秒のアニメーションあり。
各アニメーションは dashoffset:-160 で破線が消える地点を終端にして揃えている。
周期の短い「line1」クラスも入れると少し目障りな気がするので「line2」「line3」だけ使用してみる。 */
use.line1 { 
    stroke-dasharray: 160 215;
    animation: line1 15s linear infinite;
}
@keyframes line1 {
    0% { stroke-dashoffset: 215; }
    100% { stroke-dashoffset: -160; }
}

use.line2 { 
    stroke-dasharray: 160 340;
    animation: line2 20s linear infinite;
}
@keyframes line2 {
    0% { stroke-dashoffset: 340; }
    100% { stroke-dashoffset: -160; }
}

use.line3 { 
    stroke-dasharray: 160 590;
    animation: line2 30s linear infinite;
}
@keyframes line3 {
    0% { stroke-dashoffset: 590; }
    100% { stroke-dashoffset: -160; }
}

/* use.line1 { 
    stroke-dasharray: 200 300;
    animation: line1 20s linear infinite;
}

@keyframes line1 {
    0% { stroke-dashoffset: 300; }
    100% { stroke-dashoffset: -200; }
} */

/* use.line2 { 
    stroke-dasharray: 200 550;
    animation: line2 30s linear infinite;
}

@keyframes line2 {
    0% { stroke-dashoffset: 350; }
    100% { stroke-dashoffset: -200; }
} */

/* use.line3 { 
    stroke-dasharray: 100 275;
    animation: line3 15s linear infinite;
}
@keyframes line3 {
    0% { stroke-dashoffset: 275; }
    100% { stroke-dashoffset: -100; }
} */



/********** 星の軌道アニメーションの設定 END **********/



/* トップページ以外でのアニメーション停止分 */
.category :is(#star_b5, #star_b6, #star_b7) {
    display: none;
}