@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */
:root {
--fontColor:#000;
--brownFont:#7B5807;
--primaryColor:#9E0001;
--secondaryColor:#FFA700;
--pointColor:#FF7600;
--whiteColor:#fff;
--yellowColor:#FFEB00;
--softyellowColor:#FFF6BE;
--shadowColor:rgba(0, 0, 0, 0.3);
--bgColor:#FFE403;
}
/*========= ▼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-hyAccounts{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-hyAccounts 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-hyAccounts 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;}
.loader {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  background: radial-gradient(circle closest-side,#000 94%,#0000) right/calc(200% - 1em) 100%;
  animation: l24 1s infinite alternate linear;
}
.loader::before {
  content: "Loading...";
  line-height: 1em;
  color: #0000;
  background: inherit;
  background-image: radial-gradient(circle closest-side,#fff 94%,#000);
  -webkit-background-clip:text;
          background-clip:text;
}

@keyframes l24{
  100%{background-position: left}
}
/*========= ▲Loadingのための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-hyAccounts .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;}

section {position: relative;margin: 4% auto 0;padding: 0;}
.sec-inner {position: relative;max-width: 1290px; 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%;}

.flex-proList{display: flex;flex-wrap: wrap;}
.flex-proList > li {flex-basis: 25%;margin: 0 0;position: relative;transition: all .5s;}
.flex-proList > li a {color: var(--bkColor);}


#link01, #link02, #link03, #link04, #link05, #link06{
    padding-top: 100px;
    margin-top: -100px;
}
#lp-hyAccounts #sec02{
    margin: 3% auto;
}
#lp-hyAccounts .leadArea {
    text-align: center;
}
#lp-hyAccounts .leadArea dt{
    font-size: clamp(26px, 2.75vw, 44px);
    font-weight: 500;
    line-height: 1.5;
}
#lp-hyAccounts .leadArea dd {
    font-size: clamp(16px, 1.25vw, 20px);
    margin-top: 1.5em;
}
#lp-hyAccounts .fukidashi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
#lp-hyAccounts .fukidashi::before {
  content: "";
  width: 36px;
  height: 2px;
  transform: rotate(60deg);
  box-sizing: border-box;
  background-color: var(--whiteColor);
}
#lp-hyAccounts .fukidashi::after {
  content: "";
  width: 36px;
  height: 2px;
  transform: rotate(-60deg);
  box-sizing: border-box;
  background-color: var(--whiteColor);
}
#lp-hyAccounts h3{
    color: var(--whiteColor);
    font-size: clamp(18px, 2.23vw, 35px); 
    font-weight: 500;
    margin-bottom: 1em;
}

#lp-hyAccounts .otoku3{
    position: relative;
    background: var(--primaryColor);
    border-radius: 10px;
    padding: 1.3em 5em;
    margin: 3% auto;
    width: 98%;
    max-width: 1200px;
    text-align: center;
}

#lp-hyAccounts .otokuSum_con ul{
    display: inline-flex;
    justify-content: center;
    background: var(--whiteColor);
    border: 2px solid var(--yellowColor);
    border-radius: 50vh;
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 500;
}
#lp-hyAccounts .otokuSum01 ul li:first-child{
    background: var(--yellowColor);
    border-radius: 50vh 0 0 50vh;
}
#lp-hyAccounts .otokuSum02 ul li:first-child{
    background: var(--secondaryColor);
    border-radius: 50vh 0 0 50vh;
}
#lp-hyAccounts .otokuSum03 ul li:first-child{
    background: var(--pointColor);
    border-radius: 50vh 0 0 50vh;
}
#lp-hyAccounts .otokuSum_con ul li{
    padding: 0.2em 1.5em;
}
#lp-hyAccounts .otoku3 p{
    font-size: clamp(14px, 1.15vw, 18px);
    color: var(--whiteColor);
    margin-top: 0.5em;
}
#lp-hyAccounts .otoku3 .fa-plus{
    font-size: clamp(24px, 2.65vw, 42px);
    color: var(--whiteColor);
    margin: 15px;
}
#lp-hyAccounts .precautions{
    background: var(--whiteColor);
    border-radius: 5px;
    padding: 1em 2em;
    text-align: left;
    margin: 5% auto 3%;
}
#lp-hyAccounts .precautionsTitle{
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: bold;
}
#lp-hyAccounts .precautions ul{
    margin: 1em;
    list-style: disc;
    font-size: clamp(12px, 0.95vw, 15px); 
}
#lp-hyAccounts .precautions ul li {
    line-height: 1.4;
    margin-bottom: 10px;
}
#lp-hyAccounts h2{
    font-size: clamp(18px, 2.15vw, 34px);
    color: var(--whiteColor);
    background: var(--primaryColor);
    padding: 0.3em;
    text-align: center;
    font-weight: 600;
}

#lp-hyAccounts .category,
#lp-hyAccounts .product {
    margin: 3% auto 0;
}
#lp-hyAccounts .category ul{
    display: flex;
    gap:20px;
    justify-content: center;
    flex-wrap: wrap;
}
#lp-hyAccounts .category ul li{
    flex-basis: calc((100% - 80px)/5);
}
#lp-hyAccounts .cateFlex{
    position: relative;
    display: flex;
    justify-content: space-between;
    background: var(--whiteColor);
    border: 3px solid var(--primaryColor);
    border-radius: 10px;
    overflow: hidden;
    z-index: 0;
}
#lp-hyAccounts .cateFlex dt{
    color: var(--whiteColor);
    font-size: clamp(23px, 2.4vw, 38px); 
    padding: 0.5em;
    background: var(--primaryColor);
    z-index: 2;
    display: flex;
    flex-basis: 40%;
    align-items: center;
    justify-content: center;
}
#lp-hyAccounts .cateFlex dd{
    position: relative;
    font-size: clamp(16px, 1.25vw, 20px);
    font-weight: 500;
    padding: 1em;
    z-index: 2;
    transition: all .35s;
    width: 100%;
    text-align: center;
}
#lp-hyAccounts .cateFlex::before{
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primaryColor);
    position: absolute;
    left: -100%;
    top: 0;
    transition: all .35s;
}

#lp-hyAccounts .btnArea{
    display: flex;
    justify-content: center;
    gap:30px;
}
#lp-hyAccounts .btnArea li{
    flex-basis: calc((100% - 30px) / 2);
}
#lp-hyAccounts .btnArea li img{
    box-shadow: 3px 6px 6px var(--shadowColor);
    transition: all .35s;
}
section#bnr{
    margin-bottom: 8%;
}


@media (any-hover: hover) {
/*:hover はここに書く*/
    #lp-hyAccounts .cateFlex:hover::before{
        left: 0
    }
    #lp-hyAccounts .cateFlex:hover dd{
        color: var(--whiteColor);
    }
    #lp-hyAccounts .btnArea li:hover img {
        transform: translateY(-5px);
        box-shadow: 3px 10px 10px var(--shadowColor);
    }

}

.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) {
    #lp-hyAccounts .category ul li {
    flex-basis: calc((100% - 40px) / 3);
}
    .flex-proList > li {
        flex-basis: 33.333%;
    }

.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) {
    #lp-hyAccounts .leadArea dd{
        line-height: 1.4;
        text-align: left;
    }
    #lp-hyAccounts .otoku3{
        padding: 1em;
        margin: 10% auto;
    }
    #lp-hyAccounts .fukidashi{
        gap:5px;
        padding: 0;
    }
    #lp-hyAccounts .fukidashi::before,
    #lp-hyAccounts .fukidashi::after {
        width: 30px;
    }
    #lp-hyAccounts .otokuSum_con ul li{
        padding: 0.2em 0.45em;
    }
    #lp-hyAccounts .precautions{
        padding: 1em;
        margin: 8% auto 5%;
    }
    #lp-hyAccounts .category{
        width: 75%;
    }
    #lp-hyAccounts .category ul{
        flex-direction: column;
    }
    #lp-hyAccounts .btnArea{
        gap:20px;
        flex-direction: column;
    }
    #lp-hyAccounts .cateFlex dt{
        flex-basis: 30%;
    }
    .flex-proList > li {
        flex-basis: 50%;
    }

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