@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
/* ベーススタイル */
:root {
  --primary-color: #7c3aed;
  --primary-light: #8b5cf6;
  --primary-dark: #6d28d9;
  --secondary-color: #ec4899;
  --secondary-light: #f472b6;
  --secondary-dark: #db2777;
  --text-color: #333;
  --text-light: #111;
  --text-lighter: #888;
  --bg-color: #fff;
  --bg-light: #f9fafb;
  --bg-dark: #f3f4f6;
  --border-color: #e5e7eb;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --gradient-start: var(--primary-color);
  --gradient-end: var(--secondary-color);
  --header-height: 70px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #f3f4f6;
    --text-light: #d1d5db;
    --text-lighter: #9ca3af;
    --bg-color: #1f2937;
    --bg-light: #111827;
    --bg-dark: #0f172a;
    --border-color: #374151;
    --shadow-color: rgba(0, 0, 0, 0.3);
  }
}

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 10px;
}


/*****************************
	全共通
*****************************/

/*menu*/
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
* {
  box-sizing: border-box;
  font-weight: 200;
}
a,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

.outer-menu {
  position: fixed;
  top: 10vh;
  left: 0;
  z-index: 1;
}
.outer-menu .checkbox-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div {
  transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
  pointer-events: auto;
  visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: 0.75s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}
.outer-menu .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: 0.5em 1em;
  background: rgba(33, 150, 243, 0.75);
  border-radius: 0 0.12em 0.12em 0;
  cursor: pointer;
  transition: box-shadow 0.4s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #fefefe;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  transition: all 0.4s ease;
}
.outer-menu .hamburger > div:after {
  top: 10px;
}
.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div {
  width: 200vw;
  height: 200vw;
  color: #fefefe;
  background: rgba(41, 98, 255, 0.97);
  border-radius: 50%;
  transition: all 0.4s ease;
  flex: none;
  transform: scale(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div > ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
  padding: 0;
  margin: 1em;
  font-size: 130%;
  display: block;
}
.outer-menu .menu > div > div > ul > li > a {
  position: relative;
  display: inline;
  cursor: pointer;
  transition: color 0.4s ease;
}
.outer-menu .menu > div > div > ul > li > a:hover {
  color: #e5e5e5;
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
  width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 2px;
  background: #e5e5e5;
  transition: width 0.4s ease;
}




/*menu*/


/*logo*/

#logo{
  background: linear-gradient(45deg,#b67eb3,#362278,#1e35a2);
  background-size: 180% 180%;
  animation: gradient-animation 3s ease infinite;
  color:#fff;
  padding:20px 0;
}
#logo div.jp{
font-weight:bold;
font-size:180%;
}
#logo span.en{
font-weight:normal;
font-size:60%;
}

#logo a{color:#fff;}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


body{
	padding:9px 0 0 0;
	margin:0 auto;
	font-size:1.05rem;
	color:#111;
	text-align:center;
	font-family: 'Noto Sans JP', sans-serif;
	background: linear-gradient(194deg,#fff,#ddd);
	background-size: 100% 100%;
}

/**/




/**/

img{
	border:0;
}

.pan{
background:#333;
padding:2px;
font-size:80%;
color:#fff;
}
.pan a{
text-decoration:none;
color:#fff;
}

.categorymore{
background:#111;
color:#fff;
margin:60px 0 60px 0;
text-align:center;
}

.categorymore a{
padding:50px 0px;
color:#fff;
display:block;
text-decoration:underline;
}

#bg{
	width:1300px;
	margin:0 auto;
}
a,
a:visited,
a:hover,
a:active {
  text-decoration: underline;
}
#head{
	clear:both;
	height:55px;
}



#logom{
	float:right;
}

#logom ul{
	margin:0;
	padding:0;
	list-style-type:none;
}

#logom ul li{
	float:left;
	background:url(../img/headm.gif) no-repeat;
	width:86px;
	height:44px;
	padding:3px 3px 0 3px;
	margin-left:10px;
	font-size:90%;
}

#logom ul li a{
	text-decoration:none;
	color:#333;
}


#photos{
	background:#fff;
	padding:8px;
}



#content{
	text-align:left;
	width:950px;
	padding-top:100px;
	float:left;
}

.time{
	text-align:right;
	/*background:url(../img/bg_h.gif) no-repeat;*/
	background:#444;
	border-left:solid 10px #c32722;
	color:#fff;
	font-size:10px;
	padding-right:15px;
	height:15px;
}

.time a{
	color:#fff;
}

h1{
	color:#c32722;
	font-weight:bold;
	font-size:125%;
	margin:0;
	padding:0;
}

h1 a{
	color:#c32722;
	text-decoration:none;
	font-family:"新ゴ M";
}


h2{
	color:#c32722;
	font-weight:bold;
	font-size:110%;
	margin:15px 0 0 0;
	padding:5px;
	/*background:url(../img/bg_h2.gif) left bottom no-repeat;*/
	background:#c32722;
	/*border-bottom:solid 5px #333;*/
	color:#fff;


}

h2.h1{
	font-weight:bold;
	margin:0;
	background:none;
	font-size:140%;
}


h2.h1 a{
	color:#c32722;
	text-decoration:none;
	border-bottom:1px dotted #c32722;
	font-weight:bold;
}

h3{
	color:#c32722;
	font-weight:bold;
	font-size:110%;
	margin:15px 0 0 0;
	padding:5px;
	border-left:5px solid #c32722;
	background:#ffeeee;
}
h4{
	color:#c32722;
	font-weight:bold;
	font-size:110%;
	margin:15px 0 0 0;
	padding:5px 5px 0 0;
}
	

p.photo{
	width:100%;
	/*background:url(../img/bg_photo.gif);*/
	/*background-image: linear-gradient( 135deg, #f2f2f2 10%, #cccccc 100%);*/
	/*border:5px solid #424242;*/
	text-align:center;
	padding:5px;
	box-sizing: border-box;
}


p.photo img{
	border:8px solid #fff;
	box-shadow: 0 0px 10px 0 rgba(0, 0, 0, .2);
}

div.photodate{
text-align:right;
font-size:70%;
margin:-15px 0 5px 0;
color:#888;
}

div.photodate2{
text-align:right;
font-size:70%;
margin:0;
color:#888;
}

#content p.more{
border:2px solid #c32722;
font-size:100%;
padding:5px;
text-align:center;
margin-bottom:20px;
font-weight:bold;
color:#fff;
background: linear-gradient(333deg,#dd4867,#d63e2d,#b4408c);
background-size: 180% 180%;
animation: more-animation 3s ease infinite;
border-radius: 10px 10px 10px 10px;
}

#content p.more a{
font-weight:bold;
}

@keyframes more-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#content p{
	line-height:150%;
	padding-bottom:20px;
	font-size:90%;
}

table{
	background-color:#ccc;
	line-height:140%;
	border:1px solid #ccc;
	margin:10px 0 20px;
	border-collapse:separate;
	border-spacing:1px;
}
	
table th{
	background-color:#f5f5f5;
	color:#c32722;
	font-weight:normal;
	padding:5px;
	border:1px solid #FFFFFF;
}	
	
table td{
	background-color:#FFFFFF;
	padding:5px;
	border-collapse:separate;
	border-spacing:1px;
}



table.none{
	border:none;
	background-color:#fff;
}

table.none td{
	border:none;
	padding:2px;
	background-color:#fff;
}

table.none th{
	border:none;
	padding:2px;
	background-color:#fff;
}

.pagemove{
padding:10px 0 10px 0;
font-size:80%;
}

.kanren{
	margin-top:25px;
	border:1px solid #c32722;
	background:#f3f3f3;
	padding:5px;
}
.kanren ul{
	padding:0 0 0 10px;;
	margin:0 0 0 10px;;
}

.kanren ul li{
	padding:0 0 5px 0;
	margin:0;
	font-size:90%;
}


.comments{
	margin-top:30px;
}




#menu{
padding:100px 0 0 0;
width:320px;
float:right;
font-size:0.8rem;

}

#menu #left{
	width:310px;
	text-align:left;
	float:left;
}

#menu #left ul{
	list-style-type:none;
	padding:0;
	margin:0;
	width:310px;
}

#menu #left ul li{
	background:url(../img/bg_m1.gif);
	background:#444;
	border-top:1px solid #333;
	color:#fff;
}
#menu #left ul li span{
padding-left:10px;
}

#menu #left ul li a{
	padding:8px 0 4px 10px;
	color:#fff;
	text-decoration:none;
	display:block;
}

#menu #left ul li  ul li{
	background:url(../img/bg_m2.gif);
	border-top:1px solid #333;
	background:#f3f3f3;
}
#menu #left ul li  ul li a{
color:#333;
}

/*
#menu #right{
	width:155px;
	text-align:left;
	float:right;
}

#menu #right ul{
	list-style-type:none;
	padding:0;
	margin:0;
	width:155px;
}

#menu #right ul li{
	background:url(../img/bg_m3.gif) no-repeat;
}

#menu #right ul li a{
	padding:5px 0 0 30px;
	color:#1344c0;
	text-decoration:none;
	display:block;
}

#menu #right ul li  ul li{
	background:url(../img/bg_m4.gif) no-repeat #ececec;
}
*/

#copy{
	padding-top:50px;
	text-align:right;
	clear:both;
}
#copy a{
	text-decoration:none;
	color:#666666;
	font-size:70%;
}

.clear{
	clear:both;
}
.center{
	text-align:center;
}
.kokoku{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:3px;
	margin:5px 0 5px 0;
	background:#fff;
}

#footer{
	clear:both;
	padding:30px 0 0 0;
	font-size:80%;
}

#footermenu{
	background:#333;
	color:#ccc;
	clear:both;
	margin:30px 0 0 0;
	padding:10px;
	text-align:left;
}
#footermenu a{
	color:#fff;
	text-decoration:none;
}



table.category h4{
margin:3px 0px 3px 0px;
padding:5px;
background:#f3f3f3;
}
table.category span{
background:orange;
color:#fff;
font-size:85%;
padding:2px;
margin-right:2px;
}
table.category p{
margin:0;
padding:3px 0 3px 0;
text-decoration:none;
}
table.category a p{
text-decoration:none;
}

.scroll1{
	overflow-y:scroll;padding:0px;height:120px;border:1px solid orange;margin:10px 0 10px 0;
}

.scroll1::-webkit-scrollbar{
	width: 10px;
	background: pink;
}
.scroll1::-webkit-scrollbar-thumb{
	background: red;
	border-radius: 2px;
}
.scroll1 table{
width:100%;
margin:0;
}
.scroll1 th{
background:orange;
color:#fff;
}
.scroll1 td{
font-size:85%;
padding:3px;
}
.scroll1 td a{
display:block;
}

.waku{
border:2px solid orange;padding:5px
}

.sp_only{
display:none;
}

/*===============================================
スマホ用
===============================================*/
@media screen and (max-width:980px){

.sp_only{
display:block;
}

.pc_only{
display:none;
}

#bg{
width:100%;
}


#content {
width:100%;
clear:both;
padding:5px;
}

#menu {
width:100%;
clear:both;
}

img{
width:100%;
height:auto;
}

p.photo img{
	width:100%;
}


iframe{
width:100%;
height:auto;
}

.time{
background-position:right top;
}

#logom{
display:none;
}

.kokoku{
width:100%;
}

h2 a{
display:block;

}





}

/*===============================================
スマホ用
===============================================*/

#comment-text{
width:90%;
}

.comment{
border:3px solid #eee;
padding:5px;
}




/* ヘッダースタイル */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease-out;
}

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

header.scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  header.scrolled {
    background-color: rgba(31, 41, 55, 0.9);
  }
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
}

.logo a {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.menu-toggle {
  /*display: none;*/
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.menu-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
  .menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

.hamburger {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background-color: var(--text-color);
  transition: all 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: var(--text-color);
  transition: all 0.3s ease;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  bottom: -8px;
}

.menu-toggle.active .hamburger {
  background-color: transparent;
}

.menu-toggle.active .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle.active .hamburger::after {
  transform: rotate(-45deg);
  bottom: 0;
}

.desktop-nav ul {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.desktop-nav a {
  color: var(--text-color);
  font-weight: 500;
}

.desktop-nav a:hover {
  color: var(--primary-color);
}

.register-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: white !important;
  border-radius: 9999px;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.register-btn:hover {
  opacity: 0.9;
}

/* モバイルメニュー */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  overflow-y: auto;
  padding-top: var(--header-height);
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu ul {
  padding: 1rem 0;
}

.mobile-menu li {
  border-bottom: 1px solid var(--border-color);
}

.mobile-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  color: var(--text-color);
  font-weight: 500;
}

.mobile-menu a:hover {
  color: var(--primary-color);
}

.mobile-menu a::after {
  content: "›";
  font-size: 1.5rem;
}

.blog-content {
    background-color: var(--bg-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding:20px 10px;
    margin:20px 0px 30px 0px;
}

strong {
    font-weight: 600;
    background-color: rgba(255, 255, 0, 0.3);
    padding: 2px 4px;
    border-radius: 4px;
}

/*
#content ul{
border:1px solid #ccc;
margin:10px 0;
padding:0;
list-style-type:none;
}

#content li{
border-bottom:1px dotted #ccc;
padding:8px 5px 8px 5px;
margin:0;
background:#fff;
}
*/

#content ul{
margin:10px 0;
padding:0 0 0 10px;
}

#content li {
  position: relative;
  list-style-type: none;
  margin:0;
  padding:0 0 10px 25px;
}

#content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  height: 5px;
  width: 5px;
  border: 1px solid #f9dd94;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.tokucho {
	border:2px solid #ccc;
	padding:5px 5px 0px 5px;
	margin-bottom:15px;
}

.tokucho p{
	border-bottom:1px dotted #ccc;
	padding-bottom:4px;
}

#content ul.tokucho {
	border:2px solid #f9590b;
	padding:5px 5px 5px 5px;
	margin-bottom:15px;
	background:#fff;
}

#content ul.tokucho li{
	background:url("/img/checkbox.gif") 0px 5px no-repeat;
	padding:5px 0 5px 28px;
	list-style-type:none;
	font-size:110%;
	border-bottom:1px dotted #ccc;
}

html {
  scroll-padding-top: 70px;
}


.blog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.blog-item {
  background: #fff;
  padding: 5px;
  border-radius: 4px;
  text-align: center;
}

.blog-item h3{
text-align:left;
font-size: 100%;
margin: 5px 0 10px 0;
padding: 0px;
border-left: 0px;
background: #fff;
}

.blog-item img {
  width: 100%;
  height: auto;
  border-radius: 0px;
  margin: 0px 0px;
}

.blog-item p {
  font-size:90%;
  text-align:left;
}

.blog-item a{
  text-decoration:none;
}
.blog-item .update{
font-size:70%;
  text-align:right;

}

.blog-list_text{
background:#fff;
padding:15px;
margin-top:20px;
}
.blog-list_text span{
color:#888;
font-size:80%;
}

@media (min-width: 768px) {
  .blog-list {
    flex-direction: row;
    justify-content: space-between;
  }
  .blog-item {
    width: 32%;
  }
  .blog-item p {
  font-size:80%;
  text-align:left;
  }

}