/* ======================================
ローディング */
#loader-bg {
   background: #fff;
   height: 100%;
   width: 100%;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 99999;
}
#loader-bg .bouncingLoader {    
   background: #fff;
   position: fixed;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   z-index: 10;
}
.bouncingLoader > div, .bouncingLoader:before, .bouncingLoader:after {
   display: inline-block;
   width: 13px;
   height: 13px;
   background: #00a73c;
   margin-bottom: -5px;
   border-radius: 50%;
   animation: bouncing-loader 0.6s infinite alternate;
}
.bouncingLoader > div, .bouncingLoader:before, .bouncingLoader:after { content: "";}
.bouncingLoader > div { margin: 0 .7em;}
.bouncingLoader > div { animation-delay: 0.2s;}
.bouncingLoader:after { animation-delay: 0.4s;}
 
/*3つの円が上下に動くためのアニメーション*/
@keyframes bouncing-loader {
    to {
        opacity: 0.1;
        transform: translate3d(0, -8px, 0);
    }
}

/* ======================================
メインビジュアル */

.hero_outer {
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 100%;
   height: 100vh;
}
.hero_outer .c_boder {
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 3;
}

.hero {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.hero-video { width: 100%;}

/*.overlay {
   width: 100%;
   height: 100vh;
   position: absolute;
   top: 0;
   left: 0;
   background: #0000001b;
   z-index: 2;
}*/

.mvarea { position: relative;}

.mvarea_pic { position: relative;}

.mvarea_pic img {
   display: block; width: 100%; height: auto;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 99;
}

.mv_pic {
   overflow: hidden;
   height: 100vh;
   background: url('img/mv_bg.jpg?20231207') no-repeat center;
   background-size: cover;
}

.catch {
   color: #fff;
   font-size: clamp(1.25rem, 0.477rem + 3.86vw, 3.375rem);
   line-height: 1.6;
   letter-spacing: .5rem;
   text-shadow: 1px 1px 8px #333;
}
@media print, screen and (min-width: 1025px){
.catch { width: 46%;}
}


/* メインビジュアルメニュー */
.hero_content {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%,-40%);
   z-index: 5;
   width: 100%;
   padding-right: 3%;
   padding-left: 3%;
   text-align: center;
}
.hero_menu {
   width: 100%;
   padding: 1em;
   background: #fff990da;
   border-radius: 1em;
}
.sphero_menu {
   padding-bottom: 2em;
   margin-top: -55%;
   position: relative;
   z-index: 3;
}
@media print, screen and (min-width: 768px){
.sphero_menu { margin-top: -10em;}
}
@media print, screen and (min-width: 1025px){
.hero_content {
   top: 65%;
   left: 50%;
   transform: translate(-50%,-65%);
   width: 100%;
   max-width: 1440px;
   margin-right: auto;
   margin-left: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-align: left;
}
.hero_menu {
   width: 48%;
   background: #fff990bd;
   padding: 1.5em;
}
}


.topmenu_title {
   font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
   font-weight: 700;
   margin-bottom: .5em;
   color: rgb(0, 0, 0);
}

.hero_menu_list {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.hero_menu_list li { width: 46%;}
.hero_menu_list li:last-child { width: 100%; margin-bottom: .5;}

.hero_menu_list > li > a {
   text-decoration: none;
   display: inline-block;
}
.hero_menu_title {
   font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
   font-weight: 700;
   margin-bottom: 0.3em;
   line-height: 1.2;
   color: #00A73C;
}
.hero_menu_txt {
   color: #333;
   font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
   margin-bottom: 0;
   line-height: 1.6;
}

.hero_menu_list > li {
   background: #fff;
   border-radius: .7em;
   margin-bottom: .7em;
}

.hero_menu_list > li > a {
   display: inline-block;
   padding: .7em 1.5em .7em .7em;
   line-height: 1.2;
   text-decoration: none;
   position: relative;
   transition: all .2s ease;
   border-radius: 0.4em;
   color: #fff;
   width: 100%;
}

.taikai_li {
   padding: .7em;
}

.hero_menu_list > li > a::after {
   position: absolute;
   display: block;
   content: "";
   right: -.5em;
   top: 50%;
   background: #00A73C;
   height: 1px;
   width: 20px;
   transition: all .2s ease;
}
@media print, screen and (min-width: 1025px){
.hero_menu_list > li > a::after {
   width: 40px;
   right: -1em;
}
.hero_menu_list > li > a:hover::after { right: -.5em;}
.hero_menu_list > li > a:hover { opacity: .7;}
}


/* ======================================
   別途セクション */

.topbloc { margin-top: 0; margin-bottom: 2em;}
@media print, screen and (min-width: 1025px){
.topbloc { margin-top: 4em; margin-bottom: 5em;}
}

.lastbloc { padding-top: 3em; padding-bottom: 6em;}
@media print, screen and (min-width: 1200px){
.lastbloc { padding-top: 5em; padding-bottom: 10em;}
}


/* ==================================-
   タイトル */

.toptitle {
   border-left: solid 3px #00A73C;
   border-image: linear-gradient(to bottom, #00A73C 0%, #FFF100 100%) 1;
   padding-left: .7em;
   margin-bottom: 1em;
}
@media print, screen and (min-width: 1200px){
.toptitle {
   margin-bottom: 1em;
   padding-left: 1em;
}
}
.toptitle_main {
   font-size: clamp(1.125rem, 0.625rem + 2.5vw, 2.5rem);
   font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";
   font-weight: 700;
}
.toptitle_sub {
   font-size: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem);
   font-family: "Montserrat", sans-serif; font-weight: 400;
}
.toptitle_main,.toptitle_sub { display: block; letter-spacing: .1rem;}


/* ======================================
   新着情報 */

.mis img { display: block;}
.mis li { margin-right: .7em; margin-left: .7em; width: 65vw;}
@media print, screen and (min-width: 768px) {
.mis li { width: 45vw;}
}
@media print, screen and (min-width: 1200px) {
.mis li { width: 30vw;}
}

.mis li a { transition: all .2s ease;}
@media print, screen and (min-width: 1025px) {
.mis li a:hover { opacity: .7;}
}

.news_pic {
   position: absolute;
   vertical-align: middle;
   text-align: center;
   margin: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
.news_pic img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.newspic_outer {
   position: relative;
   padding: 100% 0 0 0;
   overflow: hidden;
   background: #fff;
}

@media print, screen and (min-width: 1025px){
.news_content {
   display: flex;
   justify-content: space-between;
}
.news_data { width: 23%;}
.news_item { width: 73%;}
}

/* リスト */
.news_data { margin-bottom: 1em;}

.news_item {
   background: #fff;
   padding: 1em 1em 2em 1em;
}
@media print, screen and (min-width: 768px){
.news_item { padding: 2em;}
}
.newslist a {
   display: block;
   border-bottom: 1px #ccc solid;
   padding: 0.6em 0;
   text-align: left;
   position: relative;
   padding-right: 1.5em;
}
.areset a {
   text-decoration: none;
   display: block;
   transition: all .2s ease;
}
@media print, screen and (min-width: 768px){
.areset a { display: flex;}
}
@media print, screen and (min-width: 1025px){
.areset a:hover { opacity: .7;}
}

.newsdate {
   margin-right: 1.5em;
   color: #009034;
}
.news_title {
   display: block;
   color: #333;
   line-height: 1.5;
}
@media print, screen and (min-width: 768px){
.news_title { display: inline-block;}
}

.newmarks {
   color: #E51F23;
   border: solid 1px #E51F23;
   background: #fff;
   padding: 0.2em 0.5em;
   margin-left: 0.5em;
   font-size: 80%;
   white-space: nowrap;
   line-height: 1;
   display: inline-block;
   font-weight: 400;
}

.news_item .top_btn { text-align: center;}
@media print, screen and (min-width: 1025px){
.news_data .top_btn { text-align: left;}
}


/* ======================================
   こだわり・店舗案内 */

.item_pic img { display: block; width: 100%; height: auto;}
.item_pic { margin-bottom: 1em;}

.item:first-child {
   margin-bottom: 6em;
}
@media print, screen and (min-width: 768px){
.item:first-child {
   margin-bottom: 0;
}
.item_content {
   display: flex;
   justify-content: space-between;
}
.item { width: 45%;}
}

/* ボタン */
.btn2 {
   text-align: right;
   margin-top: 1em;
}
.btn2_contents a {
   position: relative;
   display: inline-block;
   text-decoration: none;
   outline: 0;
   padding: 0 2em 0.3em 1em;
   color: #333;
}
.btn2_contents a::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 1px;
   transition: all .2s ease;
}
.btn2_contents a::after {
   content: '';
   position: absolute;
   bottom: 0.5em;
   right: 0;
   width: 25px;
   height: 1px;
   transform: rotate(29deg);
   transition: all .2s ease;
}
.btn2_contents a::before {
   background: #00A73C;
}
.btn2_contents a::after {
   background: #00A73C;
   bottom: .4em;
}
@media print, screen and (min-width: 1025px) {
.btn2_contents a:hover::after {
   right: -10%;
}
.btn2_contents a:hover::before {
   left: 10%;
}
}
@media print, screen and (min-width: 1200px) {
.btn2_contents a::after { bottom: .3em;}
}


/* ======================================
   購入方法を選ぶ */

.choose_list > li {
   text-align: center;
   border-radius: 1em;
   background: #fff;
}
.choose_list > li > a {
   text-decoration: none;
   display: inline-block;
   width: 100%;
   height: 100%;
   padding: 1em;
   border-radius: 1em;
   transition: all .2s ease;
   box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.55),
    0 3px 7px rgba(0, 0, 0, 0.2);
}
@media print, screen and (min-width: 1025px) {
.choose_list > li > a { padding: 1.5em;}
}
.choose_list > li + li + li { margin-top: 1em;}

.choose_list {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.choose_list > li { width: 48%;}
@media print, screen and (min-width: 768px) {
.choose_list > li { width: 31%;}
.choose_list > li + li + li { margin-top: 0;}
.choose_list > li:nth-last-child(-n+2) { margin-top: 1.5em;}
}

/* 大会専用 */
.choose_list > .taikai_li {
   width: 100%;
   box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.55), 0 3px 7px rgba(0, 0, 0, 0.2);
}
@media print, screen and (min-width: 768px) {
.choose_list > .taikai_li { width: 65.5%;}
}

.taikai_content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1em 1em 1em 1em;
   border-radius: 1em;
}
.taikai_item { text-align: left; width: 100%;}
.taikai_item .choose_title { text-align: center;}

@media print, screen and (min-width: 768px) {
.taikai_item { width: 70%;}
.taikai_content { padding: 1.5em 1.5em 1.5em 0;}
.taikai_item .choose_title { text-align: left;}
}

@media print, screen and (min-width: 1025px) {
.taikai_content .choose_pic {
   width: 15%;
   margin-bottom: 0;
}
}
.taikai_list li {
   font-size: 90%;
   margin-bottom: .3em;
   margin-left: 0.9em;
   text-indent: -0.9em;
   width: 100%;
}
.taikai_list li a { color: #333; transition: all .2s ease;}
.taikai_list li::before {
   font-family: "general";
   margin-right: 0.5em;
   content: "\e900";
   font-size: 70%;
   color: #00A73C;
}
.taikai_list li a:hover { color: #00A73C;}


.choose_title {
   font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";
   color: #00A73C;
   font-weight: 700;
   font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
   margin-bottom: .5em;
}
.choose_pic img {
   display: inline-block;
   width: 100%;
   height: 100%;
   margin-right: auto;
   margin-left: auto;}
.choose_pic {
   margin-right: auto;
   margin-left: auto;
   height: 40px;
   margin-bottom: 1em;
}
.choose_txt {
   margin-bottom: .5em;
   font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
   color: #333;
}
@media print, screen and (min-width: 1025px) {
.choose_pic { height: 70px;}
.choose_txt { margin-bottom: 1em;}
}
.details_pic img {
   max-width: 30px;
   display: block;
   margin-left: auto;
   transition: all .2s ease;
}
@media print, screen and (min-width: 1025px) {
.details_pic img { max-width: 60px;}
}

@media print, screen and (min-width: 1025px) {
.choose_list li a:hover .details_pic img {
   margin-right: -.5em;
}
.choose_list > li > a:hover { opacity: .7;}
}

.count { display: none;}


/* ======================================
   スタッフブログ */

.blog_item {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.blog_item li {
   width: 48%;
   margin-bottom: 1em;
}
.blog_item li a { text-decoration: none;}
@media print, screen and (min-width: 1025px) {
.blog_item li {
   width: 23%;
   margin-bottom: 0;
}
}

.blog_pic img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.blogpic_outer {
   position: relative;
}
.wl_pic {
   position: relative;
   padding: 70% 0 0 0;
   overflow: hidden;
   background: #fff;
}

.blog_pic {
   overflow: hidden;
}
.wl_pic_inner {
   position: absolute;
   vertical-align: middle;
   text-align: center;
   margin: 0;
   top: 0;
   width: 100%;
   height: 100%;
}

.blog_item::before {
   content: "";
   display: block;
   width: 48%;
   order: 1;
}
.blog_item::after {
   content: "";
   display: block;
   width: 48%;
}
@media print, screen and (min-width: 1025px) {
.blog_item::before {
   width: 23%;
}
}
@media print, screen and (min-width: 1025px) {
.blog_item::after {
   width: 23%;
}
}

.bloglist_data { margin-top: .5em;}
.bloglist_date { color: #009034;}
.bloglist_title { color: #333; line-height: 1.5;}

.blog_item li {
   transition: all .2s ease;
}
@media print, screen and (min-width: 1025px) {
.blog_item li:hover { opacity: .7;}
}