/* #book_area */
#book_area .list_box li .img_box:before,#book_area .list_box li .img_box:after {transform:scaleY(0);-webkit-transform:scaleY(0)}
#book_area .list_box li .img_box:after {transform-origin:center bottom;-webkit-transform-origin:center bottom}

/* #youtube_box */
#youtube_box a {width:83px;height:83px;border-radius:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-webkit-animation:spineer 2s infinite;animation:spineer 2s infinite}
header .menu {border-bottom:1px rgba(var(--white-rgb),.2) solid}

/* #webmenu */
header #webmenu nav >ul >li >p a {color:var(--white)}
header.scroll {background:rgba(var(--secondary-rgb),.9)}

/* #openform */
#openform {background:rgba(var(--white-rgb),.3)}
section {padding:5vw 0 3vw}
section >* {z-index:3}
.bg_box {width:100%;height:100%;background:no-repeat 50% / cover;background-attachment:fixed;opacity:.3;top:0;left:0}
.bg_box:before {width:100%;height:100%;display:block;background:rgba(var(--primary-rgb),.2);content:""}
.bg_box.white:before {background:rgba(var(--white-rgb),.2)}

/* #wrap */
#wrap {background:url(/images/40/web_bg.webp)}
.webBox #wrap .pageh1 {position:relative;margin:0 0 20px}
.webBox #wrap .pageh1 h1 {display:flex;line-height:1.5;color:#303030;font-size:1.75rem}
.area_title::after {content:"";position:absolute;top:-20px;left:50%;width:1px;height:20px;background:rgba(158,23,24,.45);transform:translateX(-50%)}

/* #product_area */
#product_area {position:relative;overflow:hidden;box-shadow:6px 0 25px rgb(55 34 24 / 10%)}
#product_area .bg_box {inset:0;z-index:0;width:100%;height:100%;background:rgb(248 244 237 / 30%);z-index:3;opacity:1}
#product_area .bg_box::after {content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:radial-gradient(rgba(80,48,32,.28) .5px,transparent .7px);background-size:8px 8px}
#product_area .product_inner {z-index:2;display:flex;align-items:flex-start;gap:42px;width:100%;margin:0;z-index:5}
#product_area .title_box {position:relative;flex:0 0 90px;width:90px;padding-top:2px}
#product_area .sub_title {margin:0 0 12px;color:#9e1718;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:.12em;writing-mode:vertical-rl}
#product_area .area_title {position:relative;display:inline-flex;align-items:center;justify-content:center;width:58px;min-height:180px;padding:18px 8px;border:1px solid rgba(156,23,24,.7);color:#9e1718;font-size:24px;font-weight:700;line-height:1.25;letter-spacing:.14em;writing-mode:vertical-rl;background:rgba(255,252,247,.78)}
#product_area .area_title::before {content:"";position:absolute;inset:5px;border:1px solid rgba(156,23,24,.22);pointer-events:none}
#product_area .list_box {min-width:0;flex:1;overflow:hidden}
#product_area #product_list {margin:0 -10px}
#product_area #product_list .slick-list {overflow:hidden;padding-bottom:12px!important}
#product_area #product_list li {padding:0 10px;white-space:normal;vertical-align:top;box-sizing:border-box;margin:10px 0}
#product_area .product_item {height:100%;overflow:hidden;border:1px solid rgba(98,62,42,.14);background:rgba(255,252,247,.92);transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,border-color .45s ease}
#product_area .podimg_box {position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:230px;padding:16px 18px;overflow:hidden;background:#eee6dc;box-sizing:border-box}
#product_area .podimg_box::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 72%,rgba(30,15,8,.04));pointer-events:none}
#product_area .podimg_box img {display:block;width:100%;height:100%;object-fit:contain;object-position:center center;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
#product_area .info_box {min-height:185px;padding:22px 22px 20px;box-sizing:border-box}
#product_area .product_name {padding-right:5px;color:#392820;font-size:21px;font-weight:700;line-height:1.5;letter-spacing:.07em}
#product_area .article {margin-top:10px;padding-right:3px;color:#776860;font-size:16px;line-height:1.8;letter-spacing:.035em}
#product_area .article p {margin:0}
#product_area .product_more {position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-top:18px;overflow:hidden;border-radius:50%;background:#c92825;color:#fff;font-size:18px;line-height:1;transition:background .35s ease,transform .35s ease}
#product_area .atag_item {z-index:5;inset:0;width:100%;height:100%}
#product_area .product_item:hover {transform:translateY(-7px);border-color:rgb(169 14 18 / 43%);box-shadow:0 0px 7px rgb(67 39 26 / 19%)}
#product_area .product_item:hover .podimg_box img {transform:scale(1.045)}
#product_area .product_item:hover .product_more {background:#951012;transform:translateX(5px)}
#product_area .slick-current .product_item {border-color:rgba(169,14,18,.22)}

/* #news_area */
#news_area {position:relative;overflow:hidden}
#news_area .bg_box {inset:0;z-index:0;width:100%;height:100%;background:rgb(250 246 239 / 40%);z-index:3;opacity:1}
#news_area .bg_box::after {content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;background-image:radial-gradient(rgba(78,47,30,.3) .5px,transparent .7px);background-size:8px 8px}
#news_area .bg_box::before {display:none}
#news_area .news_wrap {z-index:2;display:grid;grid-template-columns:90px minmax(0,1fr);gap:42px;align-items:start;z-index:4}
#news_area .title_box {position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-top:2px}
#news_area .sub_title {margin:0 0 13px 5px;color:#a41416;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:.13em;writing-mode:vertical-rl}
#news_area .area_title {position:relative;display:flex;align-items:center;justify-content:center;width:58px;min-height:190px;padding:18px 8px;border:1px solid rgba(158,23,24,.7);background:rgba(255,252,247,.78);color:#9e1718;font-size:24px;font-weight:700;line-height:1.25;letter-spacing:.14em;writing-mode:vertical-rl}
#news_area .area_title::before {content:"";position:absolute;inset:5px;border:1px solid rgba(158,23,24,.22);pointer-events:none}
#news_area .list_box {min-width:0;overflow:hidden}
#news_area .list_box ul {margin:0 -12px}
#news_area .slick-list {overflow:hidden}
#news_area .slick-track {display:flex}
#news_area .slick-slide {height:auto}
#news_area .slick-slide > div {height:100%}
#news_area .list_box li {height:100%;padding:0 12px;white-space:normal;box-sizing:border-box}
#news_area .news_item {height:100%;overflow:hidden;border:1px solid rgba(91,57,39,.15);background:rgba(255,252,247,.94);transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,border-color .45s ease}
#news_area .news_img {width:100%;aspect-ratio:1.45/1;background:#eee6dc}
#news_area .news_img::after {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 68%,rgba(42,18,9,.08));pointer-events:none}
#news_area .news_img img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.22,.61,.36,1)}
#news_area .info_box {min-height:175px;padding:20px 22px 22px}
#news_area .news_meta {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:13px}
#news_area .news_category {position:relative;z-index:6;max-width:55%;color:#a41416;font-size:16px;font-weight:600;line-height:1.5}
#news_area .time {flex-shrink:0;color:#91847c;font-size:16px;line-height:1.5;letter-spacing:.03em}
#news_area .news_title {color:#392820;font-size:20px;font-weight:700;line-height:1.55;letter-spacing:.05em;-webkit-line-clamp:2}
#news_area .news_more {display:flex;align-items:center;justify-content:flex-end;margin-top:18px}
#news_area .news_more span {display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#c92825;color:#fff;font-size:18px;line-height:1;transition:transform .35s ease,background .35s ease}
#news_area .atag_item {z-index:5;inset:0;width:100%;height:100%}
#news_area .news_category {z-index:7}
#news_area .news_item:hover {transform:translateY(-7px);border-color:rgba(169,14,18,.28);box-shadow:0 18px 38px rgba(67,39,26,.1)}
#news_area .news_item:hover .news_img img {transform:scale(1.055)}
#news_area .news_item:hover .news_more span {background:#951012;transform:translateX(5px)}
#news_area .title_box {opacity:0;transform:translateY(25px);transition:opacity .75s ease,transform .85s cubic-bezier(.22,.61,.36,1)}
#news_area .news_item {opacity:0;transform:translateY(30px)}
#news_area.is-show .title_box {opacity:1;transform:translateY(0)}
#news_area.is-show .slick-active .news_item {opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .85s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,border-color .45s ease}
#news_area.is-show .slick-active:nth-child(2) .news_item {transition-delay:.08s}
#news_area.is-show .slick-active:nth-child(3) .news_item {transition-delay:.16s}

/* #book_area */
#book_area .list_box img {height:450px}
#book_area .list_box .img_box {border:var(--white) solid;border-width:0 1px 1px 0}
#book_area .list_box .img_box:before,#book_area .list_box .img_box:after {position:absolute;width:100%;height:100%;background:var(--white);z-index:9;opacity:.4;content:""}
#book_area .list_box .img_box:after {right:0;bottom:0}
#book_area .list_box .atag_item {z-index:10}
#book_area .list_box .badge {margin:auto;padding:10px 20px;max-width:calc(80% - 40px);height:34px;line-height:36px;font-size:20px}

/* #youtube_box */
#youtube_box {min-height:1px;padding-bottom:30%}
#youtube_box a {position:absolute;background:var(--white);display:flex;top:50%;left:50%;z-index:99}
#youtube_box a i {margin:auto;font-size:30px;color:var(--primary)}
#youtube_box iframe {position:absolute;width:100%;height:100%;top:0;left:0;z-index:5}

/* #custom_area */
#custom_area {margin:0;padding:5vw 0 3vw}
#custom_area:before {position:absolute;width:100%;height:75%;background:rgba(var(--primary-rgb),.1);display:block;bottom:0;left:0;opacity:.3;content:""}

/* #custom_box */
#custom_box {padding:8vw 0 5vw}
#custom_box li .row {margin:30px 20px;padding:30px;display:block;border-bottom:2px var(--primary) solid}
#custom_box li .row h2 {font-size:20px}
#custom_box li .row article {margin-top:30px;line-height:200%}
@-webkit-keyframes spineer{0%{-webkit-box-shadow:0 0 0 0 var(--info)}70%{-webkit-box-shadow:0 0 0 20px transparent}100%{-webkit-box-shadow:0 0 0 0 transparent}}
@keyframes spineer{0%{box-shadow:0 0 0 0 var(--info)}70%{box-shadow:0 0 0 20px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* @media */
@media screen and (max-width:1199px) {
  #product_area .product_inner { gap: 28px }
  #product_area .title_box { flex: 0 0 76px; width: 76px }
  #product_area .area_title { width: 54px; min-height: 165px; font-size: 22px }
  #product_area #product_list li { width: 260px }
  #news_area .news_wrap { grid-template-columns: 76px minmax(0,1fr); gap: 28px }
  #news_area .area_title { width: 54px; min-height: 170px; font-size: 22px }
  #news_area .info_box { padding: 19px 19px 20px }
  #news_area .news_title { font-size: 19px }
}
@media screen and (max-width:900px) {
  #product_area .product_inner { display: block }
  #product_area .title_box { display: flex; width: 100%; margin-bottom: 32px; padding: 0; align-items: center; gap: 15px }
  #product_area .sub_title { margin: 0; font-size: 16px; writing-mode: horizontal-tb }
  #product_area .area_title { width: auto; min-height: 0; padding: 0 0 8px; border: 0; background: none; font-size: 27px; writing-mode: horizontal-tb }
  #product_area .area_title::before { display: none }
  #product_area .area_title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 48%; height: 2px; background: #a90e12 }
  #product_area #product_list li { width: 245px }
  #news_area .news_wrap { display: block }
  #news_area .title_box { display: flex; width: 100%; margin-bottom: 32px; padding: 0; flex-direction: row; align-items: flex-end; gap: 15px }
  #news_area .sub_title { margin: 0 0 6px; font-size: 16px; writing-mode: horizontal-tb }
  #news_area .area_title { width: auto; min-height: 0; padding: 0 0 8px; border: 0; background: none; font-size: 27px; writing-mode: horizontal-tb }
  #news_area .area_title::before { display: none }
  #news_area .area_title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 48%; height: 2px; background: #a90e12 }
}
@media screen and (max-width:768px) {
  #youtube_box { padding-bottom: 60vw }
  #custom_box li .row { margin: 10px 15px; padding: 10px 0 }
}
@media screen and (max-width:767px) {
  #product_area .title_box { margin-bottom: 25px; gap: 10px; flex-wrap: wrap }
  #product_area .sub_title { width: 100%; font-size: 14px }
  #product_area .area_title { font-size: 25px }
  #product_area #product_list { margin: 0 }
  #product_area #product_list li { width: auto; padding: 0 }
  #product_area .info_box { min-height: 170px; padding: 19px 18px 18px }
  #product_area .product_name { font-size: 19px }
  #product_area .article { margin-top: 8px; font-size: 14px; line-height: 1.8 }
  #product_area .product_more { width: 32px; height: 32px; margin-top: 15px; font-size: 17px }
  #news_area .title_box { margin-bottom: 25px; gap: 10px; flex-wrap: wrap }
  #news_area .sub_title { width: 100%; margin: 0; font-size: 14px }
  #news_area .area_title { font-size: 25px }
  #news_area .list_box ul { margin: 0 }
  #news_area .list_box li { padding: 0 }
  #news_area .info_box { min-height: 160px; padding: 18px }
  #news_area .news_category,#news_area .time { font-size: 14px }
  #news_area .news_title { font-size: 18px }
  #news_area .news_more span { width: 32px; height: 32px; font-size: 17px }
  .webBox #wrap .pageh1 h1 { font-size: 1.05rem }
}
@media screen and (max-width:640px) {
  #book_area .list_box img { height: 65vw }
}
@media screen and (min-width:1281px) {
  #book_area .list_box li:hover .img_box:before,#book_area .list_box li:hover .img_box:after { transform: scaleY(1); -webkit-transform: scaleY(1) }
  #book_area .list_box li:hover .badge { background: var(--primary); color: var(--white) }
  #custom_box li:hover .row { box-shadow: 0 4px 17px 0 rgba(var(--black-rgb),.2) }
}