@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */
:root {
--fontColor:#000;
--primaryColor:#B5812D;
--whiteColor:#fff;
--shadowColor:rgba(0, 0, 0, 0.25);
--bgColor:#EFEFEF;
}
/*========= ▼reset ===============*/
/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video, a):not(svg *)) {all: unset;display: revert;}
/* box-sizingの優先値 */
*, *::before, *::after {box-sizing: border-box;}
/* リストのスタイル（箇条書き・番号）を削除します */
ol,ul {list-style: none;}
/* 画像がコンテナを超えないようにするため */
img {max-width: 100%;}
/* テーブルのセル間のスペースを削除します */
table {border-collapse: collapse;}
/*========= ▲reset ===============*/
a {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
text-decoration: none;
    color: #333;
}
#HEADER .global{display: none;}


#lp-otoriyose{overflow: hidden;font-family:"Noto Sans JP", sans-serif;font-optical-sizing: auto; font-weight:400;font-style: normal;line-break: strict;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word !important;line-height: 1.8;color: var(--fontColor);max-width: 1920px;margin: auto;background: var(--bgColor);}
#lp-otoriyose h2 {font-family:"Noto Sans JP", sans-serif;font-optical-sizing: auto; font-weight: 400;font-style: normal; line-break: strict;overflow-wrap: break-word;word-wrap: break-word;word-break: normal !important;letter-spacing:inherit;}
#lp-otoriyose ul {list-style: none;margin: 0;padding: 0;position: relative;}
.font_small {font-size: 80%;}
.font_ss{font-size: 72%;}
.font_sss{font-size: 62%;}
.font_l{font-size: 126%;}
.font_large {font-size: 140%;}
.font_ll{font-size: 165%;}
.line_center {text-align: center;}
.line_right{text-align: right;}
.line_left{text-align: left;}
.font_bold{font-weight: bold;}
.font_red {color: var(--redColor);}
.font_yellow{color: var(--yellowColor);}
/*========= LoadingのためのCSS ===============*/
.loader-wrap {position: fixed;display: flex;align-items: center;justify-content: center;width: 100%;height: 100vh;background: var(--bgColor);z-index: 999;}
/* HTML: <div class="loader"></div> */
.loader {
  width: fit-content;
  font-size: 40px;
  font-family: system-ui,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  -webkit-text-stroke: 1px #000;
  background: conic-gradient(#000 0 0) 50%/0 100% no-repeat text;
  animation: l4 1.5s linear infinite;
}
.loader:before {
  content: "Loading";
}
@keyframes l4 {
  to{background-size: 120% 100%}
}
/*========= ▲LoadingのためのCSS ===============*/

/*========= スライドのためのCSS ===============*/
.slide-wrap{
    margin: 0 auto;
}
.slide-wrap2{
    margin: -7px auto 0;
}
.infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}

/* スライド */
.infinite-slider .swiper-slide {
  height: 160px !important; /* 高さを指定 */
  width: auto !important;
}

/* スライド内の画像 */
.infinite-slider .swiper-slide img {
  width: auto;
  height: 100%;
}

.infinite-slider2 .swiper-wrapper {
  transition-timing-function: linear;
}

/* スライド */
.infinite-slider2 .swiper-slide {
  height: 160px !important; /* 高さを指定 */
  width: auto !important;
}

/* スライド内の画像 */
.infinite-slider2 .swiper-slide img {
  width: auto;
  height: 100%;
}



/*========= ▲スライドのためのCSS ===============*/



#CONTENTS, body:not(.noGlobal) #CONTENTS {margin-left: 0;padding: 0;}
#FOOTER{margin-left: 0;}
#PAGEBODY{padding-bottom: 0;}
.includeSCT .item{box-shadow: 2px 3px 6px var(--shadowColor);}
.includeSCT .item:hover{transform:translateY(-5px);box-shadow: 2px 10px 20px var(--shadowColor);}
.includeSCT .name{text-align:left;line-height: 1.5;}
.includeSCT .tag{align-content: flex-start;}
#lp-otoriyose .includeSCT .item{height: auto !important;}/*カードの高さ調節*/
.includeSCT .cont{padding-bottom: 0;}
#PAGEBOTTOM {
padding-bottom: 0;
z-index: 999;
position: relative;
}
.includeSCT .quick, .includeSCT .favorite{display: none;}
.includeSCT .cta a{letter-spacing: 0.05em;}

.slick-slide{
    height: auto;
}
section {position: relative;margin: 5% auto 0;padding: 0;}
.sec-inner {position: relative;max-width: 1230px; width: 92%; margin: 0 auto;}
.white-box01 {padding: 1.2em;max-width: 660px;width: 90%;background: rgba(255,255,255,0.65);text-align: center;margin: auto;}
#sec01 {position: relative;overflow: hidden;margin: 0 auto;}
#sec01 img {width: 100%;}

#lp-otoriyose .flex-proList{
    display: flex;
    flex-wrap: wrap;
    gap:52px;
    justify-content: center;
}
#lp-otoriyose .flex-proList > li {
    flex-basis: calc((100% - 104px)/3);
    margin: 0 0;
    position: relative;
    transition: all .5s;
}

#link01, #link02, #link03, #link04, #link05, #link06,
#link07, #link08, #link09, #link10, #link11, #link12,
#link13, #link14, #link15 {
    padding-top: 100px;
    margin-top: -100px;
}

#lp-otoriyose hgroup{
    position: relative;
    text-align: center;
}
#lp-otoriyose hgroup .ribbon{
    width: 4%;
    margin: auto;
    height: auto;
    margin-bottom: -0.5em;
}
#lp-otoriyose h2{
font-size: clamp(22px, 2.25vw, 36px);
    text-align: center;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lp-otoriyose h2::before,
#lp-otoriyose h2::after{
    background:var(--primaryColor);
    content: "";
    height: 3px;
    flex-grow: 1;
}
#lp-otoriyose h2::before{
    margin-right: 15px;
}
#lp-otoriyose h2::after{
    margin-left: 15px;
}
#lp-otoriyose h2 span {
    position: relative;
    display: block;
}

#lp-otoriyose .category,
#lp-otoriyose .product {
    margin: 3% auto 0;
}
#lp-otoriyose .category ul{
    display: flex;
    gap:30px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
#lp-otoriyose .category ul li{
    flex-basis: calc((100% - 90px)/4);
}
#lp-otoriyose .category ul li a{
    position: relative;
    display: inline-block;
    text-align: center;
    background: var(--bgColor);
    border-radius: 5px;
    overflow: hidden;
    font-size: clamp(12px, 1.25vw, 20px);
    font-weight: 400;
    padding: 1em 0;
    z-index: 2;
    transition: all .35s;
    width: 100%;
    box-shadow:
    -5px -5px 10px var(--whiteColor),
    6px 6px 12px var(--shadowColor);
    font-feature-settings: "palt";
}
#lp-otoriyose p.lead{
    font-size: clamp(15px, 1.15vw, 18px); 
    text-align: center;
    margin: 2.5em auto;
    font-weight: 400;
}
#lp-otoriyose h3{
    color: var(--whiteColor);
    background: var(--primaryColor);
    font-size: clamp(23px, 2.4vw, 38px);
    margin: 0.8em;
    text-align: center;
}
#lp-otoriyose .btnArea{
    margin-top: 3em;
}
#lp-otoriyose .btnArea a{
    display: block;
    margin: 1.2em auto;
    padding: 1em;
    font-size: clamp(17px, 1.25vw, 20px);
    color: var(--primaryColor);
    text-align: center;
    max-width: 550px;
    box-shadow:
    -5px -5px 10px var(--whiteColor),
    6px 6px 12px var(--shadowColor);
    transition: all .35s;
    border-radius: 5px;
}
#lp-otoriyose .includeSCT .cta a{
    color: var(--whiteColor);
    background: var(--primaryColor);
}
#lp-otoriyose .includeSCT .splide .splide__slide{
    padding: 0;
}
#lp-otoriyose #sec18{
    margin-bottom: 6%;
}

@media (any-hover: hover) {
/*:hover はここに書く*/
    #lp-otoriyose .category ul li:hover a{
        box-shadow:
        -2px -2px 3px var(--whiteColor),
        2px 2px 3px var(--shadowColor);
        color: var(--primaryColor);
    }
    #lp-otoriyose .btnArea a:hover {
        box-shadow:
        -2px -2px 3px var(--whiteColor),
        2px 2px 3px var(--shadowColor);
        color: var(--fontColor);
    }
}

.pad-cam {display: none;}
.pad-pc {display: block;}
.pc-cam {display: block;}
.sp-cam {display: none;}
.pad-sp {display: none;}

/************************************************************/@media screen and (max-width: 1279px) {
      #HEADER .global{display: block;}
    }
/************************************************************/@media screen and (max-width: 820px) {
    .infinite-slider .swiper-slide,
    .infinite-slider2 .swiper-slide {
      height: 100px !important; /* 高さを指定 */
      width: 153px !important;
}

    #lp-otoriyose .category ul{
        gap:20px;
    }
    #lp-otoriyose .category ul li {
    flex-basis: calc((100% - 40px) / 3);
}
    
    #lp-otoriyose .flex-proList{
        gap:20px;
    }
    #lp-otoriyose .flex-proList > li{
    flex-basis: calc((100% - 40px) / 3);
    }

.pad-cam {display: block !important;}
.pad-pc {display: block !important;}
.pc-cam {display: none !important;}
.sp-cam {display: none !important;}
.pad-sp {display: block !important;}
}
/************************************************************/@media screen and (max-width: 700px) {
    .infinite-slider .swiper-slide {
  height: 80px !important; /* 高さを指定 */
  width: 122px !important;
}
.infinite-slider2 .swiper-slide {
  height: 80px !important; /* 高さを指定 */
  width: 122px !important;
}

    section{
        margin: 10% auto 0;
    }
    #lp-otoriyose .category{
        width: 100%;
    }
    #lp-otoriyose .category ul{
        gap:15px;
    }
    #lp-otoriyose .category ul li {
        flex-basis: calc((100% - 15px) / 2);
    }
    
    
#lp-otoriyose .flex-proList{
    justify-content: flex-start;
    gap:10px;
    }
#lp-otoriyose .flex-proList > li {
    flex-basis: calc((100% - 10px)/2);
    }
    
    
.pad-sp {display: block !important;}
.pc-cam {display: none !important;}
.pad-cam {display: none !important;}
.pad-pc {display: none !important;}
}