@charset "utf-8";
/*
Theme Name: ao　CMS
Author: Mediatrade
Author URI: http://mediatrade.jp
Version: 1.0.0
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');


/*reset*/
/*******************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,a,main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
table { border-collapse: collapse; border-spacing: 0;}
object,embed { vertical-align: top;}
hr,legend { display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
img { width: auto; max-width: 100%; height: auto; border: 0; vertical-align: middle;}
li { list-style: none;}
a { color: #231815; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none;}
a img { -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
@media only screen and (min-width: 768px){
a:hover { color: #087c93!important;}
a img:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
}


/*LAYOUT*/
/*******************************************************************/
html { -webkit-overflow-scrolling: touch; height: 100%;}
body { height: 100%; background: url(images/bg.jpg) center top no-repeat fixed; background-size: cover; font-family: 'Noto Serif JP', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 14px; line-height: 2; color: #231815;}
body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFF; z-index: 9999; pointer-events: none; opacity: 0; -webkit-transition: opacity .8s ease; transition: opacity .8s ease;}
body.fadeout::after { opacity: 1;}
#container { position: relative; width: 100%; overflow: hidden;}


/*HEADER*/
/*******************************************************************/
#header { max-width: 980px; margin: 0 auto; padding: 20px 0 0;}
#header h1 { text-align: center;}
#header h1 img { width: 40px;}
#nav li a i { margin-right: 4px;}
@media only screen and (min-width: 768px){
#nav > ul { position: relative; display: flex; justify-content: space-around; margin-top: 20px; z-index: 10;}
#nav > ul > li { position: relative; margin: 8px; font-size: 12px; line-height: 1.4; color: #231815; white-space: nowrap;}
#nav > ul > li.on { border-color: #087c93;}
#nav > ul > li.on > a { color: #087c93;}
#nav > ul ul { display: none;position: absolute; top: 100%; left: 0; width: 100px;}
#nav > ul ul li { padding-top: 8px;}
#nav > ul > li:hover ul { display: block;}
#open { display: none;}
}


/*FOOTER*/
/*******************************************************************/
#footer { padding: 2%; text-align: center;}
.contactus { padding: 2% 0; font-size: 12px;}
.contactus dt, .contactus dd { display: inline-block; vertical-align: middle;}
.contactus dt { padding-right: 3%; border-right: 1px dashed #231815;}
.contactus dd:nth-of-type(1) { font-size: 16px; padding-left: 3%;}
.contactus dd:nth-of-type(2) { padding: 0 3%;}
.contactus dd i { margin-right: 5px; font-size: 12px;}
#footer ul { padding-bottom: 2%;}
#footer ul li { display: inline-block; padding: 0 1%; font-size: 12px;}
#pagetop { display: none; position: fixed; right: 20px; bottom: 20px; z-index: 90;}
#pagetop a { display: block; font-size: 40px; line-height: 1; text-shadow: 0 0 1px rgba(255,255,255,1);}
#share { margin-bottom: 2%;}
#share ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#share li { margin: 4px 24px; font-size: 10px;}
#footer address { font-size: 10px;}


/*CONTENTS*/
/*******************************************************************/
#main { max-width: 1200px; margin: 0 auto;}
#main article { position: relative; padding: 2% 2%;}
#main article::after { content: ''; display: block; clear: both;}
section + section:not(.tabcontent) { margin-top: 80px; padding-top: 80px; border-top: 1px dashed #CCC;}
.sp { display: none;}
.mb { margin-bottom: 24px!important;}

#contents { position: relative; float: right; width: 75%;}
#contents header { text-align: center;}

#aside { position: relative; float: left; width: 20%;}
#aside h3 { margin-bottom: 5%; padding: 1% 2%; background: rgba(8,124,147,.2); box-shadow: 0 0 0 5px rgba(8,124,147,.2); border: 1px dashed #FFF; font-size: 16px; line-height: 1.3; letter-spacing: 0.1em; text-indent: 0.1em;}
#aside ul, #aside p { margin-bottom: 10%;}
#aside li li { border-bottom: 1px dashed #CCC;}
#aside li li a { display: block; padding: 4%; color: #231815;}
#aside li li a::before { content: '\f0da'; font-family: FontAwesome; display: inline-block; padding-right: 5px; vertical-align: top;}
#aside li li a:hover { background: #087c93; color: #FFF!important;}

#title { padding: 3% 0; text-align: center;}
#title .mainimg { position: relative; padding-bottom: 3%;}
#title h1 { padding-bottom: 3%; font-size: 26px; line-height: 1.3; letter-spacing: 0.2em; text-indent: 0.2em;}
#title a { color: #FFF;}
#title ol { display: inline-block; padding: 5px 10px 5px 20px; background: rgba(0,0,0,.2); font-size: 12px; color: #FFF; border-radius: 20px;}
#title li { display: inline-block; padding-right: 10px;}
#title li:not(.current)::after { content: '\f105'; font-family: FontAwesome; display: inline-block; padding-left: 15px; vertical-align: top;}

.post h2 { position: relative; display: inline-block; margin-bottom: 5%; padding: 1% 5%; text-align: center; font-size: 24px; line-height: 1.3; letter-spacing: 0.2em; text-indent: 0.2em;}
.post h2::before, .post h2::after{ content: ''; position: absolute; display: inline-block; width: 20px; height: 30px;}
.post h2::before { top: -8px; left: -8px; border-left: 1px solid #231815; border-top: 1px solid #231815;}
.post h2::after { bottom: -8px; right: -8px; border-right: 1px solid #231815; border-bottom: 1px solid #231815;}
.post h3 { margin-bottom: 5%; padding: 1% 2%; background: rgba(8,124,147,.2); box-shadow: 0 0 0 5px rgba(8,124,147,.2); border: 1px dashed #FFF; font-size: 16px; line-height: 1.3; letter-spacing: 0.1em; text-indent: 0.1em;}
.post h4 { position: relative; margin-bottom: 3%; padding-bottom: 1%; border-bottom: 1px solid #087c93; font-size: 16px; line-height: 1.3;}
.post h4::after { content: ''; position: absolute; display: block; width: 30%; bottom: -1px; border-bottom: solid 1px #f39800;}
.post h5 { position: relative; margin-bottom: 5%; border-bottom: 1px dashed #087c93; font-size: 16px; line-height: 1.3; color: #087c93; z-index: 0;}
.post h5::before { content: ''; position: absolute; left: -15px; width: 50px; height: 50px; background: rgba(0,99,178,.1); border-radius: 50%; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: -1;}
.post h6 { margin-bottom: 5%; padding-left: 10px; border-left: 5px solid #087c93; font-size: 16px; line-height: 1.3; color: #087c93;}
.post p { margin-bottom: 5%;}
.post table { width: 100%; margin-bottom: 5%;}
.post th, .post td { padding: 10px 10px 10px 0; border-bottom: 1px dotted #999;}
.post table table th, .post table table td { padding: 2px 0; border-bottom: none;}
.post ul, .post ol { margin-left: 30px;}
.post ul li, .post ol li { padding-bottom: 1%;}
.post ul > li { list-style: disc;}
.post ol > li { list-style: decimal;}
.post dl { margin-bottom: 5%;}
.post dt { font-size: 16px;}
.post dd { padding-bottom: 1%;}
.post .alignleft, .post img.alignleft { display: inline; float: left; margin-right: 20px; margin-top: 4px;}
.post .alignright, .post img.alignright { display: inline; float: right; margin-left: 20px; margin-top: 4px;}
.post .aligncenter, .post img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; text-align: center;}
.post img.alignleft, .post img.alignright, .post img.aligncenter { position: relative; margin-bottom: 12px; z-index: 1;}
.post .catch { text-align: center; font-size: 18px;}
.post .column { display: table; table-layout: fixed; width: 100%; margin-bottom: 5%; margin-left: 0;}
.post .column li { display: table-cell; padding: 1%; vertical-align: top; list-style: none;}
.post .column.aligncenter li { vertical-align: middle;}
.meta { margin: 2% 0;}
.meta span { padding-right: 10px; font-size: 12px; font-weight: 400;}
.post .list dt { margin-bottom: 2%; border-bottom: 1px dashed #CCC; font-size: 20px;}
.post .list p { margin-bottom: 0;}
.post .list .meta { display: inline-block;}
#contents h2 { margin-bottom: 0;}

.paging { padding: 40px 0; text-align: center;}
.paging::after { content: ''; display: block; clear: both;}
.paging span, .paging a { margin: 0 1px; padding: 6px 10px; color: #087c93; border: 1px solid #087c93; border-radius: 4px;}
.paging span.nolink { border-style: dashed;}
.paging span.current, .paging a:hover { background-color: #087c93; color: #FFF;}
.paging .prev { float: left;}
.paging .next { float: right;}
.btn { margin-bottom: 2%; text-align: center;}
.btn a { display: inline-block; padding: 5px 20px; background: #231815; border: none; font-size: 12px; line-height: 1; color: #FFF!important; border-radius: 20px;}
.btn a::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 4px; transform-origin: center; transform: rotate(45deg); border-top: 1px solid #FFF; border-right: 1px solid #FFF;}

#top { max-width: 600px; margin:  0 auto;}
#top h1 { margin-bottom: 5%;}
.news dt { float: left; clear: left; width: 100px; padding: 8px; color: #087c93;}
.news dd { padding: 8px 0 8px 100px;}

#greeting { margin-top: 80px; text-align: center;}
#greeting p { display: inline-block; margin: 0 auto; text-align: left; -webkit-font-feature-settings: 'pkna'; font-feature-settings: 'pkna'; font-size: 18px; line-height: 2.6; letter-spacing: 0.2em; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
#greeting p strong { position: relative; top: -24px;}

#access { text-align: center;}
#access dt { font-size: 24px;}
#access dd { padding: 1%; border-top: 1px dashed #CCC;}
.map { margin-bottom: 5%;}

.price { font-size: 24px;}
.pricetable td { text-align: right;}

@media only screen and (min-width: 768px){
.content { display: flex; align-items: flex-start; margin: 0 -12px;}
.content > * { margin: 0 24px;}
.content h3 { white-space: nowrap;}
.content li { display: inline-block; margin: 4px 8px; list-style: none;}
}

#rental header { text-align: center;}
.post .imglist { margin: 0 0 5%;}
.post .imglist::after { content: ''; display: block; clear: both;}
.post .imglist li { float: left; padding: 0.1%; list-style: none;}
.box { margin-bottom: 5%; padding: 5% 2% 2%; background: #FFF; box-shadow: 0 0 5px rgba(0,0,0,.2); border-radius: 4px;}

#contact { max-width: 800px; margin: 0 auto;}
input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; margin: 1% 0; padding: 2%;}
.button { text-align: center;}
.button input { margin: 2%; padding: 2% 10%; background: #087c93; border: none; color: #FFF; border-radius: 20px;}
.required { color: #C30D23;}

#gallery { position: relative; max-width: 980px; margin: 0 auto;}

#tabs { position: relative; margin-bottom: 64px;}
#tabs ul { display: flex; justify-content: center; max-width: 960px; margin: 0 auto;}
#tabs li { position: relative; width: 50%; margin: 0 8px; text-align: center; font-weight: 700; color: #3B4043; list-style: none; cursor: pointer;}
#tabs li::before, #tabs li::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #D3D3D3;}
#tabs li::after { background: #087c93; transform: scale(0, 1); transform-origin: right top; transition: transform .3s; z-index: 0;}
#tabs li:hover::after, #tabs li.on::after { transform-origin: left top; transform: scale(1, 1);}
#tabs li.on { color: #087c93;}




@media only screen and (max-width: 767px){
#header { position: fixed; bottom: 0; left: 0; display: table; width: 100%; height: 70px; padding: 0; background: #FFF; box-shadow: 0 0 20px rgba(0,0,0,.3); z-index: 100;}
#header h1 { position: absolute; top: 5px; left: 30%; transform: translateX(-50%);}
#header h1 img { width: auto; height: 60px;}
#nav { position: fixed; bottom: -660px; left: 0; display: block; width: 100%; background: rgba(8,124,147,.9); border-top: #087c93 solid 1px; z-index: 50; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; transition: .3s ease-in-out;}
#nav > ul > li { padding: 8px 16px; border-bottom: 1px dashed #FFF;}
#nav li a, #nav li span { display: block; font-size: 16px; color: #FFF;}
#nav li.on { background: #087c93; border-color: #FFF;}
#nav li.on a { color: #FFF;}
#open { display: table-cell; padding-left: 10px; text-align: left; vertical-align: middle; cursor: pointer;}
#open div { position: relative; display: block; width: 38px; height: 27px;}
#open span { position: absolute; left: 0; display: block; width: 38px; height: 5px; background: #087c93; border-radius: 2px; -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; transition: .15s ease-in-out;}
#open span:nth-child(1) { top: 0;}
#open span:nth-child(2) { top: 11px;}
#open span:nth-child(3) { top: 22px;}
.open #open span:nth-child(1) { top: 11px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.open #open span:nth-child(2) { width: 0; left: 50%;}
.open #open span:nth-child(3) { top: 11px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
.open #nav { -moz-transform: translateY(-730px); -webkit-transform: translateY(-730px); transform: translateY(-730px);}

#footer { padding: 80px 5% 100px;}
.contactus { display: table-cell; padding: 0; vertical-align: middle;}
.contactus dt { display: none;}
.contactus dd { float: right; display: table-cell; vertical-align: middle; height: 70px; padding: 0 10px; background: #087c93; line-height: 80px;}
.contactus dd:nth-child(2) { padding: 0 10px; border-left: 1px dashed #FFF;}
.contactus dd span { display: none;}
.contactus dd i { margin-right: 0; font-size: 30px;}
.contactus dd a, .contactus dd a:hover { color: #FFF!important;}
#pagetop { right: 10px; bottom: 80px;}
.sp { display: block;}
.pc { display: none;}

#contents { float: none; width: 100%;}
#aside { float: none; width: 100%;}

#title { padding: 0 0 5%;}
#title .mainimg { padding-bottom: 0;}
#title h1 { padding: 5% 0; font-size: 22px; letter-spacing: 0em; text-indent: 0em;}

.post .alignleft, .post img.alignleft, .post .alignright, .post img.alignright, .post .aligncenter, .post img.aligncenter { clear: both; display: block; float: none; margin: 0 auto 5%; text-align: center;}
.post .column { display: block;}
.post .column li { display: block;}
.post .column li:not(:first-child) { margin-top: 5%;}

#main #top { padding: 10%;}
#top h1 { text-align: center;}
#top h1 img { width: 40%;}
.post .imglist li { width: 50%; padding: 0.3%; text-align: center;}

#greeting p { font-size: 14px; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;}
#greeting p strong { top: 0; font-size: 18px;}
}


@media print {
#container { width: 1060px;}
}