@charset "utf-8";

/*------------------------------------
汎用
------------------------------------*/
html, body, div, span, object, iframe, article, aside, canvas, details, pre, figcaption, figure,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, input, textarea, select, button, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {font-size: 1rem;}
html,body {max-width: 100%; max-height: 100%;}

body {padding-bottom: 58px;}

/*コンティナ*/
.container {width: calc(100% - 30px); margin: 0 auto;}

.pc,.tb {display:none!important;}
.sp.tb, .sp.pc {display:block;}

/*固定ページ見出し*/
.head-img {height: 160px;}

/*汎用見出し*/
.g-h {font-size: 2.75rem; margin-bottom: 20px;}
.g-h.nb {margin-bottom: 10px;}

/*汎用リンク*/
.more-btn {margin: 20px 0; padding: 10px 24px; border-radius: 28px;}

.swiper-slide {display: block; max-width: 50%;}
.swiper-slide img {width: 100%;}

/*------------------------------------
共通
------------------------------------*/
header {flex-direction: column; margin: 15px;}
header .logo img {width: 225px;}
header h2 {display: none;}

footer {padding: 50px 0;}
footer .logo {width: 218px; margin: 0 auto 25px;}
footer address {flex-direction: column; margin: 30px 15px 35px;}
footer address .phone {margin: 0 auto 30px;}
footer address .phone dl dt {width: 60px; margin-right: 15px;}
footer address .contact {margin: 0 auto;}

/*固定*/
#fix-info {display: flex; bottom: 0; left: 0; width: 100%; background: #fff;}
#fix-info a {position: relative; width: 50%; padding: 20px 0;}
#fix-info a span {font-size: .9rem; line-height: 1.25; text-align: center;}
#fix-info a img {margin-right: 6px;}

/*------------------------------------
トップページ
------------------------------------*/
#front:before {background-position: center; background-size: auto 100%;}

#front .hero {height: 330px;}
#front .hero p {font-size: 1.75rem;}

#front .top {padding: 42px 0 30px;}
#front .top h1 {top: -36px; width: 300px;}
#front .top h2 {font-size: 1.5rem; margin-bottom: 20px;}
#front .top p {margin: 0 15px;}

#front .about {padding: 40px 0 0;}
#front .about p.caption {margin-bottom: 30px;}
#front .about img.main-img {margin-bottom: 40px;}
#front .about ul {flex-wrap: wrap;}
#front .about ul li {width: calc((100% - 20px) / 2); margin: 0 20px 20px 0;}
#front .about ul li:nth-child(2n) {margin-right: 0;}
#front .about ul li h3 {font-size: 1.25rem; margin: 15px 0 10px;}

#front .croom {padding: 40px 0;}
#front .croom .main-img {width: 100%;}
#front .croom .flex {display: block;}
#front .croom .txt {text-align: center; margin-top: 20px;}
#front .croom .txt h2 {margin: 0 0 5px;}
#front .croom .txt p {font-size: 1rem; text-align: left;}

#front .insta {padding: 32px 0 24px;}

/*------------------------------------
シールームのご案内 (about.php)
------------------------------------*/
#about h3 {font-size: 1.2rem; margin: -10px 0 20px;}
#about .img-set li {width: 100%; margin-bottom: 15px;}

#about .croom {padding: 40px 0 0;}
#about .croom p {margin-bottom: 30px;}

#about .rental {padding: 40px 0 0;}
#about .rental p {margin-bottom: 15px;}
#about .rental .info {margin-top: 20px;}
#about .rental .info h3 {margin: 0 0 5px;}
#about .rental .info .info-box {display: block;}
#about .rental .info .info-box .box {margin-bottom: 20px;}
#about .rental .info .info-box .box dl {flex-wrap: wrap;}
#about .rental .info .info-box .box span {font-size: .9rem;}
#about .rental .info .info-box .box small {font-size: .8rem; margin-left: 4px;}

#about .contact {padding: 50px 0 0;}
#about .contact h2 {font-size: 1.35rem;}
#about .contact p {margin: 30px 0 20px;}
#about .contact p span {font-size: 1.4rem; margin-bottom: 15px;}
#about .contact p a {font-size: 2.75rem;}
#about .contact .more-btn {padding: 10px 64px;}

#about .access {padding: 40px 0;}
#about .access .g-map {height: 360px;}
#about .access .info {display: block; margin-top: 30px;}
#about .access .info img.map {margin-bottom: 30px;}
#about .access .info .txt * {font-size: .95rem;}
#about .access .info .txt img {width: .95rem;}
#about .access .info .txt li:first-child {padding-left: 3rem; text-indent: -3rem;}

/*------------------------------------
お問い合わせ・ご相談
------------------------------------*/
#contact h3 {font-size: 1.2rem; margin: -10px 0 20px;}

#contact .contact {padding: 40px 0;}
#contact .contact p {text-align: center; margin-bottom: 50px;}

#contact .form {padding: 15px;}
#contact .form dl {padding: 15px 5px;}
#contact .form dl dt {margin-bottom: 8px; align-items: center;}
#contact .form dl dt span {font-size: .9rem;}
#contact .form dl dd small {margin-top: 5px;}

#contact .form input[type="text"],
#contact .form input[type="email"],
#contact .form input[type="tel"],
#contact .form textarea {font-size: .925rem; width: calc(100% - 16px); padding: 4px 8px;}

#contact .form input[type="radio"] + span.wpcf7-list-item-label,
#contact .form input[type="checkbox"] + span.wpcf7-list-item-label,
#contact .form input[type="acceptance"]+ span.wpcf7-list-item-label {font-size: .95rem;}
#contact .form span.wpcf7-list-item-label:after {top: 6px;}

#contact .form input[type="submit"] {padding: 10px 36px; margin-bottom: 0;}

#contact .consent h2 {font-size: 1.5rem; margin: 0 0 20px;}
#contact .consent p {font-size: .975rem; margin: 0 0 30px;}
#contact .consent a {text-decoration: underline;}