@charset "utf-8";

/*------------------------------------
汎用
------------------------------------*/
.flex {display: flex;}
.cf:after {display: block; clear: both; content: "";}

/*ゴシック*/
.sans,
.sans * {font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif;}

/*固定ページ見出し*/
.head-img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;';}

/*汎用見出し*/
.g-h {font-family: 'Sign Painter Regular',serif; color: #666; text-align: center; line-height: 1.25; border-bottom: 1px solid #666;}
.g-h.nb {border-bottom: none;}

/*汎用リンク*/
.more-btn {display: inline-block; color: #fff; background: #666; border: 1px solid #666;}
.more-btn:hover {color: #666; background: #fff; opacity: 1;}

/*------------------------------------
共通
------------------------------------*/
header {justify-content: center; align-items: center; background: #fff;}

footer {text-align: center; background: #222;}
footer * {color: #fff;}
footer .logo {display: inline-block; margin: 0 auto 25px;}
footer .add {font-size: .9rem;}
footer address .phone dl {align-items: baseline;}
footer address .phone dl * {line-height: 1.5; text-align: left;}
footer address .phone dl dd a {font-size: 1.55rem;}
footer address .phone dl dd a.big {font-size: 1.85rem;}
footer address .phone dl dd p {font-size: .75rem; margin-top: 5px;}
footer address .contact {max-width: 248px; border: 1px solid #fff; padding: 20px 30px; align-items: center; justify-content: center;}
footer address .contact span {font-size: 1rem;}
footer address .contact img,
footer address .contact svg {width: 44px; height: 25px; margin-right: 20px;}
footer address .contact:hover {background: #fff; opacity: 1;}
footer address .contact:hover span {color: #222;}
footer address .contact:hover path.st0 {fill: #222;}
footer .copyright {font-size: .8rem;}

/*固定*/
#fix-info {position: fixed; z-index: 1000;}
#fix-info a {position: relative; display: flex; align-items: center; justify-content: center;}
#fix-info a span {color: #fff; font-weight: 700;}
#fix-info a.conatct {background: #29d9c2;}
#fix-info a.about {background: #ff5335;}
#fix-info a.conatct img {width: 19px;}
#fix-info a.about img {width: 14px;}
/*------------------------------------
トップページ
------------------------------------*/
#front:before {content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background: url(../img/top/top-head@x2.jpg) 0 0/cover no-repeat;}
#front > div,
#front > section {background: #fff;}

#front .hero {position: relative; width: 100%; background: transparent;}
#front .hero p {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #4d564d; text-align: center; white-space: nowrap; text-shadow: 0 0 20px #fff,0 0 20px #fff,0 0 20px #fff,0 0 20px #fff,0 0 20px #fff,0 0 20px #fff,0 0 20px #fff,0 0 20px #fff,0 0 20px #fff,0 0 20px #fff,0 0 20px #fff,0 0 20px #fff;}
#front .hero .cover {position: absolute; bottom: -1px; left: 0; width: 100%; height: auto; transition: 0s;}

#front .top {position: relative;}
#front .top h1 {position: absolute; left: 50%; transform: translate(-50%,0);}
#front .top h2 {line-height: 1.5; text-align: center}
#front .top p {text-align: center;}

#front .about p.caption {text-align: center;}
#front .about ul {justify-content: space-between;}
#front .about ul li img {margin: 0 auto;}
#front .about ul li h3 {color: #666; line-height: 1.5; font-weight: 700; text-align: center;}
#front .about ul li p {font-size: .9rem;}

#front .insta {background: #eeeff7;}
#front .insta h2 {width: 116px; margin: 0 auto 24px;}

/*------------------------------------
シールームのご案内 (about.php)
------------------------------------*/
#about h3 {text-align: center; font-weight: 700;}
#about .img-set {flex-wrap: wrap;}

#about .rental .info h3 {font-size: 1.1rem; text-align: left; margin: 0;}
#about .rental .info .info-box .box dl {border-bottom: 1px solid #222; padding: 4px;}
#about .rental .info .info-box .box dl:first-child {border-top: 1px solid #222;}
#about .rental .info .info-box .box dt {font-weight: 700; margin-right: 1rem;}
#about .rental .info .info-box .box span {display: block; padding: 4px;}
#about .rental .info .info-box .box small {display: block;}

#about .contact {text-align: center;}
#about .contact h2 {color: #666; font-weight: 700;}
#about .contact p span,
#about .contact p a {display: inline-block; color: #666; line-height: 1;}

#about .access .g-map {position: relative; width: 100%; overflow: hidden;}
#about .access .g-map iframe,
#about .access .g-map object,
#about .access .g-map embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/*------------------------------------
お問い合わせ・ご相談
------------------------------------*/
#contact h3 {text-align: center; font-weight: 700;}

#contact .form {border: #ff901e 1px solid; background: #f9f9f6; box-sizing: border-box;}
#contact .form dl {border-bottom: 1px solid #b0b0b0;}
#contact .form dl:last-of-type {border-bottom: none;}
#contact .form dl dt {font-size: .975rem; display: flex; justify-content: space-between;}
#contact .form dl dt span {display: inline-block; background: #ff4a65; color: #fff; padding: 1px 17px; border-radius: 4px;}
#contact .form dl dd {color: #666;}
#contact .form dl dd small {display: block; font-size: .8rem; line-height: 1.5;}

#contact .form .wpcf7-list-item {display: block!important; margin: 0!important;}
#contact .form input[type="text"],
#contact .form input[type="email"],
#contact .form input[type="tel"],
#contact .form textarea {background: #fff; border: 1px solid #b0b0b0; border-radius: 4px;}
#contact .form textarea {resize: vertical;}

#contact .form .wpcf7-list-item-label {font-weight: 700; font-style: normal; cursor: pointer;}
#contact .form input[type="radio"],
#contact .form input[type="checkbox"],
#contact .form input[type="acceptance"] {display: none;}
#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 {display: inline-flex; align-items: flex-start; font-weight: 700; cursor: pointer;}
#contact .form input[type="radio"] + span.wpcf7-list-item-label:before,
#contact .form input[type="checkbox"] + span.wpcf7-list-item-label:before,
#contact .form input[type="acceptance"]+ span.wpcf7-list-item-label:before {position: relative; top: 1px; display: block; width: 19px; height: 19px; background: #fff; border: 1px solid #b0b0b0; border-radius: 3px; margin-right: 10px;}
#contact .form span.wpcf7-list-item-label {display: block; position: relative;}
#contact .form span.wpcf7-list-item-label:after {width: 12px; height: 6px; transform: rotate(-45deg); content: ''; position: absolute; left: 3px; border: 3px solid #ff901e; border-top: none; border-right: none; transition: .3s ease; opacity: 0;}
#contact .form input[type="checkbox"]:checked + span.wpcf7-list-item-label:after,
#contact .form input[type="radio"]:checked + span.wpcf7-list-item-label:after {opacity: 1;}

#contact .form input[type="submit"] {margin: 0; background: #333; border: 1px solid #333; transition: .5s ease;}
#contact .form input[type="submit"]:hover {color: #333; background: #fff;}

#contact .consent {text-align: center; margin-top: 40px;}
#contact .consent h2 {font-size: 1.5rem; font-weight: 700; margin: 0 0 20px;}
#contact .consent p {font-size: .975rem; margin: 0 0 40px;}
#contact .consent a {text-decoration: underline;}

/*--エラーメッセージ--*/
#contact .wpcf7-not-valid-tip {color: #f00; font-size: .9rem;}
#contact .wpcf7-response-output {text-align: center; margin: 0 0 20px; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border-radius: 5px;}
#contact .wpcf7-validation-errors {text-align: center; color: #b94a48; background-color: #f2dede; border: 1px solid #eed3d7;}
#contact .wpcf7-mail-sent-ok {text-align: center; color: #3a87ad; background-color: #d9edf7; border: 1px solid #bce8f1;}

#contact p.notice {text-align: center; margin: 50px 0 25px;}