/* format.css */
@charset 'utf-8';

@media screen and (max-width: 740px){/* SP */}
@media screen and (min-width: 741px){/* PC */}

#willproduce .no38_senriyama { display: none; }

/*---------- base ----------*/
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 100vw; margin: 0; padding: 0; font-family: "Noto Serif JP", serif; font-size: 16px; line-height: 2.5em; letter-spacing: 0.1em; font-feature-settings: "halt"; color: #373737; }
img { display: block; width: 100%; }
a { color: #373737; text-decoration: none; }
li, ol, ul { list-style: none; }
@media screen and (max-width: 740px){
  body { line-height: 2.2em; }
}

.pc { display: block; }
.sp { display: none; }
.inline_pc { display: inline; }
.inline_sp { display: none; }
@media screen and (max-width: 740px){/* SP */
  .pc { display: none ; }
  .sp { display: block; }
  .inline_pc { display: none ; }
  .inline_sp { display: inline; }
}

/*---------- contents ----------*/
.contents_wrap { width: 100vw; overflow: hidden; }
.contents { width: min(90%, 1200px); margin: 0 auto; padding: 120px 0; }
.contents.nopadding { padding: 0; }
.contents.nopadding_bottom { padding-bottom: 0; }
.contents.nopadding_top { padding-top: 0; }
.content { width: 100%; padding: 80px 0 0; }
@media screen and (max-width: 740px){/* SP */
  .contents { padding-top: 60px; padding-bottom: 60px; }
  .content { padding-top: 60px; }
}

/*---------- background ----------*/
.bg_g { background: #F7F4EB; }
.bg_w { background: #FFF; }
.bg_area1 { background-image: radial-gradient(at 10% 20%, #97C6CA, #60A9AE); }
.bg_area2 { background-image: radial-gradient(at 10% 20%, #B9C7DE, #8B9BAD); }
.bg_area3 { background-image: radial-gradient(at 10% 20%, #FEDC74, #ECB428); }
.bg_area1_accent { background: #99CCFF; }
.bg_area2_accent { background: #FFA6AE; }
.bg_area3_accent { background: #CCCCFF; }

/*---------- font ----------*/
.garamond { font-family: "EB Garamond", serif; font-optical-sizing: auto; font-style: normal; }
.yumincho { font-family: "Yu Mincho", serif; }
.bold { font-weight: 570; }
.medium { font-weight: 400; }
.icon_target_blank { display: inline-block; width: 1em; margin-bottom: -0.1em; margin-left: 0.2em; }

/* size */
.text_xxl { font-size: 60px; line-height: 1.8em; }
.text_xl { font-size: 40px; line-height: 1.8em; }
.text_l { font-size: 32px; line-height: 1.8em; }
.text_m { font-size: 24px; line-height: 1.8em; }
.text_normal { font-size: 16px; line-height: 1.8em; }
.text_s { font-size: 14px; line-height: 1.8em; }
.text_xs { font-size: 12px; line-height: 1.8em; }
@media screen and (max-width: 740px){/* SP */
  .text_xxl { font-size: 40px; }
  .text_xl { font-size: 28px; }
  .text_l { font-size: 24px; }
  .text_m { font-size: 20px; }
}

/* color */
.color_w { color: #FFF; }
.color_b { color: #373737; }
.color_g { color: #25565B; }


/*==============================
MAIN
==============================*/
/*---------- h1 ----------*/
.h1_wrap { text-align: center; padding-top: 80px; margin-bottom: 80px; }
.h1_jp { margin-bottom: 8px; }
.h1_en { display: block; font-family: "Yu Mincho", serif; font-weight: 500; line-height: 1em; letter-spacing: 0.2em; }
.h1_line { position: relative; display: inline-block; width: 60px; height: 8px; }
.h1_line:nth-child(1) { background: #8B9BAD; }
.h1_line:nth-child(2) { background: #8BC0C4; }
.h1_line:nth-child(3) { background: #FFCC33; }
@media screen and (max-width: 740px){/* SP */
  .h1_line { width: 40px; height: 6px; }
}

/*---------- caption ----------*/
.caption_wrap { text-align: center; }
.caption_title { margin-bottom: 24px; }
@media screen and (max-width: 740px){/* SP */
  .caption_text { text-align: justify; }
}

/*---------- h2 ----------*/
.h2_wrap { text-align: center; margin-bottom: 40px; }
.h2_jp { margin-bottom: 8px; }
.h2_en { display: block; font-family: "Yu Mincho", serif; font-weight: 500; line-height: 1em; letter-spacing: 0.2em; }
.h2_line  { position: relative; display: inline-block; width: 60px; height: 8px; }
@media screen and (max-width: 740px){/* SP */
  .h2_wrap { padding-top: 0; margin-bottom: 40px; }
  .h2_line  { width: 40px; height: 6px; }
}

/*---------- h3 ----------*/
.h3_en { display: block; padding-bottom: 4px; margin-bottom: 20px; border-bottom: 1px solid #25565B; font-family: "Yu Mincho", serif; font-weight: 500; letter-spacing: 0.2em; }

/*---------- link_button ----------*/
.link_button_wrap { display: flex; justify-content: center; gap: 20px; }
.link_button_wrap .link_button { padding: 12px 16px; border: 2.5px solid #373737; background: #373737; box-shadow: 0px 4px 12px #00000030; color: #FFF; font-size: 20px; transition: all 0.3s;  }
.link_button_wrap .link_button:hover { color: #373737; }
.link_button_wrap .link_button span { position: relative; display: flex; align-items: center; justify-content: space-between; z-index: 1; }
.link_button_wrap .link_button.bg_skew_x { position: relative; overflow: hidden; }
.link_button_wrap .link_button.bg_skew_x::before { content: ''; position: absolute; top: 0; left: -150%; width: 130%; height: 100%; background: #FFF; transform: skewX(-25deg); }
.link_button_wrap .link_button.bg_skew_x:hover::before { animation: skew_anime_x .5s forwards; }

/* 追加 */
#CONTACT_CTA .link_button_arrow {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(30%) saturate(800%) hue-rotate(314deg);
}
#CONTACT_CTA .link_button.bg_skew_x:hover .link_button_arrow {
  filter: brightness(0) invert(1);
}
@keyframes skew_anime_x { 100% { left:-17%; } }
@media screen and (max-width: 740px){/* SP */
  .link_button_wrap .link_button { padding: 8px; padding-right: 38px; font-size: 16px; }
  .link_button_wrap .link_button:hover { transform: translateX(0%); color: #FFF; }
  .link_button_wrap .link_button.bg_skew_x::before { display: none; }
}

.contact_links {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.contact_links.visible {
  opacity: 1;
  pointer-events: auto;
}

.h2_jp_contact { color:#fff; }

/*==============================
HEADER
==============================*/
main { margin-top: 80px; transition: margin-top 0.5s ease; }
main.scrolled { margin-top: 106px; }
header { position: fixed; top: 0; left: 0; right: 0; background: #FFF; box-shadow: 0px 4px 12px #00000030; z-index: 100; }
.header_wrap { display: flex; align-items: center; justify-content: space-between; width: min(90%, 1200px); padding: 24px 0 12px; margin: 0 auto; }
.header_logo_wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: fit-content; }
.header_logo { display: flex; align-items: center; gap: 8px; }
.header_logo_img { width: 150px; }
.header_logo_span { font-size: 24px; line-height: 1em; }
.header_line_wrap { display: inline-block; line-height: 0px; }
.header_line { position: relative; display: inline-block; width: 80px; height: 4px; }
.header_line:nth-child(1) { background: #8B9BAD; }
.header_line:nth-child(2) { background: #8BC0C4; }
.header_line:nth-child(3) { background: #FFCC33; }
.header_nav_list { display: flex; align-items: center; gap: 24px; font-size: 18px; transition: all 0.3s ease; letter-spacing: 0.2em; }
.header_nav_list li:hover { opacity: 0.5; }
.header_nav_list li:hover { opacity: 0.5; }
.hamburger { display: none; }
.menu_overlay { display: none; }
@media screen and (max-width: 1200px){/* SP */
  main { margin-top: 60px; }
  main.scrolled { margin-top: 100px; }
  .header_logo_wrap { gap: 6px; }
  .header_logo { gap: 6px; }

  .header_logo_span { font-size: 18px; }
  .header_line { width: 60px; height: 3px; }
  .header_nav_wrap { position: fixed; top: 0; right: -100%; display: flex; align-items: center; justify-content: center; width: 80%; max-width: 600px; height: 100vh; background: #FFF; box-shadow: -4px 0 12px #00000030; transition: right 0.3s ease; z-index: 102; }
  .header_nav_wrap.active { right: 0; }
  .header_nav_list { flex-direction: column; gap: 0px; width: 100%; font-size: 20px; }
  .header_nav_list li { width: 100%; }
  .header_nav_list li a { display: inline-block; width: 100%; padding: 16px 0; text-align: center; font-size: 18px; }
  .hamburger { position: relative; display: block; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; z-index: 103; }
  .hamburger span { position: absolute; left: 50%; display: block; width: 32px; height: 2px; background: #373737; transform: translateX(-50%); transition: all 0.3s ease; }
  .hamburger span:nth-child(1) { top: 8px; }
  .hamburger span:nth-child(2) { top: 19px; }
  .hamburger span:nth-child(3) { top: 30px; }
  .hamburger.active span:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); }
  .menu_overlay { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 101; }
  .menu_overlay.active { opacity: 1; pointer-events: auto; }
}

/* メニュー */
.header_nav_list_pc{ display:none; }
@media screen and (min-width: 741px){
.header_nav_list_pc { display:flex; }
.header_nav_list_sp{ display:none; }
}


/*---------- teaser ----------*/
header .teaser_wrap { max-height: 200px; overflow: hidden; opacity: 1; transition: all 0.5s ease; }
header.scrolled .teaser_wrap { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }

.teaser_wrap { display: flex; align-items: center; justify-content: center; gap: 24px; padding-top: 24px; }
.teaser_ad { padding: 12px 18px; border: 1px solid #888; line-height: 1em; white-space: nowrap; }
.teaser_text { line-height: 1.5em; }
@media screen and (max-width: 740px){/* SP */
  .teaser_wrap { flex-direction: column; gap: 8px; width: 90vw; margin: 0 auto; }
  .teaser_ad { width: 100%; padding: 6px; text-align: center; }
}

/*---------- contact_links ----------*/
.contact_links {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 101;
}

.contact_links .contact_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #8B4040;
  box-shadow: 0px 4px 12px #00000040;
  color: #FFF;
  text-decoration: none;
  transition: opacity 0.3s;
  outline:1px solid #FFF;
  outline-offset: -6px;
}

.contact_links .contact_link:hover { opacity: 0.8; }

.contact_links .contact_link span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.contact_links .contact_icon {
  display: block;
  width: 24px;
}

.contact_text {
  font-size: 11px;
  line-height: 1.5em;
  letter-spacing: 0.03em;
  text-align: center;
  color: #FFF;
}

.contact_cta_wrap .h2_wrap { padding:0; margin-bottom:0; }

@media screen and (min-width: 741px) {
  .contact_links {
    bottom: 8vh;
    right: 30px;
  }
  .contact_links .contact_link {
    width: 150px;
    height: 150px;
  }
  .contact_icon { width: 28px; }
  .contact_text { font-size: 16px; }
}



/*==============================
FOOTER
==============================*/
#willproduce ul { gap: 10px 20px !important; width: min(90vw, 960px) !important; }
#willproduce ul li { width: calc(calc(100% - 40px) / 3) !important; margin: 0 !important; }
#willproduce div.out_links { align-items: center; flex-wrap: wrap; gap: 20px; width: min(90vw, 960px) !important; }
#willproduce a.instagram { flex: 1; margin: 0 !important; }
@media screen and (max-width: 740px){/* SP */
  #willproduce ul li { width: calc(calc(100% - 20px) / 2) !important; }
  #willproduce a.instagram { width: 100% !important; }
}

/*==============================
#footer {
  padding: 60px 0 40px;
  background: #FFF;
  text-align: center;
}

#footer .footer_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  top: -16px;
}

/* ロゴ */
#footer .logo {
  width: 120px;
  margin: 0 auto;
}

/* ロゴ下のテキスト */
#footer .footer_name {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #888;
  line-height: 1.4em;
}

/* SNSアイコン */
#footer .footer_sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 16px 0;
}

#footer .footer_sns a {
  display: block;
  width: 28px;
  transition: opacity 0.3s;
}

#footer .footer_sns a:hover { opacity: 0.6; }
#footer .footer_sns img { width: 100%; }

/* コピーライト */
#footer { padding:60px 0;}
#footer .footer_copy {
  font-size: 11px;
  color: #aaa;
  letter-spacing: 0.05em;
  line-height: 1.6em;
  text-align: center;
}

@media screen and (min-width: 741px) {
  #footer { padding: 80px 0 60px; }
  #footer .logo { width: 140px; }
}

.footer_tel {
  display: none;
}

@media (max-width: 768px) {
  .footer_tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: 24px;
  }

  .footer_tel svg {
    width: 24px;
    height: 24px;
  }
}