/* @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"); */

/* @import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300&display=swap'); */

/* @import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap'); */

/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); */

.flex {
	display: flex;
}

/* .text-font {
	font-family: 'Noto Sans JP', sans-serif!important;
}
html,body,main{
	font-family: 'Noto Sans JP', sans-serif!important;
} */

body {
	/* font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; */
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	/* font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif!important; */
}

h1, h2, h3, h4, h5, h6, p, dl, dt, dd, span, a {
	/* font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; */
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	/* font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif!important; */
}

b, strong, .bold_pc {
	/* font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; */
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: bold;
	/* font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif; */
}

@media only screen and (max-width: 750px) {
	body {
		/* font-family: source-han-sans-japanese, sans-serif; */
		/* font-style: normal; */
		/* font-weight: 500 !important; */
	}

	h1, h2, h3, h4, h5, h6, p, dl, dt, dd, span, a {
		/* font-family: source-han-sans-japanese, sans-serif; */
		/* font-style: normal; */
		/* font-weight: 500 !important; */
	}

	b, strong, .bold {
		/* font-family: source-han-sans-japanese, sans-serif; */
		/* font-weight: 400; */
		/* font-style: normal; */
	}

	.bold_pc {
		/* font-family: source-han-sans-japanese, sans-serif; */
		/* font-weight: 300 !important; */
		/* font-style: normal; */
	}
}

::selection {
	background: rgb(65, 125, 255);
	color: none;
}

::-moz-selection {
	background: rgb(65, 125, 255);
	color: none;
}

::-webkit-scrollbar {
	width: 12px !important;
	background: #000;
}

.aamenu span {
	position: relative;
	top: 4px;
	padding-right: .2em;
}

::-webkit-scrollbar-track {
	border-radius: 15px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}

::-webkit-scrollbar-thumb {
	background-color: #3f3f3f;
	border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}

.menulist {
	white-space: nowrap;
}

footer {
	text-align: center;
	margin-top: auto;
	/* font-family: 'M PLUS Rounded 1c', sans-serif; */
}

main {
	/* background: yellow; */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/*body{
background:#2f3132 !important;
}
*/

.header_container {
	margin-right: 0px !important;
	width: 1000vw;
}

.sawashiro-logo {
	/* width: 7vw; */
	width: 120px;
	/* height:12%;  */
}

.icon {
	margin-right: 5px;
	margin-bottom: 5px;
}

.hicon {
	padding-left: 30px;
	line-height: 30px;
	margin-top: auto;
	background: url(../image/home.svg) no-repeat;
}

.modal-dialog {
	background: #2f3132 !important;
	color: #fff;
}

.site-header {
	background-color: rgba(255, 255, 255, 0.498);
	/* background-color: rgb(108 208 246 / 36%); */
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	/* backdrop-filter: saturate(180%) blur(20px); */
}

.header_buttom_index .py-2 {
	margin-right: 20px;
	/* margin-left: 20px; */
}

.mcenter {
	margin-top: auto;
	margin-bottom: auto;
}

.site-header a {
	color: #ffffff;
	/*font-family: 'Quicksand', sans-serif;*/
	font-size: 20px;
	/* transition: ease-in-out color .15s; */
	transition: cubic-bezier(0, 0.31, 0, 0.97) color .15s;

	margin: auto;
}

.site-header a:hover {
	color: #fff;
	text-decoration: none;
}

.product_c {
	margin-left: 30px;
	margin-top: auto;
	margin-bottom: auto;
}

.btn-sawashiro {
	color: white !important;
	/* background: #00ffe7; */
	background: #1476a6;
	padding: 20px;
	border-radius: 25px;
}

.btn-sawashiro:hover {
	background-color: white;
	/* color: #00ffe7!important; */
	color: #1476a6 !important;
	transition: .2s;
}

.error {
	margin-top: 70px;
	height: 100vh;
}

.main1 {
	margin-top: 80px;
}

.main2 {
	margin-top: 80px !important;
}

.btn-maid {
	background: #7289da !important;
	padding: 20px;
	color: #fff !important;
	border-radius: 20px;
	text-decoration: none;
}

.btn-maid:hover {
	text-decoration: none;
}

.rule {
	width: 70%;
	margin: 0 auto;
	text-align: left !important;
}

.aamenu a {
	/* font-family: 'Kiwi Maru', serif; */
}

.rule2 {
	width: 85%;
	margin: 0 auto;
	text-align: left !important;
}

.l1 {
	background: none !important;
	margin: 5px 0;
	border-color: #545 !important;
	color: #999;
	cursor: pointer;
}

.l1 .active {
	color: #aaa;
}

.sp-box {
	background: #dfdfdf;
	/* background-image: -webkit-radial-gradient(at 50% -16%, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.5) 190%); */
	/* background-image: radial-gradient(at 50% -16%, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.5) 190%); */
	/* background-blend-mode: normal,multiply; */
	color: #383838;
	padding: 4px;
	/* border-radius:20px; */
	/* margin-top: 5px; */
	font-size: 15px;
	/* padding-top: .5em; */
	/* margin-top: 1em; */
	/* font-family: 'Noto Sans JP', sans-serif; */
}

.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

.sp2 {
	display: none !important;
}

@media only screen and (max-width: 750px) {
	.pc {
		display: none !important;
	}

	.sp {
		display: flex !important;
	}

	.sp2 {
		display: block !important;
	}
}

.logo-main, .logo {
	border-radius: 50%;
}

img {
	pointer-events: none;
}

html, body, #wrap {
	height: 100%;
}

#wrap {
	position: relative;
}

#svg-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}

.dropdown:hover>.dropdown-menu {
	display: block;
}

.ho {
	display: none;
}

.fo:hover+.ho {
	display: initial;
}

.right {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.right::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: rgb(65, 125, 255);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}

.right:hover::after {
	transform: scale(1, 1);
}

section {
	/* margin-bottom: 20vh; */
}

.inline {
	display: inline;
	margin-top: auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: auto;
}

.submenu {
	/*transition: transform .3s;*/
	transition: .2s;
	background-color: rgba(47, 49, 50, 1.0);
	margin-top: 10px;
	/*color:#2f3132;*/
}

.submenu-all a {
	font-size: 18px !important;
}

.submenu-all {
	font-size: 14px;
	background-color: #2f3132;
	box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .6);
}

.submenu:hover {
	background-color: rgba(129, 129, 129, 0.3);
	transition: .3s;
}

/* .submenu:after{
	background-color: rgba(255,255,255, 0.3);
	transition: .1s;
} */

.refreshurl {
	color: #24b6ff;
	text-decoration: none;
}

.refreshurl:hover {
	color: #24b6ff;
}



/* @media screen and (max-width: 480px) {
	.sawashiro-logo{
		width:60%;
		height:70%; 
	}
} */

.text-color {
	color: #19191a;
}

::-webkit-scrollbar {
	width: 12px !important;
	background: #6cd0f6;
}

::-webkit-scrollbar-track {
	border-radius: 15px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}

::-webkit-scrollbar-thumb {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}

.submenu {
	/*transition: transform .3s;*/
	transition: .2s;
	background-color: #ffffff;
	margin-top: 10px;
	/*color:#2f3132;*/
}

.submenu-all a {
	font-size: 18px !important;
}

.submenu-all {
	font-size: 14px;
	background-color: #ffffff;
	box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .6);
}

.modal-dialog {
	background: #2f3132 !important;
	color: #000;
}

.site-header {
	/* background-color: rgba(47, 49, 50, .2); */
	/* background-color: rgb(108 208 246 / 36%); */
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	/* backdrop-filter: saturate(180%) blur(20px); */
	backdrop-filter: blur(3px);
}

.site-header a {
	color: #1476a6;
	/*font-family: 'Quicksand', sans-serif;*/
	font-size: 16px;
	transition: cubic-bezier(0, 0.31, 0, 0.97) .15s;
	margin-top: auto;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: auto;
	/* margin: auto; */
}

.site-header a:hover {
	color: #000;
	/* background-color: rgba(0, 0, 0, .2); */
	text-decoration: none;
}

.logged_icon {
	border-radius: 9999px;
}

.subwindow {
	right: 200px;
	position: absolute;
	width: 300px;
	/* height: 250px; */
	height: auto;
	background-color: white;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}

.passive {
	display: none;
}

.active {
	display: block;
}

.showModal {}

.subwindow h3 {
	text-align: left;
	margin-top: 8px;
	padding-left: 20px;
	font-weight: bold;
}

.subwindow>div {
	height: 90px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.subwindow h1, h2, h3, h4, h5, li, ul, a, p {
	color: #1476a6;
}

.subwindow ul {
	padding-left: 15px;
}

.subwindow ul li {
	list-style: none;
	font-size: 120%;
	font-weight: bold;
	font-size: 2rem;
}


.border-color {
	border-color: #19191a !important;
}

.border-color-flip {
	border-color: #fff !important;
}

.body {
	color: gray;
}


#footer {
	color: white;
}

#footer .content_line1 .content {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;

}

#footer .content_line1 .content>div {
	width: calc(100% / 5);
	padding-top: 10px;
}

#footer .content_line1 .content .offcer {
	background: white;
	padding: 10px 30px
}

#footer .content_line1 .content .offcer a,
#footer .content_line1 .content .offcer p,
#footer .content_line1 .content .offcer {
	color: #7289da
}

#footer .content_line1 .content .offcer h3 {
	background-color: #7289da;
	color: white;
}

#footer .content_line1 .content .offcer .fnotes img {
	width: 100%;
}

#footer .content_line1 .content .offcer p {
	text-align: left;
	font-size: 1.1em;
	font-weight: bold;

}

#footer .content_line1 .content div.link {
	text-align: left;
}

#footer .content_line1 .content h3 #footer .content_line1 .content li,
#footer .content_line1 .content ul,
#footer .content_line1 .content a {
	text-align: left;
	text-decoration: none;
	list-style: none;
}

#footer .content_line1 .content li a {
	text-decoration: none;
	color: white !important;
	transition: .5s;
}

#footer .content_line1 .content li a:hover {
	padding-left: 5px;
	color: rgb(40, 65, 255) !important;
}

#footer .content_line1 .content h3 {
	text-align: left;
	font-size: 1.4em;
	margin-bottom: 20px;
	padding: 8px 15px;
	width: fit-content;
	background-color: white;
	color: #7289da;
	font-weight: bold;
}

#footer .content_line1 .content .icon a {
	padding-right: 10px;
}

#footer .content_line1 .content .icon {
	display: flex;
	width: 2em;
}

#footer .content_line1 .content ul {
	padding-inline-start: 0px;
}

#footer #brand {
	display: flex;
}

#footer #brand .logo {
	width: calc(100% / 4);
	max-width: fit-content;
	margin-right: 50px;
}

#footer #brand .logo>div {
	display: flex;
}

#footer #brand .logo a {
	width: fit-content;
}

#footer #brand .content_brand {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
}


#footer #brand .content_brand #employment {
	margin-left: auto;

}

#footer #brand .content_brand h3,
#footer #brand .content_brand p {
	text-align: left;
}

#footer #brand .content_brand h3 {
	width: fit-content;
	background-color: white;
	color: #7289da;
	padding: 5px 10px;
	font-weight: bold;
}

#footer #brand .content_brand a {
	font-size: 25px;
	font-weight: bold;
	padding: 10px 30px;
	background-color: white;
	color: #7583ff;
	border-radius: 10px;

}

nav.spacing {
	height: 15px;
}

.footer_in {
	padding: 20px 30px 20px 30px;
}

.footer .content_line1 {
	display: flex;
}

.footer_b {
	color: white;
	margin-right: auto;
	margin-left: auto;
}

.right_line {
	border-right: 1px solid rgb(255, 255, 255);
	margin-left: 15px;
	margin-right: 15px;
}

.footer_b img {
	margin-top: auto;
	margin-bottom: auto;
	border-radius: 70px;
}

.link_author {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	width: 100%;
}

.link_author a {
	color: white;
}

.link_author a:hover {
	color: white;
}

.link_author ul {
	text-align: center;
	list-style-type: none;
	margin-bottom: 0px;
}

.link_author li {
	font-size: 15px;
	display: inline-block;
}

footer .sns h2 {
	color: white;
}

footer .sns .block {
	text-align: center;
}

footer .sns .icon {
	width: 40px;
	margin-right: 40px;
}

footer .copy {
	text-align: center;
}

.copy {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

footer .sns h2 {
	padding-right: 30px;
}

footer .sns li {
	text-align: left;
	font-size: 15px;
}

footer .sns ul {
	list-style: none;
}

footer .sns {
	text-align: center;
}

footer .block a {
	display: inline-block;
	font-size: 20px;
}

footer .block {
	margin-left: auto;
	margin-right: auto;
}

footer #logo {
	margin-right: auto;
	height: 70px;
}

footer #tea {
	margin-left: auto;
	padding-bottom: 20px;
	height: 90px;
}

footer p {
	color: white;
}

/* footer ul{
	list-style: none;
} */

footer {
	/* margin-top: 40px; */
	padding-top: 40px;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 40;
	color: #ffffff !important;
	background: #7583ff;
	/* font-family: 'M PLUS Rounded 1c', sans-serif; */
}

footer h5 {
	font-size: 25px;
}

footer li {
	color: #ffffff;
	font-size: 20px;
}

.bold {
	font-weight: bolder;
}

.uline {
	text-decoration: underline;
}

.mark {
	background-color: rgb(255, 255, 255);
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	padding: 0px 3px 0px 0px;
	margin: 1px;
}

mark {
	background-color: rgb(255, 255, 255) !important;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px !important;
	padding: 0px 3px 0px 0px !important;
	margin: 1px !important;
}

.mark_flip {
	background-color: #dfdfdf;
	;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	padding: 0px 3px 0px 0px;
	margin: 1px;
}

.mark_mention {
	background-color: rgba(88, 101, 242, 0.3);
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	padding: 0px 3px 0px 0px;
	margin: 1px;
}

.fixed {
	position: fixed;
}

/* ヘッダー */

.header_button {
	background: none;
	box-shadow: none;
	width: 50px;
	height: 50px;
	padding: 5px;
	border: none;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.header_mobile_title .menu {
	width: 100%;
	background: white;
	z-index: 50;
}

.site-header {
	width: 100%;
}

.menu-link {
	text-decoration: none;
	color: #1476a6;
	width: 100%;
}

.menu-list {
	padding-top: 20px;
	text-align: center;
	list-style-type: none;
	padding-left: 0;
}

/* .menu-list li{
	text-align: left;
} */

.menu-list a {
	color: #1476a6 !important;
}

#invite-link {
	background: #7289da;
	color: white !important;
	;
	padding: 10px 20px;
	border-radius: 20px;
}

.menu-list li {
	padding: 15px 15px;
}

.menu-img {
	background: url(/image/sawashiro_valentine.png);
	background-size: cover;
	background-position: center;
	padding: 0 !important;
}

.menu-col {
	height: 100%;
}

#menulist {
	position: relative;
	height: 20px;
	width: 28px;
	display: inline-block;
	box-sizing: border-box;
}

#menulist div {
	position: absolute;
	left: 0;
	height: 2px;
	width: 28px;
	background-color: #444;
	border-radius: 2px;
	display: inline-block;
	box-sizing: border-box;
	transition: .3s ease;
}

#menulist div:nth-of-type(1) {
	bottom: 20px;
}

.menu-active #menulist div:nth-of-type(1) {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 10px;
}

.menu-active #menulist div:nth-of-type(2) {
	display: none;
	opacity: 1;
}

.menu-active #menulist div:nth-of-type(3) {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	bottom: 8px;
}

#menulist div:nth-of-type(2) {
	bottom: 10px;
}

#menulist div:nth-of-type(3) {
	bottom: 0;
}

@media only screen and (min-width: 1069px) {
	.br-sp {
		display: none;
	}

	.header_mobile_title {
		display: none;
	}
}

@media only screen and (max-width: 1068px) {
	.sp-flex {
		display: flex;
	}

	.site-header {
		display: unset;
	}

	.header_container {
		display: none !important;
	}

	.header_mobile_title {
		margin-top: auto;
		margin-bottom: auto;
		margin-left: auto;
		transition: .6s;
	}

	.menu-active .menu {
		height: 110vh;
	}

	.menu {
		overflow-y: hidden;
		position: fixed;
		top: 0;
		left: 0;
		height: 0;
		transition: 0.5s ease;
	}

	.header_button #menulist {
		z-index: 60;
	}
}

.develop {
	position: fixed;
	bottom: 20px;
	padding: 10px 50px;
	left: 10px;
	z-index: 999;
	background-color: white;
}

.develop p {
	text-align: left;
	margin: 0px;
	font-size: 20px;
	color: #7583ff;
	letter-spacing: .1em;
	font-weight: bold;
}

/* hr {
	width: 40%;
	background-color: gray;
	border-top: 2px solid;
	margin-top: 30px;
	margin-bottom: 30px; */
/* } */
.pb {
	width: 20%;
	border-top: 3px solid;
	background-color: black;
	margin-top: 40px;
	margin-bottom: 40px;
}



p {
	color: black;
}

.usertag {
	font-size: 25px;
	font-weight: bold;
	margin-bottom: 0;
	margin-left: 15px;
	color: #1476a6;
}

.discord {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* メディアクエリ */
/* 
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
 */


@media screen and (max-width: 1268px) {

	#footer #brand .content_brand,
	#footer #brand {
		flex-wrap: wrap;
	}

	#footer #brand .content_brand {
		margin-bottom: 10px;
	}

}

@media screen and (max-width: 910px) {
	.menu-list li {
		padding: 8px 1px;
	}

	#footer .content_line1 .content>div {
		width: calc(100% / 3);

	}

	#footer #brand .logo {
		width: 100%;
	}

	#footer .content_line1 .content {
		flex-wrap: wrap;
		/* 折り返し指定 */
		justify-content: space-between;
		/*行方向(横方向)の子要素の余白均等配置 */
		row-gap: 20px;
		/* 行と行の間(縦方向)の余白 */
		padding-top: 10px;
	}

	#footer #brand .content_brand,
	#footer #brand {
		flex-wrap: wrap;
	}

	#footer #brand .content_brand {
		margin-bottom: 10px;
	}

	#footer #brand .content_brand #employment {
		margin: auto;
	}

	#footer .content_line1 .content .offcer {
		width: 50%;
	}
}

@media screen and (max-width: 480px) {
	#footer .content_line1 .content>div {
		width: 100%;
	}

	footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	.link_author li {
		width: 100%;
	}

	#footer .content_line1 .content .offcer {
		width: 100%;
	}

	.usertag {
		font-size: 20px;
	}
}

@media screen and (max-width: 381px) {
	.usertag {
		margin-top: 10px;
	}

	.discord {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;

	}
}