@charset "UTF-8";

body {
    margin: 0;
    padding: 0;
    font-size: 0.84rem;
    font-family: 'Yu Mincho', YuMincho, 'MS Mincho', serif;
    line-height: 1;    
}

.wrap_moto {
    overflow: hidden;
}

h1,h2,h3,h4,p,hr,div {
    margin: 0;
    padding: 0;
}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: #103a61;
}

a:hover { color: #cecaa6;}

hr {
    border: none;
    border-bottom: 1px solid #000000;
}

.indexpage { text-align: center; line-height: 2;}
.indexpage h1 { margin-top: 156px; font-size: 1.2rem; letter-spacing: 0.12rem;}
.indexpage p { font-size: 0.7rem; margin-bottom: 60px;}
.indexpage h2 { font-size: 0.9rem; letter-spacing: 0.2rem;}

.gengo { margin-bottom: 0; text-align: right;}

.sphaba100 img { width: 100vw;}

.innerbox { width: 90vw; margin: 60px auto;}
.innerbox p { line-height: 1.96;}

/*スマホ用若干幅細め*/
.innerbox2 { width: 86vw; margin: 60px auto;}
.innerbox2 p { line-height: 1.96;}

/*右寄せ*/
.migiyose { text-align: right;}

/*詳しく見るリンク*/
.topmore { display: flex; justify-content: flex-end; /* 右寄せ */ margin-top: 36px; margin-bottom: 48px;}
.moretext { display: flex; align-items: center; /* 垂直方向で中央に揃える */ text-decoration: none; /* リンクのスタイルを調整 */}
.moreicon { margin-right: 8px; /* アイコンとテキストの間にスペースを追加（必要に応じて調整） */ width: 32px;}

/*詳しく見るリンク(中央寄せしたいときは、topmoreをtopmore2に変える*/
.topmore2 { display: flex; justify-content: center; /* 右寄せ */ margin-top: 36px; margin-bottom: 48px;}


/*縦書き*/
div.tategaki {text-align: center;}    
div.tategaki h2 { writing-mode: vertical-rl; display: inline-block;}

/**/
.ueyokonaga1 { width: 100%; height: 180px; background-image: url(../images/image07.jpg); background-size: cover;}
.ueyokonaga2 { width: 100%; height: 180px; background-image: url(../images/image09.jpg); background-size: cover; background-position: center;}

/*musicworksページのh3*/
.murmurka {font-size: 0.8rem; text-align: right; line-height: 2;}

/*works_as画像*/
.worksasimg { width: 140px;}

.dspi {flex-basis: 50%; text-align: center;}
.dspi h2 { letter-spacing: 0.1rem; font-size: 1.2rem; margin-top: 48px;}
.dspioya {flex-direction: column; margin-top: 48px;}
.dspi.hidarisen {border-top: 1px solid #000000;}

/*薄色ボーダーライン*/
.usukasen { border-bottom: #cecaa6 1px solid;}

/*引用*/
blockquote {
    border-left: solid 4px #000000;
    font-style: italic;
    margin: 2rem 0 2rem 1rem;
    padding: 0.5rem 0 0.5rem 1rem;
    line-height: 2;
}

/*合唱曲の楽譜*/
.scores {
    width:84%;
    display:flex;
    flex-wrap:wrap;
    margin: 0 auto;
}
.scores img {   
    width:100%;
    border:1px solid #000000;
    margin-bottom: 12px;
}

/*フッターのul*/
footer ul { line-height: 1.6; padding-left: 12px; margin: 6px 0 24px; font-size: 0.84rem;}
footer a { color: #000000;}
footer h3 { margin-top: 12px;}

.copyright { font-size: 0.72rem; line-height: 1.56; margin-top: 144px;}
.copyright a { color: #103a61;}
.copyright a:hover { color: #cecaa6;}

/* youtube埋め込みのレスポンシブ対応。<iframe>を<div class="youtube-ratio">で囲む */
.youtube-ratio {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

.youtube-ratio iframe {
    width: 100%;
    height: 100%;
  }


/*===========================================================*/
/* 768px以上に適用されるCSS（タブレット用） */
@media screen and (min-width:768px){

    /*合唱曲の楽譜*/
    .scores { width:72%;}
    .scores img {margin-bottom: 24px;}

    .youtube-ratio { width: 560px; aspect-ratio: 16 / 9;}
      
       
}

/**=========================================================================/
/* 1024px以上に適用されるCSS（PC用） */
@media screen and (min-width:1024px){
    body { font-size: 1rem;}
    .indexpage { text-align: left; line-height: 1.44;}
    .indexpage p {padding-bottom: 60px; font-size: 0.84rem; margin-left: 17.2%;}
    .indexpage h1 { margin-top: 24%; letter-spacing: 0.36rem; font-size: 1.84rem; margin-left: 17.2%;}
    .indexpage h2 { font-size: 1.2rem; letter-spacing: 0.36rem; margin-left: 17.2%;}

    .sphaba100 img { width: 50%;}

    .innerbox { width: 840px;}

    .ueyokonaga1 { width: 100%; height: 280px; background-image: url(../images/image07.jpg); background-repeat: no-repeat; background-position-y: center;}
    .ueyokonaga2 { width: 100%; height: 280px; background-image: url(../images/image09.jpg); background-repeat: no-repeat; background-position-y: center;}

    /*musicworksページのh3*/
    .murmurka {font-size: 1rem; text-align: right; line-height: 2;}
    /*works_as画像*/
    .worksasimg { width: 226px;}
    .dspi {flex-basis: 50%;}
    .dspioya {display: flex; flex-direction: row;}
    .dspi.hidarisen {border-left: 1px solid #000000; border-top: none;}

    /*innerboxちょっと細めバージョン*/
    .innerhosome { width: 560px; margin: 0 auto;}

    /*合唱曲の楽譜*/
    .scores {
        width:90%;
        max-width: 1000px;
        display:flex;
        flex-wrap:wrap;
    }
    .scores img {   
        width:50%;
        display:flex;
        flex-direction:column;
        border:1px solid #000000;
        box-sizing:border-box;
    }
    
}