@charset "UTF-8";

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}

@media screen and (min-width: 768px){
.sp_only {display: none; }
}

@media screen and (max-width: 768px){
.pc_only {display: none; }
}

/* 全体の設定
-------------------------------------*/
html {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
    color: #000;
    background:#fff;
	font-family: 'Kosugi Maru', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin:0;
	padding:0;
}

h2{
	font-family: 'Charmonman', sans-serif;
	letter-spacing: 0.3rem; 
    font-size: 7rem;
    text-align: center;
}

h3{
	letter-spacing: -.1rem;
	font-weight: 300;
	margin-bottom: 4rem;
	color: #4186c9;
    font-size: 2rem;
	text-align: center;
}

h4{
	letter-spacing: -.1rem; 
	color: #533880;
    font-size: 2rem;
    text-align: center;
	margin: 2rem 0;
}

p {
    font-size: 2.3rem;
}

@media only screen and (max-width: 768px){
h2{
	letter-spacing: -.1rem; 
    font-size: 4.4rem;
    text-align: center;
}
h3{
	letter-spacing: -.1rem;
	font-weight: 300;
	margin-bottom: 3rem;
    font-size: 1.6rem;
	text-align: center;
}
h4{
	letter-spacing: -.1rem; 
    font-size: 1.8rem;
    text-align: center;
	margin: 2rem 0;
}
p {
    font-size: 1.9rem;
}
}

.btn {
	width: 86%;
	display: inline-block;
    font-size: 1.8rem;
	font-weight: 100;
	margin: 0.6rem 0 2em 0;
	text-decoration: none;
	color: #533880;
	border: solid 2px #533880;
	transition: .4s;
}

.btn a {
	color: #533880;
    display:block;
    text-decoration-line: none;
	padding: 1.2rem 1rem;
	position:relative;
    display:block;
    padding-left:17px;
}

.btn a::after {
  position: absolute;
  top: 50%;
  right: .4em;
  content: '';
  margin-top: -6px;
  border: 7px solid transparent;
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-left-color: #533880;
  transition: all .3s;
}

.btn:hover {
  background: #533880;
  color: #ffffff;
}

.btn a:hover { 
    color: #ffffff;
}

.btn a:hover::after {
  border-left-color: #ffffff;
}

/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 1000ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

/* 画面外にいる状態 */
.fadein_top {
	display: none;
	}

/*メイン画像
-------------------------------------*/
header {
    min-width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    height: 800px;
    background: url("../img/main.jpg")  center center / cover no-repeat;;
    background-size: cover;
    display: block;
    position: relative;
}

@media only screen and (max-width: 768px){
header {
    height: 500px;
    background: top url("../img/member_sp.png") no-repeat;
	background-size: cover;
}
	
header img {
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
}	

.top_img_01 {
	width: 1000px;
	position: absolute;
    top: 66%;
    transform: translateY(-50%) translateX(-50%);
	padding: 0 1.2rem;
}	
	
.top_img_02 {
	display: none!important;
}	
}

@media only screen and (max-width: 480px){
header {
    height: 470px;
    background: top url("../img/member_sp.png") no-repeat;
	background-size: cover;
}
	
header img {
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
}	

.top_img_01 {
	width: 1000px;
	position: absolute;
    top: 52%;
    transform: translateY(-50%) translateX(-50%);
	padding: 0 1.2rem;
}	
	
.top_img_02 {
	display: none!important;
}	
}

@media only screen and (min-width: 768px){
header img {
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
}

.top_img_01 {
	position: absolute;
    top: 47%;
    transform: translateY(-50%) translateX(-50%);
	padding: 0 1.2rem;
}	
	
.top_img_02 {
    top: 50%;
}		
}
/*PCメニュー
-------------------------------------*/
@media only screen and (max-width: 768px){
.menu_pc {
    display: none;
}
}

.menu_pc {
    width: 100%;
    height: 60px;
    margin-top: -10px;
    background: #4186c9;
    z-index: 2;
}
.menu_pc ul {
    display: flex;
    justify-content: space-between;
    margin: 10px auto 90px;
    padding: 0 1rem;
    max-width: 950px;
}

.menu_pc li {
    line-height: 60px;
    list-style: none;
}

.menu_pc li a {
	font-family: 'Charmonman', sans-serif;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 0.1em;
	text-decoration-line: none;
}

.menu_pc li a:hover {
	transition: all .3s;
    opacity: 0.74;
}

.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
	height: 70px;
}

/*SPメニュー
-------------------------------------*/
@media only screen and (min-width: 768px){	
.menu_sp {
    display: none;
}
}

@media only screen and (max-width: 768px){
/*　ハンバーガーボタン　*/
.hamburger {
	position: fixed;
    right: 0px;
    z-index: 10;
    width: 60px;
    height: 60px;
}
.hamburger span {
	display: block;
	position: absolute;
	width: 28px;
	height : 2px ;
	left: 16px;
	background : #4186c9;
	box-shadow: 0px 0px 2.6px 1.2px #ffffff;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 20px;
}
.hamburger span:nth-child(2) {
  top: 30px;
}
.hamburger span:nth-child(3) {
  top: 40px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
	top : 30px;
	left: 15px;
	background :#fff;
	box-shadow: none;
	-webkit-transform: rotate(-45deg);
	-moz-transform   : rotate(-45deg);
	transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
	top: 30px;
	background :#fff;
	box-shadow: none;
	-webkit-transform: rotate(45deg);
	-moz-transform   : rotate(45deg);
	transform        : rotate(45deg);
}

nav.globalMenuSp {
	z-index : 2;
	top  : 0;
	left : 0;
	color: #fff;
	background: -webkit-linear-gradient(#5f96cf, #80cee5);
	text-align: center;
	display: flex;
	position: fixed;
    justify-content: center;
    flex-direction: column;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: translateX(100vw);
	transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

nav.globalMenuSp ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;
	transition: .4s all;
}

nav.globalMenuSp ul li a {
	font-family: 'Charmonman', sans-serif;
	font-size: 2.2rem;
	display: block;
	color: #fff;
	padding: 0.4em 0;
	text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
	transform: translateX(0);
	opacity: 100;
    position: fixed;
}
}

/*グッズ&ニュース
-------------------------------------*/
.campaign{
	background-color: #ffffff;
	padding: 5rem 0 1rem;
	text-align: center;
}

.campaign h2{
	background: -webkit-linear-gradient(#5f96cf, #80cee5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.campaign h3{
	background: -webkit-linear-gradient(#5f96cf, #80cee5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.list {
	margin: -20px 80px;
}

.campaign .txt_01 {
	font-weight: 300;
    margin-bottom: 4rem;
    color: #4186c9;
    font-size: 3rem;
    text-align: center;
}

.campaign .txt_02 {
    padding: 3rem 0;
    color: #000000;
    font-size: 1.8rem;
	text-align:left;
	display: inline-block;
}

@media only screen and (max-width: 768px){
.campaign .txt_01 {
    margin-bottom: 3rem;
    font-size: 1.7rem;
    text-align: center;
	padding: 0 1.2rem;
}
.campaign .txt_02 {
	margin: 0 11px;
    color: #000000;
    font-size: 12px;
	text-align:left;
	display: inline-block;
}
}

/*商品イメージ
-------------------------------------*/
.image{
	background-color: #ffffff;
	padding: 5rem 0 1rem;
	text-align: center;
}

.image h2{
	background: -webkit-linear-gradient(#5f96cf, #cfabcf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.image h3{
	background: -webkit-linear-gradient(#5f96cf, #cfabcf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.image p {
	font-weight: 300;
    margin-bottom: 4rem;
    color: #4186c9;
    font-size: 3rem;
    text-align: center;
}

.image img {
	filter: drop-shadow(0 0 0.1rem #aaa);
}

.image .list {
	display: inline-block;
	margin: 2px 6px;
}

.category_btn {
    border-radius: 55px;
	display: inline-block;
    font-size: 1.8rem;
	font-weight: 100;
	margin: 0.6rem 0 2.4em 0;
	text-decoration: none;
	color: #533880;
	border: solid 2px #533880;
	transition: .4s;
}

.category_btn a {
	font-size: 1.6rem;
	color: #533880;
    display:block;
    text-decoration-line: none;
    padding: 1.6rem 10rem;
	position:relative;
    display:block;
}

.category_btn a::after {
  position: absolute;
  top: 50%;
  right: .4em;
  content: '';
  margin-top: -6px;
  border: 7px solid transparent;
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-left-color: #533880;
  transition: all .3s;
}

.category_btn:hover {
  background: #533880;
  color: #ffffff;
}

.category_btn a:hover { 
    color: #ffffff;
}

.category_btn a:hover::after {
  border-left-color: #ffffff;
}

@media only screen and (max-width: 768px){
.image p {
    margin-bottom: 3rem;
    font-size: 1.8rem;
    text-align: center;
	padding: 0 1.8rem;
}
	
.category_btn a {
	color: #533880;
    display:block;
    text-decoration-line: none;
	padding: 1.2rem 1.8em;
	position:relative;
    display:block;
}
}

/*スケジュール
-------------------------------------*/
.schedule h2{
	background: -webkit-linear-gradient(#5f96cf, #cfabcf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.schedule h3{
	background: -webkit-linear-gradient(#5f96cf, #cfabcf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media screen and (min-width: 768px){
.schedule {
    max-width: 1000px;
    margin: 0 auto;
}
	
.waku{
	background: #f4f4f4;
    margin: 1% 1%;
	width: 48%;
}

.schedule_bnr {
    padding: 0 10rem 2rem 10rem;
}
}

@media screen and (max-width: 768px){
.waku{
	background: #f4f4f4;
    margin: 3% 6%;
	width: 88%;
}
.schedule_bnr {
    padding: 0 2.1rem 1rem 2.1rem;
}
}

.schedule{
	padding: 5rem 0;
}

.waku_group{
	display: flex;
	margin-left: auto;
	margin-right: auto;
    text-align: center;
	flex-wrap: wrap;
	justify-content: space-between;
}

.bnr01 img {
    padding: 0 2rem 1rem 2rem;
}

.bnr01 img:hover {
	transition: all .3s;
    opacity: 0.74;
}

/*特典
-------------------------------------*/
.present{
	padding: 3rem 0;
}

.present h2{
	background: -webkit-linear-gradient(#c4a2dd, #83aae7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.present h3{
	background: -webkit-linear-gradient(#c4a2dd, #83aae7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.list {
	display: inline-block;
	margin: -90px 20px;
}

.present_bnr{
	text-align: center;
	filter: drop-shadow(0 0 0.1rem #aaa);
}

.present_bnr img{
    max-width: 80%;
}

@media only screen and (max-width: 768px){
.present_bnr img{
    max-width: 100%;
}
}

/*ニュース
-------------------------------------*/
.news {
	padding: 3rem 0;
}

.news h2{
	background: -webkit-linear-gradient(#83aae7, #4b80c4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.news h3{
	background: -webkit-linear-gradient(#83aae7, #4b80c4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media print, screen and (min-width: 768px){
.twitter {
    display: -ms-flexbox;
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
	position: relative;
    border: 2.6px solid #533880;
	height: 33.1rem;
}
	
.tw_title{
	width: 50%;
    height: 32.6rem;
}
	
.timeline{
	width: 50%;
	height: 35.6rem;
}
	
.tw_title img{
    width: 12rem;
    margin: 2rem 0 0;
}
.tw_title p{
	color: #533880;
    font-size: 2.4rem;
    text-align: center;
	margin: 1rem 0;
}
}

@media print, screen and (max-width: 768px){
.twitter {
    max-width: 1000px;
    margin: 2rem;
	position: relative;
    border: 2.6px solid #533880;
	height: 51rem;
}
.tw_title{
    height: 26.6rem;
}
.timeline{
	height: 26.6rem;
}
.tw_title img{
    width: 10rem;
    margin: 1.4rem 0 0;
}
.tw_title p{
	color: #533880;
    font-size: 1.6rem;
    text-align: center;
	margin: 1rem 0;
}
.tw_title .btn a {
	color: #ffffff;
    display: block;
    text-decoration-line: none;
    padding: 0.7rem 1rem;
}
}

.tw_title{
	background-color: #faf7ff;
	text-align: center;

}

.tw_title .btn {
	background: #533880;
	width: 70%;
	display: inline-block;
    font-size: 1.8rem;
	font-weight: 100;
	text-decoration: none;
	transition: .4s;
}

.tw_title .btn  a::after {
  position: absolute;
  top: 50%;
  right: .4em;
  content: '';
  margin-top: -6px;
  border: 7px solid transparent;
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-left-color: #ffffff;
  transition: all .3s;
}

.tw_title .btn a {
	color: #ffffff;
    display: block;
    text-decoration-line: none;
    padding: 1rem 1rem;
}

.tw_title .btn:hover {
	transition: all .3s;
    opacity: 0.6;
}

/*フッター
-------------------------------------*/
@media print, screen and (min-width: 768px){
footer {
	color: #ffffff;
    background: #4186c9;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 1rem 0;
	margin-top: 4rem;
}

footer img {
    padding: 2rem 0;
}
footer p {
	font-size: 1.6rem;
}
}

@media print, screen and (max-width: 768px){
footer {
	color: #ffffff;
    background: #4186c9;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 1rem 0;
}

footer img {
	width: 54%;
    padding: 2rem 0 1rem;
}

footer p {
	font-size: 1.2rem;
}
}
	

/*TOPへ戻る
-------------------------------------*/
.header-box {
	display: none;
}
#pagetop{
	content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 64px 64px;
    border-color: transparent transparent #ae298a transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    position: fixed;
}

#pagetop a{
  text-decoration: none;
}

#pagetop a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f106';
    font-size: 28px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 36px;
    top: 80px;
    bottom: 0;
    right: 4px;
    margin: auto;
    text-align: center;
}