@charset "UTF-8";
/* CSS Document */
/*
Theme Name: nagomi
Author: sb
*/
/* =============================================
share
================================================ */
a { color: #000000; }

input, textarea { border: #ccc solid 1px; font-size: 110%; }

.center { margin: 0 auto; width: 90%; }

/* footer */
#toTop { position: fixed; bottom: 100px; right: 0; }

header { padding: 20px 0 0; position: relative; }
header nav { display: none; }
header img { margin: 0 auto 0 5%; display: block; width: 30%; max-width: 180px; height: auto; }
header h1 { padding-bottom: 20px; }

nav { width: 90%; margin: auto; text-align: center; font-size: 0; }
nav a { font-size: 15px; display: inline-block; color: #666; width: 33.3%; border-top: solid 1px #666; padding: 15px 0; text-decoration: none; }
nav a:nth-child(7), nav a:nth-child(8) { width: 100%; }

#page_inq { text-align: center; color: #666; margin: 50px auto; line-height: 150%; }
#page_inq div { margin-top: 30px; }
#page_inq img { display: block; margin: 0 auto 10px; }
#page_inq h2 { font-size: 160%; font-weight: bold; margin-bottom: 10px; }
#page_inq a { text-decoration: none; }

footer small { display: block; padding: 20px 0; color: #666; font-size: 80%; text-align: center; }

#sp_nav { position: absolute; right: 0; top: 0; height: 100px; z-index: 999; width: 20%; }

#sp_nav div { height: 50%; top: 10px; display: block; position: relative; }

#sp_nav div span { width: 40px; height: 2px; display: block; background: black; position: absolute; left: 50%; top: 50%; margin-left: -20px; transition: all 0.3s; }

#sp_nav div .top { transform: translateY(-10px) scale(1); }

#sp_nav div .middle { background: none; position: relative; }

#sp_nav div .middle:before, #sp_nav div .middle:after { transition: all 0.3s; content: ""; width: 40px; height: 2px; background: black; display: block; transform: rotate(0deg); position: absolute; }

#sp_nav div .bottom { transform: translateY(10px) scale(1); }

#sp_nav.open .top { transform: translateY(0px) scale(0); }

#sp_nav.open .bottom { transform: translateY(0px) scale(0); }

#sp_nav.open .middle:before { transform: rotate(45deg); }

#sp_nav.open .middle:after { transform: rotate(-45deg); }

.sec_title { font-size: 130%; font-weight: bold; margin: 0px auto 20px; width: 90%; padding: 80px 5% 0; position: relative; }
.sec_title:before { content: ""; display: block; width: 100%; height: 50px; position: absolute; top: 0; left: 0; }

#main_img img { width: 100%; height: auto; display: block; }

#main_img.w90 img { width: 90%; margin: auto; }

p { color: #666; line-height: 150%; }

/* =============================================
top
================================================ */
header.top #logo { padding: 30px 0 20px; }
header.top img { margin: auto; display: block; width: 45%; height: auto; }

#top h1 { text-align: center; font-weight: bold; font-size: 140%; line-height: 150%; margin: 30px auto 20px; }
#top h2 { text-align: center; font-size: 100%; line-height: 150%; }
#top #banner { width: 90%; margin: 30px auto; }
#top #banner li:first-child img { margin-bottom: 20px; }
#top #banner img { margin-bottom: 10px; width: 100%; height: auto; }
#top h3 { text-align: center; color: #666; font-size: 110%; margin-bottom: 20px; }
#top #blog a { text-decoration: none; color: #666; padding: 20px 5%; display: block; position: relative; }
#top #blog a:after { content: ""; display: block; position: absolute; width: 1px; border: solid 7px transparent; border-left: solid 10px #999; }
#top #blog a::after { right: 3%; top: 50%; margin-top: -7px; }
#top #blog li { background: #ddd; border-bottom: solid 1px white; }
#top #blog p { margin-top: 3px; line-height: 130%; margin-right: 5%; }
#top #blog + p { text-align: right; width: 90%; margin: 10px auto 40px; }
#top #blog + p a { color: #666; text-decoration: none; }
#top #info_banner img { width: 100%; height: auto; }

/* スライドショー */
.rslides { position: relative; list-style: none; overflow: hidden; padding: 0; margin: 0 auto; width: 100%; max-width: 100%; }

.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100% !important; max-width: 100% !important; left: 0; top: 0; }

.rslides li:first-child { position: relative; display: block; float: left; }

.rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }

#main_img { width: 100%; verflow: hidden; }

.rslides a { display: block; margin: 0 auto; }

.rslides a:hover img { opacity: 1; filter: alpha(opacity=100); }

/* endスライドショー */
#mb_nav { text-align: center; margin: 30px auto; }
#mb_nav li { display: inline-block; width: 25%; }
#mb_nav img { display: block; margin: 0 auto 10px; }
#mb_nav a { text-decoration: none; }

h2 { font-size: 110%; font-weight: bold; }

/* =============================================
rental
================================================ */
.page_nav { background: #003A52; display: table; width: 100%; border-spacing: 0; }
.page_nav li { display: table-cell; vertical-align: middle; height: 100px; width: 20%; text-align: center; border-left: 1px solid white; }
.page_nav li:first-child { border: none; }
.page_nav a { text-decoration: none; color: white; font-size: 80%; }

#remake .sec_title, #rental .sec_title { color: #003A52; }
#remake .sec_title:before, #rental .sec_title:before { background: url(img/rental/title.png) no-repeat right top #003A52; }
#remake .red, #rental .red { text-align: right; margin: 30px auto 10px; color: #C44141; font-size: 80%; }
#remake article, #rental article { margin-bottom: 40px; }
#remake article h1, #rental article h1 { color: #003A52; font-size: 160%; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: bold; line-height: 120%; margin-bottom: 30px; }
#remake article h1 span, #rental article h1 span { font-size: 70%; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: bold; }
#remake article p, #rental article p { margin-bottom: 20px; }
#remake #dress h2, #remake #gest h2, #rental #dress h2, #rental #gest h2 { border: solid 1px #003A52; display: inline-block; width: 240px; text-align: center; padding: 10px 0; margin: 20px 0 10px; }
#remake #dress ul, #remake #gest ul, #rental #dress ul, #rental #gest ul { display: flex; flex-flow: wrap; }
#remake #dress ul li, #remake #gest ul li, #rental #dress ul li, #rental #gest ul li { width: 33%; font-size: 14px; text-align: left; margin-bottom: 10px; }
#remake #dress ul li p, #remake #gest ul li p, #rental #dress ul li p, #rental #gest ul li p { font-weight: bold; margin-bottom: 10px; color: black; }
#remake #dress .price, #remake #gest .price, #rental #dress .price, #rental #gest .price { color: #003A52; }
#remake #dress a, #remake #gest a, #rental #dress a, #rental #gest a { text-decoration: none; }
#remake #dress img, #remake #gest img, #rental #dress img, #rental #gest img { width: 90%; display: block; margin: 0 auto 10px; height: auto; }
#remake #flow b, #rental #flow b { color: #003A52; }
#remake #flow b:before, #rental #flow b:before { background: #003A52; }

#flow b { font-weight: bold; font-size: 120%; display: block; padding-bottom: 20px; position: relative; padding-left: 17px; }
#flow b::before { content: ''; display: block; width: 45px; height: 45px; border-radius: 50%; position: absolute; left: 0; top: -12px; z-index: -1; }
#flow b:first-letter { color: white; font-size: 130%; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; margin-right: 20px; }
#flow b + p { margin-bottom: 30px; }

#qa h1, #qa h1 + p { width: 90%; margin-left: auto; margin-right: auto; }
#qa .category { background: #D9E1E5; padding: 20px 5% 20px 65px; position: relative; line-height: 130%; }
#qa .category:after { content: ""; display: block; position: absolute; width: 1px; border: solid 7px transparent; border-left: solid 10px #999; }
#qa .category::after { left: 3%; top: 18px; border-left-color: #003A52; }
#qa .category:before { content: "Q"; position: absolute; font-size: 140%; color: #003A52; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; top: 15px; left: 8%; }
#qa .category.open { background: #7F9CA8; color: white; }
#qa .category.open::before { color: white; }
#qa .category.open::after { border-left-color: white; }
#qa .menu { background: #F2F5F6; padding: 20px 5% 20px 65px; line-height: 130%; position: relative; }
#qa .menu:before { content: "A"; position: absolute; font-size: 140%; color: #003A52; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: bold; top: 15px; left: 8%; }

/* =============================================
about
================================================ */
#about .sec_title { color: #1F4334; }
#about .sec_title:before { background: url(img/about/title.png) no-repeat right top #1F4334; }
#about h2 { color: #1F4334; margin: 40px auto 20px; }
#about article { margin-top: 40px; }
#about article h1 { font-weight: bold; font-size: 95%; line-height: 150%; overflow: hidden; margin-bottom: 20px; }
#about article span { color: white; width: 105px; height: 105px; line-height: 105px; display: block; text-align: center; border-radius: 50%; font-size: 110%; float: left; margin-right: 20px; }
#about article div { overflow: hidden; margin-bottom: 15px; }
#about article div img { width: 105px; height: auto; float: left; margin-right: 15px; }
#about article div b { font-size: 105%; display: block; margin-bottom: 15px; font-weight: bold; }
#about article img { width: 100%; height: auto; }
#about .remake h1, #about .remake b { color: #7A474E; }
#about .remake h1 span { background: #7A474E; }
#about .rental h1, #about .rental b { color: #02596A; }
#about .rental h1 span { background: #02596A; }

/* =============================================
remake
================================================ */
#remake .sec_title { color: #55003D; }
#remake .sec_title:before { background: url(img/remake/title.png) no-repeat right top #55003D; }
#remake .page_nav { background: #55003D; }
#remake article { margin-top: 40px; }
#remake article h1 { color: #55003D; }
#remake #flow b { color: #55003D; }
#remake #flow b:before { background: #55003D; }
#remake #info .cont { background: #F7F1E7; position: relative; padding-top: 82%; padding-bottom: 20px; }
#remake #info img { top: 0; position: absolute; width: 100%; height: auto; }
#remake #info .in { position: relative; padding: 0 3%; }
#remake #info .in div { background: #E8D5B5; text-align: center; color: #666; font-weight: bold; padding: 20px 0; line-height: 150%; margin-top: 20px; }

.class th { font-weight: bold; font-size: 110%; color: #666; width: 80px; text-align: left; line-height: 130%; }
.class td { line-height: 130%; color: #BF3030; font-weight: bold; font-size: 110%; }
.class td p { font-size: 80%; line-height: 130%; margin-top: 10px; margin-bottom: 10px; }

/* =============================================
class
================================================ */
#class .sec_title { color: #806042; }
#class .sec_title:before { background: url(img/class/title.png) no-repeat right top #806042; }
#class table { width: 90%; margin: 30px auto; }
#class table + img { display: block; width: 90%; height: auto; margin: 0 auto 20px; }
#class ul { font-size: 0; }
#class li { font-size: 14px; display: inline-block; width: 31%; vertical-align: top; }
#class li img { width: 100%; height: auto; margin-bottom: 10px; }
#class li + li { margin-left: 3%; }

/* =============================================
shop
================================================ */
#shop .sec_title, #company .sec_title { color: #457292; }
#shop .sec_title:before, #company .sec_title:before { background: url(img/shop/title.png) no-repeat right top #457292; }
#shop table, #company table { margin: 20px auto; }
#shop th, #shop td, #company th, #company td { text-align: left; color: #666; line-height: 130%; }
#shop th, #company th { width: 80px; }
#shop td, #company td { padding-bottom: 10px; }
#shop span, #company span { font-size: 80%; }
#shop b, #company b { font-weight: bold; font-size: 105%; }
#shop img, #company img { max-width: 100%; height: auto; }
#shop #parking, #company #parking { background: #457292; width: 180px; color: white; text-align: center; padding: 10px 0; margin-top: 10px; border-radius: 5px; }
#shop #access, #company #access { margin-top: 50px; }
#shop #access th, #company #access th { width: 50px; }
#shop #access a, #company #access a { display: block; text-align: right; margin-top: 10px; }

.cont_title { background: url(img/shop/cont_ico.png) no-repeat left center; font-size: 105%; font-weight: bold; color: #666; padding-left: 20px; margin: 30px auto 20px; }

/* =============================================
company
================================================ */
#company .sec_title { color: #2C444F; }
#company .sec_title:before { background: url(img/company/title.png) no-repeat right top #2C444F; }
#company th { width: 100px; }
#company .cont_title { background: url(img/company/cont_ico.png) no-repeat left center; }

/* =============================================
inquiry
================================================ */
#inquiry .sec_title { color: #614164; }
#inquiry .sec_title:before { background: url(img/inquiry/title.png) no-repeat right top #614164; }
#inquiry th { width: 100px; }
#inquiry .cont_title { background: url(img/inquiry/cont_ico.png) no-repeat left center; }
#inquiry table { margin: 20px auto; }
#inquiry tr, #inquiry th, #inquiry td, #inquiry tbody, #inquiry table { width: 100%; display: block; text-align: left; color: #666; }
#inquiry th { margin-bottom: 10px; font-size: 95%; }
#inquiry td { margin-bottom: 20px; font-size: 95%; position: relative; }
#inquiry input, #inquiry textarea { width: 100%; }
#inquiry .red { color: #bf3030; }

.validetta-bubble { left: 0 !important; position: relative !important; top: auto !important; margin-top: 10px; padding-left: 5px; }

.validetta-bubble:before { display: none !important; }

/* =============================================
blog
================================================ */
#blog .sec_title { padding-top: 40px; border-top: solid 1px #999; }
#blog .sec_title a { color: #666; font-weight: bold; text-decoration: none; }
#blog .sec_title::before { display: none; }
#blog .date { margin-bottom: 10px; font-size: 80%; }

.blog_arc { margin: 30px auto; }
.blog_arc li { background: #eee; border-bottom: solid 1px white; }
.blog_arc a { text-decoration: none; display: block; overflow: hidden; padding: 15px 5%; }
.blog_arc .img { float: left; width: 20%; padding-bottom: 20%; background-repeat: no-repeat; background-size: cover; background-position: center; }
.blog_arc .cont { float: left; width: 75%; margin-left: 5%; }
.blog_arc span { display: block; color: #666; }

.single { margin: 30px auto; background: #eee; padding: 30px 5%; }
.single .title { color: #666; margin-bottom: 30px; }
.single .cont { line-height: 150%; color: #666; font-size: 90%; }
.single img { max-width: 100%; height: auto; }

.pagenation { text-align: center; }
.pagenation div { display: inline-block; margin: 0 10px; }
.pagenation .new { transform: rotate(180deg); }
.pagenation a, .pagenation .nolink { display: block; width: 40px; height: 40px; background: #666; border-radius: 50%; position: relative; }
.pagenation a:after, .pagenation .nolink:after { content: ""; display: block; position: absolute; width: 1px; border: solid 7px transparent; border-left: solid 10px #999; }
.pagenation a::after, .pagenation .nolink::after { border-left-color: white; left: 50%; margin-left: -4px; margin-top: -7px; top: 50%; }
.pagenation a + .nolink { display: none; }
.pagenation .nolink { opacity: 0.5; }

.archive { margin-top: 40px; text-align: center; font-size: 95%; }
.archive li { margin-bottom: 15px; }
.archive a { text-decoration: none; color: #666; }

/* =============================================
rental_single
================================================ */
.rental_single header { border-bottom: solid 1px #999; padding-bottom: 20px; }
.rental_single footer { border-top: solid 1px #999; padding-top: 20px; }
.rental_single article { padding: 40px 0; }
.rental_single h1 { font-weight: bold; color: #666; margin-bottom: 20px; }
.rental_single p { font-size: 90%; margin-bottom: 30px; }
.rental_single img { max-width: 100%; height: auto; display: block; margin: 0 auto 10px; }

.back_page a { display: block; height: 40px; line-height: 40px; padding-left: 50px; margin-left: 5%; text-decoration: none; position: relative; }
.back_page a::before { position: absolute; left: 0; top: 0; content: ""; display: block; width: 40px; height: 40px; background: #666; border-radius: 50%; }
.back_page a:after { content: ""; display: block; position: absolute; width: 1px; border: solid 7px transparent; border-left: solid 10px #999; }
.back_page a::after { border-left-color: white; left: 6px; top: 13px; transform: rotate(180deg); }