@charset "utf-8";

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

	グローバル

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

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

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

.hidden_s { display: none !important;}

/* margin */
.mb40-20 { margin-bottom: 20px !important;}
.mb60-30, .mb50-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;}

.mt120-60 { margin-top: 60px !important;}

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

.header h1 { width: 180px; padding: 1.5em;}

/* ------------------------
	グローバルナビ
------------------------ */

.humberger { width: 50px; height: 52px; background-position: center calc(100% - 1.2em)}
.humberger:after { font-size: 0.75em;}
.is-open .humberger:after { color: #fff;}
.is-open .humberger.scroll:after { color: #000;}
.humberger img { transition: 0.1s;}

.sp-navi .box01 { font-size: 1em;}
.sp-navi .box01 .logo_wrap { justify-content: center; padding-bottom: 1em;}
.sp-navi .box01 .logo02 { width: 35%; margin-right: 10%;}
.sp-navi .footer_nav { flex-flow: column;}

@media only screen and (max-width: 480px) {
  .sp-navi .footer_nav { margin-left: 1.5em; font-size: 0.9em;}
}


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

.footer .bg01:before { height: 26%; top: calc(-26% + 1px);}

.footer ul.show_sp { display: block;}
.footer ul.hide_sp { display: none;}
.footer .bg01 .cont1100 { display: flex; justify-content: center; flex-flow: column;}
.footer .bg01 .box01 { justify-content: center; flex-flow: column; margin: auto; font-size: 1.1em;}
.footer .bg01 .box01 .logo_wrap { width: 100%; display: flex; justify-content: center; align-items: center;; padding: 0px 0px 40px;}
.footer .bg01 .box01 .logo { width: 50%; margin-right: 10%;}
.footer .footer_nav { font-size: 1em; column-gap: 3em}
.footer .footer_nav li { margin-bottom: 1.5em;}

.footer .bg_img01 { width: 40px; left: 5%; bottom: 6%}
.footer .bg_img02 { width: 40px; right: 5%; bottom: 4%}

@media only screen and (max-width: 640px) {
  .footer .bg01:before { width: 130%; left: -15%; height: 23%; top: calc(-23% + 1px);}

  .footer h2.fo16 { font-size: min(5.5vw,1.6em) !important;}
  .footer .img01 { width: 126%; margin-left: -13%;}
  
  .footer .bg01 .box01 .logo { width: 45%;}
  .footer .bg01 .box01 { font-size: 1em;}
  .footer .footer_nav { flex-flow: column; margin: auto;}
}

@media only screen and (max-width: 480px) {
  .footer .bg01:before { height: 15%; top: calc(-15% + 1px);}
}


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

	トップページ

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

.slider { height: 85vh; aspect-ratio: unset;}
.slide_wrap .text_box { font-size: min(3.5vw,1.2em); width: 100%;}
.slide_wrap .bg01 { width: 42%; max-width: 180px; bottom: 0; left: -4%;}
.slide_wrap .bg02 { width: 45%; max-width: 200px; bottom: 3%; right: -7%;}

.top_sec01 h2.mb30 { background-size: 9em auto; margin-bottom: 20px !important;}
.top_sec01 .bg01 { width: 18%;}
.top_sec01 .bg02 { width: 18%; left: 6%; top: 35%;}
.top_sec01 .bg03 { width: 25%;}
.top_sec01 .bg04 { width: 15%; right: 5%; top: 22%;}
.top_sec01 .text01.mb50 { margin-bottom: 30px !important;}
.top_sec01 .text01 span { display: inline-block;}
.top_sec01 .more_btn { margin: -9% 0px 0px;}
.top_sec01 p { margin-bottom: 24px;}

.top_sec02 { font-size: min(3.8vw,1em);}
.top_sec02 .bg_box:before { width: 97%; height: 103.5%; background-image: url("../images/top/top_sec02_line_sp.svg"); background-position: left top; top: -0.5%; left: 0;}
.top_sec02 .img01 { margin: 60px 13% 0px 52%; padding: 0px;}
.top_sec02 .sec_img01 { width: 21% !important;}

.top_sec02 .sec01 .sec_img01 { top: 9em;}
.top_sec02 .sec02 .sec_img01 { right: 2%;}
.top_sec02 .sec03 .sec_img01 { left: 8%; top: 9.5em;}
.top_sec02 .sec04 .sec_img01 { right: 2%;}
.top_sec02 .sec05 .sec_img01 { top: 9em;}
.top_sec02 .sec05 .sec_img02 { margin: 8em 0 0px 0px;}
.top_sec02 .sec06 .sec_img01 { top: 9.5em; left: 10%;}
.top_sec02 .sec06 .sec_img02 { margin-top: 20%;}

.top_sec02 .bg01 { top: -5%; width: 40%;}
.top_sec02 .bg02 { right: -3%; top: 2%; width: 16%;}

.top_sec03.mb120-60 { margin-bottom: 80px !important;}
.top_sec03 .top_en_ttl:before { top: -1em;}

.top_sec03 .bg01 { right: 3%; top: 0; width: 10%;}
.top_sec03 .bg02 { right: auto; top: auto; left: 2%; bottom: 3.5em; width: 10%;}

.top_sec04 { padding-bottom: 20%;}
.top_sec04:after { background-image: url("../images/top/top_sec04_line_sp.svg"); width: 125%; bottom: -1%; left: -5%;}

.top_sec04 .bg01 { left: auto; right: 4%; width: 8%; top: -3%;}
.top_sec04 .bg02 { right: 2%; top: 7em; width: 15%;}
.top_sec04 .bg03 { left: 0%; bottom: 52%; width: 14%;}
.top_sec04 .bg04 { right: auto; left: 3%; bottom: 7em;}

.popup-content .list01 { gap: 0.2em; font-size: min(2.8vw,0.95em) !important; margin: auto -2em;}
.popup-content .filippo p.mb10 { margin: auto -3em;}

.popup-content #popup03 .list01 { font-size: min(2.45vw,0.95em) !important;}

@media only screen and (max-width: 640px) {
  .top_sec01 .hide_sp { display: none;}
  .top_sec01 .show_sp { display: inline;}
  .top_sec01 .more_btn { margin: 20px 0px 0px;}

  .top_sec02 section { margin-bottom: 20% !important; flex-flow: column !important;}
  
  .top_sec02 .sec01 .box01 { margin-left: 2%;}
  .top_sec02 .sec01 .sec_img01 { left: 3%; top: 9.5em;}
  .top_sec02 .sec01 .sec_img02 { margin: -2em -3% 0px auto; width: 75%;}

  .top_sec02 .sec02 .box01 { margin-left: -2%;}
  .top_sec02 .sec02 .sec_img01 { right: 2%; top: -4em;}
  .top_sec02 .sec02 .sec_img02 { margin-top: -1em;}

  .top_sec02 .sec03 .box01 { margin: 0px 3% 0px auto;}
  .top_sec02 .sec03 .sec_img01 { top: 3.5em; left: 5%;}
  .top_sec02 .sec03 .sec_img02 { margin: 0.5em 0px 0px auto; width: 75%;}

  .top_sec02 .sec04 .box01 { margin: 3% auto 0px 0px;}
  .top_sec02 .sec04 .sec_img01 { top: -0.5em;}
  .top_sec02 .sec04 .sec_img02 { width: 85%; margin: -1% auto 0px -1%;}

  .top_sec02 .sec05 .box01 { margin: 0px 0px 0px auto;}
  .top_sec02 .sec05 .sec_img01 { left: 8%; top: 3.5em;}
  .top_sec02 .sec05 .sec_img02 { width: 75%; margin: 0.5em 0px 0px auto;}

  .top_sec02 .sec06 .box01 { margin: 0px 0px 0px auto;}
  .top_sec02 .sec06 .sec_img01 { left: 2%; top: 5em;}
  .top_sec02 .sec06 .sec_img02 { margin: -1em -1% 0px auto; width: 82%; z-index: 50;}

  .popup-inner > figure { display: none;}
  
  .post_list { gap: 40px 0.8em}
  .post_list > li { width: calc((100% - 0.8em) / 2);}
}

@media only screen and (max-width: 480px) {
  .top_sec02 .heading_middle { letter-spacing: 0.05em;}
  
  .top_sec02 .sec01 .sec_img02 { margin-top: -0.5em}
  .top_sec02 .sec05 .sec_img01 { left: 5%; top: 6em;}
  
  .top_sec03, .top_sec04, .sp_small { font-size: 0.9em;}
  .top_sec03 .more_btn, .top_sec04 .more_btn { font-size: 1.1em;}
}


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

	下層ページ

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

.heading_large { font-size: min(7.5vw,2em);}

.more_btn a { width: 13.5em;}
.more_btn.small a { width: 11em;}

.ttl_business:after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.5));}
.ttl_business .box01 { display: block;}
.ttl_business .box01 > figure { height: 100dvh;}
.ttl_business .box_inner { display: block; position: absolute; z-index: 50; width: 100%; left: 0px; bottom: 5em; font-size: min(4vw,1.2em); color: #fff; padding: 0px 1.5em;}
.ttl_business .fo_brown { color: #fff !important;}
.ttl_business h1 { font-size: 1.8em;}


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

.ttl_about { padding-top: 80px;}
.ttl_about:before { width: 120%; height: 110%; bottom: 15%; right: -10%; background-size: auto 100%; background-position: right bottom;}
.ttl_about h1 { font-size: 2em; margin-bottom: 20px !important;}
.ttl_about h1 .medium { letter-spacing: 0px; font-size: 0.8em !important;}
.ttl_about .list01 li { width: 130px;}

.about_sec01 .heading_large { font-size: min(6.5vw,2em); margin: auto -0.5em;}
.about_sec01 .box01 { padding-left: 1em;}
.about_sec01 .logo { padding: 0px 25%;}

.about_sec { display: block; padding: 0px 15px;}
.about_sec .ttl_box { width: auto; margin: 0px; writing-mode: initial;}
.about_sec .ttl_box .fo_mincho { font-size: min(7.5vw,2em);}
.about_sec .ttl_box .fo_brown { display: flex; align-items: center; gap: 1em; padding: 0; margin-top: 0.4em;}
.about_sec .ttl_box .fo_brown:before { position: static; flex-grow: 1; width: auto; height: 1px;}
.about_sec .ttl_box .text01 { margin: 0px 0px 0px 3em;}
.about_sec .box_inner { margin-top: 30px;}

.about_sec02 .text01 { font-size: 1.2em; margin-top: 2.5em;}

.about_sec04 h3 { margin-top: 60px;}
.about_sec04 .box01 { gap: 0px 3em; flex-wrap: wrap; padding: 0px;}

.about_sec01 .top_en_ttl.fo125, .about_sec04 .top_en_ttl.fo125 { font-size: 1.1em !important;}


@media only screen and (max-width: 480px) {
  .ttl_about .hide_sp { display: none;}
  .ttl_about .show_sp { display: inline;}
  .ttl_about h1 .medium { display: block; font-size: 0.5em !important; margin-top: -0.5em;}
  .ttl_about:before { display: none;}
  
  .about_sec { padding: 0px;}
  .about_sec .box_inner br { display: none;}

  .about_sec04 h2 .show_sp { display: inline;}
  .about_sec04 h2 .text01 { margin-right: -0.8em;}
  .about_sec04 p.mb40 { margin-bottom: 25px !important;}
  .about_sec04 .box01 ul { width: 15em; margin-left: 2em;}
}

/* ------------------------
	投稿
------------------------ */

.pagettl { padding-top: 3.5em; font-size: 0.9em;}
.pagettl .heading_large { font-size: 2em;}

/* archive */
.news_pagettl { padding-top: 2.5em;}
.news_cat { gap: 0.5em 2em;}

.index_text01 { margin-top: -1em;}
.index_text02.fo07 { font-size: min(3.3vw,0.7em) !important;}

/* single */
.single_header { flex-flow: column; gap: 30px 0px; padding: 100px 30px 50px; font-size: 1em; margin-bottom: 10px !important;}
.single_header:before { content: ""; position: absolute; width: 100%; height: 75px; left: 0px; bottom: 0px; background: linear-gradient(to top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);}
.single_header > * { width: 100%;}
.single_header .box_inner { display: block; padding: 0px;}
.single_header h1 { font-size: 2em; margin: -0.5em 0px 0.5em !important;}
.single_art.blog_content { margin-top: 0px;}
.single_header > figure:after { display: none;}

@media only screen and (max-width: 640px) {
  .single_header { padding: 100px 15px 50px;}
  .single_art.blog_content { padding: 0px 15px;}

  .page_container .blog_content, .archive_wrap { padding: 0px;}
}

/* 記事ヘッダー */
.blog_header h1 { font-size: 2em;}
.blog_header .date_wrap { display: block;}

/* 本文 */
.blog_content h2 { font-size: 1.6em;}
.blog_content hr { height: 0.9em; margin: 40px 0px 60px;}

.aligncenter, .alignright, .alignleft { display: block; margin: 0px auto 20px; float: none;}

@media only screen and (max-width: 640px) {
  .blog_content blockquote { padding: 2.5em; font-size: 0.9em;}
  .blog_content blockquote { background-position: 1em 1.5em, calc(100% - 1em) 1.5em;}
}


/* shop info */
.shop_info { font-size: min(3.5vw,1em);}
.shop_info > figure { width: 35%;}
.shop_info .box_inner { width: 60%;}

@media only screen and (max-width: 640px) {
  .shop_info { display: block; padding: 5.5%;}
  .shop_info > figure { width: auto;}
  .shop_info .box_inner { width: auto; margin-bottom: 30px;}
  .shop_info .btn_area { right: 3.5em;}
  .shop_info .btn_area a { font-size: 0.8em;}
}

/* project */
.pro_list { gap: 40px 3%;}

@media only screen and (max-width: 640px) {
  .pro_list { font-size: min(2.3vw,1em);}
  .pro_list li { width: calc(94% / 3);}
  .pro_list figure { padding: 0px 20%;}
}

@media only screen and (max-width: 480px) {
  .pro_list { font-size: min(3.5vw,1em);}
  .pro_list li { width: calc(97% / 2);}
}