/*基本要素*/

body {
color: #333;
background-color: #FFFFFF;
margin-left: 5rem;
margin-right: 5rem;
font-family: 'M PLUS 1 Code', sans-serif;
background-image: url(taittool-back.png);
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
background-size:contain;/*背景表示サイズ*/
}
a {
color: #000000;
text-decoration:underline;
font-size: 1em;
font-family: 'M PLUS 1 Code', sans-serif;
font-weight: bolder;
text-decoration:underline;
margin-left: 5px;
}

a:visit{
color: #000000;
text-decoration:underline;
}


h1{
  text-align: center;
margin-top: 130px;
font-family: 'Oswald', sans-serif;
font-size: 2rem;
background-color: #dddddd;

}
h2 {
font-size: 1.8em;
font-family: 'Oswald', sans-serif;
margin-top: 100px;
margin-bottom: 30px;
text-align: left;
padding-left: 10px
}

 /*太字フォント替え*/
 b {
  margin-left: 1em;
  margin-right: 1em;
  padding: 20px;
  color: #585858;
  font-family: 'M PLUS 1 Code', sans-serif;
  font-size: 1.3em;
}
/*========ダークモード対応============*/
@media (prefers-color-scheme: dark) {

	body{
	color: #fff;
	background-color: #000000;
	background-image: url(taittool-back_d.png);
}

	a {
	color: #fff;
	}
	a:visit{
	color: #fff;
	}
	h1{
	background-color: #545454;
	}
	b{
	color: #F9F9F9;
	}
}

/*=======/ダークモードCSS基礎部分=======*/

/*素材画像サイズ*/
#wrap img{
width: 200px;
height: 200px;
border: thick double #ccc;
padding: 0;
}

/*=========Updateお知らせ部分============*/
#Update {
	width: 75%;
	height: 200px;
	overflow-x: hidden;
	overflow-y: scroll;
	margin-top: 20px;
	background-color: #eeeeee;
	padding: 2.2em;
	font-size: 1.1em;
	font-family: 'Zen Maru Gothic', sans-serif;
}

#Update-title {
	font-weight: bold;
	text-align: center;

}


#Update li{
line-height: 2.1em;
margin-top: 0.5em;
border-left: solid 10px #333;
margin-left: -2em;
}

#Update ul{
list-style-type: none!important;
border-top: solid 2px #333;
border-left: 0;
}


.Update-news {
margin-top: 1.8em;
}

/*===ダークモード対応========*/
@media (prefers-color-scheme: dark) {
	#Update{
	background-color: #494949;
	}
	#Update-li{
	border-left: #cecece;
	}
}

/*===================素材=======================*/
#section01{
  margin-top: 20px; 
  width: 75%;
  font-size: 1rem;
font-family: 'M PLUS 1 Code', sans-serif;
background-image: url(back_1.png);
background-repeat: repeat;
padding: 20px;
}


#section02{
font-family: 'Yusei Magic', sans-serif;
  margin-top: 50px;
  margin-bottom: 150px;
  margin-right: 100px;
  padding-right: 20px;
　font-size: 1em;
　width: 80%;

}

#section02 div{
margin-top: 40px;
background-image: url(back_1.png);
background-repeat: repeat;
 margin-bottom: 200px;
}

#section04 div{
font-family: 'Yusei Magic',sans-serif;
 margin-top: 50px;
   margin-bottom: 200px;;
  margin-right: 100px;
font-size: 1em;
background-image: url(back_1.png);
background-repeat: repeat;
}

#section05 div{
font-family: 'Yusei Magic',sans-serif;
 margin-top: 50px;
   margin-bottom: 200px;
  margin-right: 100px;
font-size: 1rem;
background-image: url(back_1.png);
background-repeat: repeat;
}
/*枠PNGデザイン*/

#flame div{
font-family: 'Yusei Magic',sans-serif;
 margin-top: 50px;
  margin-bottom: 200px;
  margin-right: 100px;
font-size: 1rem;
background-image: url(back_1.png);
background-repeat: repeat;
}

/*========ダークモード対応============*/
@media (prefers-color-scheme: dark) {
	#section01{
	background-image: url(back_d1.png);
	background-repeat: repeat;
	}
	#section02 div{
	background-image: url(back_d1.png);
	background-repeat: repeat;
	}
	#section04 div{
	background-image: url(back_d1.png);
	background-repeat: repeat;
	}
	#section05 div{
	background-image: url(back_d1.png);
	background-repeat: repeat;
	}
	#flame div{
	background-image: url(back_d1.png);
	background-repeat: repeat;
	}
}

/*連絡先*/
#section03{
  margin-bottom: 50px;
  margin-top: 300px;
  font-size: 1rem;
  width: 80%;
 }
 #section03 img{
border: none;
  }

  #section03 div{
  white-space: nowrap;/*改行なし*/
  margin-left: 10px;
  }

  
  /*画面対応*/
  @media screen and (max-width: 600px) {/* スクリーンサイズが600px以下の場合に適用 */
  
#wrap img {
width: 100px;
height: 100px;
border: thick double #ccc;
}


#section03 {
width: 90%;
left: 20px;
margin-right: 100px;
padding: 15px;
border: none;
}
}

  
/*============SNSリンク画像変化=======*/
/*タイッツーリンク*/
#link1{
white-space: nowrap;/*改行なし*/
overflow: hidden;
cursor: pointer;
  position: relative;
  height: 54px;
 width: 187px;
 border: none;
}
/* 画像のスタイル */
#link1 img {
  height: auto;
  left: 0;
  position: absolute;
  width: 100%;
  
}
/* 2枚目の画像は最初下に隠す */
#link1 img:last-of-type {
  top: 100%;
  transition: top .7s;
}
/* hoverすると2枚目の画像が上がる */
#link1:hover img {
  top: 0;
}


 
/*==========ぺけったー画像変化==========*/

#link2 {
white-space: nowrap;/*改行なし*/
overflow: hidden;
cursor: pointer;
  position: relative;
  height: 54px;
 width: 187px;
 border: none;
}
/* 画像のスタイル */
#link2 img {
  height: auto;
  left: 0;
  position: absolute;
  width: 100%;
}
/* 2枚目の画像は最初下に隠す */
#link2 img:last-of-type {
  top: 100%;
  transition: top .7s;
}
/* hoverすると2枚目の画像が上がる */
#link2:hover img {
  top: 0;
}
/*==========マストドンリンク===============*/
#link3 {
white-space: nowrap;/*改行なし*/
overflow: hidden;
cursor: pointer;
  position: relative;
  height: 54px;
 width: 187px;
 border: none;
}
/* 画像のスタイル */
#link3 img {
  height: auto;
  left: 0;
  position: absolute;
  width: 100%;
}
/* 2枚目の画像は最初下に隠す */
#link3 img:last-of-type {
  top: 100%;
  transition: top .7s;
}
/* hoverすると2枚目の画像が上がる */
#link3:hover img {
  top: 0;
}
/*====コピーライト======*/
#copyright{
  margin-top: 90px;
  margin-bottom: 150px;
  font-size: 0.9rem;
  color: #333;
  width: 75%;
}

#copyright img{
height :30px;
width : 30px;
bolder : none; /*円形*/
object-fit:cover;
border-radius:50%;
object-position:0px 0px;
background-color: #333;
}

/*======ダークモード対応=======*/
@media (prefers-color-scheme: dark) {
	#copyright{
	color: #fff;
	}
	#copyright img{
	background-color: #000000;
	}
}


@media screen and (max-width: 600px) {/* スクリーンサイズが600px以下の場合に適用 */

#link2 {
 position: relative;
 top: 5px;
 left: 0px;
 border: none;
}

#link3{
 position: relative;
 top: 5px;
 left: 0px;
 border: none;
}

} 

/*ボタンナビゲーション*/
/*========= ぼかしのためのCSS ===============*/

.mainblur{
  filter: blur(8px);
}

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
  z-index: -1;
  opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
  top:0;
  width:100%;
    height: 100vh;/*ナビの高さ*/
  background:rgba(220,220,220,0.65);/*背景を透過させる*/
    /*動き*/
  transition: all 0.3s;
}

@media (prefers-color-scheme: dark) {/*ダークモード*/
	#g-nav{
	background: rgba(22,22,22,0.8);
	}
}


/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
  opacity: 1;
  z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
    text-align: center;
}

#g-nav li a{
  color: #333;
  text-decoration: none;
  padding:10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.3em;
  font-weight: bold;
}


/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position: relative;/*ボタン内側の基点となるためrelativeを指定*/
    z-index: 9999;/*ボタンを最前面に*/
  top:10px;
  right: 10px;
  cursor: pointer;
    width: 50px;
    height:50px;
    background-color: #fff;
}

@media (prefers-color-scheme: dark) {/*ダークモード*/
 .openbtn1{
 background-color: #333;
 }
 #g-nav li a{
 color: #ccc;
 }

}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
  top:10px;
  right: 10px;
  cursor: pointer;
    width: 100px;
    height:100px;
}
  
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #666;
    width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
  top:15px; 
}

.openbtn1 span:nth-of-type(2) {
  top:30px;
}

.openbtn1 span:nth-of-type(3) {
  top:45px;
}

.openbtn1 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:16px;
  left:-2px;
  color: #333;
  font-size: 1rem;
  text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {/*ダークモード*/
	.openbtn1 span:nth-of-type(3)::after{
	color: #ccc;
	}

}

.openbtn1.active span:nth-of-type(1) {
    top: 25px;
    left: 20px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 40px;
    left: 20px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
.openbtn1.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
  top:10px;
  left:4px;
}