@charset "utf-8";
/* CSS Document */
* {
   box-sizing: border-box;
}
 
/* 画像・動画のレスポンシブ対応 */
img, video, iframe {
   max-width: 100%;
   height: auto;
   display: block;
}
 
body {
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   letter-spacing : 0.2em;
}
h1 {
    margin: 0; padding: 0;
    font-size: 20px;
}
 
a {	
   text-decoration: none;
   color: #4b4b4b;
}
.title {
	list-style: none;
	margin: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	min-width: 0;
}
.title h1 {
	font-size: clamp(12px, 1.4vw, 20px);
	white-space: nowrap;
}
.title li:last-child {
	font-size: clamp(10px, 1.1vw, 14px);
}
.pc-nav ul {
	list-style: none;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	justify-content: flex-end;
}
.pc-nav li {
   margin: 0 0 0 12px;
   font-size: clamp(10px, 1.1vw, 13px);
   white-space: nowrap;
}
nav {
   margin: 0;
   flex-shrink: 1;
   min-width: 0;
}
 
 
.text_shadow  {
  color: #454545;
  text-shadow: 2px 1px #c7edff, 3px 2px #9acee7, 5px 3px #6bbade;
}
 
.sp-nav {
   display: none;
}
 
/*フッター*/
.footer06 {
 color: #808080;
 background: #f0f8ff;
 padding: 20px;
	margin-top: 30px;
}
.footer06 a {
 color: #808080;
 text-decoration: none;
}
.footer06 li a:hover {
 text-decoration: underline;
}
.footer06 .wrap {
 width: 60%;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.footer06 .wrap h3 {
 margin: 0 0 10px 0;
 font-size: 95%;
 padding: 0;
 border-bottom: 1px #c4c4c4 solid;
}
.footer06 .wrap p {
 margin: 0;
 padding: 0 0 10px 0;
 font-size: 90%;
}
.footer06 .wrap .box {
 width: 30%;
}
.footer06 .wrap .box ul {
 margin: 0;
 padding: 0 0 5px 0;
 list-style: none;
 font-size: 90%;
}
#copyright {
  padding: 1rem 0;
  background-color: #000;
  color: #9ca3af;
  text-align: center;
  position: sticky;
  top: 100vh;
  width: 100%;
}
footer {
  width: 100%;
  height: 120px; 
  text-align: center;
  padding: 50px 0;
      background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90))
}
.footer-text {
  color: #fff;
}
/*フッターここまで*/
/* */
@media screen and (max-width: 800px) {
.title {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.title h1 {
	font-size: clamp(11px, 3.5vw, 18px);
}
.title li:last-child {
	font-size: clamp(9px, 2.5vw, 12px);
}
.pc-nav {
      display: none;
      box-shadow: 7px 10px 5px -2px #aaaaaa,5px 7px 5px 0px #ffffff inset;
	}	
	
.sp-nav {
   z-index: 1;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   display: block;
   background: rgba(0, 0, 0, .8);
   transition: all .2s ease-in-out;
   opacity: 0;
   transform: translateY(-100%);
}
#hamburger {
   position: relative;
   display: block;
   width: 30px;
   height: 25px;
   margin: 0 0 0 auto;
}
 
#hamburger span {
   position: absolute;
   top: 50%;
   left: 0;
   display: block;
   width: 100%;
   height: 2px;
   background-color: #4b4b4b;
   transform: translateY(-50%);
}
 
#hamburger::before {
   content: '';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #4b4b4b;
}
#hamburger::after {
   content: '';
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #4b4b4b;
}
 
/*スマホメニュー*/
.sp-nav ul {
   padding: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
}
.sp-nav li {
   margin: 0;
   padding: 0;
}
.sp-nav li span {
   font-size: 15px;
   color: #fff;
}
.sp-nav li a, .sp-nav li span {
   display: block;
   padding: 20px 0;
   color: #fff;
}
 
   /*-閉じるアイコンー*/
.sp-nav .close {
   position: relative;
   padding-left: 20px;
}
/*バツ印線1*/
.sp-nav .close::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   display: block;
   width: 16px;
   height: 1px;
   background: #fff;
   transform: rotate( 45deg );
}
/*バツ印線2*/
.sp-nav .close::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   display: block;
   width: 16px;
   height: 1px;
   background: #fff;
   transform: rotate( -45deg );
}
	
.toggle {
   transform: translateY( 0 );
   opacity: 1;
}
	
 
.footer06 .wrap {
 width: 100%;
 padding: 0 20px;
 box-sizing: border-box;
}
.footer06 .wrap h3 {
 border: none;
}
.footer06 .wrap .box {
 width: 100%;
}
.footer06 .wrap .box ul {
 border-top: 1px #c4c4c4 solid;
}
.footer06 .wrap .box ul li a {
 display: block;
 padding: 3px 10px;
 border-bottom: 1px #c4c4c4 solid;
}
}