@charset "UTF-8";

/*
$border_style:1px solid #ccc;
@mixin border_top { border-top:$border_style; }
@mixin border_bottom { border-bottom:$border_style; }
@mixin border_left { border-left:$border_style; }
@mixin border_right { border-right:$border_style; }
*/
/*=====================================================
Initialization
=====================================================*/
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 62.5%;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
    font-size: 1.4rem;
    line-height: 1;
    -webkit-text-size-adjust: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}


h3 {
    padding: .5em .7em;
    font-weight: bold;
    font-size: 2em;
    background-color: #f2f2f2;
    color: #333333;
}

h4 {
    font-weight: bold;
    font-size: 1.5em;
}

.contents {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 110px;
}

.kv picture img {
    width: 100%;
}

.yodobashi_title {
    margin-bottom: 2em;
    text-align: center;
}

.yodobashi_text {
    margin: 0 auto;
    padding: 1.8em 0;
    width: 100%;
    height: auto;
    font-size: 1.5em;
    letter-spacing: 0.05em;
    line-height: 1.6;
    text-align: justify;
}

.yodobashi_overview {
    margin: 0; auto
    padding: 1.8em 0;
    width: 100%;
    height: auto;
}

.yodobashi_overview p {
    margin: 0;
    padding: 1em 0;
    width: 100%;
    height: auto;
    font-size: 1.5em;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

/* 画像表示部分*/
.product-content {
    margin: 2em 0 0 0;
}
.product {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.product a {
    display: block;
    width: calc(33.333% - 20px);
    min-width: 150px;
    max-width: 200px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.product a:hover {
    transform: scale(1.05);
}

/*
.product a img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
*/

.product a img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

/* 通常リスト */
.list-1 {
    list-style-type: disc;
    padding: 1em 1.5em 0 1.5em;
}

.list-1 li {
    padding: .3em .3em .3em 0;
    font-size: 1.5em;
}

/* 数字付リスト */
.list-2 {
    counter-reset: li;
    padding: 1em 0;
}

.list-2 li {
    display: flex;
    align-items: center;
    padding: .3em;
    font-size: 1.5em;
}

.list-2 li::before {
    display: inline-block;
    min-width: 1.7em;
    margin-right: 1.2em;
    border-radius: 50%;
    background-color: #2589d0;
    color: #fff;
    font-weight: bold;
    font-size: .75em;
    line-height: 1.7em;
    text-align: center;
    content: counter(li);
    counter-increment: li;
}

.annotation {
    font-size: .8em !important;
    text-align: justify;
}

/* ここからスマホ */
/* ここからスマホ */
/* ここからスマホ */
/* ここからスマホ */

@media screen and (max-width: 480px) {
	.contents {
    max-width: 100%;
    margin: 0 auto;
    margin-top: 15.625vw;
}
    
    .yodobashi_text {
    width: 90%;
}
    .yodobashi_overview_text {
        margin: 0 auto;
        width: 90%;
        text-align: justify;
    }
}