:root {
	--white:#f1f1f1;
	  --color1: rgba(0, 51, 102, 0.4); /* 濃い青 */
	  --color2: rgba(51, 51, 51, 0.4); /* 濃いグレー */
	  --color3: rgba(75, 0, 130, 0.4); /* 濃い紫 */
	  --color4: rgba(0, 77, 0, 0.4);   /* 濃い緑 */
	  --color5: rgba(0, 0, 0, 0.4);    /* 黒 */
		--color6: rgba(0,71,171, 0.4);	/* コバルトブルー */
}

*, *:before, *:after {
　box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  width:100%;
}

#container {
  position: relative;
  width:100%;
}

/* このクラスは改行する */
.new_line {
  display: block;
}

/* html living standard の記述式で仕方なく
内容記入せざるを得ない物を見えなくする*/
.hidden_style {
  display: none;
}

.light_color {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.50);
  margin-bottom:1px;
}

/* fontサイズを20で固定させておく */
h1,h2,h3,h4,h5,h6 {
  font-size: 20px;
}

.small_size{
  font-size:12px;
}

.sidebarMenuInner h2 {
  font-size:17px;
}
#light span {
  opacity: 0.15;
	letter-spacing: 0.2em;
}

/* ---------------------- ↓ header ↓ ---------------------- */


/* ---------------------- ↓ drawer ↓ ---------------------- */
#drawer-menu {
  /* ドラック禁止、と言うより誤動作防止 */
user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
position: fixed;
z-index: 100;
height: 100%;
height: 100vh;
height: 100svh;
height: 100dvh;
}

#drawer-menu p {
  margin-bottom: 1px;
}

#sidebarMenu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#sidebarMenu {
    z-index: 10;
    height: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    position: fixed;
    left: 0;
    width: 250px;
    padding-top: 60px;
    transform: translateX(-250px);
    transition: transform 250ms ease-in-out;
    background: black;
}



.sidebarMenuInner {
    margin:0;
    padding:0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li  {
    list-style: none;
    color: #fff;
    font-weight: bold;
/*    padding: 20px; */
  padding-left: 20px;
  padding-top:10px;
  padding-bottom:10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li a {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.sidebarMenuInner img {
/*  width:51px;
  text-align: left;
    margin-right: 10px; */
}

.side_right_img {
  margin-right: 10px;
}

input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}

.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 11;
    height: 100%;
    width: 100%;
    top: 22px;
    left: 15px;
    height: 24px;
    width: 26px;
    padding-top:4px;
    padding-left:3px;
    padding-right:3px;
}

.stick {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: var(--color-theme);
  opacity: 1;
}

.deformation1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

.deformation2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

.deformation3 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .deformation2 {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .deformation1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .deformation3 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 9;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
  cursor:default;
}

/*チェックが入ったらもろもろ表示*/
#openSidebarMenu:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
  z-index: 5;
}

*/
/* ------------------- ↓ weather ↓ ------------------- */

.weather_box {
  position: relative;
}

#weather_img {
  display:flex;
  position:relative;
  justify-content: center;
  align-items: center;
  width:150px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

#w_value {
  display:none;
}

#weather_img p {
  width:150px;
}

#w_value {
  width: auto;
  width: 150px;
}

#sidebar-ws {
  display: block;
}

/* ------------------- ↓ cloudy ↓ ------------------- */
.cloud {
    background: rgba(255, 255, 255, 0.4); /* 雲の色 */
    border-radius: 50%; /* 丸みを持たせる */
    width: 150px;  /* 雲の幅 */
    height: 40px;  /* 雲の高さ */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.9); /* 影を追加 */
    position: absolute; /* 絶対位置指定 */
    animation: moveCloud 300s linear infinite; /* アニメーション設定 */
		z-index: -1;
}

@keyframes moveCloud {
    0% {
        transform: translateX(-150px); /* 左側の外から開始 */
    }
    100% {
        transform: translateX(100vw); /* 右側の外に移動 */
    }
}
/* ------------------- ↑ cloudy ↑ ------------------- */

/* ------------------- ↓ rain ↓ ------------------- */
.rains{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height:100%;
  transform: rotate(20deg);
}

/*widthは雨の太さ、heightは長さ*/
.rains span {
  position: absolute;
  width:1px;
  height:180px;
  background:#FFF;
  opacity:0.4;
}

 /*雨の初期位置とアニメーション指定、leftはx座標での基準位置、topは開始位置、アニメーション時間は揺らぎ*/
.rains span:nth-child(1){left:5%; top:-190px; animation: rain-anim 10s infinite;}
.rains span:nth-child(2){left:10%; top:-180px; animation: rain-anim 11s infinite;}
.rains span:nth-child(3){left:15%; top:-170px; animation: rain-anim 8s infinite;}
.rains span:nth-child(4){left:20%; top:-160px; animation: rain-anim 12s infinite;}
.rains span:nth-child(5){left:25%; top:-150px; animation: rain-anim 10s infinite;}
.rains span:nth-child(6){left:30%; top:-150px; animation: rain-anim 11s infinite;}
.rains span:nth-child(7){left:35%; top:-160px; animation: rain-anim 13s infinite;}
.rains span:nth-child(8){left:40%; top:-170px; animation: rain-anim 7s infinite;}
.rains span:nth-child(9){left:45%; top:-180px; animation: rain-anim 9s infinite;}
.rains span:nth-child(10){left:50%; top:-190px; animation: rain-anim 11s infinite;}
.rains span:nth-child(11){left:55%; top:-190px; animation: rain-anim 10s infinite;}
.rains span:nth-child(12){left:60%; top:-180px; animation: rain-anim 6s infinite;}
.rains span:nth-child(13){left:65%; top:-170px; animation: rain-anim 14s infinite;}
.rains span:nth-child(14){left:70%; top:-160px; animation: rain-anim 12s infinite;}
.rains span:nth-child(15){left:75%; top:-150px; animation: rain-anim 10s infinite;}
.rains span:nth-child(16){left:80%; top:-150px; animation: rain-anim 14s infinite;}
.rains span:nth-child(17){left:85%; top:-160px; animation: rain-anim 8s infinite;}
.rains span:nth-child(18){left:90%; top:-170px; animation: rain-anim 9s infinite;}
.rains span:nth-child(19){left:95%; top:-180px; animation: rain-anim 11s infinite;}
.rains span:nth-child(20){left:100%; top:-190px; animation: rain-anim9 13s infinite;}

/*アニメーションキーフレーム
一度落下したら次はキーフレーム1%の間に高さを戻して左右にずらして降らす*/
@keyframes rain-anim {
  0% { transform: translate(0px,0px);}
  4% { transform: translate(0px,600px);}
  5% { transform: translate(200px,0px);}
  9% { transform: translate(200px,600px);}
  10% { transform: translate(-100px,0px);}
  14% { transform: translate(-100px,600px);}
  15% { transform: translate(-200px,0px);}
  19% { transform: translate(-200px,600px);}
  20% { transform: translate(100px,0px);}
  24% { transform: translate(100px,600px);}
  25% { transform: translate(-150px,0px);}
  29% { transform: translate(-150px,600px);}
  30% { transform: translate(-80px,0px);}
  34% { transform: translate(-80px,600px);}
  35% { transform: translate(150px,0px);}
  39% { transform: translate(150px,600px);}
  40% { transform: translate(-60px,0px);}
  44% { transform: translate(-60px,600px);}
  45% { transform: translate(90px,0px);}
  49% { transform: translate(90px,600px);}
  50% { transform: translate(60px,0px);}
  54% { transform: translate(60px,600px);}
  55% { transform: translate(-60px,0px);}
  59% { transform: translate(-60px,600px);}
  60% { transform: translate(-40px,0px);}
  64% { transform: translate(-40px,600px);}
  65% { transform: translate(40px,0px);}
  69% { transform: translate(40px,600px);}
  70% { transform: translate(-20px,0px);}
  74% { transform: translate(-20px,600px);}
  75% { transform: translate(-110px,0px);}
  79% { transform: translate(-110px,600px);}
  80% { transform: translate(20px,0px);}
  84% { transform: translate(20px,600px);}
  85% { transform: translate(-20px,0px);}
  89% { transform: translate(-20px,600px);}
  90% { transform: translate(50px,0px);}
  99% { transform: translate(50px,600px);}
  100% { transform: translate(0px,0px);}
}
/* ------------------- ↑ rain ↑ ------------------- */
/* ------------------- ↓ splat ↓ ------------------- */
.splat{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height:100%;
}
.splat span{
  position: absolute;
  width:70px;
  height:18px;
  background:#FFF;
  border-radius: 50%;
  opacity:0;
}

.splat span:nth-child(1){left: -10%; top:70%; animation: splat-anim 10.5s infinite;}
.splat span:nth-child(3){left:10%; top:90%; animation: splat-anim 9.2s infinite;}
.splat span:nth-child(5){left:11%; top:95%; animation: splat-anim 4.3s infinite;}
.splat span:nth-child(7){left:12%; top:80%; animation: splat-anim 5.7s infinite;}
.splat span:nth-child(9){left:13%; top:80%; animation: splat-anim 16.3s infinite;}
.splat span:nth-child(11){left:14%; top:75%; animation: splat-anim 8.5s infinite;}
.splat span:nth-child(13){left:-15%; top:70%; animation: splat-anim 7.7s infinite;}
.splat span:nth-child(15){left:40%; top:90%; animation: splat-anim 8.8s infinite;}
.splat span:nth-child(17){left:20%; top:90%; animation: splat-anim 13.4s infinite;}
.splat span:nth-child(19){left:15%; top:85%; animation: splat-anim 5.9s infinite;}
.splat span:nth-child(21){left:50%; top:75%; animation: splat-anim 7.0s infinite;}
.splat span:nth-child(23){left:45%; top:85%; animation: splat-anim 9.0s infinite;}
.splat span:nth-child(25){left:60%; top:85%; animation: splat-anim 24.2s infinite;}

@keyframes splat-anim {
  0% { opacity:0.0; transform: scale(0);}
  10% { opacity:0; transform: scale(0);}
  14% { opacity:0.3; transform: scale(0.4);}
  15% { opacity:0; transform: scale(0);}
  30% { opacity:0; transform: scale(0);}
  34% { opacity:0.2; transform: scale(0.8);}
  35% { opacity:0; transform: scale(0);}
  40% { opacity:0; transform: scale(0);}
  44% { opacity:0.2; transform: scale(0.2);}
  45% { opacity:0; transform: scale(0);}
  50% { opacity:0; transform: scale(0);}
  54% { opacity:0.2; transform: scale(0.5);}
  55% { opacity:0; transform: scale(0);}
  64% { opacity:0; transform: scale(0);}
  70% { opacity:0.1; transform: scale(1.0);}
  71% { opacity:0; transform: scale(0);}
  100% { opacity:0; transform: scale(0);}
}
/* ------------------- ↑ splat ↑ ------------------- */
/* ------------------- ↓ snow ↓ ------------------- */
.snows {
	position: absolute;
	width: 100%;
	height:100%;
}

.snows span {
	position: absolute;
	top: -10%;
	left: 0;
	width: 1vw;
	height: 1vw;
	background: #FFF;
	border-radius: 50%;
	opacity: 0.8;
	box-shadow: 0 0 1vw 0.5vw rgba(255, 255, 255, 0.4);
	animation: snow-anim 10s 0s linear infinite;
}

/* Side position */
.snows span:nth-child(1) {left: 0%;}
.snows span:nth-child(2) {left: 2%;}
.snows span:nth-child(3) {left: 4%;}
.snows span:nth-child(4) {left: 6%;}
.snows span:nth-child(5) {left: 8%;}
.snows span:nth-child(6) {left: 10%;}
.snows span:nth-child(7) {left: 12%;}
.snows span:nth-child(8) {left: 14%;}
.snows span:nth-child(9) {left: 16%;}
.snows span:nth-child(10) {left: 18%;}
.snows span:nth-child(11) {left: 20%;}
.snows span:nth-child(12) {left: 22%;}
.snows span:nth-child(13) {left: 24%;}
.snows span:nth-child(14) {left: 26%;}
.snows span:nth-child(15) {left: 28%;}
.snows span:nth-child(16) {left: 30%;}
.snows span:nth-child(17) {left: 32%;}
.snows span:nth-child(18) {left: 34%;}
.snows span:nth-child(19) {left: 36%;}
.snows span:nth-child(20) {left: 38%;}
.snows span:nth-child(21) {left: 40%;}
.snows span:nth-child(22) {left: 42%;}
.snows span:nth-child(23) {left: 44%;}
.snows span:nth-child(24) {left: 46%;}
.snows span:nth-child(25) {left: 48%;}
.snows span:nth-child(26) {left: 50%;}
.snows span:nth-child(27) {left: 52%;}
.snows span:nth-child(28) {left: 54%;}
.snows span:nth-child(29) {left: 56%;}
.snows span:nth-child(30) {left: 58%;}
.snows span:nth-child(31) {left: 60%;}
.snows span:nth-child(32) {left: 62%;}
.snows span:nth-child(33) {left: 64%;}
.snows span:nth-child(34) {left: 66%;}
.snows span:nth-child(35) {left: 68%;}
.snows span:nth-child(36) {left: 70%;}
.snows span:nth-child(37) {left: 72%;}
.snows span:nth-child(38) {left: 74%;}
.snows span:nth-child(39) {left: 76%;}
.snows span:nth-child(40) {left: 78%;}
.snows span:nth-child(41) {left: 80%;}
.snows span:nth-child(42) {left: 82%;}
.snows span:nth-child(43) {left: 84%;}
.snows span:nth-child(44) {left: 86%;}
.snows span:nth-child(45) {left: 88%;}
.snows span:nth-child(46) {left: 90%;}
.snows span:nth-child(47) {left: 92%;}
.snows span:nth-child(48) {left: 94%;}
.snows span:nth-child(49) {left: 96%;}
.snows span:nth-child(50) {left: 98%;}

/* snow size */
.snows span:nth-child(4n+1) {
	width: 0.005px;
	height: 0.005px;
	box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.45);
}
.snows span:nth-child(4n+2) {
  width: 2px;
	height: 2px;
	box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.4);
}
.snows span:nth-child(4n+3) {
  width: 3px;
	height: 3px;
	box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.35);
}
.snows span:nth-child(4n+4) {
  width: 4px;
	height: 4px;
	box-shadow: 0 0 6px 6px rgba(255, 255, 255, 0.3);
}

/* animation-duration */
.snows span:nth-child(6n+1) {animation-duration: 20s;}

.snows span:nth-child(6n+2) {animation-duration: 15s;}

.snows span:nth-child(6n+3) {animation-duration: 7s;}

.snows span:nth-child(6n+4) {animation-duration: 30s;}

.snows span:nth-child(6n+5) {animation-duration: 20s;}

.snows span:nth-child(6n+6) {animation-duration: 40s;}


/* animation-delay */
.snows span:nth-child(5n+1) {animation-delay: 0s;}

.snows span:nth-child(5n+2) {animation-delay: 12s;}

.snows span:nth-child(5n+3) {animation-delay: 7s;}

.snows span:nth-child(5n+4) {animation-delay: 4s;}

.snows span:nth-child(5n+5) {animation-delay: 10s;}

/* snow animation */
@keyframes snow-anim {
	0% {
		top: -10%;
		transform: translateX(0);
	}
	35% {transform: translateX(3vw);}
	65% {transform: translateX(-3vw);}
	100% {
		top: 100%;
		transform: translateX(0);
	}
}

/* ------------------- ↑ snow ↑ ------------------- */
/* ------------------- ↑ weather ↑ ------------------- */

/* ---------------------- ↓ access_counter ↓ ---------------------- */




/* ---------------------- ↑ access_counter ↑ ---------------------- */
/* ---------------------- ↑ drawer ↑ ---------------------- */

/* ---------------------- ↓ title ↓ ---------------------- */
#clearmoon h1 {
  position: absolute;
  z-index:300;
  font-size: 32px;
  color: white;
  /* ずれなし配置なら
  top : 8px;
  left: 48px;
  */
  /* なぜかずれありの方が良く感じる */
  top:10px;
  left: 50px;

}
/* ---------------------- ↑ title ↑ ---------------------- */

/* ---------------------- ↓ scrolldown ↓ ---------------------- */
.scrolldown {
  z-index: 3;
}

.scrolldown p {
  color: black;
}

/*スクロールダウン全体の場所*/
.scrolldown {
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:80px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: white;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:chartreuse;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:#eee;
}

/* ---------------------- ↑ scrolldown ↑ ---------------------- */

/* ---------------------- ↓ header ↓ ---------------------- */
@media screen and (max-width: 780px){
.for-sp {
  display: none;
}
}

@media screen and (min-width: 780px) {
  .for-pc {
    display: none;
  }
}

header {
  position: relative;
}

header img {
  z-index:2;
  position: absolute;
}

nav {
  position: absolute;
  z-index:2;
  left: 50%;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  bottom:64px;
}

.m-navi {
  height:100%;
}

menu {
  display: flex;
  justify-content: center;
  border-radius : 3px;
}

menu:after , menu:before {
  display : block;
}

.m-navi li {
  list-style-type : none;
	background: linear-gradient(var(--color2) 85%, rgba(255, 255, 255, 0.5) 100%);
  padding : 3px 10px;
}

.m-navi li:first-child {
  padding-left: 20px;
  border-radius : 5px 0 0 5px;
}

.m-navi li:last-child {
  padding-right: 20px;
  border-radius : 0 5px 5px 0;
}


menu a {
  display: block;
  white-space: nowrap;
  padding: 3px 13px;  /* 上下のpaddingを調整 */
  margin-bottom: 2px;
  font-size: clamp(6px, 6.0vw, 26px);
  text-decoration: none;
  border-radius: 5px;
  position: relative;
  top: -2px;  /* 上方向に移動 */
  color: #fff;
  transition: all .4s;
}

.m-navi li:hover a {
  top   : -18px;
  color : #5041C8;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}

.m-navi li a:after {
  display  : block;
  content  : '';
  position : absolute;
  top  : 100%;
  left : 42%;
  border-style : solid;
  border-color : transparent;
  border-width : 5px 5px 0 5px;
  transition   : all .4s;
}

.m-navi li:hover a:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}

.m-navi li {
  border-right  : 1px solid rgba(200,200,255,0.5);
  border-left   : 1px solid rgba(40,40,40,0.2);
}

.selected {
  top   : -18px;
  color : #5041C8;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}

.selected:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}

/* ---------------------- ↑ header ↑ ---------------------- */

article {
  margin-bottom:60px;
  text-align: center;
}

/* ---------------------- ↓ main_Container ↓ ---------------------- */
.contents0 {
  margin-top:60px;
  margin-bottom:60px;
  width : 100%;
  justify-content: center;
}

.contents0 p {
  font-size: 20px;
  margin-top:10px;
  margin-bottom: 10px;
}

.contents1-2 {
  height:auto;
}

.contents1 {
  display: flex;
  width: auto;
  height: 100%;
  background-color: #eee;
}

.contents1 h2, .contents2 h2{
  font-size:5vw;
}

.contents1 p, .contents2 p{
  font-size:2vw;
}

.contents1_left, .contents1_right {
  width:50%;
  text-align: center;
}

.contents1_right h2 {
    margin-bottom:30px;
}

.contents2 {
  display: flex;
  width: auto;
  height: auto;
  background-color: #eee;
}

.contents2_left, .contents2_right {
  width:50%;
  text-align: center;
}

.contents2_left h2 {

    margin-bottom:30px;
}

.contents3 {
  margin-top:50px;
  display:flex;
  width: auto;
  height: auto;
}

.contents3 h2 {
  font-size:5vw;
}

.contents3 p {
  font-size:3vw;
}

.contents3_1, .contents3_2, .contents3_3, .contents3_4 {
  width: calc(100% / 4);
}

/* ---------------------- ↑ main_Container ↑ ---------------------- */

/* ---------------------- ↓ footer ↓ ---------------------- */
#footer_top {
  padding-top:50px;
  padding-bottom:50px;
  display: flex;
  justify-content: center;
  background-color:lightgray;
}

#footer_top_left {
    display: flex;
    width: 50%;
}

#footer_top_left a {

}

#footer_top_left p {
  margin-right : 20px;
}

#footer_top_right {
  display:flex;
  width: 50%;
}

.sns_icon {
  margin:0 10px 0 10px;
  width:auto;
  height:33%;
}
/*
#footer_top_left img {
  width:36px;
  height:36px;
}
*/
#footer_top p {
    margin-left: 20%;
}

.test {
  width:51px;
  height:36px;
  object-fit: contain;
}

.test2 {
  width:36px;
  height:36px;
  object-fit: contain;
}

.footer_title {
  padding-top:40px;
  padding-bottom:20px;
  padding-left:4%;
  font-size : 26px;
  font-weight: bold;
  background-color: gray;
  color : white;
}

#footer_center {
  padding-bottom:50px;
  display: flex;
  justify-content: center;
  background-color: #595959;
}

.fot_style {
  padding:16px 30px 16px 30px;
  width:25%;
  text-align: center;
  font-size:16px;
  color : white;
}

.fot_style a {
  color:inherit;
  text-decoration: none;
}

.fot_style a:hover {
  color:#333;
  text-decoration:underline;
}

.fot_style li {
  margin-top:2px;
}

.footer_s_title {
  margin-bottom:10px;
  font-size:20px;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
}

#copyright {
  padding-top : 10px;
  padding-bottom: 10px;
  text-align: center;
  background-color: black;
  color : white;
}
/* ---------------------- ↑ footer ↑ ---------------------- */