@charset "UTF-8";

@import url("tournament.css");

html {
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	font-size: 62.5%;
}
html * {
	box-sizing: border-box;
}
body {
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.6em;
	max-width: 500px;
}

/* ページトップボタン */

#page_top {
  width: 90px;
  height: 120px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page_top a {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #920000;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after {
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #920000;
}
@media screen and (max-width: 767px) {
	#page_top a::before {
		top: 0;
	}
	#page_top a::after {
		top: 65px;
	}
}

/* ドロワーメニュー */

.drawer-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* contents */
.contents__inner p span {
	border-bottom: 1px solid #fff;
}

/* drawer menu */

.drawer-menu {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	padding: 120px 0;
	background: #222;
	font-family: 'Lato', helvetica, arial, sans-serif;;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: perspective(500px) rotateY(-90deg);
	transform: perspective(500px) rotateY(-90deg);
	opacity: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.drawer-menu li {
	text-align: center;
}
.drawer-menu li a {
	display: block;
	text-decoration: none;
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	color: #fff;
	-webkit-transition: all .8s;
	transition: all .8s;
}
.drawer-menu li a:hover {
	color: #920000;
	background: #fff;
}
.drawer-menu li a img {
	vertical-align: middle;
}
.f-l-logo {
	display: inline-block;
}

/* #1a1e24 */

/* checkbox */

.check {
	display: none;
}

/* menu button - label tag */

#menu-btn {
	position: fixed;
	display: block;
	top: 50px;
	right: 40px;
	display: block;
	width: 40px;
	height: 40px;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	z-index: 910;
}
.bar {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 40px;
	height: 5px;
	background: #920000;
	-webkit-transition: all .5s;
	transition: all .5s;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}

.bar.middle {
	top: 15px;
	opacity: 1;
}
.bar.bottom {
	top: 30px;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
}
.menu-btn__text {
	position: absolute;
	bottom: -20px;
	left: 0;
	right: 0;
	margin: auto;
	color: #920000;
	-webkit-transition: all .5s;
	transition: all .5s;
	display: block;
	visibility: visible;
	opacity: 1;
}
@media screen and (max-width: 767px) {
	#menu-btn {
		top: 15px;
		right: 15px;
	}
	.menu-btn__text {
		bottom: -13px;
	}
	.bar {
		height: 4px;
	}
	.bar.middle {
		top: 12px;
	}
	.bar.bottom {
		top: 24px;
	}
}
@media screen and (max-width: 500px) {
	#menu-btn {
		transition: 0.5s;
	}
	#menu-btn.invert {
		top: 70px;
	}
}
/*@media screen and (max-width: 420px) {
	.menu-btn__text {
		display:none;
	}
}*/
#menu-btn:hover .bar {
	background: #920000;
}
#menu-btn:hover .menu-btn__text {
	color: #920000;
}
.close-menu {
	position: fixed;
	top: 0;
	right: 300px;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0);
	cursor: url(http://theorthodoxworks.com/demo/images/cross.svg),auto;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	visibility: hidden;
	opacity: 0;
}
@media screen and (max-width: 767px) {
	.drawer-menu {
		width: 200px;
		padding: 90px 0;
	}
	.drawer-menu li a {
		font-size: 11px;
		height: 40px;
    	line-height: 40px;
	}
	.drawer-menu li a img {
		width: 70%;
	}
	.close-menu {
		right: 200px;
	}
}

/* checked */

.check:checked ~ .drawer-menu {
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	opacity: 1;
	z-index: 900;
}
.check:checked ~ .contents {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: translateX(-300px);
	-ms-transform: translateX(-300px);
	transform: translateX(-300px);
}
.check:checked ~ #menu-btn .menu-btn__text {
	visibility: hidden;
	opacity: 0;
}
.check:checked ~ #menu-btn .bar.top {
	width: 56px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.check:checked ~ #menu-btn .bar.middle {
	opacity: 0;
}
.check:checked ~ #menu-btn .bar.bottom {
	width: 56px;
	top: 40px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.check:checked ~ .close-menu {
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	background: rgba(0,0,0,.5);
	visibility: visible;
	opacity: 1;
	z-index: 12;
}

/* メイン */
header {
	padding: 4.5% 0 3% 0;
	display:-webkit-flex;
	display: -moz-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	max-width: 500px;
	border-bottom: 6px solid #920000;
	transition: 0.5s;
}
header.scroll-nav {
	padding: 0;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.logo-c img {
	width: 100%;
	height: auto; /* 画像の高さに合わせて記述 */
	transition: 0.5s;
}
.logo-c:first-child {
	margin: 0;
}
.logo-c:last-child {
	margin: 0;
}
.letter-headline-c {
	text-align: center;
	margin: 0 auto;
	padding: 6% 0 5% 0;
}
.letter-headline-c img {
	width: 65%;
	height: auto;
}
.img-one {
	text-align: center;
	padding: 0 0 5% 0;
	opacity: 0;
}
.img-one img {
	width:100%;
	height: auto;
}
.img-one.img-animation {
	animation: img-opacity 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-timing-function: ease-in;
	overflow: hidden;
	position: relative;
}
.img-one.img-animation::before,
.img-one.img-animation::after {
  animation: img-animation 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-timing-function: ease-in;
  background: #fff;
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.img-one.img-animation::before {
  animation-name: img-animation-before;
  inset: 0 0 50%;
}
.img-one.img-animation::after {
  animation-name: img-animation-after;
  inset: 50% 0 0;
}
@keyframes img-opacity {
  100% {
    opacity: 1;
  }
}
@keyframes img-animation-before {
  100% {
    transform: translateX(100%);
  }
}

@keyframes img-animation-after {
  100% {
    transform: translateX(-100%);
  }
}
.letter-c {
	text-align: center;
	font-size: 45px;
	color: #920000;
	font-weight: bold;
	line-height: 1.5;
	margin: 0 auto 5% auto;
}
@keyframes fadeIn {
	to {
		opacity: 1;
	}
}
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {
	opacity: 0;
	animation: 2.0s linear forwards fadeIn;
}
.c1 {
	animation-delay: 0.0s;
}
.c2 {
	animation-delay: 0.2s;
}
.c3 {
	animation-delay: 0.4s;
}
.c4 {
	animation-delay: 0.6s;
}
.c5 {
	animation-delay: 0.8s;
}
.c6 {
	animation-delay: 1.0s;
}
.c7 {
	animation-delay: 1.2s;
}
.c8 {
	animation-delay: 1.4s;
}
.c9 {
	animation-delay: 1.6s;
}
.c10 {
	animation-delay: 1.8s;
}
.c11 {
	animation-delay: 2.0s;
}
.c12 {
	animation-delay: 2.2s;
}
.horizontal-rule {
	border-top: 3px solid #6e0d06;
	border-bottom: 3px solid #dbd902;
	margin: 0 auto;
}
.sns-area {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	margin: 35px 0 0 0;
}
.img-second {
	text-align: center;
	opacity: 0;
}
.sns-logo-c {
	width: 60%;
}
.img-second.img-animation {
	animation: img-opacity-second 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-timing-function: ease-in;
	overflow: hidden;
	position: relative;
}
.img-second.img-animation::before {
	animation: img-animation-second 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-timing-function: ease-in;
	background: #fff;
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}
@keyframes img-opacity-second {
	100% {
		opacity: 1;
	}
}
@keyframes img-animation-second {
	100% {
		transform: translateX(100%);
	}
}
.sns-notice {
	margin: 4% 3% 0 3%;
	padding: 0.5em 1em;
	color: #5d627b;
	background: white;
	border-top: solid 4px #920000;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	text-align: center;
	display: block;
}
.notice-heading {
	margin: 3% auto 4% auto;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
}
.heading-under {
	border-bottom: solid 1px #5d627b;
}
.notice-txt {
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 200%;
	text-align: left;
	display: inline-block;
}
.txt-color {
	color: #920000;
}
.btn-border-bottom {
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	padding: 0.25em 0;
	text-decoration: none;
	margin: 35px auto;
}
.btn-border-bottom:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 4px;
	top: 115%;
	left: 0;
	border-radius: 3px;
	background:#920000;
	transition: .2s;
}
.btn-border-bottom:hover:before {
	top: -webkit-calc(100% - 7px);
	top: calc(100% - 7px);
}
.link-area-c a:link, .link-area-c a:visited, .link-area-c a:hover, .link-area-c a:active {
	color: #333;
}
.link-area-c {
	text-align: center;
}
.f-container-c {
	display:flex;
	justify-content: space-around;
}
.a-icon {
	color: #dbd902;
}
.b-icon {
	color: #920000;
}
.c-icon {
	color: #000;
}
.d-icon {
	color: #666666;
}
.e-icon {
	color: #A0522D;
}
.f-1-icon {
	color: #1E90FF;
}
.horizontal-rule1 {
	border-top: 3px solid #6e0d06;
	border-bottom: 3px solid #dbd902;
	margin: 22px auto 48px auto;
}
.instagram-area {
	margin: 0 auto;
}
.instagram-media {
	width: 340px !important;
	max-height: 600px !important;
	margin: 0 auto !important;
	border-right: none !important;
	border-left: none !important;
}
.line-area-c {
	text-align: center;
}
.line-area-c iframe {
	width: 340px !important;
	max-height: 600px !important;
}
.facebook-area-c {
	margin: 0 auto;
	text-align: center;
}
.text-area-c {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #006400;
	margin: 30px auto;
}
.horizontal-rule2 {
	border-top: 1px solid #920000;
	margin: 0 auto;
}
.footer {
	margin: 0 auto;
	background-color: #f7f7f7;
	text-align: center;
}
p.copyright {
	margin: 10px auto 10px auto;
}
small {
	font-size: 15px;
	color: #666;
}
@media screen and (max-width: 555px) {
	small {
		font-size: 12px;
	}
}
@media screen and (max-width: 500px) {
	#logo-headline-c {
		position:-webkit-sticky;
		position: sticky;
		top: 0;
		background: white;
		z-index: 10;
	}
	header.scroll-nav {
		border-bottom: 2px solid #920000;
	}
	header.scroll-nav .logo-c img {
		width: 70%;
		transition: 0.5s;
	}
	header.scroll-nav .logo-c:first-child {
		text-align: right;
	}
	header.scroll-nav .logo-c:last-child {
		text-align: center;
	}
}
@media screen and (max-width: 339px) {
	.instagram-media {
		width: 100% !important;
		min-width: 100% !important;
	}
	.line-area-c iframe {
		width: 100% !important;
	}
}