@charset "UTF-8";

:root{
    --color_w:#fff;    
    --color_b:#000;
    --color_gray1:#fafafa;
    --color_gray2:#686868;
    --color_main1:#f63750/*ピンク*/;
    --color_main2:#162175/*青*/;
    --color_main3:#43256e/*紫*/;
}

/* Flex  ------------------------------------*/
.flexwrap{
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
}
.flexnowrap{
 display: -webkit-flex;
 display: flex;
 flex-wrap: nowrap;
 -webkit-flex-wrap: nowrap;
}
.JCfs{
 justify-content: flex-start;
 -webkit-justify-content: flex-start;
}
.JCfe{
 justify-content: flex-end;
 -webkit-justify-content: flex-end;
}
.JCc{
 justify-content: center;
 -webkit-justify-content: center;
}
.JCsb{
 justify-content: space-between;
 -webkit-justify-content: space-between;
}
.AIc{
    align-items: center;
    -webkit-align-items: center;
}
.AIs{
    align-items: stretch;
    -webkit-align-items: stretch;
}
.AIe{
    align-items: end;
    -webkit-align-items: end;
}
.mt05{
    margin-top: 0.5em;
}
.mt10{
    margin-top: 1em;
}
.mt20{
    margin-top: 2em;
}
.mt30{
    margin-top: 3em;
}
.mb05{
    margin-bottom: 0.5em;
}
.mb10{
    margin-bottom: 1em;
}
.mb20{
    margin-bottom: 2em;
}
.mb30{
    margin-bottom: 3em;
}
.mb50{
    margin-bottom: 5em;
}
.back-gray1{
    background-color: var(--color_gray1);
}
.back-main1{
    background-color: var(--color_main1);
}
.back-main2{
    background-color: var(--color_main2);
}
.back-main2{
    background-color: var(--color_main3);
}
.color-gray2,.color-gray2 a{
    color: var(--color_gray2);
}
.color-main1,.color-main1 a{
    color: var(--color_main1);
}
.color-main2,.color-main2 a{
    color: var(--color_main2);
}
.color-main3,.color-main3 a{
    color: var(--color_main3);
}
.font-i{
    font-style: italic;
}
li{
    list-style: none;
}
.pc_only{
    display: block;
    }
.pc_tab{
    display: block;        
    }    
.tab_only{
    display: none;
    }
.sp_only{
    display: none;
    }
.sp_only2{
    display: none;
    }
a img:hover{
	opacity:0.7;
	transition:0.3s;
}
.top-slider a img:hover{
	opacity:1;
	transition:0.3s;
}



/* footer固定　*/
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;    
    background: var(--color_gray1);        
}
/*　右クリック・長押し禁止　*/
body{
	user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
	-moz-user-select:none;
	-khtml-user-select:none;
	-khtml-user-drag:none;  
    
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    touch-callout:none;
    user-select:none;    
}
footer {
    margin-top: auto;
}

/* ページ共通  ------------------------------------*/

/* child rogo*/
.siteTitle{
    padding: 20px 0;
}
.siteTitle__link:hover::after {
	width: 100%;
	border-color: transparent;
}
.siteTitle__logo img{
    height:70px;
}
.breadcrumb{
    background: none;
    padding: 0;
}
.breadcrumb .container{
    margin: 0;
    width: 100%;
}
.breadcrumb a{
    color: var(--color_main1);
}
.pagetop{
    background: transparent !important;
}
.pagetop__link:hover{
    background: unset !important;    
}
/*
.content *:first-child{
    margin-top: 20px;
}*/

/* アコーディオンメニュー */
/* ハンバーガーメニュー */
#navArea_top nav,
#navArea_add nav,
#navArea nav {
  display: block;
  position: fixed;
  top: 0;
  right: -100%;
  bottom: 0;
  width: 100%;
  max-width: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 700;
  opacity: 0;
}
#navArea_top.open_top nav,
#navArea_add.open_add nav,
#navArea.open nav {
  right: 0;
  opacity: 1;   
}
#navArea_top nav .inner,
#navArea_add nav .inner,
#navArea nav .inner {
  width: 95%;
  max-width: 500px;
  height: auto;
  padding: 30px 10px;
  margin-left: auto;
  background: var(--color_w);
  border-radius: 15px 0 0 15px;    
}
#navArea_top nav .inner,
#navArea_add nav .inner{
  width: 95%;
  max-width: 500px;
  height: auto;
  padding: 30px 10px;
  margin-left: auto;
  background: var(--color_w);
  border-radius: 15px 0 0 15px;    
}
#navArea_top nav .inner ul,
#navArea_add nav .inner ul,
#navArea nav .inner ul {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;    
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    width: 100%;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
}
#navArea_top nav .inner ul li,
#navArea_add nav .inner ul li,
#navArea nav .inner ul li {
  width: 100%;
  margin: 0;
  text-align: center;
  z-index: 444;
}
#navArea_top nav .inner ul li a,
#navArea_add nav .inner ul li a,
#navArea nav .inner ul li a {
  display: block;
  color: var(--color_main1);
  font-size: 1.8rem;
  padding: 15px 0;
  text-decoration: none;
  transition-duration: 0.2s;
  font-weight: 700;
}
/* submenu　装飾　*/
.footerNavi__list li .sub-menu li::before,
#navArea_top nav .inner .sub-menu li::before,
#navArea_add nav .inner .sub-menu li::before,
#navArea nav .inner .sub-menu li::before{
    content: '';
    flex-grow: 0.05;/* 余白を分け与える */
    height: 1px;
    background: var(--color_main1);
  margin-right: 10px;
}
.footerNavi__list li .sub-menu li,
#navArea_top nav .inner .sub-menu li,
#navArea_add nav .inner .sub-menu li,
#navArea nav .inner .sub-menu li {
  display: flex;
  align-items: center;
  justify-content: center;
    height: 30px;
}
.footerNavi__list li .sub-menu li a,
#navArea_top nav .inner .sub-menu li a,
#navArea_add nav .inner .sub-menu li a,
#navArea nav .inner .sub-menu li a{
    font-weight: 400;
    padding: 0;
}
#navArea_top nav .inner .sub-menu li:last-child,
#navArea_add nav .inner .sub-menu li:last-child,
#navArea nav .inner .sub-menu li:last-child{
    margin-bottom: 10px;
}
#navArea_top nav .inner #HEADER_CHILD,
#navArea_add nav .inner #HEADER_CHILD,
#navArea nav .inner #HEADER_CHILD{
    padding: 20px 0;
    display: -webkit-flex;
    display: flex;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;    
    justify-content: center;
    -webkit-justify-content: center;    
}
#navArea_top nav .inner #HEADER_CHILD li,
#navArea_add nav .inner #HEADER_CHILD li,
#navArea nav .inner #HEADER_CHILD li{
    margin: 0 10px;
    border: 2px solid var(--color_main1);
    background: var(--color_main1);
    border-radius: 25px;
    text-align: center;
    width: calc((100% - 40px)/2);
    height: 40px;
    line-height: 36px;
    padding: 0;
}
#navArea_top nav .inner #HEADER_CHILD li:hover,
#navArea_add nav .inner #HEADER_CHILD li:hover,
#navArea nav .inner #HEADER_CHILD li:hover{
    background: var(--color_w);
    transition: 0.3s
}
#navArea_top nav .inner #HEADER_CHILD li a,
#navArea_add nav .inner #HEADER_CHILD li a,
#navArea nav .inner #HEADER_CHILD li a{
    color: var(--color_w);
    font-weight: 800;
    display: block;
    padding: 0;
}
#navArea_top nav .inner #HEADER_CHILD li:hover a,
#navArea_add nav .inner #HEADER_CHILD li:hover a,
#navArea nav .inner #HEADER_CHILD li:hover a{
    color: var(--color_main1);
}

#navArea_top nav .inner #HEADER_CHILD li a::after,
#navArea_add nav .inner #HEADER_CHILD li a::after,
#navArea nav .inner #HEADER_CHILD li a::after{
    content: "";
    background-image: url("../images/arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 5px center;
    display: inline-block;
    height: 20px;
    width: 25px;
    vertical-align: sub; 
    filter: brightness(0) invert(1);
}
#navArea_top nav .inner #HEADER_CHILD li:hover a::after,
#navArea_add nav .inner #HEADER_CHILD li:hover a::after,
#navArea nav .inner #HEADER_CHILD li:hover a::after{
    filter: invert(27%) sepia(86%) saturate(2449%) hue-rotate(335deg) brightness(101%) contrast(93%);
}
/* toggle_btn */
.toggle_btn_top,
.toggle_btn_add,
.toggle_btn {
  display: block;
  position: fixed;
  top: 15px;
  right: 20px;
  width: 55px;
  height: 55px;
  transition: all .5s;
  cursor: pointer;
  z-index: 9999;
  background: #dfdfdf;
  border-radius: 50%;
  border: 1px solid var(--color_w);
}
.toggle_btn_top span,
.toggle_btn_add span,
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  background-color: var(--color_main2);
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn_top span:nth-child(1),
.toggle_btn_add span:nth-child(1),
.toggle_btn span:nth-child(1) {
  width: 25px;
  top: 18px;
  left: 14px;
}
.toggle_btn_top span:nth-child(2),
.toggle_btn_add span:nth-child(2),
.toggle_btn span:nth-child(2) {
  width: 25px;
  top: 27px;
  left: 14px;
}
.toggle_btn_top span:nth-child(3),
.toggle_btn_add span:nth-child(3),
.toggle_btn span:nth-child(3) {
  width: 25px;
  top: 36px;
  left: 14px;
}
.toggle_btn_top:hover,
.toggle_btn_add:hover,
.toggle_btn:hover{
    color:var(--color_main2);   
}
.open_top .toggle_btn_top,
.open_add .toggle_btn_add,
.open .toggle_btn{
    position: fixed;
}
.open_top .toggle_btn_top span,
.open_add .toggle_btn_add span,
.open .toggle_btn span {
  background-color: var(--color_main2);
}
.open_top .toggle_btn_top span:nth-child(1),
.open_add .toggle_btn_add span:nth-child(1),
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(-320deg);
  transform: translateY(8px) rotate(-320deg);
}
.open_top .toggle_btn_top span:nth-child(1),
.open_add .toggle_btn_add span:nth-child(2),
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open_top .toggle_btn_top span:nth-child(3),
.open_add .toggle_btn_add span:nth-child(3),
.open .toggle_btn span:nth-child(3) {
  width: 25px;
  left: 14px;    
  -webkit-transform: translateY(-10px) rotate(320deg);
  transform: translateY(-10px) rotate(320deg);
}
/*============
#mask
=============*/
#mask_top,#mask_add,#mask {
  display: none;
  transition: all .5s;
}
.open_top #mask,
.open_add #mask,
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0.5;
  z-index: 2;
  cursor: pointer;
}


/* ページナビ */
.pager{
    margin: 2em auto;
}
.wp-pagenavi span.current,
a.page-numbers, span.page-numbers.current{
    border: var(--color_main1) 1px solid;  
    color: var(--color_main1);    
}
a.page-numbers:hover, span.page-numbers.current{
    background: var(--color_main1);
    color: var(--color_w);
    border: var(--color_main1) 1px solid;
}
.subPager{
    display: none;
}

/* PAGE TOP*/

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 30px;
  bottom: -50px;
  opacity: 0.6;
  border-radius: 50%;
    z-index: 1;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-weight: 900;
  content: url(../images/pageup.svg);
  position: absolute;
  width: 20px;
  height: 20px;
  top: -5px;
  bottom: 0;
  right: 5px;
  left: 0;
  margin: auto;
  text-align: center;
}

#HEADER_CHILD{
    padding: 20px 15px 0 0;
    display: -webkit-flex;
    display: flex;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;    
    justify-content: flex-end;
    -webkit-justify-content: flex-end;    
}
#HEADER_CHILD li{
    margin: 0 0 0 15px;
    border: 2px solid var(--color_main2);
    border-radius: 25px;
    text-align: center;
    width: auto;
    height: 40px;
    line-height: 36px;
    padding: 0 5px 0 20px;
}
#HEADER_CHILD li a{
    color: var(--color_main2);
    font-weight: 900;
    display: block;
}
#HEADER_CHILD li a::after{
    content: "";
    background-image: url("../images/arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 5px center;
    display: inline-block;
    height: 15px;
    width: 30px;
    vertical-align: sub; 
    filter:brightness(0) saturate(100%) invert(7%) sepia(71%) saturate(5617%) hue-rotate(238deg) brightness(100%) contrast(95%);
}

.l-hExtra,
.l-hMain{
    background: var(--color_w);
    padding: 0;
}
.l-main.l-main-single{
    padding: 0;
}
.archive-title{
	margin-bottom:40px;
    padding: 2em 0 4em;
    color: var(--color_main1);
    font-weight: 900;
    width: 100%;
    text-align: center;
    background: var(--color_w);
}
.archive-title h1{
    font-size: 6rem;
}
.archive-title p{
    margin: 0.5em auto;
    font-size: 2.5rem;
    text-align: center;
    font-style: normal;
}
.archive-title .menu{
    width: 100%;
    margin: 10px auto 1em;
}
.archive-title .menu li{
    padding: 0 0 5px;
    margin: 0 10px;
}
.archive-title .menu li a{
    font-weight: 600;
    font-size: 1.2rem;
}
.archive-title .menu li.current{
    border-bottom: 1px solid var(--color_main1);
}
.archive-title .menu li:hover{
    border-bottom: 1px solid var(--color_main1);
    transition: 0.3s;
}
.single-f{
    margin: 0 auto 2em;
    width: 95%;
    max-width: 1100px;
}
.single-f article{
    padding: 20px 25px;
    background: var(--color_w);
    border-radius: 25px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}

.viewall{
    width: 100%;
    padding-left: 15px;
}
.viewall a{
    color: var(--color_w);  
}
.top-member-box .bt span::after,
.viewall::after{
    content: "";
    background-image: url("../images/arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 10px center;
    display: inline-block;
    height: 15px;
    width: 30px;
    vertical-align: sub;    
}
.font-i p{
    font-style: normal;
}

/* gtranslate */
.gtranslate_wrapper{
    margin-right: 50px;
    padding: 20px 50px 0 0;
    width: 140px;
}
.top-header .gtranslate_wrapper{
    margin-right: 0;
    padding: 5px 50px 0 0;    
}
select.gt_selector{
    border: 2px solid var(--color_main2);
    border-radius: 25px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    color: var(--color_main2);
    font-weight: 900;
    width: 140px;
}

/* TOP  ------------------------------------*/
.top-header{
    width: 100%;   
    max-width: 1100px;
    margin: 0 auto 1em;
}
.TOPMAINNavi{
    display: none;
    position: fixed;
    width: 100%;
    margin-top: -55px;
    z-index: 9999;
}
.TOPMAINNavi #HEADER_CHILD li{
    background: var(--color_w);
}
.TOPMAINNavi #HEADER_CHILD li:hover{
    background: var(--color_main2);    
    transition: 0.3s;
}
.TOPMAINNavi #HEADER_CHILD li:hover a{
    color: var(--color_w);    
    transition: 0.3s;
}
.TOPMAINNavi #HEADER_CHILD li:hover a::after{
    filter: brightness(0) invert(1);
    transition: 0.3s;
}
.TOPMAINNavi .toggle_btn{
    top: 10px;
}
.TOPMAINNavi #HEADER_CHILD{
    padding: 20px 100px 0 0;
}

.logo_menu .top-menu{
    position: relative;
    border-radius: 26px;
    border: 2px solid var(--color_main2);
    height: 50px;
    margin-bottom: 1em;
    width: 90%;
}
.logo_menu .top-menu:hover{
    background: var(--color_main1);
    transition: 0.3s;
}
.logo_menu .top-menu a{
    display: block;
}
.logo_menu .top-menu img{
    vertical-align: text-bottom;
    width: auto;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.logo_menu .top-menu.nav img{
    top:50%;
    left:30%;
    transform:translateX(-30%);
    transform:translateY(-50%);
}
.logo_menu #navArea_top{
    position: relative;       
    width: 100%;
    height: 100%;
}
.logo_menu .toggle_btn_top{
    position: relative;   
	border-radius:unset;
	background-color: transparent;
    border: unset;
    width: 100%;
    height: 48px;
    top: 0;
    right: 0;
}
.logo_menu .toggle_btn_top span:nth-child(1) {
  width: 25px;
  top: 14px;
  right: 40px;
  left: unset;
}
.logo_menu .toggle_btn_top span:nth-child(2) {
  width: 25px;
  top: 22px;
  right: 40px;
  left: unset;
}
.logo_menu .toggle_btn_top span:nth-child(3) {
  width: 25px;
  top: 30px;
  right: 40px;
  left: unset;
}
.logo_menu .open_top .toggle_btn_top span:nth-child(1) {
  -webkit-transform: translateY(7px) rotate(-315deg);
  transform: translateY(7px) rotate(-315deg);
}
.logo_menu .open_top .toggle_btn_top span:nth-child(3) {
  width: 25px;
  left: unset;
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}

.top-up-back{
    background-image: url(../images/top_back.png);
    background-position: top 400px center;
    background-repeat: no-repeat;
    background-size: cover;    
}
.top-up{
    width: 95%;
    max-width: 1100px;
    margin: auto;
    padding-bottom: 2em;
}
.logo_menu{
    width: 250px;
    margin-top: -20px;
}
.logo_menu h1 img{
    width: 100%;
    max-width: 200px;
    height: auto;
}
.slider{
    width: calc(100% - 250px);
}
.top-news{
    background: var(--color_w);
    padding: 20px;
    border-radius: 20px;
    width: 95%;
    max-width: 1100px;
    margin: 2em auto 1em;
}
.top-news h2{
    font-size: 5rem;
    width: 30%;
}
.top-news h2 p{
    font-size: 2rem;    
}
.top-news-r{
    width: 70%;
}
.top-news-r a{
    width: 100%;
    padding: 20px 5px 25px;
    border-bottom: 1px solid var(--color_main1);
    display: block;    
    margin-bottom: 1em;
}
.top-news-r a:hover{
    border-bottom: 1px solid var(--color_main2);    
    transition: 0.3s;
}
.top-news-r a:hover h3{
    color:var(--color_main2);
    transition: 0.3s;
}
.top-news-r .day{
    width: 100px;
}
.top-news-r .h3{
    width: calc(100% - 100px);
}
.top-up-back .viewall::after{
    filter: brightness(0) invert(1);
}
.top-up-back .bt{
    width: 350px;
    text-align: center;
    margin: 2em auto 4em;
    padding: 0;
    border-radius: 13px;
    height: 26px;
    line-height: 26px;
}
.top-up-back .bt a{
    color: var(--color_w);
}
.top-up-back .bt:hover{
    background-color: var(--color_w);
    transition: 0.3s;
}
.top-up-back .bt:hover a{
    color: var(--color_main1);
    transition: 0.3s;
}
.top-up-back .viewall:hover::after{
    filter: invert(27%) sepia(86%) saturate(2449%) hue-rotate(335deg) brightness(101%) contrast(93%);
    transition: 0.3s;
}
.top-member-f{
    width: 100%;
    padding: 4em 0;
    border-radius: 15px 15px 0 0;
}
.top-member-box{
    width: 95%;
    max-width: 1100px;
    min-height: 400px;
    margin: auto;
    background-image:url(../images/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 250px;
    background-color: rgba(250,250,250,0.93);
    background-blend-mode: lighten;
    padding: 30px;
    position: relative;
}
.top-member-box-in{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);    
}
.top-member-f h2{
    width: 100%;
    text-align: center;
    font-size: 6rem;
}
.top-member-f h2 p{
    text-align: center;
    font-size: 2rem;
}
.top-message{
    margin: 2em auto 4em;
}
.message-f{
    text-align: center;
    margin: 3em auto 0;
    max-width: 900px;
    width: 95%;
}
.message-bg-anime {
  width: 100%;
  padding-top: 233px;
  background: url("../images/message_back.png");
  background-size: 2000px 233px;
  background-repeat: repeat-x;
  animation: message-anime 15s linear infinite;
  margin-top: -150px;    
}
@keyframes message-anime {
    0% { background-position: 0 0;}
  100% { background-position: -1500px 0;}
}

.top-member-box .bt{
    text-align: center;
    margin: 3em auto;
    max-width: 400px;
    width: 95%;
    height: 30px;
    line-height: 28px;
    background: var(--color_main2);
    border: 2px solid var(--color_main2);
    border-radius:16px; 
}
.top-member-box .bt a{
    color: var(--color_w);
    display: block;
}
.top-member-box .bt span::after{
    filter: brightness(0) invert(1);
}
.top-member-box .bt:hover a{
    color: var(--color_main2);    
    transition: 0.3s;
}
.top-member-box .bt:hover{
    background-color: var(--color_w);
    transition: 0.3s;
}
.top-member-box .bt span:hover::after{
   filter: invert(9%) sepia(78%) saturate(3554%) hue-rotate(233deg) brightness(102%) contrast(99%);
}
.top-contents h2{
    font-size: 6rem;
    text-align: center;
    width: 100%;
    margin-bottom: 1em;
}
.top-contents h2 p{
    font-size: 2rem;
    text-align: center;
    width: 100%;
}
.top-contents h3{
    font-size: 4rem;
    text-align: center;
    width: 100%;
    margin-bottom: 1em;
}
.top-contents h4{
    margin-top: 1em;
}
.top-contents ul.photo-slider li h4,
.top-contents ul.topics-slider li h4{
    margin-top: 10px;
}


/* NEWS  ------------------------------------*/
.news-f{
    margin: 1em auto;
    width: 95%;
    max-width: 1100px;
}
.news-f ul li{
    margin-right: 15px;
}
.news-f .news-box{
    margin: 0 auto 2em;
    border-radius: 5px;
    padding: 25px 20px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
    background: var(--color_w);
}
.news-f .news-box:hover{
    box-shadow: 0 0 10px 5px rgba(246, 55, 80, 0.1);
    transition: 0.3s;
}
.news-box .day{
    width: 120px;
}
.news-box h3{
    width: calc(100% - 120px);
}
.news-f .news-box:hover h3{
    color: var(--color_main1);
}
.news-single-f .day{
    font-weight: 900;
    color: var(--color_main1);
    margin:1em 0 1.5em;
}
.news-single-f h2{
    color: var(--color_gray2);
    font-weight: 400;
    border-bottom: 1px dotted var(--color_gray2);
    padding-bottom: 15px;
    font-size: 2.3rem;
    line-height: 1.5;
}
.single-f .viewall{
    width: 100%;
    padding: 0;
    margin: 5em 0 8em;
    text-align: center;
}
.single-f .viewall a{
    color: var(--color_main2);
}
.single-f .viewall:hover a{
    color: var(--color_main1);
}
.single-f .viewall::after{
    filter: brightness(0) saturate(100%) invert(7%) sepia(71%) saturate(5617%) hue-rotate(238deg) brightness(100%) contrast(95%);
    transition: 0.3s;
}
.single-f .viewall:hover::after{
    filter: invert(27%) sepia(86%) saturate(2449%) hue-rotate(335deg) brightness(101%) contrast(93%);
    transition: 0.3s;
}
.single-f .content{
    margin: 30px 0 60px;
    font-size: 1.3rem;
    color: var(--color_gray2);    
}
.single-f .content img{
    padding-right: 8px;
}
.single-f .content p{
    margin-top: 5px;
}
.single-f .content a{
    color: var(--color_main1);
    border-bottom: 1px solid var(--color_main1);
}
.single-f .content a:hover{
    border-bottom: none;
    transition: 0.3s;
}

/* VIDEO & PHOTO  ------------------------------------*/
.photo-f .viewall-bt,
.video-f .viewall-bt{
    width: 200px;
    margin: 50px auto 100px;    
    background: var(--color_main2);
    border: 2px solid var(--color_main2);
    height: 30px;
    line-height: 28px;
    border-radius: 16px;
    text-align: center;
}
.photo-f .viewall-bt:hover,
.video-f .viewall-bt:hover{
    background: var(--color_w);    
    transition: 0.3s;
}
.photo-f .viewall-bt:hover a,
.video-f .viewall-bt:hover a{
    color: var(--color_main2);
    transition: 0.3s;
}
.photo-f .viewall-bt a,
.video-f .viewall-bt a{
    display: block;
    color: var(--color_w);
}
.photo-f .viewall::after,
.video-f .viewall::after{
    filter: brightness(0) invert(1);
}
.photo-f .viewall:hover::after,
.video-f .viewall:hover::after{
    filter: brightness(0) saturate(100%) invert(7%) sepia(71%) saturate(5617%) hue-rotate(238deg) brightness(100%) contrast(95%);
    transition: 0.3s;
}
.photo-slider .box-img,
.topics-slider .box-img{
    position: relative;
}

ul.photo-slider li,
ul.topics-slider li{
    margin: 10px;
    padding: 10px;
    border: 1px solid var(--color_main1);
    border-radius: 20px;
    text-align: center;
    position: relative;
}
ul.photo-slider li .box-img,
ul.topics-slider li .box-img{
    aspect-ratio:16 / 9;    
}
ul.slick-dots li{
    border: unset;    
    margin: 0;
    padding: 0;
}

/* archive */
.videobox-f{
    margin: 0 auto 5em;
    width: 100%;
}
.videobox-f .box{
    margin: 10px;
    width: calc((100% - 60px)/3);
    border: 1px solid var(--color_gray2);
    border-radius: 15px;
    padding: 15px;
    position: relative;
}
.photo-slider .box-img img{
    aspect-ratio:16 / 9;
    position: relative;
    overflow: hidden;
}
.videobox-f .box .box-img{
    aspect-ratio:16 / 9;
    overflow: hidden;
}
.photo-slider .box-img img,
.topics-slider .box-img img,
.videobox-f .box .box-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    object-position: top center;
}
.photobox-f .box .box-img img{
    object-position: top center;
}
.photo-slider .fc,
.topics-slider .fc,
.videobox-f .box .box-img .fc{
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}
.photo-slider .fc,
.topics-slider .fc{
    top: 0;
    right: 0;
}
.photo-f .photo-slider .fc img,
.video-f .topics-slider .fc img{
    width: 40px;
    height: auto;
    border-radius: unset;
    aspect-ratio:1 / 1;
}
.videobox-f .box .box-img .fc img{
    width: 30px;
    height: auto;
    border-radius: unset;
    aspect-ratio:1 / 1;
}

.videobox-f .box h3{
    margin: 5px 0;
    font-weight: 400;
    line-height: 1.3;
}
.videobox-f .box .day{
    font-size: 1.2rem;
    font-weight: 900;
}
/* fc only */
.videobox-f .box .fc_only{
    content: "";
    background-image: url("../images/fc_only.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 5px center;
    display: inline-block;
    height: 15px;
    width: 30px;
    vertical-align: sub; 
}
.photo-f ul.photo-slider li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* video comments */
.single-f .comments{
    border-top: unset;
    background: var(--color_w);
    border-radius: 15px;
    padding: 15px;
}
.single-f .comment-f h2{
    font-size: 2rem;
    margin: 1em 0;
}
.single-f .logged-in-as{
    display: none;
}
.single-f .comment-form-comment{
    margin: 1em 0;
}
.single-f .comment-respond .submit, .single-f .comments__list .comment-reply-link{
    background: var(--color_main2);
    color: var(--color_w) !important;
    border-color: var(--color_main2);
    padding: 3px 15px;
}
.single-f .comment-respond .submit:hover, .single-f .comments__list .comment-reply-link:hover{
    border-color: var(--color_main2);
    background: var(--color_w);
    color: var(--color_main2) !important;    
}
.single-f .form-submit{
    text-align: right;
}

.single-f .comments__list li{
    border: unset;
}
.single-f .comments__list .comment-meta{
    background: unset;
}
.single-f .comments__list .comment-meta,.single-f .comments__list .comment-meta a{
    color: var(--color_gray2);
}

/* single */
.single-f .content{
    position: relative;
}
.single-f .fc,
.single-f .content .fc{
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;    
}
.single-f .fc img,
.single-f .content .fc img{
    width: 50px;
    height: auto;
}
.single-f.photo-single-f{
    padding: 3em 2em 2em;
}
.single-f.photo-single-f .photo a img,
.photo-single-f .photo img{
    margin: 10px;
    width: calc((100% - 60px)/3);
}
.single-f.photo-single-f a,
.single-f.photo-single-f a img{
    border-bottom: unset;
}
.single-f.photo-single-f .video iframe{
    margin-bottom: 1em;
    aspect-ratio:16 / 9;    
    margin: auto;
    width: 100%;
    height: 100%;
}
.single-f.photo-single-f h3{
    color: var(--color_gray2);
    line-height: 1.5;
    border: unset;
    border-left:unset;
    padding: 10px;
    margin-top: 0;
}
.single-f.photo-single-f .day{
    font-size: 1.2rem;
    font-weight: 900;    
    padding-left: 10px;
}
.single-f.photo-single-f .text{
    line-height: 1.8;
    padding: 10px;
}
.single-f .wp-video{
    margin-top: auto;
}
.single-f .bt{
    margin: 1em 0 1em auto;
    width: 120px;
    height: 30px;
    line-height: 31px;
    background: var(--color_b);
    border-radius: 15px;
    text-align: center;
}
.single-f .bt a{
    color: var(--color_w);    
    font-size: 1rem;
    display: block;
}
.single-f .bt:hover{
    background: var(--color_main1);
    transition: 0.3s;
}

.single-f .bt img{
    filter: brightness(0) invert(1);
    vertical-align: text-bottom;
    height: 14px;
    width: auto;
    padding-left: 3px;
}
.border-frame{
    background: linear-gradient(160deg, var(--color_main1) 0%, var(--color_main2) 100%);
    border-radius: 15px;
    padding: 2px;
    position: relative;
    z-index: 2;
}
.message-f article,
.photo-single-f article{
    padding: 20px 25px;
    background: var(--color_w);
    border-radius: 15px;
    box-shadow: unset;    
}

/* SHOP  ------------------------------------*/
.shop-f{
    width: 100%;
    margin: 0 0 5em;
}
.shop-f .box{
    margin: 10px;
    width: calc((100% - 60px)/3);
    background: var(--color_w);
    padding: 15px;    
}
.shop-f .box .box-img{
    aspect-ratio:1 / 1;    
    padding: 15px;
    position: relative;    
}
.shop-f .box .box-img .soldout{
    background: rgba(22,33,117,0.9);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.shop-f .box .box-img .soldout p{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color: var(--color_w);
    font-weight: 600;
    font-size: 2rem;
}
.shop-f .box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-f .box h3{
    margin: 10px 0;
}
.shop-f .box .price{
    text-align: right;
    width: 100%;
}
.shop-f .box .price span{
    font-weight: 0.9rem;
}
/* shop single */
.shop-single-f h2{
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color_main2);
    border-image: linear-gradient(to right, var(--color_main2), var(--color_main1)) 1;
}

/* MEMBERSHIP  ------------------------------------*/
.membership-f #HEADER_CHILD{
    margin: 0 auto 5em;
    justify-content:center;
    -webkit-justify-content:center;
    padding: 0;
}
.membership-f #HEADER_CHILD li{
    margin: 0 15px;
}
.membership-f #HEADER_CHILD li:hover{
    background: var(--color_main2);
    transition: 0.3s;
}
.membership-f #HEADER_CHILD li:hover a{
    color: var(--color_w);
    transition: 0.3s;
}
.membership-f #HEADER_CHILD li:hover a::after{
    filter: brightness(0) invert(1);
    transition: 0.3s;
}
.membership-f .title{
    margin: 0 auto;
    background: var(--color_main1);
    border-radius: 15px 15px 0 0;
    width: 80%;
    max-width: 300px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: var(--color_w);
}
.membership-f article{
    padding: 50px;
}
.membership-f ul.text{
    margin: 2em auto;
    width: 80%;
}
.membership-f ul.text li{
    width: 50%;
    padding: 15px 0;
    color: var(--color_main2);
}
.membership-f ul.img li{
    margin: 5px;
    width: calc((100% - 60px)/6);
}
.membership-f ul.img li img{
    width: 100%;
}
.single-f.membership-f .entry{
    background: var(--color_main2);
    width: 80%;
    max-width: 250px;
    text-align: center;
    margin: 3em auto;
    border-radius: 21px;
    height: 40px;
    line-height: 38px;
    border: 1px solid var(--color_main2);
    color: var(--color_w);
}
.single-f.membership-f .entry a{
    color: var(--color_w);    
    display: block;
}
.single-f.membership-f .entry a .viewall{
    margin: 0;    
}
.single-f.membership-f .viewall::after{
    filter: brightness(0) invert(1);
}
.single-f.membership-f .entry:hover{
    background: var(--color_w);    
}
.single-f.membership-f .entry:hover a{
    color: var(--color_main2);
}
.single-f.membership-f .viewall:hover::after{
    filter: brightness(0) saturate(100%) invert(7%) sepia(71%) saturate(5617%) hue-rotate(238deg) brightness(100%) contrast(95%);
}

/* MEMBERSHIP CARD  -------------------------------*/

.membercard-f{
    text-align: center;
    width: 100%;
}
.membercard-f .membercard-box{
    position: relative;
    max-width: 800px;
    width: 95%;
    margin: auto;
}
.membercard-f .member-info{
    position: absolute;
    color: var(--color_gray1);
    width: 100%;
}
.membercard-f .member-info a{
    color: var(--color_gray1); 
    border-bottom: none;
}
.membercard-f .membercard-box .info{
    width: 100%;
    bottom: 15px;
    left:50%;
    transform:translateX(-50%);
    font-size: 1.5rem;
}
.membercard-f .membercard-box .number{
    padding-right: 20px;
}
.membercard-f .membercard-box .name{
    bottom: 45px;
    left:50%;
    transform:translateX(-50%);
    font-size: 2.5rem;
}

/* contact */
.contact-f article{
    border: 1px solid var(--color_main1);
    padding: 20px 25px;
    background: var(--color_w);
    border-radius: 0;
    box-shadow: unset;    
}
.contact-f .contact-info{
    line-height: 1.7;
    width: calc(100% - 180px);
    color: var(--color_gray2);
}
.contact-f .bt{
    width: 150px;
    margin-left: auto;
    height: 40px;
    line-height: 40px;
    color: var(--color_w);
    background: var(--color_main2);
    border-radius: 20px;
}
.contact-f .bt a{
    display: block;
    font-size: 1.7rem;
}

/* Q&A  ------------------------------------*/
.faq-f article{
    padding: 20px 25px;
    background: var(--color_w);
    border-radius: 25px;
    box-shadow: unset;
}

.cp_qa{
    width: 80%;
    margin:auto;
}
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 0 1em 0;
	color: var(--color_main2);
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
	font-weight: bold;
	line-height: 1.6em;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 4em 1em 2.5em;
	cursor: pointer;
	text-indent: 1em;
	border-radius: 0.5em;
	background: var(--color_gray1);
}
.cp_qa .cp_actab label::before {
	font-size: 16px;
	margin-left: -2em;
	padding-right: 0.5em;
	content: 'Q';
}
.cp_qa .cp_actab label:hover {
	transition: all 0.3s;
	color: var(--color_main1);
}
/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
	font-size: 1.7em;
	font-weight: bold;
	line-height: 2em;
	position: absolute;
	top: 0;
	right: 0;
    color: var(--color_main1);
	content: '+';
	display: inline-block;
	width: 2em;
	height: 2em;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
	position: relative;
	overflow: hidden;
    color: var(--color_main2);
	max-height: 0;
	padding: 0 0 0 2.5em;
	border-radius: 0 0 0.5em 0.5em;
}
.cp_qa .cp_actab .cp_actab-content::before {
	font-size: 16px;
	position: absolute;
	margin: 0.4em 0 0 -1em;
	padding: 0;
	content: 'A';
}
.cp_qa .cp_actab .cp_actab-content p {
	margin: 1em 1em 1em 0;
    line-height: 1.7;
    word-break: auto-phrase;
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 40em;
	border: 10px solid rgba(27,37,56,0.1);
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked ~ label {
	color: var(--color_main1);
	border-radius: 0.5em 0.5em 0 0;
}
/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

/* join */
.content pre{
    border-left: none;
}


/* FOOTER  ------------------------------------*/
.l-footer{
    background: unset;
    background-image: url(../images/footer_back.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.l-footer .siteTitle__logo{
    max-width: 100%;
    text-align: center;
    margin: 3em auto 2em;
}
.l-footer .siteTitle__logo img{
    height: 100px;
}
/*
.footerNavi__list{
 margin: auto;
 width: 95%;
 max-width: 1200px;
 display: -webkit-flex;
 display: flex;
 justify-content: center;
 -webkit-justify-content: center;
 flex-direction: row;
 height: 90px;
}
.footerNavi__list li{
    position: relative;
    text-align: left;
    height: 90px;
    padding: 0 10px;
}
.footerNavi__list li ul.sub-menu li{
    height: 30px;
    width: 100%;
    text-align: left;
}
.footerNavi__list li .sub-menu li::before{
    background: var(--color_w);
}
.footerNavi__list li .sub-menu li{
  justify-content: flex-start;    
}
*/

.footerNavi__list{
 margin: 2em auto 4em;
 width: 95%;
 max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
}
.footerNavi__list li{
    text-align: left;
}
.footerNavi__list li .sub-menu li {
 justify-content: flex-start;
 -webkit-justify-content: flex-start;
padding-left: 15px;
}
.footerNavi__list li .sub-menu li::before{
    background: var(--color_w);
}
.footerNavi__list li:nth-child(2) {
    grid-column-start: 1;
    grid-row-start: 2;
}
.footerNavi__list li:nth-child(3) {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
}

.footerNavi__list li:nth-child(4) {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 1;
}

.footerNavi__list li:nth-child(5) {
    grid-column-start: 4;
    grid-row-start: 1;
}

.footerNavi__list li:nth-child(6) {
    grid-column-start: 4;
    grid-row-start: 2;
}

.footerNavi__list li:nth-child(7) {
    grid-column-start: 5;
    grid-row-start: 1;
}
/*　shop横棒長めに設定　*/
.footerNavi__list li .sub-menu li.menu-item-1230::before{
    flex-grow:0.1 !important;
    }

header ul#sns,
.l-footer ul.footerNavi__list{
    margin: 2em auto;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;    
    align-items: center;
    -webkit-align-items: center;    
}
header ul#sns{
    margin: 0 15px 0 auto;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;    
}
header ul#sns li,
.l-footer ul. li{
    margin: 0 10px;
    padding: 0 10px;
}
header ul#sns li:last-child,
.l-footer ul. li:last-child{
    font-weight: 700;
    margin: 0;
}
header ul#sns li{
    margin: 0 10px;
}
header ul#sns li img{
    vertical-align: middle;
    vertical-align: -webkit-baseline-middle;
    width: auto;
    height: 20px;
}
header ul#sns li.gmmtv img{
    height: 15px;    
}
header ul#sns li:last-child{
    margin: 0 10px 0 5px;  
}

.l-footer ul.footerNavi__list li img{
    margin: 0 3px;
    width: auto;
    height: 20px;
    vertical-align: text-bottom;
}
.l-footer ul.footerNavi__list li.gmmtv img{
    height: 15px;    
    margin: 0;
}

.l-footer ul.footerNavi__list li img{
    filter: brightness(0) invert(1);
}
.l-footer ul.footerNavi__list li a{
    color: var(--color_w);
}
.l-footer ul.footerNavi__list li a:hover{
    color: var(--color_w);    
}
.l-footer ul.footerNavi__list li a:last-child{
    padding: 0;
}
.l-footer ul.footerNavi__list li a:nth-last-child(2){
    padding: 0 5px 0 10px;
}

header ul#sns li a{
    color: var(--color_main2);    
    font-weight: 700;
}
.copyright{
    font-size: 1rem;
}
@charset "UTF-8";

@media (max-width: 2000px) {
    
}

/* ------------------------------------------------------- */
@media (max-width: 1440px) {
    
.photo-slider .box-img .fc,
.topics-slider .box-img .fc,
.videobox-f .box .box-img .fc{
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
}
        
}

/* ------------------------------------------------------- */
@media (max-width: 1280px) {
}


/* ------------------------------------------------------- */
@media (max-width: 1024px) {
.top-news h2{
    width: 22%;
    font-size: 4rem;
}    
.top-news-r{
    width: 78%;
}    
}

/* ------------------------------------------------------- */
@media (max-width: 768px) {
.pc_tab{
    display: block;        
    }    
.tab_only{
    display: block;
    }    
.pc_only{
    display: none;
    }
.sp_only{
    display: none;
    }    
.sp_only2{
    display: none;
    }    
    
/* 共通 */
.l-hExtra, .l-hMain{
    border-bottom: none;
    }    
/* submenu　装飾　*/
.footerNavi__list li .sub-menu li::before,
#navArea_add nav .inner .sub-menu li::before,
#navArea nav .inner .sub-menu li::before{
    flex-grow: 0.1;/* 余白を分け与える */
    height: 1px;
    margin-right: 5px;
}    
.gtranslate_wrapper{
    margin-right: 70px;
}    
    
/* TOP*/     
.top-up-back{
    background-position: top 370px center;
} 
.top-news h2{
    width: 100%;
    font-size:3rem;
    }    
.top-news-r{
    width: 82%;
}    
.top-news-r .day{
    width: 100%;
    margin-bottom: 15px;
}    
.top-news h2 p{
    font-size: 1.5rem;    
    margin: 0.5em 0;
}
.photo-f .photo-slider .fc img,
.video-f .topics-slider .fc img{
    width: 30px;
}      
/* footer */    
.footerNavi__list li{
    font-size: 1.2rem;
    }    
}

/* ------------------------------------------------------- */
@media (max-width: 600px) {
.pc_only{
    display: none;
    }
.tab_only{
    display: none;
    }
.pc_tab{
    display: none;        
    }    
.sp_only{
    display: block;
    }
.sp_only2{
    display: none;
    }
    
/* 共通 */  
.container{
    padding: 0;
    }    
.top-header .gtranslate_wrapper{
    display: none;
    }
.gtranslate_wrapper{
    margin-right: 30px;
    padding: 0;
    width: 110px;
    position: absolute;
    top: 35px;
    right: 20px;
}    
select.gt_selector{
    border-radius: 15px;
    height: 30px;
    line-height: 28px;
    padding-left: 5px;
    font-weight: 900;
    width: 110px;
    font-size: 1rem;
}    
.breadcrumb{
    width: 95%;
    margin: auto;
    overflow: hidden;
    margin-bottom: 2em;
    }    
.l-wrapper{
    width: 95%;
    margin: auto;
    }    
/*LOGO*/
.siteTitle__link{
    margin-top: -20px;
}    
.child .siteTitle__link{
    margin-top: -15px;
}    
.siteTitle__logo img{
    height:60px;
}    

#HEADER_CHILD{
    padding: 0;
    }    
#HEADER_CHILD li{
    margin: 0 0 0 10px;
    border-radius: 15px;
    text-align: center;
    width: auto;
    height: 30px;
    line-height: 28px;
    padding: 0 5px;
}     
#HEADER_CHILD li a{
    font-size: 1rem;
    }
#HEADER_CHILD li a::after{
    background-image: unset;
    height: 0;
    width: 0;
}
.menu-header_child-container{
    position: absolute;
    top: 35px;
    right: 170px;
    }   
#navArea .menu-header_child-container{
    position: unset;
    }    
.sp_only .gtranslate_wrapper,
.sp_only .menu-header_child-container{
    top: 40px;
    }    
header ul#sns{
    margin: 5px 0;
    }    
header ul#sns li,
.l-footer ul#sns li{
    margin: 0 5px;
}    
    
/* toggle_btn */
.toggle_btn_add,
.toggle_btn {
  display: block;
  position: fixed;
  top: 35px;
  right: 5px;
  width: 40px;
  height: 40px;
  transition: all .5s;
  cursor: pointer;
  z-index: 9999;
  background: #dfdfdf;
  border-radius: 50%;
  border: 1px solid var(--color_w);
}    
.toggle_btn_add span:nth-child(1),
.toggle_btn span:nth-child(1) {
  width: 25px;
  top: 12px;
  left: 7px;
}
.toggle_btn_add span:nth-child(2),
.toggle_btn span:nth-child(2) {
  width: 25px;
  top: 19px;
  left: 7px;
}
.toggle_btn_add span:nth-child(3),
.toggle_btn span:nth-child(3) {
  width: 25px;
  top: 26px;
  left: 7px;
}    
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(-320deg);
  transform: translateY(8px) rotate(-320deg);
    top: 11px;
}
.open .toggle_btn span:nth-child(3) {
  width: 25px;
  left: 7px;
    top: 29px;
  -webkit-transform: translateY(-10px) rotate(320deg);
  transform: translateY(-10px) rotate(320deg);
}    
#navArea_add nav .inner{
  max-width: 400px;
}    
#navArea nav .inner ul li a {
  font-size: 1.4rem;
}
    
.archive-title h1{
    font-size: 5rem;
}    
/* single */    
.single-f.photo-single-f{
    padding: 0;
}
.single-f .content{
    margin: 30px 0;
}    
.single-f article{
    padding: 15px;
    }
    
/* TOP */
.siteTitle{
    padding: 5px;
    }    
.TOPMAINNavi{
    display: none !important;
}    
.logo_menu{
    display: none;
    }    
/*    
header ul#sns{
    display: none;
    }    
    */
.slider{
    margin: 2em auto 2em;
    width: 95%;
}   
.top-up-back{
    background-position: top 200px center;
}    
.top-news{
    margin: 0 auto 1em;
}    
.top-news h2{
    width: 100%;
    }
.top-member-f h2{
    font-size: 4rem;
}    
.top-news-r{
    width: 100%;
    }    
.top-member-box .bt{
    max-width: unset;
    width: 100%;
    height: 30px;
    line-height: 28px;
}    
/* news*/    
.archive-title{
	margin-bottom:0;
    padding: 5em 0 3em;
}    
.news-box h3,
.news-box .day{
    width: 100%;
    }    
.news-box .day{
    margin-bottom: 15px;
    }    
    
/* video */    
.videobox-f .box{
    width: calc(100% - 20px);
}
.videobox-f .box .box-img .fc{
    top: 0;
    right: 0;
}    
.single-f .fc img,
.single-f .content .fc img{
    width: 30px;
    height: auto;
}    
/* photo */    
.single-f.photo-single-f .photo a img,
.photo-single-f .photo img{
    margin: 5px;
    width: calc((100% - 20px)/2);
}    
/* SHOP */
.shop-f .box{
    margin: 5px;
    width: calc((100% - 20px)/2);
    padding: 10px;    
}    
.shop-f .box .box-img .soldout p{
    font-size: 1.5rem;
}
/* membership */
.membership-f #HEADER_CHILD{
    margin: 4em auto 4em;
    justify-content:center;
    -webkit-justify-content:center;
    padding: 0;
}
.membership-f #HEADER_CHILD li a::after{
    content: "";
    background-image: url("../images/arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 5px center;
    display: inline-block;
    height: 20px;
    width: 25px;
    vertical-align: sub; 
    filter: brightness(0) saturate(100%) invert(7%) sepia(71%) saturate(5617%) hue-rotate(238deg) brightness(100%) contrast(95%);
}
.membership-f #HEADER_CHILD li a{
    font-size: 1.8rem;
    padding: 0 5px 0 10px;
    }
.membership-f article{
    padding: 30px;
    }    
.membership-f ul.text{
    margin: 0;
    width: 100%;    
    }    
.membership-f ul.text li{
    width: 100%;
    padding: 5px 0;
    }    
.membership-f ul.img li{
    margin: 5px;
    width: calc((100% - 30px)/3);
}    
.contact-f .contact-info{
    width: 100%;
}
.cp_qa .cp_actab .cp_actab-content p{
    word-break: auto-phrase;
    }        
/* FAQ */
.cp_qa{
    width: 100%;
}    
.membercard-f .membercard-box .name{
    bottom: 19px;
    font-size: 2.3rem;
    }    
/* membershipcard */    
.membercard-f .membercard-box .info{
    bottom: 8px;
    font-size: 1.1rem;
}    
.photo-f .photo-slider .fc img,
.video-f .topics-slider .fc img{
    width: 30px;
}    
.videobox-f .box .box-img .fc img{
    width: 30px;
}    
    
/* footer */    
.footerNavi__list li{
    font-size: 1rem;
    }   
.footerNavi__list {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
}
.footerNavi__list li:nth-child(2) {
    grid-column-start: 1;
    grid-row-start: 2;
}
.footerNavi__list li:nth-child(3) {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
}
.footerNavi__list li:nth-child(4) {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 1;
}
.footerNavi__list li:nth-child(5) {
    grid-row-start: 3;
    grid-column-start: 1;

}
.footerNavi__list li:nth-child(6) {
    grid-row-start: 3;
    grid-column-start: 2;
}
.footerNavi__list li:nth-child(7) {
    grid-row-start: 3;
    grid-column-start: 3;
}    
.l-footer ul#sns li img{
    width: auto;
    height: 15px;
}    
}

/* ------------------------------------------------------- */
@media (max-width: 380px) {
.single-f article{
    padding: 5px;
    }
    
.membercard-f .membercard-box .name{
    bottom: 13px;
    font-size: 2.3rem;
    }    
/* membershipcard */    
.membercard-f .membercard-box .info{
    bottom: 5px;
    font-size: 1.1rem;
}    
     
}

/* ------------------------------------------------------- */
@media (max-width: 320px) {
.pc_only{
    display: none;
    }
.tab_only{
    display: none;
    }
.pc_tab{
    display: none;        
    }        
.sp_only{
    display: none;
    }
.sp_only2{
    display: block;
    }    
    
header ul#sns li,
.l-footer ul#sns li{
    margin: 0 5px;
}
header ul#sns li img{
    width: auto;
    height: 15px;
}
.toggle_btn_add,
.toggle_btn {
  top: 37px;
  width: 35px;
  height: 35px;
}    
.toggle_btn_add span:nth-child(1),
.toggle_btn span:nth-child(1) {
  width: 20px;
  top: 10px;
  left: 6px;
}
.toggle_btn_add span:nth-child(2),
.toggle_btn span:nth-child(2) {
  width: 20px;
  top: 16px;
  left: 6px;
}
.toggle_btn_add span:nth-child(3),
.toggle_btn span:nth-child(3) {
  width: 20px;
  top: 22px;
  left: 6px;
}      
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(-320deg);
  transform: translateY(8px) rotate(-320deg);
  width: 20px;
    top: 8px;
}
.open .toggle_btn span:nth-child(3) {
  width: 20px;
  left: 6px;
    top: 26px;
  -webkit-transform: translateY(-10px) rotate(320deg);
  transform: translateY(-10px) rotate(320deg);
}     
.siteTitle__logo img{
    margin-top: -20px;
    }    
.siteTitle__link{
    margin-top: -25px;
    }    
.siteTitle__logo img{
    height: 40px;
    }  
header ul#sns{
    }    
.gtranslate_wrapper,    
.menu-header_child-container{
    top: 50px;
    }    
.toggle_btn_add, .toggle_btn{
    top: 47px;
    }    
.archive-title h1{
    font-size: 2.8rem;
    }    
.archive-title h1 p{
    font-size: 2rem;        
    }    
.membercard-f .membercard-box .name{
    bottom: 13px;
    font-size: 2.1rem;
    }    
/* membershipcard */    
.membercard-f .membercard-box .info{
    bottom: 5px;
    font-size: 1.1rem;
}       
}
@charset "UTF-8";

/* VIDEO slider */
@charset "UTF-8";

/* slider　一瞬縦に表示される問題対応　CSS表示はslick共通*/
.slick-slider {
  opacity: 0;
  transition: opacity .25s ease;
}
.slick-slider.slick-initialized{
  opacity: 1;
  transition: 0.3s;
}
/* TOP画像 */
.top-slider img{
    border-radius: 20px;
}
.dots-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 20px;
}

.dots-bar li {
    width: 25px;
    height: 4px;
    border-radius: 2px;
    margin: 0 5px;
    background: #fff;
    cursor: pointer;
}
.dots-bar li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}
.dots-bar li:hover,
.dots-bar li.slick-active {
    background: var(--color_main2);
}
.dots-bar li.slick-active{
    width: 60px;
    height: 4px;    
}
.dots-bar li{
    list-style-type: none;
}

/* VIDEO PHOTO 矢印　画像調整　*/

.slide-arrow{
    position: absolute;
    top: 50%;
    transform:translateY(-50%); 
    width: 60px;
    height: auto;
    z-index: 100;
}
.video-f .slide-arrow.prev-arrow{
    left: calc(50% - 430px);
}    
.video-f .slide-arrow.next-arrow{
    left: calc(50% + 370px);    
}    
.photo-f .slide-arrow.prev-arrow{
    left: calc(50% - 430px);
}    
.photo-f .slide-arrow.next-arrow{
    left: calc(50% + 370px);    
}    

.slick-dots li.slick-active button:before{
    color: var(--color_main1) !important;
    opacity: 1 !important;
}

/* 中央画像拡大表示 */
.photo-slider li,
.topics-slider li{
	transform: scale(0.8);
	transition: transform .3s;
}
.photo-slider li,
.topics-slider li{
	transform: scale(0.8);
	transition: transform .3s;
    overflow: hidden;
}

.photo-slider li.slick-center,
.topics-slider li.slick-center {
	transform: scale(1);
    overflow: hidden;
}
/* 画像中央表示 */
.slick-slide img{
    margin: auto;
}
/* 3件未満の時、全部均一 */
.photo-slider li.ex,
.topics-slider li.ex{
	transform: scale(0.9);
    overflow: hidden;
}

/* ------------------------------------------------------- */
@media (max-width: 2000px) {
.video-f .slide-arrow.prev-arrow{
    left: calc(50% - 320px);
}    
.video-f .slide-arrow.next-arrow{
    left: calc(50% + 270px);    
}    
.photo-f .slide-arrow.prev-arrow{
    left: calc(50% - 320px);
}    
.photo-f .slide-arrow.next-arrow{
    left: calc(50% + 270px);    
}  

}

/* ------------------------------------------------------- */
@media (max-width: 1440px) {
.slide-arrow{
    width: 50px;
}    
.video-f .slide-arrow.prev-arrow,
.photo-f .slide-arrow.prev-arrow{
    left: calc(50% - 240px);
}    
.video-f .slide-arrow.next-arrow,
.photo-f .slide-arrow.next-arrow{
    left: calc(50% + 190px);    
}    
}

/* ------------------------------------------------------- */
@media (max-width: 1280px) {
}


/* ------------------------------------------------------- */
@media (max-width: 1024px) {
.slide-arrow{
    width: 40px;
}       
.video-f .slide-arrow.prev-arrow,
.photo-f .slide-arrow.prev-arrow{
    left: calc(50% - 180px);
}    
.video-f .slide-arrow.next-arrow,
.photo-f .slide-arrow.next-arrow{
    left: calc(50% + 140px);    
}       
}

/* ------------------------------------------------------- */
@media (max-width: 768px) {
.video-f .slide-arrow.prev-arrow,
.photo-f .slide-arrow.prev-arrow{
    left: calc(50% - 140px);
}    
.video-f .slide-arrow.next-arrow,
.photo-f .slide-arrow.next-arrow{
    left: calc(50% + 100px);    
}     
}

/* ------------------------------------------------------- */
@media (max-width: 600px) {
.video-f .slide-arrow.prev-arrow,
.photo-f .slide-arrow.prev-arrow{
    left: calc(50% - 170px);
}    
.video-f .slide-arrow.next-arrow,
.photo-f .slide-arrow.next-arrow{
    left: calc(50% + 130px);    
}  
}

/* ------------------------------------------------------- */
@media (max-width: 380px) {
.video-f .slide-arrow.prev-arrow,
.photo-f .slide-arrow.prev-arrow{
    left: calc(50% - 140px);
}    
.video-f .slide-arrow.next-arrow,
.photo-f .slide-arrow.next-arrow{
    left: calc(50% + 100px);    
}  
}

/* ------------------------------------------------------- */
@media (max-width: 320px) {
.slide-arrow{
    width: 30px;
}       
.video-f .slide-arrow.prev-arrow,
.photo-f .slide-arrow.prev-arrow{
    left: calc(50% - 110px);
}    
.video-f .slide-arrow.next-arrow,
.photo-f .slide-arrow.next-arrow{
    left: calc(50% + 80px);    
}  
}
@charset "UTF-8";

/*　STARRYぱんくず消去　*/
.stry-ec02-breadcrumbs{
    display:none;
}
/*コンビニ決済 safari改行されない問題*/
pre{
overflow: auto;
white-space: pre-wrap;
word-wrap: break-word;
}

/* button */
.stry-wrap button{
    margin: 1em auto;
    background: var(--color_main2);
    padding: 10px 0 !important;
    border-radius: 30px;
    color: var(--color_w);
    font-size: 1.5rem !important;
    min-width: 130px;
    width: auto;
}
.stry-wrap button{
    margin-top: 20px !important;
}
.stry-wrap input{
    padding: 3px 5px;
    margin: 7px 0;
}
.stry-wrap select{
    padding: 7px 5px;    
    margin: 7px 0;
}
.stry-wrap .content *:first-child{
    margin-top: 20px;
}
.stry-entry01-privacy a,
.stry-entry01-terms a{
    text-decoration: none;
}

/* SHOP */
#div_item_ec02 button{
    background: var(--color_main2);
    color: var(--color_w);
}
.shop-single-f .stry-ec02-item-price{
    color: var(--color_main2);
}

/* contact */
#div_support01 button{
    width: 200px;
}
.content table,
.content table td,
#div_support01 .content table,
#div_support01 td.stry-support01-column01, td.stry-support01-column02{
    border-color: var(--color_w);
    border:unset;
    border-top:unset !important;
    border-left:unset !important;
        
}
#div_support01 .stry-tableodd,
#div_support01 .content table tr:nth-child(2n+1){
    background: var(--color_w);
}
#language_cd_tr{
    display: none;
}
#div_support02 button{
}

#div_support05{
    word-break:keep-all;
}