@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
/* -----------------------------------------------------------------------------------------------　all　----------------------------------------------------------------------------------------------------------------- */

/* font -----------------------------------------------------------------------------*/

:root {
    --font-jp:  "Reggae One", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --font-jp2:  'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --font-en: "Bangers", "Reggae One",system-ui;
}

body{
	font-family:  var(--font-jp2) !important;
	font-weight:800;
}

h2, h3, h4,.head_tel p, #con_nav li:last-child a,#foot_nav li a,.footer_tel p{
	font-family:  var(--font-jp) !important;
	font-weight:normal;
}

.attach_txt, .fon_jos, .more a,#contents .contents_box .contents_txt .contents_point,.head_tel a{
	font-family:  var(--font-en) !important;
	font-weight: 500;
}

input, .catch h2,.catch .font_4up{
	font-family:  var(--font-jp) !important;
}

#top_contents1 h2,#top_contents2 h2,#top_cms h2,.title_box h2,.gyoumu_box h2{
        font-size: calc(1rem + 11px);
}

#top_contents1 h2 {
    font-size: calc(1rem + 16px);
}

.font_2dw{
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
}

.head_tel a, .footer_tel a,.tel_wrap .tel_box a{
	font-family:var(--font-jp) !important;
}

/* color -----------------------------------------------------------------------------*/
:root{
    --color1:#ffce1b;
    --color2: #f7e07b;
    --color3: #ffbd04;
    --color4:#f2efdf;
    --color5:#f9f2d8;
    --color6: #e6aa00;
    --white:#ffffff;
    --black:#1a1a1a;
    --gray:#655d5f;
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.txt_color1,.hvr_txt_color1:hover{color: var(--color6);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--color2);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--color3);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--color4);} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color5);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: var(--color1);} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: var(--color2);} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: var(--color3);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color4);} /* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: var(--color5);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.border_color1,.hvr_border_color1:hover{border-color: var(--color1);}
.border_color2,.hvr_border_color2:hover{border-color: var(--color2);}
.border_color3,.hvr_border_color3:hover{border-color: var(--color3);}
.border_color4,.hvr_border_color4:hover{border-color: var(--color4);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color5);}

.linkStyle{
    color: var(--color1);
    border-bottom:solid 1px;
}

.linkStyle:hover{
	color: var(--color3);
	opacity: 0.7;
	transition: all 0.5s;
}

#sp_nav .sp_nav_ul1 li a{
    color: var(--black);
}

#sp_nav .sp_nav_ul2 li a{
    color: var(--black);
}

body#body {
    background: var(--white);
}
/* ----------------------------------------------------------------------------------------------　body　----------------------------------------------------------------------------------------------------------------- */

.bg_dot2{
	background-image: url('/Files/img/dot2.png');
	background-size: 200px;
	background-position: top 0 left 0;
	background-repeat: repeat;
	animation: bgloop 40s linear infinite;
	background-color: transparent;
}

@keyframes bgloop {
	0% {background-position: top 0 left 0;}
	100% {background-position: top -400px left 400px;}
}


.loader .bg_dot2{
     background-image: url(/Files/img/dot2.png);
    background-size: 200px;
    background-position: top 0 left 0;
    background-repeat: repeat;
    animation: bgloop 40s linear infinite;
    background-color: rgba(241, 233, 212, 1);
    background-image: none;
}

/* ------------------------------ ローダー背景 　▼------------------------------ */
/* 回転アニメーション */
.rotating {
  animation: rotate 2s linear infinite;
}



#loader img {
    animation: rotate 2s linear infinite;
    top: 50%;
    position: absolute;
    left: 50%;
}

@keyframes rotate {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}


/* ------------------------------ ローダー背景 ▲------------------------------ */
/* ------------------------------　文字装飾　▼------------------------------ */
.txt_anim6 span{
	display: inline-block;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
	animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
	opacity: 1;
}

.txt_anim6 span.start{
	-webkit-animation-name: slide-bs;
	animation-name: slide-bs;
	opacity: 1;
}

@keyframes slide-bs{
	0%{-webkit-transform: translateY(20px);transform: translateY(20px);}
	100%{-webkit-transform: translateY(0);transform: translateY(0);}
}

/* ------------------------------　文字装飾　▲------------------------------ */


/* ---------------------------------　疑似要素　▼　----------------------------------------- */
#main_img,#top_contents1, #contents, #top_contents3,#footer, #footer_info,#page_title,.page_title_bg, .footer_item{position: relative;}
/*装飾に便利なposi_rel*/

/*装飾に便利な疑似クラス設定*/
#main_img:before,#main_img:after,#top_contents1:before,#top_contents1:after,#contents:before,#contents:after,#footer_info:before,#footer_info:after,#footer:before, #foote:after,#page_title:before,.page_title_bg:after, .footer_item:before{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}

#top_news .cms_title::before,
.con3_box1::before,.con3_box2::before,.con3_box3::before,
#top_contents1 .con_title::before{
    content:'';
    position:absolute;
    display:block;
}
/* ---------------------------------　疑似要素　▲　----------------------------------------- */

/* ------------------------------　つなぎデザイン　▼------------------------------ */
#top_contents1::before {
    width: 100%;
    height: 60px;
    background-image: url(/Files/img/nami2.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    top: 31px;
    z-index: 0;
}

#top_contents1::after {
    width: 100%;
    height: 60px;
    background-image: url(/Files/img/nami1.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    bottom: -60px;
    z-index: 1;
}

#contents::before{
    width: 100%;
    height: 60px;
    background-image: url(/Files/img/nami3.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    top: -59px;
    z-index: 0;
}

#contents:after{
    width: 100%;
    height: 60px;
    background-image: url(/Files/img/nami4.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    bottom: -59px;
    z-index: 0;
}

#footer_info::after {
    width: 100%;
    height: 60px;
    background-image: url(/Files/img/nami1.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    top: -1px;
    z-index: 0;
}

/* page02～page10だけ別の画像に */
.under_page #footer_info::after {
    width: 100%;
    height: 60px;
    background-image: url(/Files/img/nami4.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    top: -1px;
    z-index: 0;
}

#footer::before {
    width: 100%;
    height: 60px;
    background-image: url(/Files/img/nami2.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    top: -60px;
    z-index: 1;
}

.footer_item:before{
    width: 100%;
    height: 100px;
    background-image: url(/Files/img/nami6.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    top: -100px;
    z-index: 1;
}

#page_title::before {
    width: 100%;
    height: 60px;
    background-image: url(/Files/img/nami2.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    bottom: -1px;
    z-index: 1;
}

/* .page_title_bg::after {
    width: 100%;
    height: 60px;
    background-image: url(/Files/img/nami1.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    bottom: -59px;
    z-index: 0;
} */

/* ------------------------------　つなぎデザイン　▲------------------------------ */
.more a {
    font-size: 20px;
    color: var(--black) !important;
}

.more a::after {
    background-color: var(--black) !important;
}

/* -------------------------------------------------------------------------------------------　header　----------------------------------------------------------------------------------------------------------------- */

.head_tel p {
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + -1px);
}

/* ------------------------------　con_nav　▼------------------------------ */
#con_nav li .nav_title {
    color: var(--color6);
    font-weight: 700;
    font-size: 15px;
}

#con_nav li a {
    background-image: url(/Files/img/header_icon1.png);
    background-size: 43px auto;
    padding: 70px 5px 10px;
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

#con_nav li a .nav_sub_title {
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + -5px);
}

#con_nav li:nth-child(2) a {
    background-image: url(/Files/img/header_icon2.png);
}

#con_nav li:nth-child(3) a {
    background-image: url(/Files/img/header_icon3.png);
}

#con_nav li:nth-child(4) a {
    background-image: url(/Files/img/header_icon4.png);
}

#con_nav li:nth-child(5) a {
    background-image: url(/Files/img/header_icon5.png);
}

#con_nav li:nth-child(6) a{
    background-image: none;
}

#con_nav li:last-child a {
    font-size: 20px;
    padding: 15px 20px;
    background-color: var(--color3);
}


/* ------------------------------　con_nav　▲------------------------------ */
/* -------------------------------------------------------------------------------------------　header　----------------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------　top　----------------------------------------------------------------------------------------------------------------- */

/* ------------------------------　main_img　▼---------------------------------- */
.catch_top {
    z-index: 4;
    top: 6%;
    left: 3%;
    width: 90%;
    max-width: 900px;
    filter: drop-shadow(1px 3px 0px rgba(255, 255, 255, 0.5));
}

.catch_bottom {
    z-index: 4;
    bottom: 7%;
    right: 13%;
    width: 90%;
    max-width: 900px;
    filter: drop-shadow(1px 3px 0px rgba(255, 255, 255, 0.5));
}


/* 共通缶画像 */
.can {
  position: absolute;
  width: 350px;
}

.can-wrapper img{
  position: absolute;
  width: 350px;
}

.can-wrapper .normal,
.can-wrapper .funny {
  padding: 10px; /* クリック範囲拡張 */
  background-color: transparent; /* 安全な見た目維持 */
}

.can-wrapper {
  display: inline-block;
  cursor: pointer;
  position: absolute;
}

.can-button {
  all: unset;
  cursor: pointer;
  display: inline-block;
  padding: 12px;
}

/* 表示切り替え */
.hidden_b {
  display: none;
}

/* ランダム配置と回転を再現 */
.pos1 {top: 65%;left: 95%;transform: rotate(0deg);}
.pos2 {top: 5%;left: 38%;transform: rotate(10deg); animation: swing2 1s steps(2, start) infinite;}
.pos3 {top: 5%;right: 10%;transform: rotate(10deg);animation: swing2 1s steps(2, start) infinite;}
.pos4 {bottom: 3%;left: 5%;transform: rotate(10deg);animation: swing1 1s steps(2, start) infinite;}
.pos5 {bottom: 5%;left: 38%;transform: rotate(10deg);animation: swing1 1s steps(2, start) infinite;}
.pos6 { bottom: 5%; right: 10%; transform: rotate(10deg);animation: swing1 1s steps(2, start) infinite;}




/* ------------------------------　main_img　▲---------------------------------- */


/* ------------------------------　intro　▼---------------------------------- */
#top_news .cms_title {
    padding-left: 50px;
    position: relative;
    font-weight: 800;
}

#top_news .cms_title::before{
    width:40px;
    height:40px;
    background:url(/Files/img/ball.png) no-repeat;
    background-size:contain;
    bottom:0;
    left:0;
    animation: ball 0.6s alternate infinite;
}

@keyframes ball{
    0% {
        transform: translate(0, 0) scale(0.95);
    }
    100% {
        transform: translate(0, -40px) scale(1.0);
    }
    
}

/* ------------------------------　intro　▲---------------------------------- */

/* ------------------------------　contents1　▼------------------------------ */

#top_contents1 .con_title {
    color: var(--black);
    font-size: -webkit-calc(1rem + 8px);
    font-size: calc(1rem + 9px);
    font-weight: 800;
}

/* ------------------------------　contents1　▲------------------------------ */




.attach_bg {
    background: -webkit-linear-gradient(165deg, rgba(243, 166, 140, 1) 0%, rgba(223, 255, 237, 1) 100%);
    background: linear-gradient(165deg, rgb(243 226 140) 0%, rgb(255 248 223) 100%);
    opacity: 0.5;
}


/* ------------------------------　contents3　▼------------------------------ */
#contents{
    background-color: var(--white);
}

#contents .contents_box .contents_txt{position: relative;border-top-right-radius: 30px;border-bottom-right-radius: 30px;}

#contents .contents_box:nth-of-type(2) .contents_txt{border-top-left-radius: 30px;border-bottom-left-radius: 30px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;}

#contents .contents_box .contents_txt > div{position: relative;z-index: 2;}

#contents .contents_box .contents_txt .box{
	padding: 150px;
}

#contents .contents_box .contents_txt .contents_link{transform: translateY(50%);}

#contents .contents_box .contents_txt .contents_link a{
	display: inline-block;
	line-height: 1;
	padding: 15px 28px 15px 30px;
	border-radius: 100px;
	letter-spacing: 4px;
	transition: ease 0.3s;
	background-color: var(--black);
	color: var(--color3);
}

#contents .contents_box .contents_txt .contents_link a i{
	transition: ease 0.3s;
}

#contents .contents_box .contents_txt .contents_link a:hover{
	transform: translateY(-5px);
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#contents .contents_box .contents_txt .contents_link a:hover i{
	transform: translateX(3px);
}

#contents .contents_box .contents_txt .contents_point{
	position: absolute;
	z-index: 1;
	top: 40px;
	left: 25px;
	transform: rotate(-25deg);
	font-size: 70px;
	letter-spacing: 4px;
	opacity: 0.5;
}

#contents .contents_box .contents_img{transform: translate(-50px,50px);z-index: 1;}

#contents .contents_box:nth-of-type(2) .contents_img{transform: translate(50px,50px);}

/* ================================================ 共通アニメーション=============================================== */
@keyframes swing1 {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

@keyframes swing2 {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

#contents .contents_01,#contents .contents_02,#contents .contents_03 {
  background-size: 100%;
  width: 14vw;
  z-index: 2;
  animation: swing2 1s steps(2, start) infinite;
}

#contents .contents_01 {
    top: 18%;
    left: 37%;
}

#contents .contents_02 {
    top: -9%;
    left: 40%;
}

#contents .contents_03 {
    top: 34%;
    left: 42%;
}

.top_cms_box .top_cms_title h3{position: relative;padding: 0 20px;}

.top_cms_box .top_cms_title h3 span{position: relative;z-index: 2;}

.top_cms_box .top_cms_title h3::after{content: ""; position: absolute;width: 100%;height: 100%;border-radius: 50px;background-color: #fff;top: 8px;left: 0;z-index: 1;}
.top_cms_box .more a,.top_cms_box .more a i{
	transition: ease 0.3s;
}

.top_cms_box .more a:hover{opacity: 0.6;}

.top_cms_box .more a:hover i{transform: translateX(3px);}


#contents .contents_box{
        width: 90%;
}

#contents .contents_box .contents_txt{
        background-color: var(--color2);
}

#contents .contents_box:nth-child(2){
        margin: auto;
        margin-right: 0;
        position: relative;
        margin-bottom: 100px;
}

#contents .contents_box:nth-child(3){
    position: relative;
}

#contents .contents_box:nth-child(3):before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 30%;
    left: 50%;
    background-image: url(/Files/img/kuma.png);
    background-position: center left;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
}

#contents .contents_box .box h2{
        color: black;
        /* font-family: 're'; */
        line-height: 1.2em;
        /* font-weight: normal; */
        font-size: 33px;
        font-weight: 800;
}

#contents .contents_box .box .con_txt{
        font-weight: bold;
        font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


.ore .txt_more{
        color: var(--black);
        background-color: var(--color3);
        width: 40%;
        text-align: center;
        border-radius: 20px;
        font-weight: bold;
        margin-top: 20px;
        font-size: 20px;
        min-width: 300px;
        cursor: pointer;
        padding: 10px 0;
}

#contents .contents_box .contents_txt .box {
    padding: 15%;
}

.hvr_txt_color1:hover {
    color: #8dd0e5;
}

.ore p{
    background-color: rgba(255, 255, 255, 0.5);
    padding: 40px;
    display: block;
    box-sizing: border-box;
    border-radius: 10px;
}

.emoi{
    position: relative;
}

.emoi:before{
    content: "";
    display: block;
    width: 100%;
    height: 130%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(/Files/img/page_title.png);
    background-position: center;
    background-repeat: repeat-x;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    pointer-events: none;
    z-index: 0;
    /* min-width: 1300px;*/
}


/* ------------------------------　contents3　▲------------------------------ */

/* ---------------------------------------　top_cms　▼--------------------------- */

#top_cms .cms_box .cms_title {
    color: var(--white);
}

.cms_title, .attach_txt, #page_title .title_wrap{
    background-image: url(/Files/img/bg2.png);
    background-position: center top;
    background-size: 125px;
    background-repeat: no-repeat;
    padding-top: 68px;
    color: var(--black);
}

.cms1inner .cms_title {
    background: none;
    padding-top: 0;
}

/* ---------------------------------------　top_cms　▲--------------------------- */

/* ---------------------------------------　footer　▼--------------------------- */

#top_cms .cms_box .cms_title {
    color: var(--black);
}
/* ---------------------------------------　footer　▲--------------------------- */

.fix_banner {
    width: 180px;
    position: fixed;
    bottom: 125px;
    right: 100px;
    z-index: 5;
}

/* -----------------------------------------------------------------------------------------------　下層ページ　--------------------------------------------------------------------------------------------------------- */
main.under_page {
    background-color: var(--white);
}


#page_title .title_wrap {
    color: var(--black);
    text-shadow:none;
}
#page_title .title_wrap  h2{font-size: 30px;}

.page_title_bg h1 {
    max-width: 190px;
    padding: 20px 0 40px;
}

#page_title .title_img .con2_bg {
    opacity: 0.5;
}

/*  -----------------------------------　お知らせ　▼ ----------------------------------- */
/*  -----------------------------------　お知らせ　▲ ----------------------------------- */

/* -----------------------------------　〇〇〇について　▼------------------------ */

#cms_3-g .cate_item, .cms_3-g .box_wrap{
    border-radius: 5px;
    border: var(--black) solid 2px;
    box-shadow: 5px 5px 0 0 var(--black);
}

/* -----------------------------------　〇〇〇について　▲-------------------------------- */


/*  -----------------------------------　スポーツ観戦ガイド ▼ ----------------------------------- */

.topcms_about_type1 {counter-reset: box 0;padding-top: 35px;}

.topcms_about_type1 .cate_box {
	width: 48%!important;
	margin-bottom: 50px;
	padding: 55px 25px 25px;
	background-color: var(--white);
	border-radius: 10px;
	box-sizing: border-box;
}

.topcms_about_type1 .number {
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 90px;
}

.topcms_about_type1 .number::before {
	counter-increment: box 1;
	content: "0"counter(box);
	font-size: 67px;
	line-height: 1;
	text-align: center;
	color: var(--black);
	display: inline-block;
	font-family: var(--font-en);
	position: absolute;
	right: 0;
	left: 0;
	top: -42px;
	margin: auto;
	z-index: 0;
}

.topcms_about_type1 .number::after {
	content: "";
	position: absolute;
	display: block;
	width: 73%;
	height: 2px;
	background: var(--black);
	left: 0;
	right: 0;
	margin: auto;
	top: 22px;
}

.topcms_about_type1 .cate_box .box_title1{font-size: 18px;line-height: 1.6;z-index: 1}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_about_type1 .cate_box {
	margin: 0 auto 80px;
	width: 80%!important;
}

.topcms_about_type1 .cate_box:last-of-type {
	margin-bottom: 0;
}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.topcms_about_type1 .cate_box {
	width: 100%!important;
	padding: 50px 25px 25px;
}

.topcms_about_type1 .number::before{
	font-size: 59px;
	top: -34px;
}

.topcms_about_type1 .number::after{
	width: 72%;
}

}

/*  -----------------------------------　スポーツ観戦ガイド ▲ ----------------------------------- */


/*  -----------------------------------　お客様の声 / よくある質問 　▼- ------------------------------------ */

.v_type1 .triangle {
    border-radius: 5px;
    display: block;
    border: var(--black) solid 2px;
    box-shadow: 5px 5px 0 0 var(--black);
}

.v_type1 .triangle:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: #FFF transparent;
    border-width: 13px 13px 0 0;
    bottom: -13px;
    left: 50%;
    margin-left: -9px;
}

.v_type1 .triangle:after {
    content: '';
    position: absolute;
    display: block;
    z-index: 0;
    border-style: solid;
    border-color: var(--black) transparent;
    border-width: 13px 15px 0 0;
    bottom: -19px;
    left: 50%;
    margin-left: -11px;
}

.v_type1 .box_title{
	color: var(--black);
}
/*  ------------------------------------　お客様の声 / よくある質問 　▲- ----------------------------------- */

/* *  -----------------------------------　1日の流れ　▼*  ----------------------------------- */

/* *  -----------------------------------　1日の流れ　▲*  ------------------------------------ */

/* -----------------------------------　お問い合わせ　▼*  -----------------------------------*/
/* -----------------------------------　お問い合わせ　▲*  ----------------------------------- */


/* *  -----------------------------------　プライバシーポリシー ▼*  ----------------------------------- */
/* *  -----------------------------------　プライバシーポリシー ▲*  -----------------------------------*/


/**  -----------------------------------　サイトマップ　▼*  ----------------------------------- */
/**  -----------------------------------　サイトマップ　▲*  ---------------------------------- */


@media all and (-ms-high-contrast: none){
}
/*------------------------------------------------------------------------------------------------------1700--------------------------------------------------------------------------------------------------------------*/

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

/*--------------------------------------------------------------------------------------------------------1536------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1536px){

/* ランダム配置と回転を再現 */
.pos1 {top: 75%;left: 185%;transform: rotate(0deg);}
.pos2 {top: 5%;left: 37%;transform: rotate(-15deg);}
.pos3 {top: 5%;right: 5%;transform: rotate(10deg);}
.pos4 {bottom: 5%;left: 5%;transform: rotate(30deg);}
.pos5 {bottom: 5%;left: 37%;transform: rotate(-20deg);}
.pos6 {bottom: 5%;right: 5%;transform: rotate(15deg);}

#contents .contents_box .box h2 {
    font-size: 30px;
}

}

/*-----------------------------------------------------------------------------------------------------1530 × 735---------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1530px){}


/*----------------------------------------------------------------------------------------------------------1366----------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1366px){

/* ランダム配置と回転を再現 */
.pos1 {top: 85%;left: 95%;transform: rotate(0deg);}
.pos2 {top: 5%;left: 35%;transform: rotate(-15deg);}
.pos3 {top: 5%;right: 0%;transform: rotate(10deg);}
.pos4 {bottom: 5%;left: 5%;transform: rotate(30deg);}
.pos5 {bottom: 5%;left: 35%;transform: rotate(-20deg);}
.pos6 {bottom: 5%;right: 0%;transform: rotate(15deg);}

#contents .contents_box .box h2 {
    font-size: 26px;
}

}


@media screen and (min-width: 1280px){
    .meal:before {
    top: 20%;
    left: 50%;
    z-index: 0;
}
}

/* @media screen and (max-width: 1281px){
    #contents .contents_box:nth-of-type(2) .contents_txt .box {
    padding: 15%; 
    padding-left: auto;
    padding-right: 50px; 
}
} */


/*-----------------------------------------------------------------------------------------------------------1000----------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px){

#contents .contents_box {
    width: 100%;
}

}

/*--------------------------------------------------------------------------------------------------------タブレット------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
#page_title .title_wrap h2 {
    font-size: 20px;
}

.txt_anim6 span{
	opacity: 1;
}

.txt_anim6 span.start{
	opacity: 1;
}

/* 共通缶画像 */
.can,.can-wrapper img {
  width: 300px;
}

/* ランダム配置と回転を再現 */
.pos1 {top: 83%;left: -114%;transform: rotate(0deg);}
.pos2 {top: 5%;left: 31%;transform: rotate(-15deg);}
.pos3 {top: 5%;right: -6%;transform: rotate(10deg);}
.pos4 {bottom: 5%;left: -5%;transform: rotate(30deg);}
.pos5 {bottom: 6%;left: 31%;transform: rotate(-20deg);}
.pos6 {bottom: 6%;right: -6%;transform: rotate(15deg);}


.catch_top {
    top: 20%;
    left: 4%;
    width: 93%;
}

.catch_bottom {
    bottom: 0%;
    right: 3%;
    width: 94%;
}


#top_contents1 .con_title {
    font-size: -webkit-calc(1rem + 13px);
    font-size: calc(1rem + 13px);
}

#contents .contents_box .contents_img {
    transform: translate(0px,50px);
    z-index: 1;
}

#contents .contents_box:nth-of-type(2) .contents_img {
    transform: translate(0px,50px);
}

.ore .txt_more {
    margin: auto;
    min-width: 250px;
}

.ore {
    padding: 20px 0 0;
}

#contents .contents_box .contents_txt .box {
    padding: 15% 7% 3%;
}

#contents .contents_box {
    margin-bottom: 0px;
}

#contents .contents_box:nth-child(2) {
    margin-bottom: 0px;
}
	
#contents .contents_box .contents_txt,#contents .contents_box:nth-of-type(2) .contents_txt{border-radius: 30px;}
	
#contents .contents_box .contents_txt .contents_point{top: 50px;}

#main_wrap .sns_head{
    margin-bottom: 30px;
}

#contents .contents_01,#contents .contents_02,#contents .contents_03 {
  width: 26vw;
  z-index: 4;
}

#contents .contents_01 {
    top: 8%;
    left: 74%;
}

#contents .contents_02 {
    top: 21%;
    left: 5%;
}

#contents .contents_03 {
    top: 80%;
    left: 72%;
}

/* ------------------------------　つなぎデザイン　▼------------------------------ */
#top_contents1::before {
    height: 30px;
    top: 121px;
}

#top_contents1::after {
    height: 30px;
    bottom: -29px;
}

#contents::before{
    height: 30px;
    top: -29px;
}

#contents:after{
    height: 30px;
    bottom: -29px;
}

#footer_info::after {
    height: 30px;
    top: -1px;
}

/* page02～page10だけ別の画像に */
.under_page #footer_info::after {
    height: 30px;
    top: -1px;
}

#footer::before {
    height: 30px;
    top: -30px;
}

.footer_item:before{
    height: 100px;
    top: -100px;

}

#page_title::before {
    height: 30px;
    bottom: 0px;
}

/* .page_title_bg::after {
    height: 30px;
    bottom: -29px;
} */

/* ------------------------------　つなぎデザイン　▲------------------------------ */

.info_txt_wrap {
    padding-right: 20px;
    padding-top: 50px;
    margin-top: 0px;
    margin-bottom: 5px;
}

.page_title_bg h1 {
    max-width: 120px;
}

}

/*--------------------------------------------------------------------------------------------------------スマホ----------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 667px){
.font_2dw {
    font-size: -webkit-calc(1rem + 0px);
    font-size: calc(1rem + 0px);
}

.catch_top {
    top: 28%;
    left: 5%;
    width: 92%;
}

.catch_bottom {
    bottom: -5%;
    right: 0%;
    width: 99%;
}


/* 共通缶画像 */
.can,.can-wrapper img {
  width: 130px;
}

/* ランダム配置と回転を再現 */
.pos1 {top: 85%;left: -86%;transform: rotate(0deg);}
.pos2 {top: 10%;left: 34%;transform: rotate(-15deg);}
.pos3 {top: 9%;right: -10%;transform: rotate(10deg);}
.pos4 {bottom: 15%;left: -5%;transform: rotate(30deg);}
.pos5 {bottom: 15%;left: 30%;transform: rotate(-20deg);}
.pos6 {bottom: 15%;right: -5%;transform: rotate(15deg);}

#contents .contents_box .box h2 {
    font-size: 20px;
}

	#contents .contents_box .contents_txt,#contents .contents_box:nth-of-type(2) .contents_txt{border-radius: 0px;}
	#contents .contents_box .contents_txt .box{
		padding: 20px;
		padding-left: 20px;
		padding-top: 50px;
		text-align: center;
	}
	#contents .contents_box:nth-of-type(2) .contents_txt .box{
		padding: 20px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 50px;
	}
	#contents .contents_box .contents_txt .box h2 span,#contents .contents_box .contents_txt .box p{display: inline-block;text-align: left;}
	#contents .contents_box .contents_txt .contents_point{
		top: 0;
		left: -25px;
		transform: rotate(-45deg);
		font-size: 80px;
	}
	#contents .contents_box .contents_img{transform: translate(0);z-index: 3;}
	#contents .contents_box:nth-of-type(2) .contents_img{transform: translate(0);}

.fix_banner {
    width: 100px;
    bottom: 55px;

}

.info_txt_wrap {
    padding-right: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#top_contents1 .con_title {
    font-size: -webkit-calc(1rem + 8px);
    font-size: calc(1rem + 8px);
}

}

/*---------------------------------------------------------------------------------------------iPhone8以下サイズ----------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 320px){
#contents .contents_box .box h2 {
    font-size: 20px;
    line-height: 1.4;
}

#top_contents1 .con_title {
    font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 5px);
}

#top_cms .cms_box .cms_title h3 {
    font-size: 20px;
}

}