/* ------------------------------------------------------------
 * Style Sheet for 044 Philharmonic Chorus
 * Last modified 2025/04/10 by OKU
 * original http://
 * -----------------------------------------------------------*/

/* スマホ用のCSSはメディアクエリの外に記述する */

html{
	scroll-behavior: smooth;
}

body.main  {
	background: url(images/back.jpg);
	background-color: af8f5f;
	background-repeat: repeat;
	color: 7f3f36;
}

A:link {
    color: #367f3f;
}
A:visited {
    color: #363f7f;
}
A:hover {
    color: #af6f06;
}
h1 {
	color: 262f6f;
}
h2 {
	color: 262f6f;
}
h3 {
	color: cf8f16;
}

div.head {
}

div.chor044 {
	color: #ffffff;
	font-weight: bold;
	font-style:italic;
	text-shadow:
	  1px 1px 2px black,
	  0 0 1em blue,
	  0 0 0.2em blue;
}

/* ハンバーガーメニューに関するCSS */

div.nav {
	position: fixed;
	top:0px;
	right:2px;
	z-index: 98;
}

/* チェックボックスを非表示にする */
.drawer_hidden {
	display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
	display: flex;
	height: 60px;
	width: 60px;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 100;/* 重なり順を一番上にする */
	cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background: #363f7f;
	transition: 0.5s;
	position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
	bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
	top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
	background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
	bottom: 0;
	transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
	top: 0;
	transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 100%; /* メニューを画面の外に飛ばす */
	z-index: 99;
	transition: .5s;
	text-align: left;
}

/* メニュー黒ポチを消す */
.nav_list {
	list-style: none;
	background: white;
}

.nav_item {
	font-weight: bold;
	font-size: 10.0vw;
	border-bottom-style: solid;
	position: relative;
}

.nav_item a {
	text-decoration: none;
	color: #363f7f;
}

.nav_item img {
	width: 50%;
}

.nav_item span {
	font-weight: normal;
	font-size: 9.0vw;
	color: #686faf;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
	left: 0;/* メニューを画面に入れる */
}

/* ドロップダウンアイコンの設置スペース */
.drop_open {
	display: flex;
	height: 20px;
	width: 20px;
	right:5px;
	background: #fff;
	border: solid 2px #363f7f;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	position: relative;
	top: 50%;
  	transform: translate(0, -100%);
}

/* ドロップダウンのアイコン */
.drop_open span:before,
.drop_open span:after {
	content: '';
	display: flex;
	top: 0;
	height: 20px;
	width: 2px;
	justify-content: center;
	align-items: center;
	background: #363f7f;
	position: absolute;
	transition: .5s;
}

/* after要素を-90度傾ける */
.drop_open span:after {
	transform: rotate(90deg);
}

/* アイコンがクリックされたら縦の線を90度回転する */
#drop_input:checked ~ .drop_open span:before {
	transform: rotate(90deg);
}
#drop_input2:checked ~ .drop_open span:before {
	transform: rotate(90deg);
}
#drop_input3:checked ~ .drop_open span:before {
	transform: rotate(90deg);
}

.nav_item label {
	position: absolute;
	top:0.9em;
	right:5px;
}

/* トップへ戻るボタン */
.pagetop {
	height: 50px;
    	width: 50px;
    	position: fixed;
    	right: 30px;
    	bottom: 30px;
    	background: #ffcf9f;
    	border: solid 2px #fff;
    	border-radius: 50%;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	z-index: 10;
}

.pagetop__arrow {
    	height: 10px;
    	width: 10px;
    	border-top: 3px solid #fff;
    	border-right: 3px solid #fff;
    	transform: translateY(20%) rotate(-45deg);
}

.texthidden { 
	display: none;
}

.chirashi {
	display: grid;
	position: relative;/*絶対配置*/
	color: black;/*文字は黒に*/
	grid-template-columns: 1fr;
	grid-template-areas:
	"omote"
	"ura";
}

.omote {
	grid-area: omote;
}

.omote table {
	width:100%;
}

.ura {
	grid-area: ura;
}

.ura table {
	width:100%;
}

.sns {
	align-items: center;
	text-align: center;
}

div.textmenu {
	display: none;
}

div.copyright {
	text-align: center;
	font-size: 2.2vw;
}

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

  div.copyright {
	font-size: 1.4vw;
  }
}

@media screen and (min-width: 960px) {
	/* 960px以上に適用されるCSS（PC用） */

  .nav { 
	display: none 
  }

  .chirashi {
	display: grid;
	position: relative;/*絶対配置*/
	color: black;/*文字は黒に*/
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
	"omote ura";
  }

.omote table {
	width:680px;
}

.ura table {
	width:680px;
}

  div.textmenu {
	display:block;
	width: 100%;
	text-align: center;
	font-size: 14px;
	background: #white;
  }

  div.copyright {
	font-size: 1.2vw;
  }

}