@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda&family=Montserrat:wght@300&display=swap');

body{
    background-color:rgb(255, 255, 255) ;
}
img{ pointer-events: none;
}

/*============================
	header
=============================*/
.header-logomark {
    display: block;
    position: fixed;
    top: 0px;
    text-align:center;
    width: 100%;
    padding: 5px;
    background: rgba(0, 0, 0, 0.897);
    z-index: 10;
}
.header-logomark img {
    height: 55px;
    margin-top: 0.2em;
}
img{ pointer-events: none;
}

/*============================
	drawer
=============================*/
.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before {
    background-color: rgb(223, 223, 223);
    width: 22px;
    height: 1px;
}
.drawer-hamburger {
    background: rgba(0, 0, 0, 0);
    padding-top: 22px;
    padding-right: 20px;
    z-index: 12;
}
.drawer--right.drawer-open .drawer-hamburger {
    right: 0px;
}
.drawer-nav {
    background: rgba(0, 0, 0, 0.596);
    z-index: 10;
}
.drawer-overlay {
    background-color: rgba(0, 0, 0, 0.747);
    z-index: 9;
}
.drawer-menu a{
    color:rgb(223, 223, 223)
}
.drawer-menu-item {
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.18em;
}

/*============================
	topics3
=============================*/
#topics3 {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 6em;
    margin-bottom: 4em;
}
#topics3 a:link{
    color: rgb(54, 54, 54);
    text-decoration: underline;
    text-decoration-color:rgb(54, 54, 54);
}
#topics3 a:hover{
    opacity: 0.7;
}
.t3-mainvisual {
    width: 100%;
    height: auto;
    display: block;
    text-align: left;
    text-shadow: 2px 1px 0 rgb(0, 0, 0),-1px 1px 0 rgba(255, 255, 255, 0),2px -2px 0 rgba(255, 255, 255, 0),-1px -1px 0 rgba(255, 255, 255, 0);
    font-size: 1.8em;
    font-family: 'Bodoni Moda', serif;
    padding: 24.8958% 1em 1em;
    letter-spacing: 0.18em;
    background-color: rgba(255, 255, 255, 0.062);
    line-height: 115%;
    background-image: url(../img/topics07topvisual.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 1.5em;
}
.t3-mainvisual h2{
    color: rgb(255, 255, 255);
}
.t3-title{
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 4em 4em;
    border-top: 0.01em solid rgba(151, 151, 151, 0.603);
    border-bottom: 0.01em solid rgba(151, 151, 151, 0.603);
}
.t3-title h2{
    padding: 0.3em 0 0.3em;
    letter-spacing: 0.2em;
    font-size: 1.8em;
    font-family: 'Bodoni Moda', serif;
}
.t3-itemvisual{
    padding: 3em 2em;
}
.t3-itemvisual img{
    display: block;
    max-width: 100%;
    height: auto;
    padding: 1em 0 1em;
    margin: 0 auto;
}
.t3-text{
    display: block;
    max-width: 1024px;
    height: auto;
    text-align: center;
    padding: 3em 2em 3em;
    border-top: 0.01em solid rgba(151, 151, 151, 0.603);
    border-bottom: 0.01em solid rgba(151, 151, 151, 0.603);
    margin: 0 auto;
}
.t3-text p{
    letter-spacing: 0.2em;
    font-size: 1em;
    font-family: 'Bodoni Moda', serif;
}
.onlineshop-item1 img{
    display: block;
    max-width: 100%;
    height: auto;
    padding: 4em 2em 1em;
    margin: 0 auto;
}
.onlineshop-item2 img{
    display: block;
    max-width: 100%;
    height: auto;
    padding: 1em 2em 1em;
    margin: 0 auto;
}
.onlineshop-text p{
    letter-spacing: 0.15em;
    font-size: 0.8em;
    font-family: 'Bodoni Moda', serif;
    text-align: center;
    padding: 0 0 2em;
}
img{ pointer-events: none;
}

/*============================
	footer
=============================*/
.footerbox {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    background-color: rgb(255, 255, 255);
    border-top: 0.01em solid rgba(151, 151, 151, 0.603);
    padding: 4em 3.4em 4em;
    letter-spacing: 0.2em;
    font-size: 0.6em;
    font-family: 'Montserrat', sans-serif;
}
ul.footer-menu li {
    padding: 0.9em;
}
.footerbox p{
    color: rgb(138, 138, 138);
    padding: 4em 1em 3em;
}
.footerbox img{
    display: block;
    width: 30px;
    filter: contrast(0.1);
}
img{ pointer-events: none;
}

/****************************************************************
　　　　　　　　　　　　　スマホ化
****************************************************************/
@media only screen and (max-width: 699px) {

.t3-mainvisual {
padding: 224.0625% 1em 1em;
    background-image: url("../img/topic07_sm.png");

}


}