/* フォント設定*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-padding-top: 64px;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    background-color: #ffffff;
    color: #333333;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img{max-width:100%;}
a img{
opacity:1.0;
transition: all 1s;
}
a:hover img{
opacity:0.7;
}

/* margin */
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.mt10 { margin-top: 10px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }

.container {
    margin-left: auto;
    margin-right: auto;
}

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #ffffff;
}
.logo {
margin-top:80px;
}
.logo img{width:100%;}

#pc-nav ul { display: flex; gap: 30px; }

/* ハンバーガーメニューの基本スタイル（PC非表示、SP/タブレット表示）*/
#hamburger-menu { 
    display: none; 
    width: 30px; height: 30px; background: none; border: none; cursor: pointer; position: absolute;right:4%; padding: 0; 
}
#hamburger-menu span { 
    display: block; height: 2px; background-color: #333; margin-bottom: 6px; transition: all 0.3s; 
}
#sp-nav {
    display: none; 
    position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
}
#sp-nav li a { display: block; padding: 15px 20px; border-bottom: 1px solid #eee; }

.hero-section {
    width: 100%;
    height: 80vh;
    background-size: cover;
    background-position: left bottom;
    position: relative;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background-color: #000000;
    opacity: 0.1;
}
.hero-text-container {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
    position: relative;
    z-index: 10;
    position: absolute;
top: 50%;
right:2%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.hero-text {
    color: #ffffff;
    margin-bottom: 2.5rem;
}
.hero-text h1 {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height:2;
    margin-bottom: 1rem;
text-shadow: 1px 2px 3px #808080;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
padding:0 40px;
}

.hero-text p {
    font-size: 16px;
    font-weight: 300;
text-shadow: 1px 2px 3px #808080;
font-family: "Noto Serif JP", sans-serif;
}

.section {
padding-top: 80px;
}
.section-title {
position: relative;
font-size: 32px;
text-align: center;
margin-bottom:80px;
font-weight:300;
}
.section-title::before {
display: block;
margin-bottom: 20px;
color: #df8888;
font-size: 14px;
}
.section-title::after {
content: '';
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 20px;
background-color: #df8888;
}

.section-title.philosophy::before {
content: '経営理念';
}
.section-title.activities::before {
content: '事業内容';
}
.section-title.brands::before {
content: '取り扱いブランド';
}
.section-title.onlinestore::before {
content: 'オンラインストア';
}
.section-title.company::before {
content: '会社概要';
}
.section-title.guaranteed::before {
content: '当店が正規販売店にこだわる理由';
}
.section-title.coupon::before {
content: 'お得なクーポン';
}
.section-subtitle {
font-size: 30px;
margin-bottom:48px;
font-weight:300;
color: #df8888;
}

.section-content-grid {
display: flex;
flex-direction: column;
align-items: center;
}
.section-content-grid.reverse {
flex-direction: column-reverse;
}
.content-block, .image-block {
    width: 100%;
}
.content-block h3 {
text-align: center;
margin-bottom: 80px;
font-size:24px;
font-weight:300;
position:relative;
}
.content-block h3::after{
content: '';
position: absolute;
left: 50%;
bottom: -16px;
display: inline-block;
width: 80px;
height: 4px;
border-radius:5px;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #df8888;
}

.content-block p {
color: #4b5563;
line-height: 2;
margin:0 auto 1rem;
}

.image-block img {
width: 100%;
height: auto;
}

.reveal-element {
    opacity: 0;
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}
.slide-left {
    transform: translateX(-40px);
}
.slide-right {
    transform: translateX(40px);
}
.reveal-element.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.brands-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 40px;
padding:0 40px 0;
}
.brand-card {
}
.brand-card img {
width: 100%;
height: auto;
}

video{
width:100%;
}

.onlineshop-inner{
margin:60px auto;
width:90%;
max-width:1280px;
display:flex;
flex-wrap:wrap;
gap:20px;
}
.onlineshop-list{
width:calc((100% - 40px) / 3);
}

.onlineshop-title{
width:100%;
margin:0 auto 20px;
padding:10px;
text-align:center;
}
.onlineshop-title img{
width:80%;
}
.onlineshop-title.btb{
background-color:#f3e4e3;
}
.onlineshop-title.hc-mghpro , .onlineshop-title.spicare{
background-color:#000000;
}
.onlineshop-title.creats{
background-color:#939bc5;
}
.onlineshop-title.soaddicted{
background-color:#d31751;
}
.onlineshop-title.rythm{
background-color:#ffffff;
border-bottom:4px solid #97152a;
}
.onlineshop-list ul{
width:90%;
margin:0 auto;
}

.onlineshop-list li{
margin:0 auto 10px;
padding:0.5rem;
color:#ffffff;
position: relative;
vertical-align: middle;
text-decoration: none;
border-radius:5px;
opacity:1.0;
transition: all 1s;
}

.onlineshop-list li:hover{
opacity:0.7;
}
.onlineshop-list li::before{
position: absolute;
top:50%;
right: 10px;
width: 4px;
height: 4px;
border-top: 2px solid #333333;
border-right: 2px solid #333333;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: auto;
content: "";
vertical-align: middle;
}
.onlineshop-list li a{
display:block;
/*color:#ffffff;*/
color:#333333;
text-decoration: none;
}
.onlineshop-list li a:hover{
text-decoration: underline;
}
.onlineshop-list li.rakuten{
background-color:#ba0000;
}
.onlineshop-list li.yahoo{
background-color:#ff8400;
}
.onlineshop-list li.aupay{
background-color:#ff5f22;
}
.onlineshop-list li.qoo10{
background-color:#fe00ae;
}
.onlineshop-list li.shoplist{
background-color:#0729a3;
}

.footer {
    background-color: #fff9f9;
    margin-top: 150px;
    padding-top: 150px;
    padding-bottom: 150px;
}
.footer-inner {
width:96%;
max-width:1120px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
}
.footer-info{
width:90%;
max-width:400px;
margin:0 auto 20px;
}
.footer-info dl{
display:flex;
margin-bottom:0.5rem;
}
.footer-info dt{
width:20%;
}
.footer-info dd{
width:65%;
}
.footer-info button{
display:block;
color:#ffffff;
background-color:#df8888;
margin:0.5rem 0 0;
padding:0.5rem;
border-radius:3px;
border:none;
}
.footer-info button i{
display:inline-block;
margin-right:0.5rem;
}

.affiliated a[href^="https"]:after,
.affiliated a[href^="//"]:after {
      margin: 0 0 0 3px;
      font-family: "Font Awesome 5 Free";
      content: '\f35d';
      font-weight: 900;
    }
.affiliated b{
color: #df8888;
}
.footer-map {
width:90%;
margin:auto;
max-width:600px;
}
.footer-map iframe{
width:100%;
}

.guaranteedConts , .couponConts{
margin:120px auto;
}
.guaranteed-inner{
margin:auto;
width:90%;
max-width:1280px;
}
.Contents_about{
margin:20px auto 120px;
font-size:16px;
color:#333;
}
.Contents_about p{
line-height:2;
}
.lead{
font-size:24px;
text-align:center;
}
.about-title{
margin: 30px auto 20px;
padding-bottom:0.5rem;
color:#373737;
font-size: 30px;
text-align: center;
border-bottom: solid 2px #aaaaaa;
}
.about-title02{
    margin: 30px auto 10px;
    font-size: 24px;
    position: relative;
    padding: 0.5em;
background-color:#848a90;
color:#ffffff;
}
.about_demerit{
background: #e5e5e5;
padding: 30px 60px;
}
.about_demerit ol{
counter-reset: demerit-counter;
}
.about_demerit li{
margin-bottom: 10px;
padding-left: 30px;
position: relative;
list-style:none;
counter-increment: demerit-counter;
}
.about_demerit li::before {
content: counter(demerit-counter);
background-color: #848a90;
color: #fff;
display: block;
float: left;
line-height: 24px;
margin-left: -30px;
text-align: center;
height: 24px;
width: 24px;
border-radius: 50%;
}

.about-txt{
margin: 0 auto 30px;
font-size: 20px;
padding: 10px 20px;
}
.about_inside{
background: #f5f5f5;
padding: 30px 60px;
}
.about_merit{
background: #fff9f9;
padding: 30px 60px;
}
.about_merit ol{
counter-reset: demerit-counter;
}
.about_merit li{
margin-bottom: 10px;
padding-left: 30px;
position: relative;
list-style:none;
counter-increment: demerit-counter;
}
.about_merit li::before {
content: counter(demerit-counter);
background-color: #df8888;
color: #fff;
display: block;
float: left;
line-height: 24px;
margin-left: -30px;
text-align: center;
height: 24px;
width: 24px;
border-radius: 50%;
}
.coupon-inner{
margin:120px auto;
width:90%;
max-width:1280px;
display:flex;
flex-wrap:wrap;
gap:20px;
}
.coupon-title{
width:100%;
margin:0 auto 20px;
padding:10px;
text-align:center;
}
.coupon-title img{
max-width:480px;
}
.coupon-title.btb{
background-color:#f3e4e3;
}
.coupon-title.hc-mghpro , .coupon-title.spicare{
background-color:#000000;
}
.coupon-title.creats{
background-color:#939bc5;
}
.coupon-title.soaddicted{
background-color:#d31751;
}
.coupon-title.rythm{
background-color:#ffffff;
border-bottom:4px solid #97152a;
}

.coupon-inner p{
text-align:center;
width:100%;
}
.coupon-inner p.no-coupon{
font-size:1.2rem;
font-weight:700;
color:#dd0000;
}
.cp-list{
margin:20px 0;
width:calc((100% - 20px) / 2);
}
.cp-list dt{
padding:0.5rem;
color:#ffffff;
position: relative;
vertical-align: middle;
text-decoration: none;
opacity:1.0;
transition: all 1s;
}
.cp-list dt:hover{
opacity:0.7;
}
.cp-list dt::before{
position: absolute;
top:50%;
right: 10px;
width: 4px;
height: 4px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: auto;
content: "";
vertical-align: middle;
}
.cp-list dt a{
display:block;
color:#ffffff;
text-decoration: none;
}
.cp-list.rakuten dt{
background-color:#ba0000;
}
.cp-list.yahoo dt{
background-color:#ff8400;
}
.cp-list.aupay dt{
background-color:#ff5f22;
}
.cp-list.qoo10 dt{
background-color:#fe00ae;
}
.cp-list.shoplist dt{
background-color:#0729a3;
}

.cp-list dd{
margin-top:20px;
}
.cp-list dd ul{
display:flex;
flex-wrap:wrap;
gap:20px;
}
.cp-list dd ul li{
width:calc((100% - 40px) / 3)
}


@media (min-width: 768px) {
.forSP{
display:none;
}

    .hero-section {
        height: 100vh;
    }
    .hero-text-container {
        align-items: center;
        justify-content: flex-end;
    }
    .hero-text {
        margin-bottom: 0;
color:#fffffff;
    }
    .hero-text h1 {
        font-size: 96px;
    }
    .hero-text p {
        font-size: 48px;
    }
.section {
padding-top: 150px;
}
.section-title {
font-size: 54px;
}
.section-title::before {
font-size: 24px;
}
.section-title::after {
top: 50px;
}
.section-content-grid {
flex-direction: row;
}
.section-content-grid.reverse {
flex-direction: row-reverse;
}
.content-block{
width: 50%;
padding:40px;
}
.image-block {
width: 50%;
}
.content-block h3 {
font-size:40px;
}
.content-block h3::after{
left: 50%;
bottom: -24px;
width: 120px;
height: 6px;
}
}

/* タブレット (最大幅 1024px) */
@media (max-width: 1024px) {
    
    /* ヘッダー: PCナビ非表示、ハンバーガー表示 */
    #pc-nav { display: none; }
    #hamburger-menu { display: block; }
    
    /* Brands: 3カラム */
    #brands .brand-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    /* ハンバーガーメニューが開いた時のアニメーション (JSで.is-activeをトグル) */
    #hamburger-menu.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    #hamburger-menu.is-active span:nth-child(2) { opacity: 0; }
    #hamburger-menu.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    #sp-nav.is-active { display: block; }
    .container {
        padding-left: 40px;
        padding-right: 40px;
    }
#brands  .brands-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2%;
padding:0;
    }

.guaranteedConts {
margin: 60px auto;
}
.Contents_about{
margin:20px auto 8px;
font-size:14px;
}
.lead{
font-size:18px;
width:90%;
margin:auto;
text-align:left;
}
.about-title{
margin: 1em auto 1em;
font-size: 18px;
}
.about-title02{
font-size: 18px;
}
.about_demerit , .about_merit{
padding: 1em;
}
.about_demerit li , .about_merit li{
margin-bottom: 10px;
padding-left: 30px;
font-size:14px;
}
.about_demerit li::before , .about_merit li::before {
line-height: 20px;
height: 20px;
width: 20px;
}
.about-txt{
font-size: 16px;
}
.about_inside{
padding: 1em;
}

.onlineshop-inner{
margin:40px auto;
width:100%;
}
.onlineshop-list{
width:calc((100% - 20px) / 2);
}
.onlineshop-title{
margin-bottom:10px;
}
.onlineshop-title img{
width:96%;
}
.onlineshop-list ul{
width:96%;
margin:0 auto;
}
.onlineshop-list li a {
font-size:86%;
}
}

/* スマートフォン (最大幅 600px) */
@media (max-width: 600px) {
.forSP{
display:inherit;
}
.logo {
width:80px;
height:80px;
margin: 20px auto 0;
}
.content-section { padding: 40px 15px; }
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
    }
.section-title {
margin-bottom:40px;
}
#onlinestore{
margin-top:180px;
}
.section-content-grid.reverse {
flex-direction: column;
}
.content-block h3 {
  margin: 40px 0;
}
#brands .brand-grid {
        grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding:0 2% 0;
    }
.footer {
    margin-top: 0;
    padding-top: 80px;
    padding-bottom: 80px;
}
.coupon-title img{
max-width:100%;
}
.cp-list{
width:100%;
}
.cp-list dd ul li{
width:calc((100% - 20px) / 2)
}

}