@charset "utf-8";
/* CSS Document */

body,form,fieldset                              { margin: 0px; padding: 0px;}
fieldset                                        { border: none;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,dd  { margin: 0px; padding: 0px;}
blockquote,li,dt,dd                             {}
li                                              { list-style: none;}
input,textarea                                  { font-size: 1em;}
img                                             { border: 0px none; margin: 0; padding: 0; vertical-align: bottom;}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

html                                            { scroll-behavior: smooth; height: 100%; scroll-padding-top:148px;}

/* Tag Castam ----------------------------------------------------------------------------------------------------------------- */
@media(min-width: 920px){
     a[href^="tel:"]{
       pointer-events: none;
     }
   }	

body              { font-size: 17px; font-family:"Avenir","Avenir Next", sans-serif; overflow:hidden auto;}

element           { box-shadow: none; outline: none; background: none;}

em                { font-weight: normal;font-style: normal;}
strong            {}

a                 { text-decoration: none; color: #000;}
a:link            {}
a:visited         {}
a:active          {}
a:focus           {}

button            { background: none; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
button            { font-size: clamp(0.875rem, 0.837rem + 0.19vw, 1rem); font-weight: bold;}

.ma0              { margin-bottom: 0;}
.ma5              { margin-bottom: 5px;}
.ma10             { margin-bottom:10px;}
.ma20             { margin-bottom:20px;}
.ma30             { margin-bottom:30px;}
.ma40             { margin-bottom:40px;}
.ma50             { margin-bottom:50px;}
.ma60             { margin-bottom:60px;}
.ma70             { margin-bottom:70px;}
.ma80             { margin-bottom:80px;}

.pa30             { padding: 0 30px;}
.pa40             { padding: 0 40px;}

.w50              { width: 50%;}
.w60              { width: 60%;}
.w80              { width: 80%;}
.w100             { width: 100%;}

.flex             { display: flex;}
.center           { text-align: center;}
.end              { text-align: end;}
.justify          { text-align: justify;}
.justify_last     { text-align-last: justify;}
.left             { text-align:left;}
.bold             { font-weight: bold;}
.new_line         { display: contents;}
.line_break       { display: contents;}

.red              { color: #e21c12;}
.pink             { color: #d82752;}

p                 { font-size: clamp(0.875rem, 0.837rem + 0.19vw, 1rem); line-height:1.65rem;}
h1                { font-size: clamp(1.125rem, 1.012rem + 0.57vw, 1.5rem);}
h2                { font-size: clamp(1.063rem, 0.968rem + 0.47vw, 1.375rem);}
h3                { font-size: clamp(1rem, 0.925rem + 0.38vw, 1.25rem);}
h4                { font-size: clamp(1rem, 0.962rem + 0.19vw, 1.125rem);}
h5                { font-size: clamp(0.875rem, 0.837rem + 0.19vw, 1rem);}

.sp               { display: none;}

.fadein           { opacity : 0; transform : translate(0, 100px); transition : all 1.5s;}
.fadein.active    { opacity : 1; transform : translate(0, 0);}

.direction        { flex-direction: row-reverse;}


/* demo */
#demo img                                  { width: 100%; height: 100%; object-fit: cover;}


/* header */
header                                                { background-color: #fff;}
header                                                { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;}/* 画面の一番上に固定 */
header .headbox                                       { max-width: 980px; margin:0 auto; padding: 20px 0 0;}
header .headbox #g-nav                                { margin-bottom: 20px; justify-content: space-between; align-items: center;}
header .headbox #g-nav #site-id                       { width: 100px; height: auto; vertical-align: middle;}
header .headbox #g-nav #site-id img                   { width: 100%; height: auto;}

header .headbox .head_menu .flex                      { justify-content: space-between; align-items: center;}
header .headbox .head_menu .flex li                   { padding: 0 20px;}
header .headbox .head_menu .flex li a                 { position: relative; text-decoration: none; display: block; font-weight: bold;}
header .headbox .head_menu .flex li a::after    {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background:#d82752;
    transition: all .15s;
    transform: scale(0, 1);
    transform-origin: center top;}
header .headbox .head_menu .flex li::after             { transform: scale(1, 1);}
header .headbox .head_menu .flex li a.current          { border-top: 2px solid #d82752; color: #d82752; font-weight: bold;}
header .headbox .head_menu .flex li a.current::after   { content: none;}

header .headbox .online_shop                           { width: 40px; height: auto; margin-right: 20px;}
header .headbox .online_shop img                       { width: 100%; height: auto;}

/* ハンバーガーメニュー */
#h-nav                                                { float: right; padding: 0;}
nav.navmenu{
    position: fixed;
    z-index: 12;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;}

.open nav                                         { display: block;}

nav.navmenu #head_linkbox                         {
    width: 100vw; 
    position: relative;
	left: 50%;
	transform: translateY(50%) translateX(-50%);}
nav.navmenu #head_linkbox .linkwrap               {
    max-width: 720px;
	margin: 0 auto;
	gap: 60px;}
nav.navmenu #head_linkbox .linkwrap .link-list    {
    flex-direction: column;
	line-height: 2.1rem;}

nav.navmenu #head_linkbox .linkwrap .link-list ul  {                                     
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);}

nav.navmenu #head_linkbox .linkwrap .link-list ul li            {
     font-size: 24px;
     list-style-type: none;
     width: 100%;
     padding-bottom: 0px;}

nav.navmenu #head_linkbox .linkwrap .link-list li               { align-items: center;}
nav.navmenu #head_linkbox .linkwrap .link-list li:last-child    { padding-bottom: 0;}
nav.navmenu #head_linkbox .linkwrap .link-list li:nth-child(2),
nav.navmenu #head_linkbox .linkwrap .link-list li:nth-child(3),
nav.navmenu #head_linkbox .linkwrap .link-list li:nth-child(4),
nav.navmenu #head_linkbox .linkwrap .link-list li:nth-child(5),
nav.navmenu #head_linkbox .linkwrap .link-list li:nth-child(6)  { padding-left: 1.1rem;}
nav.navmenu #head_linkbox .linkwrap .link-list .category        { font-size: 1.1rem; font-weight: bold; color: #fff;}
nav.navmenu #head_linkbox .linkwrap .link-list img              { height: 0.9rem; width: auto; margin-right: 0.25rem;}
nav.navmenu #head_linkbox .linkwrap .link-list p                { line-height: 2.1rem;}
nav.navmenu #head_linkbox .linkwrap .link-list a                { display: block; color: #fff;}

.toggle_btn                                {
     display: block;
     position: fixed;
     top: 25px;
     width: 30px;
     height: 30px;
     transition: all .6s;
     cursor: pointer;
     z-index: 9999;}

.toggle_btn span                           {
     display: block;
     position: absolute;
     left: 0;
     width: 30px;
     height: 2px;
     border-radius: 3px;
     transition: all .3s;
     border:solid 1px #3e3a39;
     -webkit-transition: .35s ease-in-out;
     -moz-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
     background-color: #3e3a39;}

.toggle_btn span:nth-child(1)                        { top: 4px;}
.toggle_btn span:nth-child(2)                        { top: 14px;}
.toggle_btn span:nth-child(3)                        { bottom: 4px; width: 18px; left: auto; right: 0;}
.open .toggle_btn span                               { background-color: #fff;}
.open .toggle_btn span:nth-child(1)                  {
     -webkit-transform: translateY(10px) rotate(-45deg);
     transform: translateY(10px) rotate(-45deg);
	 border:solid 1px #fff;}
.open .toggle_btn span:nth-child(2)                  { opacity: 0;}
.open .toggle_btn span:nth-child(3)                  {
     -webkit-transform: translateY(-10px) rotate(45deg);
     transform: translateY(-10px) rotate(45deg);
	 width: 30px;
	 border:solid 1px #fff;}

/* mask */
#mask                                                { display: none; transition: all .5s;}
.open #mask                                          {
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.9);
     z-index: 2;}


/* footer */
footer                                                { max-width: 1050px; margin: 0 auto;}

footer #linkbox                                       { padding: 40px 0 20px; background-color: #d82752; width: 100vw; position: relative; left: 50%; transform: translateX(-50%);}
footer #linkbox .linkwrap                             { max-width: 720px; margin: 0 auto; gap: 60px;}
footer #linkbox .linkwrap .link-list                  { flex-direction: column; line-height: 2.1rem;}
footer #linkbox .linkwrap .link-list li               { align-items: center;}
footer #linkbox .linkwrap .link-list li:nth-child(2),footer #linkbox .linkwrap .link-list li:nth-child(3),footer #linkbox .linkwrap .link-list li:nth-child(4),
footer #linkbox .linkwrap .link-list li:nth-child(5),footer #linkbox .linkwrap .link-list li:nth-child(6)
                                                      { padding-left: 1.1rem;}
footer #linkbox .linkwrap .link-list .category        { font-size: 1.1rem; font-weight: bold; color: #fff;}
footer #linkbox .linkwrap .link-list img              { height: 0.9rem; width: auto; margin-right: 0.25rem;}
footer #linkbox .linkwrap .link-list p                { line-height: 2.1rem;}
footer #linkbox .linkwrap .link-list a                { color: #fff;}

footer #shopbox                                       { padding-bottom: 30px; background-color: #d82752; width: 100vw; position: relative; left: 50%; transform: translateX(-50%);}

footer #officebox                                     { background-color: #d82752; width: 100vw; position: relative; left: 50%; transform: translateX(-50%);}
footer #officebox .contbox                            { flex-direction: column; justify-content: center; align-items: center;}
footer #officebox .contbox .foot-id                   { width: 146px; height: auto; margin-bottom: 20px;}
footer #officebox .contbox .foot-id img               { width: 100%; height: auto;}
footer #officebox .contbox hr                         { margin-bottom: 20px; border-color:#fff; min-width: 456px;}
footer #officebox .contbox .addresswrap               { flex-direction: column; justify-content: center; align-items: center;}
footer #officebox .contbox .addresswrap h5            { margin-bottom: 3px;}
footer #officebox .contbox .addresswrap h5 a          { color: #fff;}
footer #officebox .contbox .addresswrap p             { color: #fff;}
footer #officebox .contbox .addresswrap p a           { color: #fff;}


/* copy */
#copy                                                 { padding: 12px 0; justify-content: center; background-color: #9c1c2f; width: 100vw; position: relative; left: 50%; transform: translateX(-50%);}
#copy small                                           { font-size: clamp(0.75rem, 0.712rem + 0.19vw, 0.875rem); color: #fff;}


/* main slider */
#top_main .toptitle h1                                { position: absolute; z-index: 2; top: 45%; left: 50%; transform: translate(-50%, -50%); text-align: center; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; font-size: 48px; text-shadow: 0 0 7px rgba(0, 0, 0, 0.35);}
#top_main .toptitle h1 span.line                      { border-top: 0.06em solid #ffffff;}

#top_main .slider                                     { position:relative; z-index: 1; width: 100%; height: 83vh;}
#top_main .slider-item01                              { background:url("img/top_main01.jpg");}
#top_main .slider-item02                              { background:url("img/top_main02.jpg");}
#top_main .slider-item03                              { background:url("img/top_main03.jpg");}
#top_main .slider-item                                { width: 100%; height:83vh; background-repeat: no-repeat; background-position:top,center; background-size: cover; background-color:#fff;}


/* J.O.D コンテンツページ */
.contbox                                { max-width: 800px; margin: 0 auto; padding: 40px 0;}
.contbox h2                             { font-size: 42px; letter-spacing: 0.4em;}
.contbox h4                             { font-size: 20px;}
.contbox h4.pink                        { color: #d82752; font-size: 20px;}
.contbox hr.pink_line                   { border: 1px solid #d82752; width: 10%; margin: 17px auto 20px;}
.contbox span.circle                    { color: #d82752;}

.title                                  { display: flex; overflow: hidden; justify-content: center;}
.title span                             { transform: translateY(2em); animation: textanimation .5s forwards;}
.title span:nth-child(1)                { animation-delay: 0.2s}/* 1文字目 */
.title span:nth-child(2)                { animation-delay: 0.4s}/* 2文字目 */
.title span:nth-child(3)                { animation-delay: 0.6s}/* 3文字目 */
.title span:nth-child(4)                { animation-delay: 0.8s}/* 4文字目 */
.title span:nth-child(5)                { animation-delay: 1s}/* 5文字目 */
.title span:nth-child(6)                { animation-delay: 1.2s}/* 6文字目 */
.title span:nth-child(7)                { animation-delay: 1.4s}/* 7文字目 */
.title span:nth-child(8)                { animation-delay: 1.6s}/* 8文字目 */
.title span:nth-child(9)                { animation-delay: 1.8s}/* 9文字目 */
.title span:nth-child(10)               { animation-delay: 2s}/* 10文字目 */
.title span:nth-child(11)               { animation-delay: 2.2s}/* 11文字目 */
.title span:nth-child(12)               { animation-delay: 2.4s}/* 12文字目 */
.title span:nth-child(13)               { animation-delay: 2.6s}/* 12文字目 */

@keyframes textanimation {
    0% {
        transform: translateY(2em);
    }

    100% {
        transform: translateY(0);
    }
}


/* トップページ */

/* トップページ - #jod_catalog */
#toppage #jod_catalog                                             { background-color: #9c1c2f;}
#toppage #jod_catalog .contbox                                    { padding: 60px 0;}
#toppage #jod_catalog .contbox .contbox_title h2,
#toppage #jod_catalog .contbox .contbox_title h4                  { color: #fff;}

#toppage #jod_catalog #catalog_cover                              { margin-top: -50px; padding-bottom: 60px;}
#toppage #jod_catalog #catalog_cover .coverbox                    { align-items: center; gap: 1.35rem;}
#toppage #jod_catalog #catalog_cover .coverbox img                { height: 23rem; width: auto;}
#toppage #jod_catalog #catalog_cover .coverbox .slick-slide       { margin:0 10px;}


/* トップページ - #overview */
#toppage #overview                                                { background-color: #faf7e2;}
#toppage #overview .contbox                                       { padding: 60px 0;}

#toppage #overview .contbox dl                                    { line-height: 2rem; justify-content: space-between; /*align-items: center;*/}
#toppage #overview .contbox dl dt                                 { margin-right: 2.5rem; min-width: 300px; font-weight: bold; width: 100%;}
#toppage #overview .contbox dl.direction dt                       { margin-left: 2.5rem; margin-right: 0;}
#toppage #overview .contbox dl dt p                               { font-weight: normal;}
/* #recruit #overview .contbox dl dd                                 { width: 55%;} */

#toppage #overview .contbox dl dd.overview_image01                { flex-grow: 1; margin-left: calc(-1 * (100vw - var(--content-max-width, 980px)) / 2); overflow: hidden; overflow-x: visible;}
#toppage #overview .contbox dl dd.overview_image02                { flex-grow: 1; margin-right: calc(-1 * (100vw - var(--content-max-width, 980px)) / 2); overflow: hidden; overflow-x: visible;}
#toppage #overview .contbox dl dd.overview_image01 img,
#toppage #overview .contbox dl dd.overview_image02 img            { width: 100%; height: auto; display: block;}
:root {
  --content-max-width: 800px; /* .pagelink_contbox の max-width に合わせる */
}

#toppage #overview .contbox dl dd small                           { font-size: 12px;}
#toppage #overview .contbox dl.number_list dt                     { margin-right: 15px; min-width: 30px; text-align-last: justify;}
#toppage #overview .contbox dl dd ul li                           { padding-left: 1rem; text-indent: -1rem; line-height: 2rem;}

#toppage #overview .contbox h3                                    { font-size: 1.8rem; line-height: 2.8rem; margin-top: 2rem;}
#toppage #overview .contbox h3 span.line                          { border-top: 0.1em solid #d82752;}


/* トップページ - #pagelink */
#toppage #pagelink                                                               { width: 100vw; position: relative; left: 50%; transform: translateX(-50%);}
#toppage #pagelink #pagelink_head                                                { background-image:url(img/linksback_image.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; width: 100vw; height: auto; padding: 60px 0;}
#toppage #pagelink #pagelink_head .pagelink_contbox                              { max-width: 800px; margin: 0 auto; align-items: center; gap: 4rem;}
#toppage #pagelink #pagelink_head .pagelink_contbox .pagelinkbox                 { max-width: 600px; height: auto; flex-direction: column;}
#toppage #pagelink #pagelink_head .pagelink_contbox .pagelinkbox img             { width: 100%; height: auto;}

#toppage #pagelink #pagelink_head .pagelink_contbox .pagelinkbox > ul {
  display: flex;
  /* flex-wrap: wrap; 必要に応じて折り返しを許可 */
  gap: 1.3rem; /* ここで直接の<li>要素間にギャップを設定 */
  list-style: none; /* デフォルトのリストマークを削除（任意） */
  padding: 0; /* デフォルトのパディングを削除（任意） */
  margin: 0; /* デフォルトのマージンを削除（任意） */
  flex-direction: column; /* 既存のCSSで設定されているため */
}

#toppage #pagelink #pagelink_head .pagelink_contbox .pagelinkbox ul.flex {
  display: flex;
  /* flex-wrap: wrap; 必要に応じて折り返しを許可 */
  gap: 1.3rem; /* ネストされた<li>要素間にギャップを設定 */
  list-style: none; /* デフォルトのリストマークを削除（任意） */
  padding: 0; /* デフォルトのパディングを削除（任意） */
  margin: 0; /* デフォルトのマージンを削除（任意） */
}

#toppage #pagelink #pagelink_head .pagelink_contbox .pagelinkword                 { max-width: 300px; margin: 0 auto;}
#toppage #pagelink #pagelink_head .pagelink_contbox .pagelinkword h3              { color: #fff; font-size: 1.8rem; line-height: 2.8rem; text-shadow: 0 0 7px rgba(0, 0, 0, 0.35);}
#toppage #pagelink #pagelink_head .pagelink_contbox .pagelinkword h3 span.line    { border-top: 0.1em solid #ffffff;}


/* トップページ - #recommend */
#toppage #recommend .contbox                                   { max-width: 980px; margin: 0 auto; padding: 60px 0; }
#toppage #recommend .contbox ul.categorybox {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6つの列を均等幅で作成 */
  gap: 1.5rem; /* アイテム間の隙間（任意で調整してください） */
  list-style: none; /* リストのデフォルトのスタイルを削除 */
  padding: 0; /* デフォルトのパディングを削除 */
  margin: 0; /* デフォルトのマージンを削除 */
  font-weight: bold;
}

#toppage #recommend .contbox ul.categorybox > li {
  display: flex; /* 子要素のulをflexコンテナにする */
  flex-direction: column; /* 縦方向に並べる */
  justify-content: space-between; /* 上下均等に配置 */
  align-items: center; /* 水平方向の中央揃え */
  text-align: center; /* テキストを中央揃え */
  /* padding: 10px;  各<li>の内側の余白（任意で調整） */
  /* border: 1px solid #eee; 各<li>の境界線（視認性向上のため、任意） */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

#toppage #recommend .contbox ul.categorybox > li > a {
  display: flex; /* aタグ自体もflexコンテナにして中のulを配置 */
  flex-direction: column;
  height: 100%; /* 親要素(li)の高さに合わせる */
  width: 82.5%;
  text-decoration: none; /* 下線を削除 */
  color: inherit; /* テキストの色を親から継承 */
}

#toppage #recommend .contbox ul.categorybox > li > a > ul {
  display: flex; /* 内側のulをflexコンテナにする */
  flex-direction: column; /* 縦方向に並べる */
  justify-content: space-between; /* アイテムを上下に均等配置 */
  align-items: center; /* 水平方向の中央揃え */
  list-style: none; /* リストのデフォルトのスタイルを削除 */
  padding: 0;
  margin: 0;
  height: 100%; /* 親要素(a)の高さに合わせる */
}

#toppage #recommend .contbox ul.categorybox > li > a > ul > li:nth-child(2) {
  /* 2番目の<li>（例：「レディースファッション」）にスタイルを適用 */
  flex-grow: 1; /* この要素が残りのスペースを占めるようにする */
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center; /* 水平方向の中央揃え */
  padding: 5px 0; /* 上下のパディングで高さの調整 */
}

#toppage #recommend .contbox ul.categorybox > li img {
  max-width: 100%;
  height: auto;
  display: block; /* 余分なスペースを削除 */
  margin-bottom: 0.5rem; /* アイコンの下に少しスペース */
}

#toppage #recommend .contbox ul.categorybox > li > a > ul > li:last-child {
  /* "View More" のスタイル */
  margin-top: auto; /* 他のコンテンツの下に固定 */
}

#toppage #recommend .contbox ul.categorybox .viewmorebtn      { color: #ca2a4f; font-size: 0.75rem; border: #ca2a4f 2px solid; display: inline-block; padding: 0.25rem 0.45rem; margin-top: 0.5rem;}


/* トップページ - #newsandtopics */
#toppage #newsandtopics                                       { background-color: #e8ebd4; width: 100vw; position: relative; left: 50%; transform: translateX(-50%);}
#toppage #newsandtopics #news_head                            { background-image:url(img/newsandtopics.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; width: 100vw; max-height: 480px;}
#toppage #newsandtopics #news_head .headtitle                 { height: 11em; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#toppage #newsandtopics #news_head .headtitle h5              { color: #d82752; font-size: 1.75rem; letter-spacing: 0.14em;}
#toppage #newsandtopics h5                                    { color: #d82752; font-size: 1.75rem; letter-spacing: 0.14em;}
#toppage #newsandtopics .infobox                              { max-width: 720px; margin: 0 auto; padding: 40px 0 40px; }
#toppage #newsandtopics .infobox li.infowrap:nth-child(n+2)   { border-top: #000 1px solid;}
#toppage #newsandtopics .infobox .newsbox                     { padding: 15px 0; gap: 1em; align-items: center;}
#toppage #newsandtopics .infobox .newsbox .new                { color: #ffffff; font-weight: bold; font-size: 0.8rem; background-color: #e21c12; display: inline-block; width: 8em; padding: 0.25rem 0; text-align: center;}
#toppage #newsandtopics .infobox .newsbox .merci              { color: #1e2b6a; font-weight: bold; font-size: 0.8rem; background-color: #dae1ea; border: #fff 1px solid; display: inline-block; width: 8em; padding: 0.25rem 0; text-align: center;}
#toppage #newsandtopics .infobox .newsbox .mens               { color: #004548; font-weight: bold; font-size: 0.8rem; background-color: #d9e8e3; border: #fff 1px solid; display: inline-block; width: 8em; padding: 0.25rem 0; text-align: center;}
#toppage #newsandtopics .infobox .newsbox .access             { color: #c6194b; font-weight: bold; font-size: 0.8rem; background-color: #eadae0; border: #fff 1px solid; display: inline-block; width: 8em; padding: 0.25rem 0; text-align: center;}
#toppage #newsandtopics .infobox .newsbox .dinner             { color: #384e7c; font-weight: bold; font-size: 0.8rem; background-color: #d6ddea; border: #fff 1px solid; display: inline-block; width: 8em; padding: 0.25rem 0; text-align: center;}
#toppage #newsandtopics .infobox .newsbox .my-order           { color: #ba174b; font-weight: bold; font-size: 0.8rem; background-color: #eddfe4; border: #fff 1px solid; display: inline-block; width: 8em; padding: 0.25rem 0; text-align: center;}
#toppage #newsandtopics .infobox .nextpage                    { display: flex; align-items: center; justify-content: flex-end; margin-top: 15px;}
#toppage #newsandtopics .infobox .nextpage p                  { font-weight: bold; color: #d82752; margin-right: 0.75rem;}
#toppage #newsandtopics .infobox .nextpage .longarrow         { height: 0.5rem; width: auto; align-items: center; margin-bottom: 0.5rem;}


/* recruit */
#recruit #main_head                     { background-image:url(img/recruit_main.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; width: 100vw; max-height: 480px; margin-top: 80px;}
#recruit #main_head .headtitle          { height: 11em; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#recruit #main_head .headtitle h1       { font-size: 2rem; color: #fff;}

#recruit .contbox h4.pink_back          { color: #fff; background: #d82752; padding: 10px 0;}

#recruit .contbox dl                    { line-height: 2rem;}
#recruit .contbox dl dt                 { margin-right: 2rem; min-width: 120px; font-weight: bold;}
#recruit .contbox dl dd small           { font-size: 12px;}
#recruit .contbox dl.number_list        { flex-wrap: nowrap;}
#recruit .contbox dl.number_list dt     { margin-right: 15px; min-width: 30px; text-align-last: justify; border-bottom: none;}
#recruit .contbox dl dd ul li           { padding-left: 1rem; text-indent: -1rem; line-height: 2rem;}

#recruit #buyer,#recruit #delivery      { background-color: #faf7e2;}

#recruit #buyer .contbox dl.number_list dt span { display: flex; justify-content: center; align-items: center; font-size: 20px; color: #fff; border-radius: 50%; background: #d82752; width: 35px; height: 35px; text-align: center; line-height: 35px; letter-spacing: 0; }


/* company */
#company #main_head                     { background-image: url("img/comapny_main.jpg"); background-repeat: no-repeat; background-size: cover; background-position: bottom; width: 100vw; max-height: 480px; margin-top: 80px;}
#company #main_head .headtitle          { height: 11em; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#company #main_head .headtitle h1       { font-size: 2rem; color: #fff;}

#company .contbox h4.pink_back          { color: #fff; background: #d82752; padding: 10px 0;}

#company .contbox dl                    { line-height: 2rem;}
#company .contbox dl dt                 { margin-right: 2rem; min-width: 120px; font-weight: bold;}
#company .contbox dl dd small           { font-size: 12px;}
#company .contbox dl.number_list dt     { margin-right: 15px; min-width: 30px; text-align-last: justify;}
#company .contbox dl dd ul li           { padding-left: 1rem; text-indent: -1rem; line-height: 2rem;}
#company .contbox .month_sp             { display: none;}
#company #message                       { background-color: #faf7e2;}
#company #access .mapbox p              { display: flex; justify-content: center;}
#company #access .mapbox iframe         { margin-bottom: 20px;}


/* business */
#business #main_head                    { background-image:url("img/business_main.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; width: 100vw; max-height: 480px; margin-top: 80px;}
#business #main_head .headtitle         { height: 11em; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#business #main_head .headtitle h1      { font-size: 2rem; color: #fff;}

#business .contbox h4.pink_back         { color: #fff; background: #d82752; padding: 10px 0;}

#business .contbox dl                   { line-height: 2rem; justify-content: space-between; /*align-items: center; */}
#business .contbox dl dt                { margin-right: 2.5rem; min-width: 300px; font-weight: bold; width: 100%;}
#business .contbox dl.direction dt      { margin-left: 2.5rem; margin-right: 0;}
#business .contbox dl dt p              { font-weight: normal;}
/* #business .contbox dl dd                { width: 55%;} */

#business .contbox dl dd.planning_image01                 { flex-grow: 1; margin-right: calc(-1 * (100vw - var(--content-max-width, 980px)) / 2); overflow: hidden; overflow-x: visible;}
#business .contbox dl dd.planning_image02                 { flex-grow: 1; margin-left: calc(-1 * (100vw - var(--content-max-width, 980px)) / 2); overflow: hidden; overflow-x: visible;}

#business .contbox dl dd.production_image01               { flex-grow: 1; margin-right: calc(-1 * (100vw - var(--content-max-width, 980px)) / 2); overflow: hidden; overflow-x: visible;}

#business .contbox dl dd.call_center_image01              { flex-grow: 1; margin-left: calc(-1 * (100vw - var(--content-max-width, 980px)) / 2); overflow: hidden; overflow-x: visible;}

#business .contbox dl dd.distribution_center_image01      { flex-grow: 1; margin-right: calc(-1 * (100vw - var(--content-max-width, 980px)) / 2); overflow: hidden; overflow-x: visible;}
#business .contbox dl dd.distribution_center_image02      { flex-grow: 1; margin-left: calc(-1 * (100vw - var(--content-max-width, 980px)) / 2); overflow: hidden; overflow-x: visible;}

#business .contbox dl dd.catalog_center_image01           { flex-grow: 1; margin-right: calc(-1 * (100vw - var(--content-max-width, 980px)) / 2); overflow: hidden; overflow-x: visible;}

#business .contbox dl dd.planning_image01 img,
#business .contbox dl dd.planning_image02 img,
#business .contbox dl dd.production_image01 img,
#business .contbox dl dd.call_center_image01 img,
#business .contbox dl dd.distribution_center_image01 img,
#business .contbox dl dd.distribution_center_image02 img,
#business .contbox dl dd.catalog_center_image01 img       { width: 100%; height: auto; display: block;}

:root {
  --content-max-width: 800px; /* .pagelink_contbox の max-width に合わせる */
}

#business .contbox dl dd small          { font-size: 12px;}
#business .contbox dl.number_list dt    { margin-right: 15px; min-width: 30px; text-align-last: justify;}
#business .contbox dl dd ul li          { padding-left: 1rem; text-indent: -1rem; line-height: 2rem;}

#business .contbox h3                   { font-size: 1.65rem; line-height: 2.65rem; margin-top: 2rem;}
#business .contbox h3 span.line         { border-top: 0.1em solid #d82752;}

#business #jod_work,#business #production_dept,#business #distribution_center { background-color: #faf7e2;}



@media (hover: hover) {
a:hover                                              { opacity:0.5; transition:.3s;}
header .headbox .head_menu .flex li a:hover          { opacity: 1; color: #d82752;}
header .headbox .head_menu .flex li a:hover::after   { transform: scale(1, 1);}
                


#contact .office_link:hover                          { text-decoration: none; opacity:0.5;}
#contact .contactform button:hover,
#contact .contactform .contact_box_btn input[type=submit]:hover,
#contact .contactform .contact_box_btn button[value=back]:hover
                                                     { opacity:0.5; transition:.3s;}
#information_list .contbox .page .flex a:hover       { opacity:0.5; transition:.3s;}
}

@media (hover: none) {
a:active                                              { opacity:0.5; transition:.3s;}
header .headbox #nav a:active                         { font-weight: bold;}

#contact .office_link:active                          { text-decoration: none; opacity:0.5;}
#contact .contactform button:active,
#contact .contactform .contact_box_btn input[type=submit]:active,
#contact .contactform .contact_box_btn button[value=back]:active
                                                     { opacity:0.5; transition:.3s;}
#information_list .contbox .page .flex a:active      { opacity:0.5; transition:.3s;}
}


@media only screen and (max-width: 1380px) {
#main .slider-item                                   { height:auto; padding-bottom:10.5%; background-size:contain;}
.slick-dots                                          { margin-top:0;}
}


@media only screen and (max-width: 1280px) {

}


@media only screen and (max-width: 1024px) {
header .headbox                                      { padding: 20px;}

.new_line                                            { display:block;}

header .headbox #g-nav                               { margin-bottom: auto;}
header .headbox .online_shop                         { margin-right: 50px;}

.toggle_btn                                          { right: 4%;}

footer #officebox .foot-id                           { margin-bottom: 30px;}
footer #officebox .contbox                           { flex-direction: column;}
footer #officebox .contbox .r-box                    { flex-direction: column;}

}


@media only screen and (max-width: 768px) {
.new_line                                            { display: contents;}

.pc                                                  { display:none;}
.sp                                                  { display:block;}

header .headbox                                      { max-width: 100%;}
header .headbox #g-nav #site-id                      { display: block;}

#h-nav                                               { width:auto; clear: both; display:block;}

#main                                                { padding-top: 233px;}

#address                                             { flex-direction: column;}
#address .mapbox                                     { width: 100%; height: auto;}

:target {
  scroll-margin-top: clamp(96px, 10vw, 234px); /* ヘッダーの高さ　例: 60px */
}

footer #officebox .foot-id                           { margin-bottom: 25px;}
footer #officebox .contbox                           { flex-direction: column;}
footer #officebox .contbox .r-box                    { flex-direction: column;}
footer #copy                                         { text-align: center;}

#recruit .contbox,#company .contbox                  { padding: 40px 20px;}
}


@media only screen and (max-width: 428px) {
.line_break                                          { display: block;}

body                                                 { font-size:15px;}

.toggle_btn                                          { right: 5%;}

nav.navmenu #head_linkbox                            { transform: translateY(12%) translateX(-50%);}
nav.navmenu #head_linkbox .linkwrap                  { gap:0; max-width: 100%; display: block;}
nav.navmenu #head_linkbox .linkwrap .link-list       { margin-bottom: 20px;}


footer #officebox .contbox hr                        { min-width: 100%;}


.contbox h2                                          { font-size: 38px;}
.contbox h4.pink                                     { font-size: 18px;}


#recruit #main_head .headtitle h1                    { font-size: 1.8rem;}
#recruit .contbox_title                              { margin-bottom: 40px;}
#recruit .contbox dl                                 { flex-wrap: wrap; margin-bottom: 15px;}
#recruit .contbox dl dt                              { min-width: 100%; text-align-last: left; letter-spacing: 0.3rem; border-bottom: 1px solid #3e3a39; padding-bottom: 5px; margin-bottom: 5px; margin-right: auto;}
#recruit .contbox dl dd ul li                        { padding-left: 0.5rem; text-indent: -0.5rem;}


#company #main_head .headtitle h1                    { font-size: 1.8rem;}
#company .contbox dl                                 { flex-wrap: wrap; margin-bottom: 15px;}
#company .contbox dl dt                              { min-width: 100%; text-align-last: left; letter-spacing: 0.3rem; border-bottom: 1px solid #3e3a39; padding-bottom: 5px; margin-bottom: 5px; margin-right: auto;}
#company .contbox dl dd ul li                        { padding-left: 0.5rem; text-indent: -0.5rem;}
#company .contbox .month_pc                          { display: none;}
#company .contbox .month_sp                          { display: block;}
}

   


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