@charset "utf-8";

/*------------------------------------------------------

	グローバル

------------------------------------------------------*/

body { min-width: 0px; font-size: 0.9em;}

.ta_right-s_center { text-align: center;}
.ta_left-s_center { text-align: center;}
.ta_center-s_left { text-align: left;}

/* ボックス */
.hidden_s { display: none !important;}

/* margin */
.mb40-20 { margin-bottom: 20px !important;}
.mb50-30 { margin-bottom: 30px !important;}
.mb60-30 { margin-bottom: 30px !important;}
.mb80-40 { margin-bottom: 40px !important;}
.mb100-60 { margin-bottom: 60px !important;}
.mb120-60 { margin-bottom: 60px !important;}
.mb120-80 { margin-bottom: 80px !important;}
.mb160-80 { margin-bottom: 80px !important;}

/* ------------------------
	ヘッダー
------------------------ */

.header { margin-top: -12px;}
.header .logo img, .header_logo img { margin-left: -5px; width: 110px;}

.header_logo { padding: 0px 65% 0px 10px; top: -0.1%;}

/* ------------------------
	フッター
------------------------ */

.footer_mainimage { padding: 10% 26% 15%; background-image: url("../images/common/footer_bg01_sp.png");}
.footer_mainimage .bg { bottom: -6%;}

.over_hidden > .footer_mainimage { padding: 9% 28% 16%; background-image: url("../images/common/mainimage_sp.png");}

.footer .bg01 { padding-top: 40px;}
.footer .bg01 .more_btn a { padding: 1.2em 3.6em; font-size: min(5vw,1.25em); max-width: 350px;}
.footer .bg01 .img01 { width: 25%; left: -1%; bottom: -50px;}
.footer .bg01 .img02 { width: 30%; right: -3%; top: auto; bottom: -2%;}

@media only screen and (max-width: 640px) {
  .footer_nav { flex-wrap: wrap;}
  .footer_nav ul { width: 50%; font-size: min(3.45vw,1.5em);}
  .footer_nav ul:nth-child(3), .footer_nav ul:nth-child(5) { margin-top: -1.7em;}

}


/*------------------------------------------------------

	トップページ

------------------------------------------------------*/

.mainimage { padding: 15% 11% 18%; background-image: url("../images/top/main_bg_sp.jpg");}
.mainimage .btn_area { width: 9%; bottom: 0;}
.mainimage .bg01 { height: 20%; bottom: -10%;}

.top_text01 { font-size: min(4.2vw,1em);}

.top_bg01 .pos_ab img, .top_bg02 .pos_ab img { max-width: 100%;}
.top_bg01 .img01 { width: 20%; top: -0.7%; left: -3%;}
.top_bg01 .img02 { width: 30%; top: -3%; left: auto; right: -10% !important;}
.top_bg01 .img03 { width: 15%; top: 35%; left: -1% !important;}
.top_bg01 .img04 { width: 25%; bottom: -1.7%; right: -1% !important;}

.top_ttl01 { font-size: 1.8em;}

.top_ttl01.long.fo_blue, .top_ttl01.fo_pink.long { background-size: 100% 100%; font-size: min(7vw,1.8em);}

.top_news { background-size: 50px auto, auto; border-bottom-right-radius: 61px; padding: 50px 5%;}
.top_news .box01 { padding-right: 2%;}
.top_news dt { width: 6em;}
.top_news .img06 { width: 10%; left: 3%; bottom: -9%;}

.top_how section { padding: 30px 6%;}
.top_how dt { width: 4.7em; margin: -1em 0px 0px -1.3em;}
.top_how dd.fo18 { width: calc(100% - 2.5em); font-size: min(6.3vw,1.8em) !important;}
.top_how dd span { padding: 0.2em 0.8em;}
.top_how h4 { font-size: min(4.1vw,1em);}

.top_event { padding: 50px 0px;}
.top_event .img01 { width: 15%; left: 1%; top: -1%;}
.top_event .img02 { width: 12%; right: 2%; top: 1%;}

.top_event .box01 { gap: 75px 4%;}
.top_event .box01 section { width: 48%;}
.top_event section .back_white { padding: 50px 20px 20px;}
.top_event .ttl_box { left: -0.5em; font-size: min(2vw,1em);}
.top_event .ttl_box .pos_ab { left: -0.3em;}
.top_event .btn_area { right: -5px; width: 70px;}
.top_event .bnr01 { align-self: center;}

.top_event .box01:before { width: 25%; left: -5%;}
.top_event .box01:after { width: 23%; right: -5%;}

.top_btn01 { padding: 70px 0px; background-size: auto 35px;}
.top_btn01 .list01 { flex-wrap: wrap; gap: 20px 3%;}
.top_btn01 .list01 li { width: 47%; max-width: 300px !important; min-width: 270px;}
.top_btn01 .img01 { top: -80px !important; right: 3%; width: 65px;}
.top_btn01 .img02 { bottom: -5.2%; width: 29%;}
.top_btn01 .img03 { width: 25%;}

.under .top_btn01 .list01 { gap: 20px 3%;}

.top_btn02 { padding-top: 8%;}
.top_btn02 .img07 { width: 15%; top: -12%; left: 3%;}
.top_btn02 .btn_area { max-width: 400px; margin: auto;}

.top_bg02 .img00 { width: 16%; top: -4.5%; right: 2%;}
.top_bg02 .img01 { z-index: 50; width: 13%; top: -3.5%; left: -2%;}
.top_bg02 .img02 { width: 25%; top: auto; bottom: 15%; left: 75%;}
.top_bg02 .img03 { width: 25%; top: auto; bottom: 10%; left: -2%;}
.top_bg02 .img04 { width: 23%; bottom: -3%; right: -1%;}

.top_access { padding: 8% 6% 12%;}
.top_access .img05 { width: 22%; bottom: -30px; left: -2%;}
.top_access .img06 { width: 17%; top: auto; bottom: 10px; right: -3%;}
.top_access .box01 { flex-flow: column; gap: 40px;}
.top_access .box02 { padding-bottom: 15px;}

.top_access .more_btn a { padding: 0.8em 3.6em; font-size: min(5vw,1.25em); max-width: 350px;}

.top_map .tab { display: flex; font-size: min(1.75vw,1em);}
.top_map .content li { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 5%;}
.top_map .content li img { max-width: 100%;}

.top_sns { padding: 13% 0px 60px;}
.top_sns .btn_area li { width: 50px;}
.top_sns .btn_area h3 { width: 140px; right: -10px; top: -55px;}
.top_sns .img01 { width: 15%; top: -10% !important; left: 3%;}
.top_sns .img02 { width: 13%; top: -7% !important; right: 1%;}
.top_sns .img03 { width: 22%; bottom: 2%; left: 1%;}
.top_sns .img04 { width: 20%; bottom: -80px; right: 1%;}

.under .top_sns { padding-top: 19%;}

.top_corp .box01 { gap: 40px 15px;}
.top_corp .box02 { column-gap: 15px;}
.top_corp .box01 .fo13 { font-size: min(2.1vw,1.2em) !important;}

.top_corp table { font-size: min(2vw,1em);}
.top_corp td { width: calc((100% - 12em) / 2);}
.top_corp td:first-child { width: 12em;}

.time_box.fo115 { font-size: min(3.2vw,1.15em) !important;}
.time_box .ttl_box { width: 16.5em; padding-left: 2em;}
.time_box .ttl_box:after { width: 0.7em; right: calc(1px - 0.7em);}
.time_box .text_box { padding-left: 1.3em;}

.ex_sec01 .time_box.fo115 { font-size: min(3.1vw,1.15em) !important;}

@media only screen and (max-width: 640px) {
  .top_news .img06 { width: 10%; bottom: -6%;}

  .top_event .box01 section { width: 100%; max-width: 500px; margin: auto;}
  .top_event .ttl_box { font-size: min(4vw,1em);}
  
  .top_btn01 .img02 { bottom: -2.5vw !important;}

  .top_btn02 .text01 { text-align: left;}

  .top_sns .img03 { bottom: 10%;}
  
  .top_how .text01 { font-size: min(3.7vw,1.2em);}
  .top_how .text01 .hide_sp { display: none;}
  .top_how .text01 .show_sp { display: inline;}
}

@media only screen and (max-width: 480px) {
  .top_btn02 .list01 { flex-wrap: wrap; gap: 0px 4%;}
  .top_btn02 .list01 li { width: 48%;}
  .top_btn02 .img07 { top: -8%;}

  .top_sns .img03 { width: 24%; bottom: 18%;}

  .top_corp .box01 { grid-template-columns: repeat(2,1fr);}
  .top_corp .box01 section:nth-child(1) { grid-column: 1; grid-row: 1;}
  .top_corp .box01 section:nth-child(2) { grid-column: 2; grid-row: 1;}
  .top_corp .box01 section:nth-child(3) { grid-column: 1; grid-row: 2;}
  .top_corp .box01 section:nth-child(4) { grid-column: 2; grid-row: 2;}
  .top_corp .box01 .box_inner { grid-column: 1 / span 2; grid-row: 3;}
  .top_corp .box01 .fo13 { font-size: min(3.2vw,1.2em) !important;}
  
  .top_corp table, .top_corp tbody, .top_corp tr, .top_corp td { display: block; width: 100% !important;}
  .top_corp table { font-size: min(3.2vw,1em);}
}


/*------------------------------------------------------

	下層ページ

------------------------------------------------------*/

.radius50 { border-radius: 20px;}
.radius30 { border-radius: 15px;}
.radius20 { border-radius: 10px;}

a.link { background-size: 0.6rem; padding-right: 1rem;}

.pagettl { font-size: min(7vw,2.3em);}

.page_head .img01 { width: 17%; top: -20%}
.page_head .img02 { width: 13%; bottom: auto; top: 8%;}

.page_head.food h1 { letter-spacing: -0.05em;}
.page_head.food .img01 { width: 13%; top: -33%}
.page_head.food .img02 { width: 10%; top: 20%;}

.page_nav .list01 li { width: 45%; max-width: 200px;}
.page_nav .img01 { width: 25%; right: 5%; bottom: 4%;}
.page_nav .img02 { width: 15%; left: 8%; bottom: 13%;}

.heading_side { font-size: min(6vw,2em); padding: 0.3em 1em; letter-spacing: 0.05em;}

.heading_back.back_brick { font-size: min(7vw,1.8em);}

@media only screen and (max-width: 640px) {
  .page_head .img01 { top: -30%; left: 0;}
}

@media only screen and (max-width: 480px) {
  .page_nav .list01 { margin-top: -5%;}
}


/* ------------------------
	about
------------------------ */

.about_sec01 { padding-bottom: 10%;}
.about_sec01 .img01 { width: 15%; left: -10px; top: -30%;}
.about_sec01 .img02 { width: 12%; right: -10px; bottom: -20%;}

.top_bg01.about .img04 { bottom: -3%;}

.about_sec02 { padding: 8% 5%;}
.about_sec02 .box01 { display: block;}
.about_sec02 .box01 .box_inner { width: auto;}
.about_sec02 .box01 > figure { width: auto; margin: 10px 0px 0px;}

.under_bg01.about_sec03 { padding: 13% 0px 1px;}
.under_bg01.about_sec03 .img01, .under_bg01.about_sec03 .img02 { top: -2%;}

.about_sec03 section.back_white { padding: 8% 5%;}
.about_sec03 .sec01 .list01 { gap: 3%;}

.about_sec03 .sec03 .box01 > figure { width: 30%;}

.about_dl dt { width: 30%;}
.about_dl dl { font-size: 1em !important;}
.about_dl dl:nth-child(-n+4) dt { width: 40%;}
.about_dl dd.fo09 { font-size: min(3.3vw,0.9em) !important;}

@media only screen and (max-width: 640px) {
  .about_sec01 { padding-bottom: 20%;}
  .about_sec01 .text01 { font-size: min(3.4vw,1.15em) !important;}
  .about_sec01 .text01 .show_sp { display: inline;}

  .about_sec03 .sec03 .box01 > figure { width: 100%; padding: 0px 25%;}
  
  .about_sec03 .heading_back02.fo14 { font-size: min(5.3vw,1.4em) !important; letter-spacing: 0.05em;}
  .about_dl { gap: 20px;}
  .about_dl dl { width: 100%;}
  .about_dl dl:nth-child(-n+4) { font-size: min(3.3vw,1em);}
  .about_dl dl { font-size: min(4vw,1em);}

  .about_sec03 .sec02 .box01 { display: block;}
}

@media only screen and (max-width: 480px) {
  .about_sec02 dl { font-size: min(3.8vw,1em);}
  .about_sec02 dt { width: 4em; height: 3.8em; font-size: 1.2em;}

  .under_bg01.about_sec03 .img01 { top: -1.3%;}
  .under_bg01.about_sec03 .img02 { top: -1%;}

  .about_sec03 .sec01 .list01 { flex-wrap: wrap; gap: 15px}
  .about_sec03 .sec01 .list01 li { width: calc(50% - 7.5px);}
  .about_sec03 .sec01 .list01 li:last-child { width: 100%;}
  .about_sec03 .sec01 .hide_sp { display: none;}
  .about_sec03 .sec01 .show_sp { display: inline;}

  .about_dl dl:nth-child(-n+4), .about_dl dl:nth-child(-n+4) > * { display: block; text-align: center;}
  .about_dl dl:nth-child(-n+4) dt { width: 100%; margin-bottom: 15px;}
  .about_dl dl:nth-child(-n+4) dt img { width: 80%;}
  .about_dl dl:nth-child(-n+4) dd { padding: 0px;}
  .about_dl dt { width: 50%;}
  .about_dl dl:nth-child(n+5) dt img { width: 100%;}
  
  .about_dl .sp_margin { margin-bottom: 45px;}
}


/* ------------------------
	faq
------------------------ */

.under_bg01 .img01 { width: 14%; top: -1%; left: 3%;}
.under_bg01 .img02 { width: 11%; top: -0.5%; right: 4%;}
.under_bg01 .bg_inner:before { width: 25%; left: -5%; background-position: center 7%;}
.under_bg01 .bg_inner:after { width: 23%; right: -5%; background-position: center 8%;}

.faq_sec01, .ship_sec01 { padding: 13% 0px 1px;}
.faq_sec01 div.back_white { padding: 7% 5%;}

.faq_sec01 dt, .faq_sec01 dd { position: relative; padding: 0.35rem 0px 0.35rem 3.5rem;}
.faq_sec01 dt:before, .faq_sec01 dd:before { width: 2.5rem; height: 2.5rem;}

.faq_img01 { width: 18%; left: -2.5%; bottom: -4%;}

@media only screen and (max-width: 480px) {
  .under_bg01 .img01 { top: -0.03%;}
  .under_bg01 .img02 { top: -0.01%;}
  .faq_img01 { bottom: -1%;}
}


/* ------------------------
	food
------------------------ */

.top_bg01.food .img02 { width: 20%; left: 75%; top: -20%;}
.top_bg01.food .img04 { width: 20%; bottom: -12%;}

.food_sec02 { background-position: -68% 3%, 166% 4%; background-size: 45% auto, 43% auto; padding-top: 11%;}

.food_sec .box01 { flex-flow: column; gap: 60px; padding: 0px 1.5%;}
.food_sec section { width: 100%; max-width: 550px; margin: auto;}
.food_sec section .box02 > figure { width: 35%;}
.food_sec section .box02 .box_inner { width: 60%;}

.food_sec section .list01 li { font-size: min(2.8vw,1em);}

@media only screen and (max-width: 640px) {
  .food_sec section .box02 > figure { width: 43%;}
  .food_sec section .box02 .box_inner { width: 52%;}
}


/* ------------------------
	ship
------------------------ */

@media only screen and (min-width: 481px) {
  .ship_sec01.under_bg01 .img01 { top: -0.3%;}
  .ship_sec01.under_bg01 .img02 { top: -0.1%;}
}

.sec_wrap { padding: 0px; gap: 50px 20px;}
.sec_wrap section { width: calc(50% - 10px); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
.sec_wrap header .text01 { margin-left: 0px; padding: 0.1em 1em 0.1em 1.5em;}
.sec_wrap header h3 { font-size: min(5vw,1.5em);}
.sec_wrap .main .text01 { display: table; border-radius: 0.3em; padding: 0.1em 0.9em;}
.sec_wrap .btn_area { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 1em 1.5em 1.5em;}

.sec_wrap header .text01 .show_sp { display: inline;}
.sec_wrap header .text01 .hide_sp { display: none;}

@media only screen and (max-width: 640px) {
  .sec_wrap section { width: 100%;}
  .sec_wrap .main { padding: 1em 1.5em 1.5em;}
}


/* fish */
.fish_sec header { padding: 8% 15px 40px;}
.fish_sec header span { display: inline-block;}
.fish_sec header .img11 { width: 15%; left: 3%;}
.fish_sec header .img22 { width: 25%; right: 2%;}

@media only screen and (min-width: 440px) and (max-width: 640px) {
  .fish_sec header .img22 { width: 20%;}
}

.fish_sec .main { padding: 7% 20px 1px;}

.fish_sec .box01 .box_inner { width: 45%;}
.fish_sec .box01 > figure { width: 50%;}
.fish_sec .box01 dl { display: flex; justify-content: space-between; align-items: center;}
.fish_sec .box01 dt { width: 6.5em; letter-spacing: 0.1em; border-radius: 30px; align-self: flex-start;}
.fish_sec .box01 dd { width: calc(100% - 7.5em);}

.fish_sec .list01 { font-size: min(2vw,1em)}
.fish_sec .list01 .num img { max-width: 5.5em;}
.fish_sec .list01 .arrow { width: 4em; top: -4.6em;}

@media only screen and (max-width: 600px) {
  .fish_sec .box01 { display: block;}
  .fish_sec .box01 .box_inner { width: auto; margin-bottom: 30px;}
  .fish_sec .box01 > figure { width: auto;}

  .fish_sec .box02 h4.fo125 { font-size: min(3.2vw,1.25em) !important;}
  .fish_sec .box02 table { font-size: min(3.2vw,1em);}

  .fish_sec .list01 { display: block; font-size: min(3.6vw,1em);}
  .fish_sec .list01 li { width: auto; display: flex; align-items: center; flex-direction: row; text-align: left; justify-content: space-between;}
  .fish_sec .list01 .box_inner p:last-of-type { margin-bottom: 0px;}
  .fish_sec .list01 .num { margin-left: 0em; width: 5em;}
  .fish_sec .list01 .num img { max-width: 100%;}
  .fish_sec .list01 li .box_inner { border-right: none !important; width: calc(100% - 6em); flex-grow: inherit !important;}
  .fish_sec .list01 .arrow, .fish_sec .list01 .hide_sp { display: none;}
}


/* stage */
.stage_table.fo11 { font-size: min(3.3vw,1.1em) !important;}
.stage_table th { padding: 1em 0.5em; width: 6.5em;}
.stage_table td { padding: 0.6em 3.3em 0.6em 1em;}
.stage_table td .pos_ab { font-size: 0.85em; width: 2.8em; height: 2.8em; right: 0.2em;}


/* ex */
.top_bg01.about.ex_sec01 .img04 { bottom: 50px;}

.ex_sec01 .back_white { padding: 40px 6%;}

.ex_sec01 dt { width: 3.8rem; margin: -1em 0px 0px -0.8em;}
.ex_sec01 dd.fo18 { width: calc(100% - 3.8rem); font-size: min(5.2vw,1.8em) !important;}
.ex_sec01 dd span.back_yellow { padding: 0.2em 0.8em;}
.ex_sec01 .box_inner { padding-left: 3.8rem;}

.ex_sec01.work .box_inner { padding-left: 0;}
.ex_sec01.work dd.fo18 { font-size: min(4.3vw,1.8em) !important;}

.ex_sec02 { padding: 13% 0px 1px;}
.ex_sec02 .btn_area { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 6%;}

.ex_sec { padding-top: 40px;}
.ex_sec h2 { margin: auto 6%;}
.ex_sec .main { padding: 0px 6%;}

.ex_sec .box01 figure .pos_ab { width: 120px; top: -20px; right: -20px;}

.ex_sec.sec01 table.fo11 { font-size: min(4vw,1.1em) !important;}

.ex_img01 { width: 80px; left: -1%; top: -40px;}

.ex_img02 { position: static;}

@media only screen and (max-width: 640px) {
  .ex_sec01 dd .show_sp { display: inline;}

  .ex_sec .box01 { display: block;}
  .ex_sec .box01 .box_inner { width: auto; margin-bottom: 40px;}
  .ex_sec .box01 figure { width: auto;}
  
  .ex_sec.sec03 h2 .show_sp { display: inline;}
  .ex_sec.sec03 h2 span { display: block;}
}


/* stamp */
.stamp_howto section, .stamp_howto .text_box01 { font-size: min(2.7vw,1.45em);}
.stamp_howto section .num { width: 6em; padding-right: 0.6em;}
.stamp_howto section .num img { width: 100%;}
.stamp_howto section .box_inner { width: calc(100% - 6em); border: none; font-size: 1em; padding: 0; margin-top: 1.5em;}
.stamp_howto section .box_inner p { font-size: 1.6em;}
.stamp_howto .il01 { width: 9em; right: 1em; top: -0.5em;}
.stamp_howto .il02 { width: 9.5em; right: 0.5em; top: auto; bottom: -3.5em;}
.stamp_howto .text_box01 { margin-left: 0;}
.stamp_howto .text_box01 .text { display: block; border-radius: 0.4em; padding: 0.4em 1em; margin-top: 1.6em;}
.stamp_howto .il03 { right: -0.7em; top: auto; bottom: -0.3em; width: 13em;}




/* スタンプラリー(TOPボタン) */
.top_event .bnr01 a:after { font-size: 4vw; border-radius: 0.7em;}
@media only screen and (max-width: 640px) {
  .top_event .bnr01 a:after { font-size: 7vw;}
}