@charset "UTF-8";

/*
Theme Name: jellice global
Theme URI: https://global.jellice.com/
Description:  jellice global WordPress Theme
Author: jellice global
Version: 2025_10
Tested up to: 6.8
Requires PHP: 8.3.0
*/

/* basic style setting in utility.css */

/* 変数 */
:root {
  --jellicePink01: #E3ADBB;
  --jellicePink02: #ED7B89;
  --jellicePink03: #D2344B;
  --jelliceLiteGray01: #C8C8C8;
  --jelliceLiteGray02: #EBEBEB;
}

html:lang(en-US) {
p,li,dl,dt,dd {text-align: left;}
} /* html:lang(en-US) 【英語サイト用】 */



/*---------------------------------------------------------------------
 共通レイアウト
---------------------------------------------------------------------*/
/* レイアウト */
#main {
width: 100%; background: white; margin-bottom: 180px;
img {border-radius: 15px}
} /* #main */

.inner {width: min(1040px, 100%); margin: auto; padding: 0 20px}

/* ヘッダーまわり */

header {
  position: sticky; top: 20px; width: 100%; z-index: 100;margin-bottom: 60px; padding: 0 20px;
  .inner {width: min(1280px, 100%); padding: 20px 24px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; border-radius: 15px; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15); background: white}
  h1 {line-height: 0; }
  .title_lang {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;}
  .title_lang li {flex-grow: 1; line-height: 20px; position: relative; }
  .title_lang li:nth-child(1)::after,
  .title_lang li:nth-child(2)::after,
  .title_lang li:nth-child(3)::after{
    position: absolute;
    top: 0;
    left: 100%;
    margin: 0 .7rem;
    content: "";
    width: 1px;
    height: 20px;
    background-color: var(--jelliceLiteGray01);
  }
  .lang_switcher {
    display: flex; flex-wrap: wrap; gap: 10px 20px;
    li {font-size: 1.2rem}
    .lang-item-en {order: 2}
    .lang-item-ja {order: 1}
    .lang-item-zh-cn {order: 3}
    .lang-item-zh-tw {order: 4}
  }
  .site_nav_pc ul {display: flex; flex-wrap: wrap;  gap: 10px 24px; flex-grow: 1; line-height: 20px; }
  .site_nav_pc .dropmenu > li:nth-of-type(4) {margin-right: 30px; position: relative; }
  .site_nav_pc .dropmenu > li:nth-of-type(4)::after {position: absolute;
    top: 0;
    left: 100%;
    margin: 0 24px;
    content: "";
    width: 1px;
    height: 20px;
    background-color: var(--jelliceLiteGray01);}
} /* header */


/* 一覧のスタイル：ブロック */
.post_line {
  margin-bottom: 80px;
  .inner {width: min(1280px, 100%); }
  .post_line_wrap {gap: 40px}
  a:hover {opacity: .7}
  article {border-top: 1px solid #F0F0F0; position: relative; padding: 36px 0}
  article:last-child {border-bottom: 1px solid #F0F0F0;}
  article dl {display: grid; grid-template-columns: 220px 1fr; gap: 38px 60px; align-items: center;}
  article dd .country {font-size: 1.5rem; line-height: 1; padding: 12px 30px; border-radius: 50px; background: var(--jelliceLiteGray02); display: inline-block; margin-bottom: 16px}
  article dd h3 {font-size: 1.6rem; line-height: 1.75; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom: 10px; font-weight: 200}
  article dd .date {font-size: 1.5rem}
} /* .post_line */


/* Gmap、YouTubeなどコンテンツのレスポンシブ */
iframe.respo {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 50px}

/* Loading */
#loading {position: fixed; width: 100%; height: 100%; z-index: 999; background: white;}
#loading_logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.fadeUp {animation-name: fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0;}
@keyframes fadeUpAnime{
  from {opacity: 0;transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

/* タイトル */
.h_title {font-size: clamp(4rem, 3.562rem + 1.8vw, 5rem); line-height: 1.2; display: flex; gap: 12px; margin-bottom: 50px; text-align: left; position: relative; padding-left: 20px}
.h_title::before {font-size: 1rem; content: "●"; color: var(--jellicePink03); position: absolute; top: 24px; left: 0;}

/* 左右に「-」があるタイトル */
.deco_line_title {margin-bottom: 70px; font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem); display: flex; justify-content: center; align-items: center; line-height: 0; font-weight: 200}
.deco_line_title::before, .deco_line_title::after {content: ''; width: 10px; height: 1px; background-color: var(--jellicePink03);}
.deco_line_title::before {margin-right: 15px;}
.deco_line_title::after {margin-left: 15px;}



/*---------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------*/
.home {
  #main {margin-bottom: 120px}
  
  #hero {
    .inner {width: min(1280px, 100%); background: url(img/home/hero_bg.png); background-size: contain; background-position: top; background-repeat: no-repeat; aspect-ratio: 2356 / 1405; display: grid; place-items: center; transition: all 0.3s ease;}
    hgroup {color: var(--jellicePink03)}
    h2 {margin-bottom: 32px; text-align: center; font-size: clamp(3.6rem, 2.022rem + 6.47vw, 7.2rem); line-height: 1.4}
    p {margin-bottom: 0; text-align: center; font-size: 1.5rem}
  } /* #hero */

  .gradation_bg {background: linear-gradient(0deg, rgba(227, 173, 187, 0.35), rgba(255, 255, 255, 0.35)); padding: 160px 0 160px; margin-bottom: 130px}

  #slider {
    margin-bottom: 100px; color: var(--jellicePink03);
    .swiper-slider {overflow: hidden; position: relative; width: 100%;}
    .swiper-slide {width: auto; text-align: center}
    .swiper-slide img {display: block; width: 100%; }
    .swiper-slide img:hover {opacity: .8; }
    .swiper-slide span {display: inline-block; padding-top: 10px; font-size: clamp(1.6rem, 1.425rem + 0.72vw, 2rem)}
    .swiper-button-next, .swiper-button-prev {top:0}
    .swiper-button-next, .swiper-rtl .swiper-button-prev {right: 0; background: rgba(255, 255, 255, 0.5); height: 100%; padding: 0 30px}
    .swiper-button-prev, .swiper-rtl .swiper-button-prev {left: 0; background: rgba(255, 255, 255, 0.5); height: 100%; padding: 0 30px}
    .swiper-button-prev::after {background: url(img/home/slide_arrow_previous.svg) no-repeat center center; width: 32px; height: 32px; color: transparent; padding: 0 4px; }
    .swiper-button-next::after {background: url(img/home/slide_arrow_next.svg) no-repeat center center; width: 32px; height: 32px; color: transparent; padding: 0 4px;}
  } /* #slider */
  
 #appeal {
    margin-bottom: 160px;
    h2 {text-align: center; margin-bottom: 30px; font-size: clamp(2.4rem, 2.137rem + 1.08vw, 3rem); font-weight: 200; letter-spacing: .14em}
    .lead {text-align: center; margin-bottom: 100px}
    .summary {gap: 40px 80px}
    .summary img {border-radius: 0;}
    .summary dl {background: white; border-radius: 15px; padding: 25px 25px 20px}
    .summary dt {width: 60px; margin: auto auto 16px}
    .summary dd {text-align: center; color: var(--jellicePink02); line-height: 1.2}
    .summary dd:nth-of-type(1) {color: #000000; margin-bottom: 12px}
    .summary dd:nth-of-type(2) {font-size: clamp(4rem, 2.904rem + 4.49vw, 6.5rem); font-weight: 100}
    .production dd span {font-size: 2rem; font-weight: 200}
    .bases dd:nth-of-type(1) {margin-bottom: 10px}
    .bases ul {display: flex; justify-content: center; flex-wrap: wrap; gap:10px 30px}
    .bases ul li {text-align: center; line-height: 1.2}
    .bases ul li span:nth-of-type(2) {font-size: clamp(4rem, 2.904rem + 4.49vw, 6.5rem);}
    .bases ul li span:nth-of-type(3) {font-size: 1.5rem; font-weight: 200; letter-spacing: 0}



  }

  #certifications {
    padding: 120px 0; background: linear-gradient(0deg, rgba(189, 189, 189, 0.35), rgba(255, 255, 255, 0.35)); margin-bottom: 120px;
    hgroup {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-bottom: 100px}
    hgroup h2 {margin-bottom: 0}
    .swiper-certifications {overflow: hidden; position: relative}
    .swiper-wrapper {transition-timing-function: linear;}
    .swiper-slide:nth-child(odd) {margin-top: 80px}
    .swiper-slide dl dt {margin-bottom: 26px}
    .swiper-slide dl dd {text-align: center; font-size: clamp(1.6rem, 1.512rem + 0.36vw, 1.8rem)}
  }

  #intro {
    .inner {display: flex; gap: 20px;}
    a {width: 100%; display: block; transition: width 0.3s ease-out; position: relative; border-radius: 15px; padding: 30px 40px; min-height: 450px; z-index: 1;}
    a:nth-of-type(1) {background: url(img/home/intro_group_bg.jpg) no-repeat center top; width: 380%;}
    a:nth-of-type(2) {background: url(img/home/intro_products_bg.jpg) no-repeat center top;}
    a:nth-of-type(3) {background: url(img/home/intro_applications_bg.jpg) no-repeat center top;}
    a:hover {width: 380%;}
    dt {font-size: 2.4rem; color: white; line-height: 1.4;}
    dd.text {opacity: 0; color: white; transition: opacity 0.3s; line-height: 1.4; letter-spacing: 0}
    dd.in_site_link {position: absolute; bottom: 20px; right: 60px; opacity: 0; transition: opacity 0.3s;}
    p.move_arrow_btn {color: white;}

    a:nth-of-type(1) dd.text, a:nth-of-type(1) dd.in_site_link {opacity: 1;}
    a:hover dd.text, a:hover dd.in_site_link {opacity: 1;}

    /* hoverが外れた状態 */
    .inner:has(a:hover) a:nth-of-type(1):not(:hover) {width: 100%;}
    .inner:has(a:hover) a:nth-of-type(1):not(:hover) dd.text,
    .inner:has(a:hover) a:nth-of-type(1):not(:hover) dd.in_site_link {opacity: 0;}
  }

  #news {
    margin-bottom: 100px;
    .inner {width: min(760px, 100%);}
    hgroup {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-bottom: 100px}
    hgroup h2 {margin-bottom: 0}
    article:first-child {border: none; padding-top: 0}
    article:last-child {border-bottom: none; padding-bottom: 0}
  } /* #news */
  
  #outro {
    picture {text-align: center}
  } /* #outro */
} /* home */

.page-id-17, .page-id-19 {
  .summary .bases li .note {font-size: 1.5rem; font-weight: 200}
  .summary .bases li .number {font-size: clamp(4rem, 2.904rem + 4.49vw, 6.5rem); font-weight: 100}
  .summary .bases li .detail {font-weight: 200}
}


/*---------------------------------------------------------------------
 固定ページ共通
---------------------------------------------------------------------*/
#title_head {
  margin-bottom: 80px;
  .inner {width: min(1040px, 100%);}
  h2 {padding: 120px 0; line-height: 1.4; margin-bottom: 0; font-size: clamp(5rem, 4.387rem + 2.52vw, 6.4rem); 
    background: linear-gradient(135deg, var(--jellicePink02), var(--jellicePink03));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 100;
  }
} /* #title_head */




/*---------------------------------------------------------------------
 個別ページ
---------------------------------------------------------------------*/
/* About US */
.page-template-page-about {
  #title_head {
    .inner {background: url(img/page/about_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }

  #index {
    dl {gap: 30px 70px; align-items: center; margin-bottom: 120px}
    dl:nth-child(even) dt {order: 2}
    dd .in_site_link {text-align: left}
  }
} /* About US */



/* Top Message */
.page-template-page-message {
  #title_head {
    .inner {background: url(img/page/message_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }

  #greeting {
    margin-bottom: 150px;
    .inner {width: min(780px, 100%); }
    picture {margin-bottom: 60px}
    .text {max-width: 650px; margin: auto auto 70px}
    .text p {margin-bottom: 0}
    .signature {text-align: right; max-width: 650px; margin: auto auto 70px}
  }
} /* Message */



/* Philosophy */
.page-template-page-philosophy {
  #title_head {
    .inner {background: url(img/page/philosophy_title_head_bg.png) no-repeat center right 80px;background-size: 308px}
  }

  #summary {
    background: url(img/page/philosoph_summary_bg.png); background-size: contain; background-position: top; background-repeat: no-repeat; aspect-ratio: 1240 / 1376; display: grid; place-items: center;
    .inner {width: min(540px, 100%); }
    p {font-size: clamp(1.6rem, 1.425rem + 0.72vw, 2rem)); text-align: center; line-height: 2.8}
  }
} /* Philosophy */



/* History */
.page-template-page-history {
  #title_head {
    .inner {background: url(img/page/history_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }

  #summary {
    margin-bottom: 150px;
    hr {border: none; height: 1px; background: linear-gradient(to right, var(--jellicePink03) 200px, #F0F0F0 0);}
    .each {padding: 80px 0 30px;display: grid; grid-template-columns: 30% 1fr; gap: 40px 20px;}
    .each:last-of-type {border-bottom: 1px solid #F0F0F0}
    .year {font-size: clamp(3.6rem, 2.987rem + 2.52vw, 5rem); line-height: 1}
    .year span {font-size: clamp(2.4rem, 2.137rem + 1.08vw, 3rem)}
    dd dl {margin-bottom: 50px}
    dd dt {font-size: 1.5rem; line-height: 1; padding: 12px 30px; border-radius: 50px; background: var(--jelliceLiteGray02); display: inline-block; margin-bottom: 20px}
    dd .text {margin-bottom: 30px}
  }
} /* History */



/* Sustainability */
.page-template-page-sustainability {
  #main {margin-bottom: 200px}

  #title_head {
    .inner {background: url(img/page/sustainability_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }
  
  #lead {
    margin-bottom: 150px;
    h3 {font-size: clamp(1.4rem, 1.312rem + 0.36vw, 1.6rem); text-align: center; font-weight: 200; margin-bottom: 26px}
    p {font-size: clamp(1.4rem, 1.312rem + 0.36vw, 1.6rem); text-align: center}
  }
  
  #summary {
    margin-bottom: 180px;
    .inner {width: min(890px, 100%); }
    h3 {font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem); text-align: center; margin-bottom: 100px}
    .wrap {gap: 80px 150px}
    dl:nth-of-type(1), dl:nth-of-type(2) {border-bottom: 1px solid var(--jelliceLiteGray02); padding-bottom: 80px}
    dl:nth-of-type(1), dl:nth-of-type(3) {position: relative;}

    dl:nth-of-type(1)::after,
    dl:nth-of-type(3)::after {position: absolute; top: 0; left: 100%; margin: 0 75px; content: ""; width: 1px; height: 300px; background-color: var(--jelliceLiteGray02);}

    dt {margin-bottom: 30px; text-align: center}
    dt img {border-radius: 0}
    dd h4 {font-size: 1.8rem; text-align: center; font-weight: 200; margin-bottom: 20px}
    dd {max-width: 300px; margin: auto}
  }

  #end {
    h3 {font-size: clamp(1.4rem, 1.312rem + 0.36vw, 1.6rem); text-align: center; font-weight: 200; margin-bottom: 26px}
    p {font-size: clamp(1.4rem, 1.312rem + 0.36vw, 1.6rem); text-align: center}
  }
} /* Sustainability */


/* Our Group */
.page-template-page-group {
  #title_head {
    .inner {background: url(img/page/group_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }

  #lead {
    margin-bottom: 80px;
    p {text-align: center}
  }

  #map {
    .inner {width: min(1240px, 100%); }
    margin-bottom: 130px;
  
    .map-container {
      position: relative;
      padding-top: 40%; /* 縦横比の固定　計算: 640 / 1600 = 0.4 (40%) */
      width: 100%;
    }
    .map-container .map-background {
      /* PNG画像を絶対配置でコンテナ全体に広げる */
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; 
    }
    .map-container .map-overlay {
      /* SVGを絶対配置でPNG画像と同じサイズ、同じ位置に重ねる */
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; /* リンクエリアとして上に配置 */ overflow: visible; /* 必要に応じて */
    }

    .map-container_sp {
      position: relative;
      padding-top: 85%; /* 縦横比の固定　計算: 664 / 780 = 0.85 (85%) */
      width: 100%;
    }
    .map-container_sp .map-background {
      /* PNG画像を絶対配置でコンテナ全体に広げる */
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; 
    }
    .map-container_sp .map-overlay {
      /* SVGを絶対配置でPNG画像と同じサイズ、同じ位置に重ねる */
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; /* リンクエリアとして上に配置 */ overflow: visible; /* 必要に応じて */
    }
  }

  .countries {
    .each {margin-bottom: 130px}
    dl {gap: 20px 60px; margin-bottom: 60px; align-items: center}
    dd .item {margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 10px}
    dd .item li {font-size: 1.5rem; line-height: 1; padding: 12px 30px; border-radius: 50px; background: rgba(227, 173, 187, 0.5); text-align: left}
    dd .material {margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 10px}
    dd .material li {font-size: 1.5rem; line-height: 1; padding: 12px 30px; border-radius: 50px; background: var(--jelliceLiteGray02);}
    dd .other li {margin-bottom: 10px; line-height: 1.6}
    dd li.business {margin-bottom: 15px}
    dd li.name {font-size: clamp(1.8rem, 1.712rem + 0.36vw, 2rem); text-align: left}
    dd li.address {margin-bottom: 20px; text-align: left}
    dd li.url {margin-bottom: 0}
    dd li.url a {display: inline-block; position: relative; padding: 4px 10px 4px 0;}
    dd li.url a span {position: absolute; top: 14%; right: -30px; background: url(img/common/arrow_ex_link.svg) no-repeat left top; width: 26px; height: 26px;}
  }
} /* Our Group */



/* Business */
.page-template-page-business {
  #title_head {
    .inner {background: url(img/page/business_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }

  #lead {
    margin-bottom: 120px;
    p {text-align: center}
  }

  #index {
    dl {gap: 30px 70px; align-items: center; margin-bottom: 120px}
    dl:nth-child(even) dt {order: 2}
    dd .in_site_link {text-align: left}
  }
} /* Business */



/* Applications */
.page-template-page-applications {
  #title_head {
    .inner {background: url(img/page/applications_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }

  #summary {
    dl {gap: 30px 70px; align-items: center; margin-bottom: 140px}
    dl:nth-child(even) dt {order: 2}
    dd h3 {margin-bottom: 30px}
    dd .lead {font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem); margin-bottom: 16px; line-height: 1.65}
  }
} /* Applications */



/* Products */
.page-template-page-products {
#main {margin-bottom: 50px}
  #title_head {
    .inner {background: url(img/page/products_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }
  
  #lead {
    ul {display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 80px}
    li a {font-size: 1.5rem; line-height: 1; padding: 12px 30px; border-radius: 50px; background: var(--jelliceLiteGray02); display: inline-block;}
    li a:hover {opacity: .7}
    p {text-align: center}
  }

  .products {
    .each {background: linear-gradient(0deg, rgba(200, 200, 200, 0.30), #FFFFFF); padding: 160px 0}
    .summary {gap: 40px 60px; margin-bottom: 120px; align-items: center}
    .summary h3 {margin-bottom: 30px; letter-spacing: 0}
    .summary .lead {font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem); margin-bottom: 16px; line-height: 1.65}

    .features {margin-bottom: 120px;}
    .features h4 {font-weight: 200}
    .features h5 {font-weight: 200}
    .features ol {gap: 30px 40px}
    .features li {background: white; padding: 40px 32px; border-radius: 15px; text-align: center; font-size: clamp(1.6rem, 1.512rem + 0.36vw, 1.8rem)}
    .features li::before {width: 100%; display: block; margin-bottom: 26px; line-height: 0}
    .features li:nth-of-type(1)::before {content: url(img/page/products_features_no_01.svg);}
    .features li:nth-of-type(2)::before {content: url(img/page/products_features_no_02.svg);}
    .features li:nth-of-type(3)::before {content: url(img/page/products_features_no_03.svg);}
    .features li:nth-of-type(4)::before {content: url(img/page/products_features_no_04.svg);}

    .variations .wrap {gap: 40px}
    .variations dl {background: white; padding: 40px 32px; border-radius: 15px; }
    .variations dl::before {width: 100%; display: block; margin-bottom: 26px; line-height: 0; text-align: center;}
    .variations dt {font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem); text-align: center;}
    .variations dd {text-align: center}
    .variations dl:nth-of-type(1)::before {content: url(img/page/products_variations_pork.svg);}
    .variations dl:nth-of-type(2)::before {content: url(img/page/products_variations_fish.svg);}
    .variations dl:nth-of-type(3)::before {content: url(img/page/products_variations_beef.svg);}

    #tripeptide .summary h3 {letter-spacing: 0}
    #tripeptide .features {margin-bottom: 135px}
    #tripeptide .features h4 {border-left: 1px solid var(--jellicePink02); padding-left: 20px; margin-bottom: 80px; font-size: clamp(2.6rem, 2.337rem + 1.08vw, 3.2rem); text-align: left; line-height: 1.4}
    #tripeptide .features h5 {text-align: center; font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem)}
    #tripeptide .cosme ol {display: flex; justify-content: center; flex-wrap: wrap; gap: 30px 40px}
    #tripeptide .cosme li {flex: 1 1 305px; max-width: 305px; box-sizing: border-box;}
    #tripeptide .food {margin-bottom: 30px}
    #tripeptide .note li {display: flex; gap: 3px; line-height: 1.4; margin-bottom: 10px}
    #tripeptide .note li::before {content: "◯";}
    #tripeptide .note li a {text-decoration: underline}
    #peptides .features {margin-bottom: 0}
    #medical .features {margin-bottom: 0}
  }
} /* Products */



/* Production */
.page-template-page-production {
  #title_head {
    .inner {background: url(img/page/production_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }

  #summary {
    dl {gap: 30px 70px; align-items: center; margin-bottom: 140px}
    dl:nth-child(even) dt {order: 2}
    dd h3 {margin-bottom: 30px; letter-spacing: 0}
    dd .lead {font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem); margin-bottom: 16px; line-height: 1.65}
  }

  #supply {
    margin-bottom: 180px;
    .inner {width: min(1240px, 100%); }
    h3 {text-align: center; font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem); line-height: 1.6; margin-bottom: 10px}
    p {text-align: center; margin-bottom: 30px}

    .map-container {
      position: relative;
      padding-top: 45%; /* 縦横比の固定　計算: 720 / 1600 = 0.45 (45%) */
      width: 100%;
    }
    .map-container .map-background {
      /* PNG画像を絶対配置でコンテナ全体に広げる */
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; 
    }
    .map-container .map-overlay {
      /* SVGを絶対配置でPNG画像と同じサイズ、同じ位置に重ねる */
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; /* リンクエリアとして上に配置 */ overflow: visible; /* 必要に応じて */
    }
    
    .map-container_sp {
      position: relative;
      padding-top: 77%; /* 縦横比の固定　計算: 600 / 780 = 0.77 (77%) */
      width: 100%;
    }
    .map-container_sp .map-background {
      /* PNG画像を絶対配置でコンテナ全体に広げる */
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; 
    }
    .map-container_sp .map-overlay {
      /* SVGを絶対配置でPNG画像と同じサイズ、同じ位置に重ねる */
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; /* リンクエリアとして上に配置 */ overflow: visible; /* 必要に応じて */
    }
  }

  #link {
    margin-bottom: 150px;
    .inner {gap: 20px 40px;}
    dl {position: relative; border-radius: 15px; padding: 30px 40px; min-height: 200px; z-index: 1;}
    dt {color: white; font-size: 2.4rem}
    .in_site_link {position: absolute; bottom: 20px; right: 60px;}
    .move_arrow_btn {color: white}
    a:nth-of-type(1) dl {background: url(img/page/production_link_group_bg.jpg) no-repeat center top; max-width: 480px; margin: auto;}
    a:hover {opacity: .9}
  }
} /* Production */



/* RandD */
.page-template-page-randd {
  #title_head {
    .inner {background: url(img/page/randd_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }

  #summary {
    dl {gap: 30px 70px; align-items: center; margin-bottom: 140px}
    dl:nth-child(even) dt {order: 2}
    dd h3 {margin-bottom: 30px}
    dd .lead {font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem); margin-bottom: 16px; line-height: 1.65}
  }

  #report {
    .inner {width: min(690px, 100%); }
    dl {background: var(--jelliceLiteGray02); border-radius: 15px; padding: 50px 20px; height: 230px; display: grid; place-items: center;}
    dt {text-align: center; margin-bottom: 0; font-size: clamp(1.6rem, 1.425rem + 0.72vw, 2rem); margin-bottom: 20px}
    dd a {font-size: 1.6rem; display: inline-block; position: relative; padding: 4px 10px 4px 0; margin-left: -30px}
    dd a span {position: absolute; top: 23%; right: -30px; background: url(img/common/arrow_ex_link.svg) no-repeat left top; width: 26px; height: 26px;}
  }
} /* RandD */



/* Privacy Policy */
.page-template-page-privacy {
  #title_head {
    .inner {background: url(img/page/privacy_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }
  
  #summary {
    margin-bottom: 100px;
    .inner {width: min(820px, 100%); }
    .each {margin-bottom: 70px}
    h3 {border-left: 1px solid var(--jellicePink02); padding-left: 20px; margin-bottom: 20px; font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem); text-align: left; line-height: 1.4}
  }
} /* Privacy Policy */




/*---------------------------------------------------------------------
 アーカイブ カテゴリ ニュース共通
---------------------------------------------------------------------*/
/* News 一覧 */
.page-template-article_list_all {
  #title_head {
    .inner {background: url(img/post/news_title_head_bg.png) no-repeat center right 80px; background-size: 308px}
  }
  
  .post_line {
    .inner {width: min(1040px, 100%); }
    article {padding: 55px 0;}
    article dl {grid-template-columns: 305px 1fr;}
    
  }
  
}

/* 一覧のページナビ */
.wp-pagenavi {
  text-align: center; margin-bottom: 50px;
  a {color: #999999;}
  span.current {font-weight: 100!important; color :var(--jellicePink03); background: var(--main_color); border: none;}
  span.pages {display: none !important}
} /* .wp-pagenavi */

#main .wp-pagenavi a, #main .wp-pagenavi span {
  border: none;
  font-size: 2rem;
  padding: .2em .4em;
  margin: 5px;
  transition: all .3s ease;
  display: inline-block
} /* #main .wp-pagenavi a */

#main .wp-pagenavi a:hover {opacity: .7;}



/*---------------------------------------------------------------------
 投稿ページ共通
---------------------------------------------------------------------*/
.single-post {
  header {margin-bottom: 85px}

  #content {
    .inner {width: min(780px, 100%)}
  
  .entry_meta {
    margin-bottom: 70px;
    .main_figure {margin-bottom: 50px}
    .country {font-size: 1.5rem; line-height: 1; padding: 12px 30px; border-radius: 50px; background: var(--jelliceLiteGray02); display: inline-block; margin-bottom: 26px;}
    .entry_title {line-height: 1.18; font-size: clamp(2rem, 1.825rem + 0.72vw, 2.4rem); font-weight: 200; margin-bottom: 20px; line-height: 1.34}
    }
  } /* .content */
  
  .entry_content {
    padding-bottom: 100px; word-wrap: break-word; /* 折り返し解除 */
    h2 {font-size: clamp(1.8rem, 1.712rem + 0.36vw, 2rem); border-left: 1px solid var(--jellicePink02); padding-left:20px; margin-bottom: 30px; line-height: 1.4; font-weight: 200; word-break: auto-phrase;}
    h3 {font-size: clamp(1.6rem, 1.512rem + 0.36vw, 1.8rem); margin-bottom: 38px; padding-bottom: 6px; font-weight: 200; border-bottom: 2px solid silver;}
    a img:hover {opacity: .8}
    figure {margin-bottom: 20px} /* 画像 */
    figure a { display: block}
    figcaption {margin-top: 6px; font-size: clamp(1.2rem, 1.112rem + 0.36vw, 1.4rem); line-height: 1.4;} /* キャプション */
    p {margin-bottom: 30px; line-height: 1.8}
    a {color: var(--main_color); text-decoration: underline}
    ul {margin-bottom: 30px}
    .wp-block-file a {text-decoration: underline}
    .wp-block-file a:last-child {display: none}
    a[href$=".pdf"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_pdf_18.svg) no-repeat left center;}
    a[href$=".doc"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_docx_18.svg) no-repeat left center;}
    a[href$=".docx"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_docx_18.svg) no-repeat left center;}
    a[href$=".xls"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_xlsx_18.svg) no-repeat left center;}
    a[href$=".xlsx"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_xlsx_18.svg) no-repeat left center;}
    a[href$=".csv"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_csv_18.svg) no-repeat left center;}
    .wp-block-quote {background: #EBEBEB url(img/post/quote_bk.svg) no-repeat 30px 30px; padding: 80px 30px 30px 30px; border-radius: 30px; margin-bottom: 30px} /* 引用ブロック */
    .wp-block-quote cite {font-size: 1.2rem;} /* 引用 */
    .wp-block-quote cite a { text-decoration: underline} /* 引用 */
    .wp-block-quote cite::before {content: "引用元"; padding-right: 10px} /* 引用 */
    .wp-block-cover p {color: white} /* カバー */
    .wp-block-table table { margin-bottom: 10px} /* カバー */
    .wp-block-columns {gap:30px}
    .wp-block-columns p {margin-bottom: 15px}
    .wp-block-columns ul {margin-bottom: 15px}
    .wp-block-columns figure { margin-bottom: 0}
    .wp-block-gallery ul {margin-bottom: 0}
    .wp-block-button a {color: white; font-weight: bold; transition: all 0.3s ease;} /* ボタン */
    .wp-block-button a:hover {opacity: .8} /* ボタン */
    .wp-block-gallery {display: flex; flex-wrap: wrap;} /* ギャラリー縦並びになってしまう事の対処 */
    .wp-element-caption a {color: var(--main_color); border-bottom: 1px solid var(--main_color); display: inline-block} /* キャプションにリンクがある場合 */
    .youtube_movie {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 20px} /* YouTube 埋め込み対応（utility.js にてjquery でクラス追加） */
    .google_map {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 20px} /* Google Map 埋め込み対応（utility.js にてjquery でクラス追加） */
    .has-small-font-size { font-size: 1.2rem !important} /* フォントサイズ */
    .has-medium-font-size { font-size: clamp(1.4rem, 1.312rem + 0.36vw, 1.6rem)!important}
    .has-large-font-size { font-size: clamp(1.7rem, 1.656rem + 0.18vw, 1.8rem)!important}
    .has-x-large-font-size { font-size: clamp(1.8rem, 1.712rem + 0.36vw, 2rem)!important}
  } /* .entry_content */
} /* single-post */


/* ページナビゲーション */
.single #single_page_nav {
  .inner {width: min(780px, 100%)}
  margin-bottom: 50px;
  ul {gap:20px;}
  li a {font-size: clamp(1.2rem, 1.112rem + 0.36vw, 1.4rem); display: block; }
  #previous a {background: silver url(img/post/arrow_previous.svg) left 6px top 50% no-repeat; padding: 12px 16px 12px 38px;}
  #next a {background: silver url(img/post/arrow_next.svg) right 6px top 50% no-repeat; padding: 12px 38px 12px 16px; text-align: right}
  #previous a:hover {background: var(--main_color) url(img/post/arrow_previous.svg) left 0 top 50% no-repeat; color: white}
  #next a:hover {background: var(--main_color) url(img/post/arrow_next.svg) right 0 top 50% no-repeat; color: white}
} /* .single #single_page_nav */



/*---------------------------------------------------------------------
 Not 404
---------------------------------------------------------------------*/
.error404 {
  #title_head, #breadcrumb {display: none}
  #main {background: #f7f7f7; background-size: cover; background-position: 50% 50%; min-height: 50vh; display: grid; place-items: center; margin-bottom: 40px;}
  #main dt {color: #000000; font-size: clamp(2.7rem, 2.25rem + 2.25vw, 4.5rem); text-align: center; font-weight: 100}
  #main dd {color: #000000; font-size: clamp(1.2rem, 1rem + 1vw, 2rem); text-align: center}
} /* error404 */


/*---------------------------------------------------------------------
 footer
---------------------------------------------------------------------*/
footer {
  width: 100%; padding: 30px 0;
  .inner {width: min(1200px, 100%); }
  .primary {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; margin-bottom: 100px}
  .logo_lang {text-align: center; max-width: 150px}
  .logo_lang h2 {margin-bottom: 40px}
  .lang_switcher {display: flex; flex-wrap: wrap; gap:10px 0}
  .lang_switcher li {font-size: 1.4rem; width: 50%; letter-spacing: 0}
  .lang_switcher li:nth-of-type(1) {order: 2; padding-left: 13px}
  .lang_switcher li:nth-of-type(2) {order: 1; text-align: right; padding-right: 11px; position: relative;}
  .lang_switcher li:nth-of-type(3) {order: 3; text-align: right; padding-right: 11px; position: relative;}
  .lang_switcher li:nth-of-type(4) {order: 4; padding-left: 13px}

  .lang_switcher li:nth-of-type(2)::before, 
  .lang_switcher li:nth-of-type(3)::before {position: absolute;
    top: 5px;
    left: 100%;
    margin: 0;
    content: "";
    width: 1px;
    height: 20px;
    background-color: var(--jelliceLiteGray01);
  }

  nav .foot_menu {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 38px 60px; }
  nav .menu-item-has-children {font-size: 1.7rem; letter-spacing: .08em}
  nav .menu-item-has-children > a {display: inline-block; margin-bottom: 6px}
  nav .sub-menu li {font-size: 1.5rem; letter-spacing: .08em; margin-bottom: 2px}
  nav .sub-menu li a {display: flex; align-items: center; gap: 10px;}
  nav .sub-menu li a::before {content: "-";}
  nav .ex_link {display: flex; align-items: center; gap: 6px !important; }
  nav .ex_link::after {content: url(img/common/ex_link_arrow.svg)}

  nav .foot_menu > li:nth-of-type(4) {margin-right: 50px; position: relative;}
  nav .foot_menu > li:nth-of-type(4)::before {position: absolute;
    top: 0;
    left: 100%;
    margin: 0 50px;
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--jelliceLiteGray01);}

  .secondary ul {display: flex; justify-content: space-between; flex-wrap: wrap; }
  .secondary li {font-size: 1.3rem}
  .copy small {font-size: 1.3rem; letter-spacing: .05em}
} /* footer */



/*---------------------------------------------------------------------
 css hack
---------------------------------------------------------------------*/
/* Edge */
@supports (-ms-ime-align: auto) {
  .sample {}
}

/* Firefox */
@-moz-document url-prefix() {
  .sample {}
}

/* Safari */
::-webkit-full-page-media, :future, :root .class_name {
  .sample {}
}


/*---------------------------------------------------------------------
 print
---------------------------------------------------------------------*/
@media print {
  body {-webkit-print-color-adjust: exact;} /* Chrome 背景色強制印刷 */
  a[href]:after {content: "" !important;}
  abbr[title]:after {content: "" !important;}
  .show-for-small-only {display: none !important}
  .pagetop.show {display: none !important}
  body, h1, h2, h3, h4, h5, h6, li, dt, dd, p, th, td, .mincho {font-family: sans-serif !important} /* Chrome印刷で日本語が表示されない対応 */
}


/*---------------------------------------------------------------------
 jquery js 関連 css
---------------------------------------------------------------------*/
.dropmenu {
  li {position: relative;}
  li a {display: block;}

  .wrap {position: absolute; top: 100%; left: -20px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.25s ease; z-index: 50; padding-top: 25px;}
  > li:hover > .wrap {opacity: 1; visibility: visible; transform: translateY(0);}
  .wrap > .sub-menu {display: flex; flex-direction: column; gap: 0; padding: 8px 0 10px; background: #fff; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); border-radius: 0 0 15px 15px;}
  .wrap > .sub-menu li {height: auto; overflow: visible;}
  .wrap > .sub-menu li a {padding: 10px 20px; font-size: 1.5rem; display: flex; align-items: center; gap: 10px;}
  .wrap > .sub-menu li a::before {content: "-";}
  
  /* 親メニューの矢印 */
  > li.menu-item-has-children {position: relative; padding-right: 16px;}
  > li.menu-item-has-children::after {content: ""; position: absolute; right: 0; top: 55%; width: 10px; height: 10px; transform: translateY(-50%); background: url("img/common/navi_arrow.svg") no-repeat center center; background-size: contain;}

  li ul li ul {top: 0; left: 100%;}
  li:last-child ul li ul {left: -100%; width: 100%;}
  li ul li ul:before {position: absolute; content: ""; top: 15px; left: -20px; border: 5px solid transparent; border-left-color: #454e08;}
  li:last-child ul li ul:before {position: absolute; content: ""; top: 15px; left: 200%; margin-left: -20px; border: 5px solid transparent; border-right-color: #454e08;}
  li ul li:hover > ul > li {overflow: visible; height: 40px;}
  li ul li ul li a {background: #616d0b}
  li:hover ul li ul li a:hover {background: glay}
  .ex_link {display: flex; align-items: center; gap: 6px !important; }
  .ex_link::after {content: url(img/common/ex_link_arrow.svg)}
  
  /* en 調整 */
  #menu-item-777 .wrap {left: -40px;}
  #menu-item-783 .wrap {left: -40px;}
  #menu-item-795 .wrap {left: -60px;}
  #menu-item-777 .wrap li a {width: 180px}
  #menu-item-783 .wrap li a {width: 180px}
  #menu-item-795 .wrap li a {width: 190px}

  /* ja 調整 */
  #menu-item-897 .wrap {left: -25px;}
  #menu-item-903 .wrap {left: -30px;}
  #menu-item-919 .wrap {left: -17x;}
  #menu-item-897 .wrap li a {width: 190px}
  #menu-item-903 .wrap li a {width: 140px}
  #menu-item-919 .wrap li a {width: 130px}
  
  /* zh-cn 調整 */
  #menu-item-949 .wrap {left: -35px;}
  #menu-item-955 .wrap {left: -30px;}
  #menu-item-961 .wrap {left: -17px;}
  #menu-item-949 .wrap li a {width: 150px}
  #menu-item-955 .wrap li a {width: 130px}
  #menu-item-961 .wrap li a {width: 130px}
  
  /* zh-tw 調整 */
  #menu-item-999 .wrap {left: -20px;}
  #menu-item-1005 .wrap {left: -30px;}
  #menu-item-1011 .wrap {left: -17px;}
  #menu-item-999 .wrap li a {width: 140px}
  #menu-item-1005 .wrap li a {width: 130px}
  #menu-item-1011 .wrap li a {width: 130px}
} /* .dropmenu */

/* ハンバーガーメニューボタン */
.button_container {position: fixed; top: 46px; right: 38px; height: 22px; width: 25px; cursor: pointer; z-index: 200;}
.button_container:hover {opacity: .8;}
.button_container.active .top {transform: translateY(5px) translateX(0) rotate(38deg); background: #000000; z-index: 200}
.button_container.active .middle {opacity: 0; background: #000000;}
.button_container.active .bottom {transform: translateY(-13px) translateX(0) rotate(-38deg); background: #000000; z-index: 200}
.button_container span {background: #000000; border: none; height: 1px; width: 100%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer;}
.button_container span:nth-of-type(2) {top: 9px;}
.button_container span:nth-of-type(3) {top: 18px;}


/* メニュー内 (モバイル用) */
.overlay {
  position: fixed; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; overflow: auto; z-index: 99; padding: 20px;
  .overlay-menu {margin: auto ; background: white; border-radius: 15px; min-height: calc(100svh - 40px); padding: 20px 10px; position: relative}
  .site_logo {margin: auto auto 20px 10px; line-height: 0}
  .lang_switcher {margin-left: 22px; margin-bottom: 80px; gap:10px}
  .lang_switcher li {margin-bottom: 0; border-right: 1px solid silver; padding-right: 10px; line-height: 1}
  .lang_switcher li:last-child {border: none}
  .lang_switcher li a {font-size: 1.4rem; }
  .dropmenu {width: 220px; margin: auto;} 
  .dropmenu > li {margin-bottom: 32px; font-size: 1.8rem;}
  .dropmenu > li.menu-item-has-children::after {top: 20px;}
  .dropmenu li ul {position: initial; }
  .dropmenu li ul li {box-shadow: none; background: transparent; border-radius: 0}
  .dropmenu li ul li:first-child {margin-top: 4px}
  .dropmenu li ul li a {padding-left: 5px}
  .dropmenu > li:hover > ul > li {height: 32px}
  .dropmenu > li:nth-of-type(4) {border-bottom: 1px solid var(--jelliceLiteGray01); padding-bottom: 46px; margin-bottom: 52px!important}
  .dropmenu > li:nth-of-type(5) {padding-bottom: 40px}
  .privacy_copy {position: absolute; bottom: 16px; left: 0; width: 100%}
  .privacy_copy li {text-align: center; font-size: 1.3rem; }
  .privacy_copy .privacy {margin-bottom: 10px}
} /* .overlay */
    
/* アコーディオン機能のためのCSS修正・追加 (モバイルメニュー内) */
/* 1. モバイルメニュー内のサブメニューの初期状態とトランジション */
.overlay .dropmenu li ul.sub-menu {
  /* 既存のデスクトップ用設定を上書き */
  position: initial !important; 
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  /* アコーディオン制御 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 0;
  list-style: none;
}

/* 2. サブメニューが開いた状態 */
.overlay .dropmenu > li.is-open > ul.sub-menu {
  max-height: 1000px; /* 十分大きな値に設定 */
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 3. サブメニューの項目 (li) の高さ制御の解除 (モバイル用) */
/* 既存CSSのホバー制御を無効化 */
.overlay .dropmenu li ul li {
  height: auto !important; 
  overflow: visible !important;
  transition: none !important;
}
/* サブメニュー内のリンクのパディング調整 */
.overlay .dropmenu li ul li a {padding: 4px 2px; font-size: 1.6rem;}

/* 4. 矢印の回転 */
.overlay .dropmenu > li.menu-item-has-children::after {transition: transform 0.3s ease;}
.overlay .dropmenu > li.menu-item-has-children.is-open::after {transform: translateY(-50%) rotate(180deg);}

/* 5. メニューの開閉状態 */
.overlay.open {opacity: 1; visibility: visible; height: 100%;}



/*---------------------------------------------------------------------
 メディアクエリー
---------------------------------------------------------------------*/
/* スマホ以降（639px 以下） */
@media screen and (max-width: 639px) {
  .no_br_sp br {display: none !important}
  br.sp_non {display: none}
  table tr th, table tr td {padding: 0.4em 0.8em; font-size: 1.2rem}
  .single .wp-caption {max-width: 100%}
  .single #single_page_nav ul {justify-content: center}

  .inner {padding: 0 45px}
  #main {margin-bottom: 100px}

  header {padding-left: 15px; padding-right: 15px}
  header .inner {padding-left: 15px;}

  .post_line article dl {grid-template-columns: 1fr!important}
  .post_line article {padding: 50px 0} 

  #title_head {
    margin-bottom: 140px;
    .inner {background-position: top right -80px !important; background-size: 410px!important; padding-right: 20px}
    h2 {padding-top: 420px; padding-bottom: 0; letter-spacing: 0}
  }

  .home {
    #hero .inner {background: url(img/home/hero_bg_sp.png); aspect-ratio: 585 / 955; background-size: cover; background-position: 50% 0; background-size: 110%; background-repeat: no-repeat}
    #hero hgroup {margin-top: -100px}
    #hero hgroup h2 {font-size: 5.6rem; line-height: 1.32; margin-bottom: 20px}
    #hero hgroup p {font-size: 1.4rem; line-height: 2; letter-spacing: .06em}
    #hero .scrolldown {bottom: 5%!important; right: 5%}
    .gradation_bg {padding-top: 30px}
    #slider .swiper-button-next, .swiper-rtl .swiper-button-prev {padding: 0 25px} 
    #slider .swiper-button-prev, .swiper-rtl .swiper-button-prev {padding: 0 25px} 
    #slider .swiper-button-next::after {background: none}
    #slider .swiper-button-prev::after {background: none}
    #appeal {margin-bottom: 120px}
    #appeal h2 {font-size: 2.5rem;}
    #appeal .lead {letter-spacing: .08em}
    #appeal p {font-size: 1.4rem; }
    #intro .inner {display: grid; grid-template-columns: 1fr; gap: 40px;}
    #intro .inner a {width: 100%; min-height: 300px; padding: 30px}
    #intro a:nth-of-type(1) {background: url(img/home/intro_group_bg_sp.jpg); background-size: contain; aspect-ratio: 1 / 1;}
    #intro a:nth-of-type(2) {background: url(img/home/intro_products_bg_sp.jpg); background-size: contain; aspect-ratio: 1 / 1;}
    #intro a:nth-of-type(3) {background: url(img/home/intro_applications_bg_sp.jpg); background-size: contain; aspect-ratio: 1 / 1;}
    #intro dt {margin-bottom: 20px}
    #intro dd.text {opacity: 1;}
    #intro dd.in_site_link {opacity: 1;}
    .post_line .post_line_wrap {margin-bottom: 60px}
  }

  .page-template-page-about {
    .h_title {margin-bottom: 30px}
    #index .inner {padding: 0 20px}
    #index dl {margin-bottom: 80px}
    #index dl h3 {margin-bottom: 28px}
    #index dl p {margin-bottom: 10px}
    #index dd {padding: 0 20px}
    #index dl:nth-child(even) dt {order: 1}
    #index dl:nth-child(even) dd {order: 2}    
  }

  .page-template-page-message {
    #greeting {margin-bottom: 0}
    #greeting .inner {padding: 0}
    #greeting picture {margin-bottom: 60px}
    #greeting picture img {border-radius: 0}
    #greeting .text {margin-bottom: 60px}
    #greeting .text p {padding: 0 40px}
    #greeting .signature {text-align: center; margin-bottom: 0}
  }

  .page-template-page-philosophy {
    #summary {background: none}
    #summary .inner {padding: 0 20px}
    #summary .figure {margin: 0 calc(50% - 50vw); margin-bottom: .8lh}
  }

  .page-template-page-history {
    #summary {margin-bottom: 100px}
    #summary hr {background: linear-gradient(to right, var(--jellicePink03) 120px, #F0F0F0 0);}
    #summary .each {padding-top: 50px; padding-bottom: 20px}
  }

  .page-template-page-sustainability {
    #main {margin-bottom: 100px}
    #summary {margin-bottom: 60px}
    #summary .wrap {gap:70px}
    #summary dl {border-bottom: 1px solid var(--jelliceLiteGray02); padding-bottom: 70px!important}
    #summary dl:last-child {border: none; padding-bottom: 0}
    #summary dl:nth-of-type(1)::after, #summary dl:nth-of-type(3)::after {margin: 0; background-color: transparent; height: auto}
    #summary dd {text-align: left; font-size: 1.6rem}
    #end h3 {margin-bottom: 10px; font-size: 1.6rem}
    #end p {font-size: 1.6rem}
  }

  .page-template-page-group {
    #map .inner {padding: 0}
    #map img {border-radius: 0}
    #countries .each {margin-bottom: 60px}
  }
  
  .page-template-page-business {
    #index .inner {padding: 0 20px}
    #index dl {margin-bottom: 80px}
    #index dl h3 {margin-bottom: 28px}
    #index dl p {margin-bottom: 10px}
    #index dd {padding: 0 20px}
    #index dl:nth-child(even) dt {order: 1}
    #index dl:nth-child(even) dd {order: 2}    
  }
  
  .page-template-page-applications {
    #summary dl {margin-bottom: 70px}
    #summary dd h3 {margin-bottom: 20px}
    #summary dl:nth-child(even) dt {order: 1}
    #summary dl:nth-child(even) dd {order: 2}    
  }
  
  .page-template-page-products {
    #main {margin-bottom: 50px}
    .products .each {padding: 100px 0 80px}
    .products .summary {margin-bottom: 70px}
    .products .features {margin-bottom: 70px}  
    .products .deco_line_title {margin-bottom: 40px}
    .products #tripeptide .features h4 {margin-bottom: 60px}
  }
  
  .page-template-page-production {
    .h_title {letter-spacing: 0}
    #summary dl {margin-bottom: 70px}
    #summary dl:nth-child(even) dt {order: 1}
    #summary dl:nth-child(even) dd {order: 2}
    #supply {margin-bottom: 80px}
    #supply .inner {padding: 0}
    #supply #map img {border-radius: 0}
    #link {margin-bottom: 100px}
    #link dl {padding: 30px}
  }
  
  .page-template-page-randd {
    .h_title {letter-spacing: 0}
    #summary dl {margin-bottom: 70px}
    #summary dl:nth-child(even) dt {order: 1}
    #summary dl:nth-child(even) dd {order: 2}
  }
  
  .page-template-article_list_all {}
  
  .single-post {
      header {margin-bottom: 60px}
      .entry_meta .main_figure {margin: 0 calc(50% - 50vw);}
      .entry_meta .main_figure img {border-radius: 0; width: 100%; aspect-ratio: 1/1; object-fit: cover;}
    }

  footer {
  .primary {display: grid; grid-template-columns: 1fr ;}
  .primary .logo_lang {margin: auto auto 30px}
  .primary nav ul {display: grid; grid-template-columns: 1fr ;}
  .primary nav .foot_menu > li:nth-of-type(4) {border-bottom: 1px solid silver; padding-bottom: 45px; margin-bottom: 10px; margin-right: 8px}
  .primary nav .foot_menu > li:nth-of-type(4)::before {background-color: transparent}
  .secondary ul {display: grid; grid-template-columns: 1fr; gap: 30px;}
  .secondary ul li {text-align: center}
  }
}


/* スマホ〜タブレット共通（1023px 以下） */
@media screen and (max-width: 1023px) {
  .no_br br {display: none !important}
}


/* スマホ「横」向き対応 */
@media screen and (max-width: 940px) and (orientation:landscape) {
  .sample {}
}


/* スマホ以降（375px 以下）iPhone SE */
@media screen and (max-width: 375px) {
.home #hero .inner {padding: 0 20px; background-size: 100%}
.home #hero hgroup {margin-top: -150px}
.home #hero hgroup h2 {font-size: 5rem; line-height: 1.2}
.home #intro .inner a {min-height: 280px;}
}


/* スマホ以降（320px 以下）旧 iPhone SE */
@media screen and (max-width: 320px) {
  .sample {}
}


/* スマホ以降（321px 以降） */
@media screen and (min-width: 321px) {
  .sample {}
}


/* タブレット対応 */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .no_br_tb br {display: none !important}
  br.tb_non {display: none}

  #main {margin-bottom: 100px}
  #title_head .inner {background-position: right 0!important}

  .home #hero h2 {font-size: 4rem; margin-bottom: 10px}
  .home #slider .swiper-slide span {font-size: 1.8rem}
  .home #appeal .summary {gap: 40px}
  .page-template-page-philosophy #summary p {font-size: 1.4rem} 
  .page-template-page-applications #summary dl {gap: 40px}
  .page-template-page-products .products .summary {gap: 40px}
  .page-template-page-production #summary dl {gap: 40px}
  .page-template-page-randd #summary dl {gap: 40px}

  footer .primary {display: grid; grid-template-columns: 1fr; gap: 20px;}
  footer .primary .logo_lang {margin: auto auto 30px}
  footer .primary nav .foot_menu {max-width: 100%; margin: auto; gap: 30px; justify-content: center}
}


/* タブレット以降（640px 以降） */
@media screen and (min-width: 640px) {
  .logged-in header {padding-top: 32px; margin-top: -32px} /* ログイン時のアドミンバー対応（ヘッダー） */
  .logged-in .gtranslate_wrapper {top: 112px} /* ログイン時のアドミンバー対応（GTranslate） */
  .entry_content .wp-block-table td, .wp-block-table th {padding: 1em;}
}


/* 1024px以降 iPad 横 iPad 12.9 縦 含む */
@media screen and (min-width: 1024px) {
  .no_br_pc br { display: none}
  br.pc_non {display: none} 
  header .title_lang {gap:8px}
  header .lang_switcher li {font-size: 1.1rem; letter-spacing: 0}
  header .site_nav_pc ul li {font-size: 1.3rem; letter-spacing: 0}
}


/* PCモニター（1025px以降） */
@media screen and (min-width: 1025px) {
  .home #slider .swiper-slide span {font-size: 1.8rem}
}

/* PCモニター（1080px以降） */
@media screen and (min-width: 1080px) {
  header .title_lang {gap:10px 20px}
  header .lang_switcher li {font-size: 1.2rem; letter-spacing: .12em;}
}

/* PCモニター（1140px以降） */
@media screen and (min-width: 1140px) {
  header .title_lang {gap:10px 26px}
  header .site_nav_pc ul li {letter-spacing: .12em;}
  .page-template-page-philosophy #summary {max-width: 1140px; margin: auto;}
}

/* PCモニター（1200px以降） */
@media screen and (min-width: 1200px) {
  header .site_nav_pc ul li {font-size: 1.5rem; }
}

/* PCモニター（1240px以降） */
@media screen and (min-width: 1240px) {
  header .site_nav_pc ul li {font-size: 1.6rem; }
}

/* PCモニター大（1380px以降） */
@media screen and (min-width: 1380px) {
.home #hero .inner {width: min(1380px, 100%);}
}

/* PCモニター大（1480px以降） */
@media screen and (min-width: 1480px) {
.home #hero .inner {width: min(1480px, 100%);}
}

/* PCモニター大（1600px以降） */
@media screen and (min-width: 1600px) {
.home #hero .inner {width: min(1600px, 100%);}
}


/* アニメーション動作のここに記述 */
.scrolldown {
  position: absolute;
  right: 2%;
  bottom: 5%;
  height: 40px;
  z-index: 50;
  writing-mode: vertical-rl;
  letter-spacing: 0;
}
.scrolldown span {
  position: absolute;
  left:-20px;
  top: -10px;
  color: var(--jellicePink03);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}
.scrolldown::after {
  content: "";
  position: absolute;
  top: 30px;
  left: -8px;
  width: 1px;
  height: 30px;
  background: var(--jellicePink03);
  animation: pathmove 1.4s ease-in-out infinite;
  opacity: 1;
}
@keyframes pathmove {
  0% {height:0; top:30px; opacity: 0;}
  30% {height:30px; opacity: 1;}
  100% {height:0; top:60px; opacity: 0;}
}