/* screens smaller than 1024---------------------------------------------------------- */
@media only screen and (max-width:1024px) {
header h1 { width: 40%; float: left; }
header h1 img { width: 30%; height: auto; }
.header_nav { width: 60%; float: right; letter-spacing: 0.01em; font-size: 90%; }
.header_nav li { width: 12%; float: left; margin-right: 2%; text-align: center; }
.header_nav li a { color: #000; }
i { font-size: 120%; margin-left: 10%; }
.header_sns { float: right; }

.top_archive { min-width: 1000px; width: 100%; float: left; margin: 0 1% 1% 0; }
.top_archive img { width: 98%; height: auto; }

.pc01 { width: 100%; margin: 0 auto; }
.pc01 li { float: left; width: 45%; margin-right: 10px; }
.fix_margin { padding-left: 10%; }
.pc_hidden { display: none; }

}

/* screens smaller than 800---------------------------------------------------------- */
@media only screen and (max-width:800px) {

.container { width: 95%; margin: 0 auto; }
.slide_show { width: 100%; height: auto; margin: 0 auto; }
.slide_show img { width: 100%; height: auto; }
.bx-viewport { width: 100%; }
.bx-wrapper { width: 100%; background: #fff; }
.bx-controls-direction { width: 90%; }
.cont03 { width: 100%; }
.nav { width: 100%; float: right; font-size: 70%; letter-spacing: 0.13em; }
.contact { width: 100%; margin-bottom: 20px; }
.contact a { font-size: 80%; padding: 5px 5px; width: 20%;}
.menu li { margin-left: 0.1%; width: 12.3%; }

}

/* screens smaller than 690---------------------------------------------------------- */
@media only screen and (max-width:690px) {

.container { width: 100%; }
.container h1 { width: 100%; float: none; margin: 0 auto; text-align: center; }
.container h1 img { width: 50%; height: auto; }
.nav { display: none; }
.SP_nav { display: block; border: solid 1px #ccc; position: relative; width: 100%; }
label {
    color: #000;
    padding: 5px;
    display: block;
    margin: 0;
    text-align: center;
    font-size: 120%;
    
}

input[type="checkbox"].on-off{ display: none; }
.menu ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
}
.menu li { width: 100%; float: none; padding: 5px; text-align: center; font-size: 120%; border-bottom: #fff; }
.menu li a { color: #000; text-decoration: underline; }
input[type="checkbox"].on-off + ul{ height: 0; overflow: hidden; }
input[type="checkbox"].on-off:checked + ul{ height: 440px; }

/* 一パイプオルガンスタジオ・吉祥寺 */
#wrapper { margin: 0; width: 100%; }
.container { width: 100%; margin: 0 auto; }
header {  }
.container h1 { width: 100%;  }
.container h1 img { width: 100%; }
.container h2 { text-align: center; color: #603813; font-size: 100%; padding: 2em 0; letter-spacing: 0.4em; font-weight: 100; margin-bottom: 0em; }

.container .content_profile { padding: 1em; }
.container .content_profile h3 { width: 100%; float: none; text-align: center; }
.container .content_profile h3 img { filter: drop-shadow(5px 5px 5px #808080); width: 100%; }
.container .content_profile .profile_text { width: 100%; float: none; font-size: 80%; letter-spacing: 0.4em; }
.container .content_profile .profile_text a { display: block; font-size: 90%; letter-spacing: 0.1em; text-align: right; }
.container .content_profile .profile_photo { width: 100%; float: none; padding: 0.5em 0; }
.container .content_profile .profile_photo img { width: 100%; }
.container .image_photo { padding: 2em 0; width: 100%; }
.container .image_photo img { width: 100%; }

.container .content_class { padding: 1em; }
.container .content_class h3 { width: 100%; float: none;  text-align: center; }
.container .content_class h3 img { filter: drop-shadow(5px 5px 5px #808080); width: 100%; }
.container .content_class .class_content { padding: 2em 0 0; width: 100%; float: none; font-size: 100%; letter-spacing: 0.4em; }
.container .content_class .class_content2 { width: 100%; float: none; font-size: 100%; letter-spacing: 0.4em; text-align: right; padding-right: 0.6em; }
.container .content_class .class_content img { width: 100%; filter: drop-shadow(5px 5px 5px #808080); }
.container .content_class .class_content2 img { width: 100%; filter: drop-shadow(5px 5px 5px #808080); }
.class_caution { padding-left: 0; font-size: 90%; letter-spacing: 0.16em; padding-bottom: 2em; padding: 0 1em 2em 1em; }

.content_inquiry { margin-left: 0%; padding: 1em 0 2em; background: #ffffff; border-radius: 10px; text-align: center; filter: drop-shadow(5px 5px 5px #808080);  margin-right: 0em; margin-bottom: 0em; margin: 1em 1em 1em 1em; }
.content_inquiry h3 { font-size: 120%; letter-spacing: 0.1em; color: #603813; }
.content_inquiry .inquiry_phone { background: url(../images/inquiry_icon01.svg) no-repeat left center; text-align: left; background-size: 10% auto; width: 90%; padding: 0.3em 0 0.3em 2.4em; margin: 0 auto; font-size: 120%; letter-spacing: 0.2em; }
.content_inquiry .inquiry_mail { background: url(../images/inquiry_icon02.svg) no-repeat left center; text-align: left; background-size: 10% auto; width: 90%; padding: 0.3em 0 0.3em 2.4em; margin: 0 auto; font-size: 90%; letter-spacing: 0.1em; }

footer { background: #42210b; color: #ffffff; margin-top: 8em; font-size: 60%; font-family:'メイリオ', 'Meiryo', sans-serif; letter-spacing: 0.1em; padding: 1.5em 0; text-align: center; }
footer a { color: #ffffff; }
footer .footer_left { width: 100%; float: none; }
footer .footer_right { width: 100%; float: none; }

.pc_none { display: block; }
.sp_none { display: none; }

}