html,
body {
font-family: "ヒラギノ明朝 Pro W3","游明朝","Yu Mincho",YuMincho,"Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","Hiragino Mincho Pro","serif";
font-feature-settings: "palt";
-ms-font-feature-settings: "palt";
position: relative;
}
body.isAndroid {
font-family:"ヒラギノ明朝 Pro W3","游明朝","Yu Mincho",YuMincho,"Sawarabi Mincho", serif;
font-feature-settings: "palt";
-ms-font-feature-settings: "palt";
position: relative;
}
body.isIE,
body.isSafari {
letter-spacing: -0.5px;
}
/* ===== page ===== */
body.home .page {
background: rgba(255, 255, 255, 1.0);
}
/* ===== main-visual ===== */
.main-visual {
position: relative;
margin-top: 70px;
top: 0;
left: 0;
width: 100%;
height: 442px;
background: rgba(20, 20, 20, 1.0);
overflow: hidden;
}
.main-visual h1.logo {
display: none;
}
.main-visual h2.copy-01 {
position: absolute;
top: 24px;
left: 0;
width: 100%;
text-align: center;
z-index: 100;
color: rgba(255, 255, 255, 1.0);
font-size: 13px;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.main-visual h2.copy-02 {
position: absolute;
top: 64px;
left: 50%;
margin-top: 0px;
margin-left: -144px;
width: 288px;
height: 86px;
z-index: 100;
opacity: 1;
}
.main-visual h2.copy-02 img {
width: 100%;
height: 100%;
}
.main-visual h2.copy-02.show {
opacity: 1;
}
.main-visual h2.anniversary {
position: absolute;
top: 80px;
left: 50%;
margin-top: 0px;
margin-left: -140px;
width: 280px;
height: 233px;
z-index: 100;
opacity: 1;
}
.main-visual h2.anniversary img {
width: 100%;
height: 100%;
}
.main-visual h2.anniversary.show {
opacity: 1;
}
.main-visual div.english {
display: none;
}
.main-visual div.english a {
display: none;
}
.main-visual div.english a .material-icons {
vertical-align: middle;
}
.main-visual div.awards {
position: absolute;
bottom: 16px;
left: 16px;
z-index: 100;
}
.main-visual .area {
display: none;
}
.main-visual .item {
width: 100%;
height: 100%;
position: absolute;
transition: opacity 2s ease 0s;
}
.main-visual .item.hidden {
opacity: 0;
}
.main-visual .item.show {
opacity: 1;
}
.main-visual .item img {
width: 100%;
height: 100%;
}
.main-visual .sp-background {
display: block;
width: 100%;
height: 442px;
}
.main-visual .sp-background .sp-item {
width: 100%;
height: 100%;
position: absolute;
transition: opacity 2s ease 0s;
}
.main-visual .sp-background .sp-item.hidden {
opacity: 0;
}
.main-visual .sp-background .sp-item.show {
opacity: 1;
}
.main-visual .sp-background .sp-item img {
width: 100%;
height: 100%;
}
@media (min-width: 768px){
.main-visual {
position: relative;
margin-top: 70px;
top: 0;
left: 0;
width: 100%;
height: 442px;
background: rgba(20, 20, 20, 1.0);
overflow: hidden;
}
.main-visual .sp-background {
display: block;
}
.main-visual .area {
display: none;
}
.main-visual h2.anniversary {
position: absolute;
top: 90px;
left: 50%;
margin-top: 0px;
margin-left: -150px;
width: 300px;
height: 249px;
z-index: 100;
opacity: 1;
}
}
@media (min-width: 992px){
.main-visual h1.logo {
display: block;
position: absolute;
top: 16px;
left: 16px;
z-index: 100;
}
.main-visual h2.copy-01 {
position: absolute;
top: 36px;
left: 264px;
width: auto;
text-align: left;
z-index: 100;
color: rgba(255, 255, 255, 1.0);
font-size: 15px;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.main-visual h2.copy-02 {
position: absolute;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -200px;
width: 400px;
height: 120px;
z-index: 100;
opacity: 0;
transition: opacity 0.5s ease 0s;
}
.main-visual h2.copy-02.show {
opacity: 1;
}
.main-visual h2.anniversary {
position: absolute;
top: 180px;
left: 50%;
margin-top: 0px;
margin-left: -200px;
width: 400px;
height: 333px;
z-index: 100;
opacity: 0;
transition: opacity 2s ease 0s;
}
.main-visual h2.anniversary.show {
opacity: 1;
}
.main-visual div.english {
display: block;
position: absolute;
top: 16px;
right:0px;
z-index: 100;
line-height: 24px;
}
.main-visual div.english a {
display: block;
width: 100px;
height: 40px;
padding-right: 3px;
background: rgba(0, 0, 0, 1.0);
color:rgba(255, 255, 255, 1.0);
text-align: right;
font-size: 14px;
line-height: 40px;
}
.main-visual div.english a .material-icons {
vertical-align: middle;
}
.main-visual div.awards {
position: absolute;
bottom: auto;
left: auto;
top: 72px;
right: 7px;
z-index: 100;
}
.main-visual {
position: relative;
margin-top: 0;
top: 0;
left: 0;
width: 100%;
height: 620px;
background: rgba(20, 20, 20, 1.0);
overflow: hidden;
}
.main-visual .sp-background {
display: none;
}
.main-visual .area {
display: block;
position: absolute;
z-index: 1;
}
}
@media (min-width: 1200px){
.main-visual h1.logo {
position: absolute;
top: 16px;
left: 16px;
z-index: 100;
}
.main-visual h2.copy-01 {
position: absolute;
top: 36px;
left: 264px;
z-index: 100;
color: rgba(255, 255, 255, 1.0);
font-size: 15px;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.main-visual h2.copy-02 {
position: absolute;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -200px;
z-index: 100;
opacity: 0;
transition: opacity 0.5s ease 0s;
}
.main-visual h2.copy-02.show {
opacity: 1;
}
.main-visual h2.anniversary {
position: absolute;
top: 180px;
left: 50%;
margin-top: 0px;
margin-left: -200px;
width: 400px;
height: 333px;
z-index: 100;
opacity: 0;
transition: opacity 2s ease 0s;
}
.main-visual h2.anniversary.show {
opacity: 1;
}
.main-visual div.english {
position: absolute;
top: 16px;
right:0px;
z-index: 100;
line-height: 24px;
}
.main-visual div.english a {
display: block;
width: 100px;
height: 40px;
padding-right: 3px;
background: rgba(0, 0, 0, 1.0);
color:rgba(255, 255, 255, 1.0);
text-align: right;
font-size: 14px;
line-height: 40px;
}
.main-visual div.english a .material-icons {
vertical-align: middle;
}
.main-visual div.awards {
position: absolute;
top: 72px;
right: 7px;
z-index: 100;
}
.main-visual {
position: relative;
margin-top: 0;
top: 0;
left: 0;
width: 100%;
height: 620px;
background: rgba(20, 20, 20, 1.0);
overflow: hidden;
}
.main-visual .sp-background {
display: none;
}
.main-visual .area {
position: absolute;
z-index: 1;
}
}
/* ===== leaf-visual ===== */
.leaf-visual {
position: relative;
margin-top: 70px;
top: 0;
left: 0;
width: 100%;
height: 200px;
background: rgba(20, 20, 20, 1.0);
overflow: hidden;
}
.leaf-visual h2.logo {
display: none;
}
.leaf-visual h3.copy-01 {
display: none;
}
.leaf-visual h1.title {
position: absolute;
top: 64px;
left: 50%;
margin-top: 0px;
margin-left: -144px;
width: 288px;
height: 86px;
z-index: 100;
opacity: 1;
}
.leaf-visual h1.title img {
width: 100%;
height: 100%;
}
.leaf-visual h2.title.show {
opacity: 1;
}
.leaf-visual .area {
display: none;
}
.leaf-visual .item {
width: 100%;
height: 100%;
position: absolute;
}
.leaf-visual .item img {
width: 100%;
height: 100%;
}
.leaf-visual .sp-background {
display: block;
width: 100%;
height: 200px;
}
.leaf-visual .sp-background .sp-item {
width: 100%;
height: 100%;
position: absolute;
transition: opacity 0.5s ease 0s;
}
.leaf-visual .sp-background .sp-item.hidden {
opacity: 0;
}
.leaf-visual .sp-background .sp-item.show {
opacity: 1;
}
.leaf-visual .sp-background .sp-item img {
width: 100%;
height: 100%;
}
@media (min-width: 768px){
.leaf-visual {
position: relative;
margin-top: 70px;
top: 0;
left: 0;
width: 100%;
height: 200px;
background: rgba(20, 20, 20, 1.0);
overflow: hidden;
}
.leaf-visual .sp-background {
display: block;
}
.leaf-visual .area {
display: none;
}
}
@media (min-width: 992px){
.leaf-visual {
position: relative;
margin-top: 0;
top: 0;
left: 0;
width: 100%;
height: 440px;
background: rgba(20, 20, 20, 1.0);
overflow: hidden;
}
.leaf-visual h2.logo {
display: block;
position: absolute;
top: 16px;
left: 16px;
z-index: 100;
}
.leaf-visual h3.copy-01 {
display: block;
position: absolute;
top: 36px;
left: 264px;
width: auto;
text-align: left;
z-index: 100;
color: rgba(255, 255, 255, 1.0);
font-size: 15px;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.leaf-visual h1.title {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
opacity: 0;
transition: opacity 0.5s ease 0s;
}
.leaf-visual h1.title.show {
opacity: 1;
}
.leaf-visual .sp-background {
display: none;
}
.leaf-visual .area {
display: block;
position: absolute;
z-index: 1;
}
}
@media (min-width: 1200px){
.leaf-visual {
position: relative;
margin-top: 0;
top: 0;
left: 0;
width: 100%;
height: 440px;
background: rgba(20, 20, 20, 1.0);
overflow: hidden;
}
.leaf-visual h2.logo {
position: absolute;
top: 16px;
left: 16px;
z-index: 100;
}
.leaf-visual h3.copy-01 {
position: absolute;
top: 36px;
left: 264px;
z-index: 100;
color: rgba(255, 255, 255, 1.0);
font-size: 15px;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.leaf-visual h1.title {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
opacity: 0;
transition: opacity 0.5s ease 0s;
}
.leaf-visual h1.title.show {
opacity: 1;
}
.leaf-visual .sp-background {
display: none;
}
.leaf-visual .area {
position: absolute;
z-index: 1;
}
}
/* ----- template ----- */
.leaf-visual h1.title.template {
margin-top: -30.5px;
margin-left: -58.5px;
width: 117px;
height: 61px;
}
@media (min-width: 768px){
}
@media (min-width: 992px){
.leaf-visual h1.title.template {
margin-top: -30.5px;
margin-left: -117px;
width: 234px;
height: 122px;
}
}
@media (min-width: 1200px){
}
/* ----- title ----- */
.leaf-visual h1.title.room,
.leaf-visual h1.title.cuisine,
.leaf-visual h1.title.access {
margin-top: 6px;
margin-left: -58px;
width: 117px;
height: 61px;
}
.leaf-visual h1.title.activity,
.leaf-visual h1.title.spa,
.leaf-visual h1.title.faq,
.leaf-visual h1.title.sitemap,
.leaf-visual h1.title.yakkan,
.leaf-visual h1.title.about,
.leaf-visual h1.title.recruit,
.leaf-visual h1.title.pet,
.leaf-visual h1.title.contact {
margin-top: 6px;
margin-left: -64px;
width: 128px;
height: 61px;
}
.leaf-visual h1.title.wedding {
margin-top: 6px;
margin-left: -68px;
width: 137px;
height: 61px;
}
.leaf-visual h1.title.info,
.leaf-visual h1.title.eigyo {
margin-top: 6px;
margin-left: -83px;
width: 168px;
height: 61px;
}
.leaf-visual h1.title.spot {
margin-top: 6px;
margin-left: -83px;
width: 166px;
height: 61px;
}
.leaf-visual h1.title.policy {
margin-top: 6px;
margin-left: -107px;
width: 214px;
height: 61px;
}
@media (min-width: 768px){
}
@media (min-width: 992px){
.leaf-visual h1.title.room,
.leaf-visual h1.title.cuisine,
.leaf-visual h1.title.access {
margin-top: -30.5px;
margin-left: -117px;
width: 234px;
height: 122px;
}
.leaf-visual h1.title.wedding {
margin-top: -30.5px;
margin-left: -137px;
width: 274px;
height: 122px;
}
.leaf-visual h1.title.activity,
.leaf-visual h1.title.spa,
.leaf-visual h1.title.faq,
.leaf-visual h1.title.sitemap,
.leaf-visual h1.title.yakkan,
.leaf-visual h1.title.about,
.leaf-visual h1.title.recruit,
.leaf-visual h1.title.pet,
.leaf-visual h1.title.contact {
margin-top: -30.5px;
margin-left: -128px;
width: 256px;
height: 122px;
}
.leaf-visual h1.title.info,
.leaf-visual h1.title.eigyo {
margin-top: -30.5px;
margin-left: -168px;
width: 336px;
height: 122px;
}
.leaf-visual h1.title.spot {
margin-top: -30.5px;
margin-left: -166px;
width: 332px;
height: 122px;
}
.leaf-visual h1.title.policy {
margin-top: -30.5px;
margin-left: -214px;
width: 429px;
height: 122px;
}
}
@media (min-width: 1200px){
}
/* ===== header ===== */
header {
}
body.nav-fix header {
display: none;
}
@media (min-width: 768px){
}
@media (min-width: 992px){
body.nav-fix header {
display: block;
position: fixed;
z-index: 10000;
top:-135px;
left:0;
width: 100%;
height: 128px;
transition: top 0.5s ease 0s;
background: rgba(255, 255, 255, 1.0);
}
}
@media (min-width: 1200px){
body.nav-fix header {
display: block;
position: fixed;
z-index: 10000;
top:-135px;
left:0;
width: 100%;
height: 128px;
transition: top 0.5s ease 0s;
background: rgba(255, 255, 255, 1.0);
}
}
body.nav-fix header.black {
background: rgba(0, 0, 0, 1.0);
}
body.nav-fix header.show {
top: 0px;
}
/* ===== global navigation ===== */
.global-nav.container {
position: relative;
display: none;
}
@media (min-width: 768px){
.global-nav.container {
display: none;
}
}
@media (min-width: 992px){
.global-nav.container {
display: block;
max-width: 992px;
padding-left: 0;
padding-right: 0;
}
body.nav-fix header.show .global-nav.container {
padding-left: 180px;
}
}
@media (min-width: 1200px){
.global-nav.container {
max-width: 1200px;
padding-left: 0;
padding-right: 0;
}
body.nav-fix header.show .global-nav.container {
padding-left: 223px;
}
}
header .global-nav.container .nav-logo {
display: none;
}
body.nav-fix header.show .global-nav.container .nav-logo {
display: block;
position: absolute;
top: 32px;
left: -48px;
}
@media (min-width: 768px){
}
@media (min-width: 992px){
body.nav-fix header.show .global-nav.container .nav-logo {
display: block;
position: absolute;
top: 32px;
left: -10px;
width: 180px;
height: 45px;
}
body.nav-fix header.show .global-nav.container .nav-logo img {
width: 180px;
height: 45px;
}
}
@media (min-width: 1200px){
body.nav-fix header.show .global-nav.container .nav-logo {
display: block;
position: absolute;
top: 32px;
left: 0px;
width: 210px;
height: 52.5px;
}
body.nav-fix header.show .global-nav.container .nav-logo img {
width: 210px;
height: 52.5px;
}
}
.global-nav:after {
content: "";
clear: both;
display: block;
}
.global-nav .nav {
}
.global-nav .nav .nav-item {
width:12.5%;
height: 82px;
}
.global-nav .nav .nav-item:after {
content: url(../img/line-01.png);
margin: 0;
position: relative;
top: -82px;
right: 3px;
}
.global-nav .nav .nav-item:last-child:after {
content: none;
}
.global-nav .nav .nav-item .nav-link {
height: 82px;
padding: 20px 0 0 0;
text-align: center;
}
.global-nav .nav .nav-item.current .nav-link{
background: rgba(199, 227, 242, 0.4);
}
body.nav-fix .global-nav .nav .nav-item.current .nav-link{
background: rgba(255, 255, 255, 0.2);
}
.global-nav .nav .nav-item .nav-link:link,
.global-nav .nav .nav-item .nav-link:visited {
color: #555555;
transition: background-color 0.5s;
}
.global-nav .nav .nav-item .nav-link:hover {
background: rgba(199, 227, 242, 0.3);
}
body.nav-fix header.black.show .global-nav .nav .nav-item .nav-link:link,
body.nav-fix header.black.show .global-nav .nav .nav-item .nav-link:visited {
color: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
body.nav-fix header.black.show .global-nav .nav .nav-item .nav-link:hover {
background: rgba(199, 227, 242, 0.3);
}
.global-nav .nav .nav-item .nav-link:active {}
.global-nav .nav .nav-item .nav-link span {
display:block;
text-align: center;
margin: 0;
padding: 0;
font-size: 10px;
letter-spacing: 0px;
color: #D1BF5E;
}
.global-nav .nav .nav-item.nallow-spacing .nav-link span {
letter-spacing: 0px;
}
@media (min-width: 768px){
}
@media (min-width: 992px){
.global-nav .nav .nav-item .nav-link {
font-size: 15px;
}
.global-nav .nav .nav-item.nallow-spacing .nav-link {
letter-spacing: -2px;
}
}
@media (min-width: 1200px){
.global-nav .nav .nav-item .nav-link {
font-size: 16px;
letter-spacing: 0px;
}
.global-nav .nav .nav-item.nallow-spacing .nav-link {
letter-spacing: 0px;
}
}
/* ----- dayuse ----- */
.global-nav .nav .nav-item.dayuse {
background: none;
}
.global-nav .nav .nav-item.dayuse .nav-link {
background: rgba(0, 0, 0, 0.6);
}
.global-nav .nav .nav-item.dayuse .nav-link:link,
.global-nav .nav .nav-item.dayuse .nav-link:visited {
color: #FFFFFF;
transition: background-color 0.5s;
}
.global-nav .nav .nav-item.dayuse .nav-link:hover {
background: rgba(0, 0, 0, 0.5);
}
body.nav-fix header.black.show .global-nav .nav .nav-item.dayuse .nav-link {
background: rgba(235, 235, 235, 1.0);
}
body.nav-fix header.black.show .global-nav .nav .nav-item.dayuse .nav-link:link,
body.nav-fix header.black.show .global-nav .nav .nav-item.dayuse .nav-link:visited {
color: #000;
transition: background-color 0.5s;
}
body.nav-fix header.black.show .global-nav .nav .nav-item.dayuse .nav-link:hover {
background: rgba(210, 210, 210, 1.0);
}
.global-nav .nav .nav-item.dayuse .nav-link:active {}
.global-nav .nav .nav-item.dayuse .nav-link span {
}
/* ----- plan ----- */
.global-nav .nav .nav-item.plan {
background: none;
}
.global-nav .nav .nav-item.plan .nav-link {
background: #000;
}
.global-nav .nav .nav-item.plan .nav-link:link,
.global-nav .nav .nav-item.plan .nav-link:visited {
color: #FFFFFF;
transition: background-color 0.5s;
}
.global-nav .nav .nav-item.plan .nav-link:hover {
background: #444444;
}
body.nav-fix header.black.show .global-nav .nav .nav-item.plan .nav-link {
background: rgba(255, 255, 255, 1.0);
}
body.nav-fix header.black.show .global-nav .nav .nav-item.plan .nav-link:link,
body.nav-fix header.black.show .global-nav .nav .nav-item.plan .nav-link:visited {
color: #000;
transition: background-color 0.5s;
}
body.nav-fix header.black.show .global-nav .nav .nav-item.plan .nav-link:hover {
background: rgba(210, 210, 210, 1.0);
}
.global-nav .nav .nav-item.plan .nav-link:active {}
.global-nav .nav .nav-item.plan .nav-link span {
}
/* ====== sub-nav ====== */
.sub-nav.container {
margin-top: 16px;
position: relative;
display: none;
}
body.nav-fix header.show .sub-nav.container {
margin-top: 0px;
}
@media (min-width: 768px){
.sub-nav.container {
isplay: none;
}
}
@media (min-width: 992px){
.sub-nav.container {
display: block;
max-width: 992px;
padding-left: 0;
padding-right: 0;
}
body.nav-fix header.show .sub-nav.container {
padding-left: 180px;
}
}
@media (min-width: 1200px){
.sub-nav.container {
max-width: 1200px;
padding-left: 0;
padding-right: 0;
}
body.nav-fix header.show .sub-nav.container {
padding-left: 223px;
}
}
.sub-nav:after {
content: "";
clear: both;
display: block;
}
/* ----- utility-nav ----- */
.sub-nav .utility-nav {
}
@media (min-width: 768px){
.utility-nav {
width: 380px;
float: left;
}
}
@media (min-width: 992px){
.utility-nav {
width: 520px;
float: left;
}
.nav-fix .utility-nav {
width: 510px;
float: left;
}
}
@media (min-width: 1200px){
.utility-nav {
width: 550px;
float: left;
}
.nav-fix .utility-nav {
width: 509px;
float: left;
}
}
.utility-nav .nav .nav-item {}
.utility-nav .nav .nav-item .nav-link {
padding: 0.5rem 0.75rem;
font-size: 13px;
background: rgba(237, 237, 237, 1.0);
}
.utility-nav .nav .nav-item .nav-link:link,
.utility-nav .nav .nav-item .nav-link:visited {
color: rgba(0, 0, 0, 1.0);
transition: background-color 0.5s;
}
.utility-nav .nav .nav-item .nav-link:hover {
background: rgba(207, 207, 207, 1.0);
}
body.nav-fix header.black.show .utility-nav .nav .nav-item .nav-link {
background: rgba(59, 59, 59, 1.0);
line-height: 46px;
padding: 0 0.75em;
}
body.nav-fix header.black.show .utility-nav .nav .nav-item .nav-link:link,
body.nav-fix header.black.show .utility-nav .nav .nav-item .nav-link:visited {
color: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
body.nav-fix header.black.show .utility-nav .nav .nav-item .nav-link:hover {
background: rgba(100, 100, 100, 1.0);
}
/* ----- tel-nav ----- */
.tel-nav:after {
content: "";
clear: both;
display: block;
}
.sub-nav .tel-nav .tel-title,
.sub-nav .tel-nav .tel-time {
float: left;
font-size: 14px;
line-height: 1.0;
margin: 0;
padding: 12px 0;
color:rgba(150, 127, 4, 1.0);
}
@media (min-width: 768px){
.tel-nav {
width: 320px;
float: left;
}
.tel-title span {
display: block;
}
.tel-time {
display: none;
}
.tel-time span {
display: block;
}
.sub-nav .tel-nav .tel-title,
.sub-nav .tel-nav .tel-time {
float: left;
font-size: 12px;
line-height: 1.4;
margin: 0;
padding: 4px 0;
color:rgba(150, 127, 4, 1.0);
}
}
@media (min-width: 992px){
.tel-nav {
width: 310px;
float: left;
}
.tel-title span {
display: block;
}
.tel-time {
display: none;
}
.tel-time span {
display: block;
}
.sub-nav .tel-nav .tel-number {
font-size: 24px;
float: left;
margin: 2px 0 0 0;
padding: 0;
color:rgba(150, 127, 4, 1.0);
}
.sub-nav .tel-nav .material-icons {
display: block;
float: left;
font-size: 24px;
margin: 9px 3px 0 5px;
padding: 0;
color:rgba(150, 127, 4, 1.0);
}
.sub-nav .tel-nav .tel-title,
.sub-nav .tel-nav .tel-time {
float: left;
font-size: 12px;
line-height: 1.4;
margin: 0;
padding: 4px 0 4px 16px;
color:rgba(150, 127, 4, 1.0);
}
body.nav-fix header.show .tel-nav {
padding-top: 2px;
width: 300px;
}
body.nav-fix header.show .sub-nav .tel-nav .tel-title,
body.nav-fix header.show .sub-nav .tel-nav .tel-time {
padding-left:0px;
}
}
@media (min-width: 1200px){
.tel-nav {
width: 470px;
float: left;
}
body.nav-fix header.show .tel-nav {
width: 450px;
float: right;
text-align: left;
}
.tel-title span {
display: none;
}
.tel-time {
display: block;
}
.tel-time span {
display: block;
font-size: 14px;
}
.sub-nav .tel-nav .tel-number {
font-size: 24px;
float: left;
margin: 0 8px 0 0;
padding: 0;
color:rgba(150, 127, 4, 1.0);
}
.sub-nav .tel-nav .material-icons {
display: block;
float: left;
font-size: 24px;
margin: 6px 3px 0 5px;
padding: 0;
color:rgba(150, 127, 4, 1.0);
}
.sub-nav .tel-nav .tel-title {
float: left;
font-size: 14px;
line-height: 1.0;
margin: 0;
padding: 12px 0 12px 14px;
color:rgba(150, 127, 4, 1.0);
}
body.nav-fix .sub-nav .tel-nav .tel-title {
padding: 10px 0 12px 0;
}
.sub-nav .tel-nav .tel-time {
float: left;
font-size: 12px;
line-height: 1.4;
margin: 0;
padding: 0;
color:rgba(150, 127, 4, 1.0);
}
body.nav-fix header.show .tel-nav {
padding-top: 6px;
}
}
/* ----- confirm-nav ----- */
.sub-nav .confirm-nav {
font-size: 14px;
float: right;
text-align: center;
width: 160px;
}
body.nav-fix header.show .sub-nav .confirm-nav {
display: none;
}
.sub-nav .confirm-nav a {
display: block;
padding: 0.5rem 0;
}
.sub-nav .confirm-nav a:link,
.sub-nav .confirm-nav a:visited {
color:rgba(85, 85, 85, 1.0);
transition: background-color 0.5s;
}
.sub-nav .confirm-nav a:hover {
text-decoration: none;
background: rgba(237, 237, 237, 1.0);
}
.confirm-nav .material-icons {
display: inline-block;
margin: -1px 0 0 0;
vertical-align: middle;
font-size: 18px;
color: rgba(255, 196, 0, 1.0);
}
/* ===== search ===== */
.search {
display: none;
}
@media (min-width: 768px){
.search {
display: none;
}
}
@media (min-width: 992px){
.search {
display: block;
margin: 16px 0;
padding: 8px 0;
height: 80px;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 1.0);
}
}
@media (min-width: 1200px){
.search {
margin: 16px 0;
padding: 8px 0;
height: 64px;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 1.0);
}
}
body.nav-fix .search {
margin-top: 151px;
}
.search .container {
}
@media (min-width: 768px){
.search .container {
max-width: 768px;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 992px){
.search .container {
max-width: 992px;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 1200px){
.search .container {
max-width: 1200px;
padding-left: 0;
padding-right: 0;
}
}
.search:after {
content: "";
clear: both;
display: block;
}
.search .search-title {
padding: 10px 0 0 20px;
font-weight: normal;
font-size: 20px;
line-height: 28px;
}
@media (min-width: 768px){
}
@media (min-width: 992px){
.search .search-title {
margin: 0;
padding: 4px 0 0 0;
font-weight: normal;
font-size: 15px;
line-height: 16px;
}
}
@media (min-width: 1200px){
.search .search-title {
padding: 10px 0 0 20px;
float: left;
font-weight: normal;
font-size: 20px;
line-height: 28px;
}
}
.search .pa-search-form-date {
float: left;
font-size: 12px;
padding: 10px 0 0 20px;
}
@media (min-width: 768px){
}
@media (min-width: 992px){
.search .pa-search-form-date {
float: left;
font-size: 12px;
padding: 10px 0 0 16px;
}
}
@media (min-width: 1200px){
.search .pa-search-form-date {
float: left;
font-size: 12px;
padding: 10px 0 0 20px;
}
}
.search .pa-search-form-date input.form-control {
display: inline-block;
font-size: 14px;
margin: 0 4px 0 8px;
padding: 0 5px 0 15px;
width: 172px;
height: 28px;
background-image: url(../img/calendar_bk.gif);
background-repeat: no-repeat;
background-position: right;
background-color: #ffffff;
}
.search .pa-search-form-date select.form-control {
display: inline-block;
font-size: 14px;
width: 53px;
height: 28px;
margin: 0 4px 0 8px;
padding: 0 5px 0 15px;
}
.search .pa-search-form-number {
float: left;
font-size: 12px;
padding: 10px 0 0 16px;
}
.search .pa-search-form-number .pa-search-form-adults,
.search .pa-search-form-number .pa-search-form-child {
display: inline;
}
.search .pa-search-form-number select.form-control {
display: inline-block;
font-size: 14px;
width: 64px;
height: 28px;
margin: 0 4px 0 8px;
padding: 0 5px 0 15px;
text-align: left;
}
.search .pa-search-form-number a {
}
.search .pa-search-form-number input.form-control {
display: inline-block;
font-size: 14px;
margin: 0 4px 0 8px;
padding: 0 5px 0 2px;
width: 53px;
height: 28px;
text-align: center;
background-color:rgba(255, 255, 255, 1.0);
}
.search .pa-search-form-number a:focus {
outline: 0;
}
.search .pa-search-form-number a:link,
.search .pa-search-form-number a:visited {
color: rgba(255, 255, 255, 1.0);
text-decoration: underline;
}
.search .pa-search-form-number a:hover,
.search .pa-search-form-number a:active {
color: rgba(255, 255, 255, 1.0);
text-decoration: underline;
}
.search .pa-search-form-number .pa-search-form-child .dropdown-menu {
width: 400px;
font-size: 14px;
padding: 16px;
}
.search .pa-search-form-number .pa-search-form-child .dropdown-menu tr {
border-bottom: solid 5px rgba(255, 255, 255, 1.0);
}
.search .pa-search-form-number .pa-search-form-child .dropdown-menu select.form-control {
}
.search .pa-search-rooms {
float: left;
font-size: 12px;
padding: 10px 0 0 0;
}
.search .pa-search-rooms select.form-control {
display: inline-block;
font-size: 14px;
width: 53px;
height: 28px;
margin: 0 4px 0 8px;
padding: 0 5px 0 15px;
}
.search .pa-search-button {
float: right;
padding: 5px 0 0 0;
}
.search .pa-search-button button {
display:inline-block;
width: 146.25px;
font-size: 16px;
line-height: 38px;
color: rgba(255, 255, 255, 1.0);
border: solid 1px rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 1.0);
transition: background-color 0.5s;
}
.search .pa-search-button .material-icons {
display: block;
float: left;
font-size: 18px;
margin: 10px 0 0 5px;
color: rgba(255, 255, 255, 1.0);
}
@media (min-width: 768px){
}
@media (min-width: 992px){
.search .pa-search-button {
float: right;
margin-top: -28px;
padding: 8px 0 0 0;
}
.search .pa-search-button button {
display:inline-block;
width: 124.25px;
font-size: 15px;
height: 64px;
padding: 0;
color: rgba(255, 255, 255, 1.0);
border: solid 1px rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 1.0);
transition: background-color 0.5s;
}
.search .pa-search-button .material-icons {
display: block;
float: left;
font-size: 18px;
margin: 8px -4px 0 12px;
color: rgba(255, 255, 255, 1.0);
}
}
@media (min-width: 1200px){
.search .pa-search-button {
float: right;
margin-top: 0;
padding: 5px 0 0 0;
}
.search .pa-search-button button {
display:inline-block;
width: 146.25px;
font-size: 16px;
height: 38px;
padding: 0;
color: rgba(255, 255, 255, 1.0);
border: solid 1px rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 1.0);
transition: background-color 0.5s;
}
.search .pa-search-button .material-icons {
display: block;
float: left;
font-size: 18px;
margin: 10px -4px 0 16px;
color: rgba(255, 255, 255, 1.0);
}
}
.search .pa-search-button button:hover {
text-decoration: none;
background: rgba(90, 90, 90, 1.0);
cursor: pointer;
}
.search .pa-search-button button:after {
content: "";
clear: both;
display: block;
}
/* ===== information ===== */
/* ----- news ----- */
.news.container {
padding-top: 50px;
}
.news.container+.news.container {
padding-top: 0px;
padding-bottom: 10px;
}
.news:after {
content: "";
clear: both;
display: block;
}
.news-title {
width: 114px;
height: 84px;
text-align: center;
padding: 24px 0 0 0;
font-size: 28px;
color: rgba(85, 85, 85, 1.0);
}
.news-title span {
display: block;
padding-top: 6px;
font-size: 12px;
}
.news-list {
float: left;
margin-left: 24px;
padding-left: 16px;
border-left: solid 1px rgba(177, 177, 177, 1.0);
}
.news-list ul {
margin: 0;
padding: 0;
}
.news-list ul li {
list-style: none;
}
.news-list ul li a {
font-size: 16px;
display: block;
padding: 6px 16px;
margin-bottom: 4px;
line-height: 30px;
}
.news-list ul li a:link,
.news-list ul li a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.news-list ul li a:hover,
.news-list ul li a:active {
text-decoration: none;
background: rgba(230, 230, 230, 1.0);
}
.news-list ul li a:after {
content: "";
clear: both;
display: block;
}
.news-list ul li a span.date {
display: block;
width: auto;
font-size: 14px;
float: none;
}
.news-list ul li a span.title {
display: inline-block;
width: auto;
font-size: 16px;
line-height: 24px;
float: none;
}
.news-list ul li a:link span.date,
.news-list ul li a:visited span.date {
color: rgba(25, 25, 25, 1.0);
}
.news-list ul li a:hover span.date,
.news-list ul li a:active span.date {
color: rgba(25, 25, 25, 1.0);
}
.news-button {
float: right;
}
.news-button a {
display: block;
font-size:14px;
padding: 4px 8px;
}
.news-button a:link,
.news-button a:visited{
color: rgba(85, 85, 85, 1.0);
text-decoration: none;
transition: background-color 0.5s;
}
.news-button a:hover,
.news-button a:active {
color: rgba(85, 85, 85, 1.0);
text-decoration: none;
background: rgba(230, 230, 230, 1.0);
}
.news-button a:after {
content: "";
clear: both;
display: block;
}
.news-button a .material-icons {
display: block;
font-size: 18px;
float: left;
margin-top: 1px;
margin-right: 4px;
color :rgba(51, 122, 183, 1.0);
}
@media (min-width: 768px){
.news.container {
padding-top: 0px;
max-width: 768px;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 992px){
.news.container {
padding-top: 56px;
max-width: 890px;
padding-left: 0;
padding-right: 0;
}
.news-title {
width: 114px;
height: 114px;
float: left;
text-align: center;
padding: 24px 0 0 0;
font-size: 28px;
color: rgba(85, 85, 85, 1.0);
}
.news-list ul li a {
font-size: 16px;
display: block;
padding: 6px 16px;
margin-bottom: 4px;
line-height: 30px;
}
.news-list ul li a span.date {
display: block;
width: 120px;
font-size: 14px;
float: left;
}
.news-list ul li a span.title {
display: block;
width: 580px;
font-size: 16px;
line-height: 30px;
float: left;
}
}
@media (min-width: 1200px){
.news.container {
padding-top: 56px;
max-width: 890px;
padding-left: 0;
padding-right: 0;
}
}
/* ----- event ----- */
.event:after {
content: "";
clear: both;
display: block;
}
.event-title {
margin-bottom: 16px;
background: rgba(85, 85, 85, 1.0);
width: 114px;
height: 114px;
float: left;
font-size: 28px;
font-weight: normal;
text-align: center;
padding: 30px 0 0 0;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: rgba(255, 255, 255, 1.0);
}
.event-title span {
display: block;
padding-top: 6px;
font-size: 12px;
}
.event-list {
float: left;
margin-left: 24px;
margin-right: 16px;
padding-left: 0;
}
.event-list ul {
margin: 0;
padding: 0;
}
.event-list ul li {
margin: 0;
padding: 0;
list-style: none;
}
.event-list ul li:after {
content: "";
clear: both;
display: block;
}
.event-list ul li a {
display: block;
width: auto;
min-height: 124px;
}
.event-list ul li a img {
float: left;
margin-right: 16px;
}
.event-list ul li a:link,
.event-list ul li a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.event-list ul li a:hover,
.event-list ul li a:active {
text-decoration: none;
background: rgba(230, 230, 230, 1.0);
}
.event-list ul li a span.date {
display: block;
width: 120px;
font-size: 14px;
margin-left: 140px;
padding: 8px 0;
}
.event-list ul li a span.title {
display: block;
width: auto;
font-size: 16px;
line-height: 24px;
margin-left: 140px;
}
.event-list ul li a:link span.date,
.event-list ul li a:visited span.date {
color: rgba(25, 25, 25, 1.0);
}
.news-list ul li a:hover span.date,
.news-list ul li a:active span.date {
color: rgba(25, 25, 25, 1.0);
}
@media (min-width: 768px){
.event.container {
margin-top: 24px;
max-width: 768px;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 992px){
.event.container {
margin-top: 56px;
max-width: 890px;
padding-left: 0;
padding-right: 0;
}
.event-title {
margin-bottom: 0;
background: rgba(85, 85, 85, 1.0);
width: 114px;
height: 114px;
float: left;
font-size: 28px;
font-weight: normal;
text-align: center;
padding: 30px 0 0 0;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: rgba(255, 255, 255, 1.0);
}
.event-list {
float: left;
margin-left: 24px;
margin-right: 0;
padding-left: 0;
}
.event-list ul li a {
display: block;
width: 752px;
min-height: 124px;
}
.event-list ul li a span.title {
display: block;
width: 610px;
font-size: 16px;
line-height: 24px;
margin-left: 140px;
}
}
@media (min-width: 1200px){
.event.container {
margin-top: 56px;
max-width: 890px;
padding-left: 0;
padding-right: 0;
}
}
/* ----- banner ----- */
.banner.container {
margin-top: 32px;
max-width: 100%;
padding-left: 24px;
padding-right: 24px;
}
.banner.container img {
width: 100%;
height: auto;
}
.banner.container img.pc {
display: none;
}
.banner.container img.sp {
display: block;
}
.banner:after {
content: "";
clear: both;
display: block;
}
@media (min-width: 768px){
.banner.container img.sp {
display: none;
}
.banner.container img.pc {
display: block;
}
.banner.container {
margin-top: 32px;
max-width: 768px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 992px){
.banner.container {
margin-top: 56px;
max-width: 890px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 1200px){
.banner.container {
margin-top: 56px;
max-width: 890px;
padding-left: 0;
padding-right: 0;
}
}
.banner .item {
width: 80%;
margin: 0 auto;
}
.banner .item:nth-child(even) {
margin-top: 20px;
}
@media (min-width: 768px){
}
@media (min-width: 992px){
.banner .item {
width: 425px;
float: left;
margin: 0;
}
.banner .item:nth-child(even) {
margin-top: 0;
margin-left: 40px;
}
}
@media (min-width: 1200px){
}
.banner a {}
.banner a img {}
.banner .item-full {
width: 80%;
margin: 20px auto 0 auto;
}
@media (min-width: 768px){
}
@media (min-width: 992px){
.banner .item-full {
width: 100%;
margin: 20px auto 0 auto;
}
}
@media (min-width: 1200px){
}
/* ===== features ===== */
.features {
margin-top: 56px;
}
.features .mask {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}
.features .mask .picture {
width: 100%;
height: auto;
position: relative;
top: 0;
left: 0;
z-index: 2;
}
.features .mask .picture .item {
width: 100%;
height: 100%;
position: relative;
transition: opacity 2s ease 0s;
z-index: 1;
}
.features .mask .picture .item.hidden {
opacity: 0;
}
.features .mask .picture .item.show {
opacity: 1;
}
.features .mask .picture .item img {
width: 100%;
height: 100%;
}
@media (min-width: 768px){
.features .mask {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}
}
@media (min-width: 992px){
.features .mask {
width: 100%;
height: 560px;
overflow: hidden;
position: relative;
}
.features .mask .picture {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.features .mask .picture .item {
width: 100%;
height: 100%;
position: absolute;
transition: opacity 2s ease 0s;
z-index: 1;
}
}
@media (min-width: 1200px){
.features .mask {
width: 100%;
height: 560px;
overflow: hidden;
position: relative;
}
.features .mask .picture {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.features .mask .picture .item {
width: 100%;
height: 100%;
position: absolute;
transition: opacity 2s ease 0s;
z-index: 1;
}
}
/* ----- feature-01 ----- */
.feature-01 {
position: relative;
z-index: 10;
width: 100%;
height: auto;
transition: opacity 3s ease 0s;
}
.feature-01.text {
padding-top: 4px;
padding-bottom: 64px;
background: linear-gradient(to bottom,rgba(255,255,255,0.0),rgba(255,255,255,1.0) 32px,rgba(255,255,255,1.0));
}
.feature-01.hidden {
opacity: 0;
}
.feature-01.show {
opacity: 1;
}
.feature-01:after {
content: "";
clear: both;
display: block;
}
.feature-01 h2 {
font-size: 20px;
margin-top: 16px;
color: rgba(85, 85, 85, 1.0);
}
.feature-01 p {
margin-top: 16px;
font-size: 16px;
line-height: 1.5;
color: rgba(85, 85, 85, 1.0);
}
.feature-01 a {
margin-top: 16px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
background: rgba(85, 85, 85, 1.0);
color: rgba(255, 255, 255, 1.0);
}
.feature-01 a:after {
content: "";
clear: both;
display: block;
}
.feature-01 a .material-icons {
float: right;
vertical-align: middle;
}
.feature-01 a:link,
.feature-01 a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.feature-01 a:hover,
.feature-01 a:active {
text-decoration: none;
background: rgba(120, 120, 120, 1.0);
}
@media (min-width: 768px){
.feature-01 .container {
max-width: 768px;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 992px){
.feature-01 {
position: absolute;
z-index: 10;
width: 100%;
height: 560px;
transition: opacity 3s ease 0s;
}
.feature-01 .container {
max-width: 890px;
padding-left: 0;
padding-right: 0;
}
.feature-01.text {
padding-top: 0;
padding-bottom: 0;
background: none;
}
.feature-01 h2 {
font-size: 32px;
margin-top: 64px;
color: rgba(85, 85, 85, 1.0);
}
.feature-01 p {
margin-top: 32px;
font-size: 16px;
line-height: 2;
color: rgba(85, 85, 85, 1.0);
}
.feature-01 a {
margin-top: 144px;
width: 200px;
padding: 8px;
display: block;
text-align: center;
background: rgba(85, 85, 85, 1.0);
color: rgba(255, 255, 255, 1.0);
}
}
@media (min-width: 1200px){
.feature-01 .container {
max-width: 1140px;
padding-left: 0;
padding-right: 0;
}
}
/* ----- feature-02 ----- */
.feature-02 {
position: relative;
z-index: 10;
width: 100%;
height: auto;
transition: opacity 3s ease 0s;
}
.feature-02.hidden {
opacity: 1;
}
.feature-02.show {
opacity: 1;
}
.feature-02:after {
content: "";
clear: both;
display: block;
}
.feature-02.text {
padding-top: 4px;
padding-bottom: 64px;
background: linear-gradient(to bottom,rgba(255,255,255,0.0),rgba(255,255,255,1.0) 32px,rgba(255,255,255,1.0));
}
.feature-02 h2{
margin-top: 16px;
font-size: 20px;
line-height: 1.57;
color: rgba(85, 85, 85, 1.0);
}
.feature-02 h2 .pc-only {
display: none;
}
.feature-02 p {
margin-top: 16px;
font-size: 16px;
line-height: 1.75;
color: rgba(85, 85, 85, 1.0);
}
.feature-02 a {
margin-top: 16px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(85, 85, 85, 1.0);
color: rgba(85, 85, 85, 1.0);
}
.feature-02 a:after {
content: "";
clear: both;
display: block;
}
.feature-02 a .material-icons {
float: right;
vertical-align: middle;
}
.feature-02 a:link,
.feature-02 a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.feature-02 a:hover,
.feature-02 a:active {
text-decoration: none;
background: rgba(90, 90, 90, 1.0);
}
@media (min-width: 768px){
.feature-02 .container {
max-width: 768px;
height: auto;
padding: 0;
position: relative;
right: 0;
}
}
@media (min-width: 992px){
.feature-02 {
position: absolute;
z-index: 10;
width: 100%;
height: 560px;
transition: opacity 3s ease 0s;
}
.feature-02 .container {
max-width: 428px;
height: 560px;
padding: 32px 64px;
position: absolute;
right: 0;
background: rgba(0, 0, 0, 0.70);
}
.feature-02.hidden {
opacity: 0;
}
.feature-02.show {
opacity: 1;
}
.feature-02.text {
padding-top: 0;
padding-bottom: 0;
background: none;
}
.feature-02 h2{
margin-top: 48px;
font-size: 28px;
line-height: 1.57;
color: rgba(255, 255, 255, 1.0);
}
.feature-02 h2 .pc-only {
display: block;
}
.feature-02 p {
margin-top: 32px;
font-size: 16px;
line-height: 1.75;
color: rgba(255, 255, 255, 1.0);
}
.feature-02 a {
margin-top: 32px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(255, 255, 255, 1.0);
color: rgba(255, 255, 255, 1.0);
}
}
@media (min-width: 1200px){
.feature-02 .container {
max-width: 428px;
padding: 32px 64px;
position: absolute;
right: 0;
background: rgba(0, 0, 0, 0.70);
}
}
/* ----- feature-03 ----- */
.feature-03 {
position: relative;
z-index: 10;
width: 100%;
height: auto;
transition: opacity 3s ease 0s;
}
.feature-03.hidden {
opacity: 1;
}
.feature-03.show {
opacity: 1;
}
.feature-03:after {
content: "";
clear: both;
display: block;
}
.feature-03.text {
padding-top: 4px;
padding-bottom: 64px;
background: linear-gradient(to bottom,rgba(255,255,255,0.0),rgba(255,255,255,1.0) 32px,rgba(255,255,255,1.0));
}
.feature-03 h2 {
margin-top: 16px;
font-size: 20px;
line-height: 1.57;
color: rgba(85, 85, 85, 1.0);
}
.feature-03 h2 .pc {
display: none;
}
.feature-03 h2 br{
display: none;
}
.feature-03 h2 .sp {
display: inline-block;
width: 79px;
height: 36px;
margin: 0;
padding: 0 8px 0 0;
vertical-align: bottom;
}
.feature-03 p {
margin-top: 16px;
font-size: 16px;
line-height: 1.75;
color: rgba(85, 85, 85, 1.0);
}
.feature-03 a {
margin-top: 16px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(85, 85, 85, 1.0);
color: rgba(85, 85, 85, 1.0);
}
.feature-03 a:after {
content: "";
clear: both;
display: block;
}
.feature-03 a .material-icons {
float: right;
vertical-align: middle;
}
.feature-03 a:link,
.feature-03 a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.feature-03 a:hover,
.feature-03 a:active {
text-decoration: none;
background: rgba(90, 90, 90, 1.0);
}
.feature-03 a.plan {
margin-top: 16px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(120, 120, 120, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
.feature-03 a.plan:link,
.feature-03 a.plan:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.feature-03 a.plan:hover,
.feature-03 a.plan:active {
text-decoration: none;
background: rgba(150, 150, 150, 1.0);
}
@media (min-width: 768px){
.feature-03 .container {
max-width: 768px;
height: auto;
padding: 0;
position: relative;
left: 0;
}
}
@media (min-width: 992px){
.feature-03 {
position: absolute;
z-index: 10;
width: 100%;
height: 560px;
transition: opacity 3s ease 0s;
}
.feature-03.hidden {
opacity: 0;
}
.feature-03.show {
opacity: 1;
}
.feature-03 .container {
max-width: 428px;
height: 560px;
padding: 64px 64px 0 64px;
position: absolute;
left: 0;
background: rgba(0, 0, 0, 0.70);
}
.feature-03.text {
padding-top: 0;
padding-bottom: 0;
background: none;
}
.feature-03 h2 {
margin-top: 48px;
font-size: 20px;
line-height: 1.57;
color: rgba(255, 255, 255, 1.0);
}
.feature-03 h2 .pc {
display: inline-block;
padding: 0 0 5px 0;
}
.feature-03 h2 br{
display: block;
}
.feature-03 h2 .sp {
display: none;
}
.feature-03 p {
margin-top: 32px;
font-size: 16px;
line-height: 1.75;
color: rgba(255, 255, 255, 1.0);
}
.feature-03 a {
margin-top: 32px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(255, 255, 255, 1.0);
color: rgba(255, 255, 255, 1.0);
}
.feature-03 a:after {
content: "";
clear: both;
display: block;
}
.feature-03 a .material-icons {
float: right;
vertical-align: middle;
}
.feature-03 a:link,
.feature-03 a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.feature-03 a:hover,
.feature-03 a:active {
text-decoration: none;
background: rgba(90, 90, 90, 1.0);
}
.feature-03 a.plan {
margin-top: 32px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(120, 120, 120, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
.feature-03 a.plan:link,
.feature-03 a.plan:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.feature-03 a.plan:hover,
.feature-03 a.plan:active {
text-decoration: none;
background: rgba(150, 150, 150, 1.0);
}
}
@media (min-width: 1200px){
.feature-03 .container {
max-width: 428px;
height: 560px;
padding: 64px 64px 0 64px;
position: absolute;
left: 0;
background: rgba(0, 0, 0, 0.70);
}
}
/* ===== plan-ranking ===== */
.plan-ranking {
background: rgba(255, 255, 255, 1.0);
padding-top: 24px;
padding-bottom: 48px;
}
.plan-ranking .container {
padding-top: 0;
padding-left: 0;
padding-right: 0;
max-width: 100%;
}
.plan-ranking h2.ranking-title{
text-align: center;
font-size: 18px;
margin: 0;
padding: 24px 0;
color: rgba(85, 85, 85, 1.0);
background: rgba(189, 44, 42, 0.04);
}
.plan-ranking .container:after {
content: "";
clear: both;
display: block;
}
@media (min-width: 768px){
.plan-ranking {
padding-top: 24px;
padding-bottom: 24px;
}
.plan-ranking .container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
}
@media (min-width: 992px){
.plan-ranking {
background: rgba(189, 44, 42, 0.04);
padding-top: 56px;
padding-bottom: 56px;
}
.plan-ranking .container {
max-width: 992px;
padding-left: 0;
padding-right: 0;
padding-top: 24px;
}
.plan-ranking h2.ranking-title{
text-align: center;
font-size: 24px;
margin: 0;
padding: 0;
color: rgba(85, 85, 85, 1.0);
background: none;
}
}
@media (min-width: 1200px){
.plan-ranking .container {
max-width: 1182px;
padding-left: 0;
padding-right: 0;
padding-top: 24px;
}
}
/* ----- .ranking ----- */
.ranking {
position: relative;
margin-left: 0;
width: 100%;
padding: 8px 8px 8px 8px;
background: rgba(255, 255, 255, 1.0);
}
.container .ranking:nth-child(even) {
background: rgba(189, 44, 42, 0.04);
}
.container .ranking:nth-child(even):hover {
background: rgba(189, 44, 42, 0.08);
}
.ranking .inner:after {
content: "";
clear: both;
display: block;
}
.plan-ranking .ranking:first-child {
margin-left: 0;
}
.ranking .ranking-icon {
display: none;
}
.ranking .ranking-pict {
width: 100px;
height: 75px;
float: left;
margin-right: 8px;
}
.ranking h3 {
font-size: 16px;
margin: 0;
padding: 0;
line-height: 1.5;
color: rgba(85, 85, 85, 1.0);
}
.ranking span {
font-size: 14px;
font-weight: bold;
color: rgba(130, 130, 130, 1.0);
}
.ranking p {
font-size: 14px;
margin: 0;
padding: 8px 0 0 0;
line-height: 1.75;
color: rgba(85, 85, 85, 1.0);
display: none;
}
.ranking a.ranking-btn {
display: none;
}
.ranking a.ranking-btn:after {
content: "";
clear: both;
display: block;
}
.ranking a.ranking-btn .material-icons {
float: right;
vertical-align: middle;
}
.ranking a.ranking-btn:link,
.ranking a.ranking-btn:visited{
text-decoration: none;
}
.ranking a.ranking-btn:hover,
.ranking a.ranking-btn:active {
text-decoration: none;
}
.ranking:hover {
background: rgba(189, 44, 42, 0.08);
cursor: pointer;
}
.plan-ranking-button {
display: block;
padding-top: 16px;
text-align: center;
}
.plan-ranking-button a {
margin: 0 auto;
width: 240px;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(150, 150, 150, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
.plan-ranking-button a:after {
content: "";
clear: both;
display: block;
}
.plan-ranking-button a .material-icons {
float: right;
vertical-align: middle;
}
.plan-ranking-button a:link,
.plan-ranking-button a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.plan-ranking-button a:hover,
.plan-ranking-button a:active {
text-decoration: none;
background: rgba(150, 150, 150, 1.0);
}
@media (min-width: 768px){
}
@media (min-width: 992px){
.ranking {
position: relative;
float: left;
margin-left: 12px;
width: 320px;
padding: 24px 24px 80px 24px;
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
.container .ranking:nth-child(even) {
background: rgba(255, 255, 255, 1.0);
}
.container .ranking:nth-child(even):hover {
background: rgba(189, 44, 42, 0.08);
}
.ranking .inner:after {
content: "";
clear: both;
display: none;
}
.ranking .ranking-pict {
width: 272px;
height: 203.2px;
float: none;
margin-right: 0px;
}
.ranking span {
display: none;
}
.plan-ranking .ranking:first-child {
margin-left: 0;
}
.ranking .ranking-icon {
display: block;
position: absolute;
top: 12px;
left: 12px;
z-index: 10;
}
.ranking h3 {
font-size: 20px;
margin: 0;
padding: 16px 0 0 0;
line-height: 1.5;
color: rgba(85, 85, 85, 1.0);
}
.ranking p {
font-size: 14px;
margin: 0;
padding: 8px 0 0 0;
line-height: 1.75;
color: rgba(85, 85, 85, 1.0);
display: block;
}
.ranking a.ranking-btn {
position: absolute;
bottom: 24px;
left: 24px;
margin: 0;
width: 272px;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(160, 160, 160, 1.0);
color: rgba(85, 85, 85, 1.0);
}
.ranking a.ranking-btn:after {
content: "";
clear: both;
display: block;
}
.ranking a.ranking-btn .material-icons {
float: right;
vertical-align: middle;
}
.ranking a.ranking-btn:link,
.ranking a.ranking-btn:visited{
text-decoration: none;
}
.ranking a.ranking-btn:hover,
.ranking a.ranking-btn:active {
text-decoration: none;
}
.ranking:hover {
background: rgba(189, 44, 42, 0.08);
cursor: pointer;
}
.plan-ranking-button {
display: block;
padding-top: 32px;
text-align: center;
}
.plan-ranking-button a {
margin: 0 auto;
width: 240px;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(150, 150, 150, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
.plan-ranking-button a:after {
content: "";
clear: both;
display: block;
}
.plan-ranking-button a .material-icons {
float: right;
vertical-align: middle;
}
.plan-ranking-button a:link,
.plan-ranking-button a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.plan-ranking-button a:hover,
.plan-ranking-button a:active {
text-decoration: none;
background: rgba(150, 150, 150, 1.0);
}
}
@media (min-width: 1200px){
.ranking {
position: relative;
float: left;
margin-left: 12px;
width: 386px;
padding: 24px 24px 80px 24px;
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
.ranking .ranking-pict {
width: 340px;
height: 254px;
}
.ranking a.ranking-btn {
position: absolute;
bottom: 24px;
left: 24px;
margin: 0;
width: 340px;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(160, 160, 160, 1.0);
color: rgba(85, 85, 85, 1.0);
}
}
/* ===== sns ===== */
.sns {
padding-top: 0px;
}
.sns .container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.sns .container:after {
content: "";
clear: both;
display: block;
}
.sns .container .fb.pc {
display: none;
}
.sns .container .fb.sp {
display: block;
width: 304px;
margin: 0;
padding-left: 0;
}
.sns .container .banners {
float: none;
}
.sns .container .banners h2.sp {
text-align: center;
font-size: 18px;
margin: 0;
padding: 24px 0;
color: rgba(85, 85, 85, 1.0);
background: rgba(189, 44, 42, 0.04);
}
.sns .container .banners .inner {
width: 302px;
margin: 16px auto;
}
.sns .container .banners .fb-logo {
padding: 8px 0 16px 0;
width: 132px;
height: 61px;
}
.sns .container .banners p {
padding-top: 24px;
font-size: 14px;
}
.sns .container .banners p.pc {
display: none;
}
.sns .container .banners .fb-button {
padding-top: 32px;
}
.sns .container .banners .fb-button a {
margin: 0;
width: 302px;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(150, 150, 150, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
.sns .container .banners .fb-button a:after {
content: "";
clear: both;
display: block;
}
.sns .container .banners .fb-button a .material-icons {
float: right;
vertical-align: middle;
}
.sns .container .banners .fb-button a:link,
.sns .container .banners .fb-button a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.sns .container .banners .fb-button a:hover,
.sns .container .banners .fb-button a:active {
text-decoration: none;
background: rgba(150, 150, 150, 1.0);
}
.sns .container .buttons {
padding-top: 24px;
}
.sns .container .buttons a {
margin: 0 0 0 16px;
padding: 0;
width: 64px;
height: 64px;
display: block;
text-align: center;
float: left;
}
.sns .container .buttons a:first-child {
margin-left: 0;
}
.sns .container .buttons a:after {
content: "";
clear: both;
display: block;
}
.sns .container .buttons a .material-icons {
float: right;
vertical-align: middle;
}
.sns .container .buttons a:link,
.sns .container .buttons a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.sns .container .buttons a:hover,
.sns .container .buttons a:active {
text-decoration: none;
background: rgba(220, 220, 220, 1.0);
}
@media (min-width: 768px){
.sns .container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
margin: 0;
}
}
@media (min-width: 992px){
.sns {
padding-top: 56px;
}
.sns .container {
max-width: 992px;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
}
.sns .container .banners {
margin-left: 48px;
float: left;
width: 444px;
}
.sns .container .banners .inner {
width: 100%;
margin: 0;
}
.sns .container .banners .fb-logo {
width: 232px;
height: 65px;
padding: 0;
}
.sns .container .banners h2.sp {
display: none;
}
.sns .container .fb.pc {
display: block;
float: left;
width: 500px;
padding-left: 35px;
}
.sns .container .fb.sp {
display: none;
}
.sns .container .banners p.pc {
display: block;
padding-top: 24px;
font-size: 14px;
}
.sns .container .buttons a {
margin: 0;
padding: 0;
width: 64px;
height: 64px;
display: block;
text-align: center;
float: left;
}
}
@media (min-width: 1200px){
.sns .container {
max-width: 1048px;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
}
.sns .container .banners {
margin-left: 48px;
float: left;
width: 500px;
}
}
/* ===== top-topic ===== */
.top-topic {
margin-top: 32px;
padding-top: 0px;
border-top: solid 1px rgba(235, 235, 235, 1.0);
}
.top-topic h2 {
text-align: center;
font-size: 18px;
margin: 0;
padding: 24px 0;
color: rgba(85, 85, 85, 1.0);
background: rgba(189, 44, 42, 0.04);
}
.top-topic .buttons:after {
content: "";
clear: both;
display: block;
}
.top-topic .buttons .item {
display: block;
width: 100%;
float: none;
position: relative;
margin-left: 0;
padding: 8px;
border-bottom: solid 1px rgba(235, 235, 235, 1.0);
}
.top-topic .buttons .item:after {
content: "";
clear: both;
display: block;
}
.top-topic .buttons .item a {
display: block;
width: 100%;
height: auto;
}
.top-topic .buttons .item a:link,
.top-topic .buttons .item a:visited {
text-decoration: none;
}
.top-topic .buttons .item a:hover,
.top-topic .buttons .item a:active {
text-decoration: none;
color: rgba(189,44,42,1.0);
}
.top-topic .buttons .item img {
display: block;
width: 100px;
height: auto;
float: left;
position: relative;
margin-left: 0;
margin-right: 8px;
background: #fff;
}
.top-topic .buttons .item p {
padding-top: 8px;
margin-left: 116px;
}
@media (min-width: 992px){
.top-topic {
max-width: 992px;
padding: 56px 0 0 0;
margin: 0 auto;
border-top: none;
}
.top-topic .buttons .item {
display: block;
width: 236px;
float: left;
margin-left: 16px;
padding: 0;
border-bottom: none;
}
.top-topic .buttons .item:first-child {
margin-left: 0;
}
.top-topic .buttons .item img {
display: block;
width: 100%;
height: auto;
float: none;
position: relative;
margin-left: 0;
margin-right: 8px;
background: #fff;
}
.top-topic .buttons .item p {
padding-top: 8px;
margin-left: 0;
}
}
@media (min-width: 1200px){
.top-topic {
max-width: 1168px;
padding: 56px 0 0 0;
}
.top-topic .buttons .item {
width: 280px;
}
}
/* ===== hotel-stay ===== */
.hotel-stay {
padding-top: 32px;
}
.hotel-stay h2 {
text-align: center;
font-size: 18px;
margin: 0;
padding: 24px 0;
color: rgba(85, 85, 85, 1.0);
background: rgba(189, 44, 42, 0.04);
}
.hotel-stay .buttons:after {
content: "";
clear: both;
display: block;
}
.hotel-stay .buttons a {
display: block;
width: 100%;
height: 116px;
float: none;
position: relative;
margin-left: 0;
padding: 8px;
border-bottom: solid 1px rgba(235, 235, 235, 1.0);
}
.hotel-stay .buttons a:after {
content: "";
clear: both;
display: block;
}
.hotel-stay .buttons a:first-child {
margin-left: 0;
}
.hotel-stay .buttons a img {
display: block;
width: 100px;
height: 100px;
float: left;
position: relative;
margin-left: 0;
margin-right: 8px;
}
.hotel-stay .buttons a h3 {
display: none;
}
.hotel-stay .buttons a h3 span {
font-size: 22px;
}
.hotel-stay .buttons a .mask {
display: block;
width: auto;
height: 100px;
position: relative;
top: 0;
float: left;
}
.hotel-stay .buttons a:hover h3 {
display: none;
}
.hotel-stay .buttons a:hover .mask {
top: 0px;
}
.hotel-stay .buttons a .mask h4 {
color: rgba(85, 85, 85, 1.0);
font-size: 16px;
line-height: 24px;
margin: 0;
padding: 26px 0 0 0;
}
.hotel-stay .buttons a .mask h4.p1 {
padding: 20px 0 0 0;
}
.hotel-stay .buttons a .mask p {
margin: 0;
padding: 0;
color: rgba(85, 85, 85, 1.0);
font-size: 12px;
line-height: 18px;
}
@media (min-width: 768px){
.hotel-stay .buttons {
max-width: 100%;
padding: 0;
margin: 0 auto;
}
}
@media (min-width: 992px){
.hotel-stay {
padding-top: 80px;
}
.hotel-stay h2 {
text-align: center;
font-size: 20px;
margin: 0;
padding: 16px 0 0 0;
line-height: 1.5;
color: rgba(85, 85, 85, 1.0);
background: none;
}
.hotel-stay .buttons {
max-width: 992px;
padding: 24px 0 0 0;
margin: 0 auto;
}
.hotel-stay .buttons a {
display: block;
width: 236px;
height: 200px;
float: left;
overflow: hidden;
position: relative;
margin-left: 16px;
padding: 0;
}
.hotel-stay .buttons a img {
display: block;
width: 100%;
height: 100%;
float: none;
position: absolute;
top: 0;
left: 0;
margin-left: 0;
margin-right: 0;
}
.hotel-stay .buttons a h3 {
display: block;
position: absolute;
font-size: 24px;
line-height: 28px;
color: rgba(255, 255, 255, 1.0);
text-shadow: 1px 1px 6px rgba(0, 0, 0, 1.0);
left: 16px;
bottom: 6px;
}
.hotel-stay .buttons a .mask {
display: block;
width: 236px;
height: 200px;
position: absolute;
top: 200px;
transition: top ease 0.5s;
background: rgba(0, 0, 0, 0.6);
text-align: center;
}
.hotel-stay .buttons a .mask h4 {
color: rgba(255, 255, 255, 1.0);
font-size: 20px;
line-height: 28px;
margin: 0;
padding: 74px 0 0 0;
}
.hotel-stay .buttons a .mask h4.p1 {
padding: 62px 0 0 0;
}
.hotel-stay .buttons a .mask p {
margin: 0;
padding: 0;
color: rgba(255, 255, 255, 1.0);
font-size: 16px;
line-height: 24px;
}
}
@media (min-width: 1200px){
.hotel-stay .buttons {
max-width: 1168px;
padding: 24px 0 0 0;
margin: 0 auto;
}
.hotel-stay .buttons a {
display: block;
width: 280px;
height: 238px;
float: left;
overflow: hidden;
position: relative;
margin-left: 16px;
}
.hotel-stay .buttons a h3 {
position: absolute;
font-size: 30px;
line-height: 32px;
color: rgba(255, 255, 255, 1.0);
text-shadow: 1px 1px 6px rgba(0, 0, 0, 1.0);
left: 16px;
bottom: 6px;
}
.hotel-stay .buttons a .mask {
display: block;
width: 280px;
height: 238px;
position: absolute;
top: 238px;
transition: top ease 0.5s;
background: rgba(0, 0, 0, 0.6);
text-align: center;
}
.hotel-stay .buttons a .mask h4 {
color: rgba(255, 255, 255, 1.0);
font-size: 24px;
line-height: 32px;
margin: 0;
padding: 92px 0 0 0;
}
.hotel-stay .buttons a .mask h4.p1 {
padding: 80px 0 0 0;
}
}
/* ===== activity ===== */
.activity-list {
padding-top: 32px;
}
.activity-list h2 {
text-align: center;
font-size: 18px;
margin: 0;
padding: 24px 0;
color: rgba(85, 85, 85, 1.0);
background: rgba(189, 44, 42, 0.04);
}
.activity-list .buttons:after {
content: "";
clear: both;
display: block;
}
.activity-list .buttons a {
display: block;
width: 100%;
height: 116px;
float: none;
position: relative;
margin-left: 0;
padding: 8px;
border-bottom: solid 1px rgba(235, 235, 235, 1.0);
}
.activity-list .buttons a:after {
content: "";
clear: both;
display: block;
}
.activity-list .buttons a:first-child {
margin-left: 0;
}
.activity-list .buttons a img {
display: block;
width: 100px;
height: 100px;
float: left;
position: relative;
margin-left: 0;
margin-right: 8px;
}
.activity-list .buttons a h3 {
position: absolute;
font-size: 30px;
line-height: 30px;
color: rgba(255, 255, 255, 1.0);
text-shadow: 1px 1px 6px rgba(0, 0, 0, 1.0);
left: 16px;
bottom: 6px;
}
.activity-list .buttons a h3 {
display: none;
}
.activity-list .buttons a h3 span {
font-size: 22px;
}
.activity-list .buttons a .mask {
display: block;
width: auto;
height: 110px;
position: relative;
top: 0;
float: left;
}
.activity-list .buttons a:hover h3 {
display: none;
}
.activity-list .buttons a:hover .mask {
top: 0px;
}
.activity-list .buttons a .mask h4 {
color: rgba(85, 85, 85, 1.0);
font-size: 16px;
line-height: 24px;
margin: 0;
padding: 26px 0 0 0;
}
.activity-list .buttons a .mask h4.p1 {
padding: 16px 0 0 0;
}
.activity-list .buttons a .mask h4.p2 {
padding: 40px 0 0 0;
}
.activity-list .buttons a .mask h4.p3 {
padding: 18px 0 0 0;
}
.activity-list .buttons a .mask p {
margin: 0;
padding: 0;
color: rgba(85, 85, 85, 1.0);
font-size: 12px;
line-height: 18px;
}
@media (min-width: 768px){
.activity-list .buttons {
max-width: 100%;
padding: 0;
margin: 0 auto;
}
}
@media (min-width: 992px){
.activity-list {
padding-top: 80px;
}
.activity-list h2 {
text-align: center;
font-size: 20px;
margin: 0;
padding: 16px 0 0 0;
line-height: 1.5;
color: rgba(85, 85, 85, 1.0);
background: none;
}
.activity-list .buttons {
max-width: 992px;
padding: 24px 0 0 0;
margin: 0 auto;
}
.activity-list .buttons a {
display: block;
width: 188px;
height: 188px;
float: left;
overflow: hidden;
position: relative;
margin-left: 12px;
padding: 0;
}
.activity-list .buttons a img {
display: block;
width: 100%;
height: 100%;
float: none;
position: absolute;
top: 0;
left: 0;
margin-left: 0;
margin-right: 0;
}
.activity-list .buttons a h3 {
display: block;
position: absolute;
font-size: 24px;
line-height: 28px;
color: rgba(255, 255, 255, 1.0);
text-shadow: 1px 1px 6px rgba(0, 0, 0, 1.0);
left: 16px;
bottom: 6px;
}
.activity-list .buttons a h3 span {
font-size: 22px;
}
.activity-list .buttons a .mask {
display: block;
width: 188px;
height: 188px;
position: absolute;
top: 188px;
transition: top ease 0.5s;
background: rgba(0, 0, 0, 0.6);
text-align: center;
}
.activity-list .buttons a .mask h4 {
color: rgba(255, 255, 255, 1.0);
font-size: 20px;
line-height: 28px;
margin: 0;
padding: 72px 0 0 0;
}
.activity-list .buttons a .mask h4.p1 {
padding: 54px 0 0 0;
}
.activity-list .buttons a .mask h4.p2 {
padding: 80px 0 0 0;
}
.activity-list .buttons a .mask h4.p3 {
padding: 56px 0 0 0;
}
.activity-list .buttons a .mask p {
margin: 0;
padding: 0;
color: rgba(255, 255, 255, 1.0);
font-size: 16px;
line-height: 24px;
}
}
@media (min-width: 1200px){
.activity-list .buttons {
max-width: 1168px;
padding: 24px 0 0 0;
margin: 0 auto;
}
.activity-list .buttons a {
display: block;
width: 224px;
height: 224px;
float: left;
overflow: hidden;
position: relative;
margin-left: 12px;
}
.activity-list .buttons a h3 {
position: absolute;
font-size: 30px;
line-height: 30px;
color: rgba(255, 255, 255, 1.0);
text-shadow: 1px 1px 6px rgba(0, 0, 0, 1.0);
left: 16px;
bottom: 6px;
}
.activity-list .buttons a h3 span {
font-size: 22px;
}
.activity-list .buttons a .mask {
display: block;
width: 224px;
height: 224px;
position: absolute;
top: 224px;
transition: top ease 0.5s;
background: rgba(0, 0, 0, 0.6);
text-align: center;
}
.activity-list .buttons a .mask h4 {
color: rgba(255, 255, 255, 1.0);
font-size: 24px;
line-height: 32px;
margin: 0;
padding: 88px 0 0 0;
}
.activity-list .buttons a .mask h4.p1 {
padding: 80px 0 0 0;
}
.activity-list .buttons a .mask h4.p2 {
padding: 96px 0 0 0;
}
.activity-list .buttons a .mask h4.p3 {
padding: 72px 0 0 0;
}
}
/* ===== contact ===== */
.contact-information {
padding-top: 48px;
}
.contact-information .container:after {
content: "";
clear: both;
display: block;
}
.contact-information .container .contact-logo {
width: 200px;
margin: 0 auto;
}
.contact-information .container .contact-text {
width: 100%;
float: none;
margin-left: 0;
}
.contact-information .container .contact-text h3 {
font-size: 16px;
line-height: 22px;
margin: 0;
padding: 16px 0 0 0;
}
.contact-information .container .contact-text h4 {
font-size: 18px;
line-height: 20px;
margin: 16px 0 0 0;
padding: 0;
}
.contact-information .container .contact-text p {
font-size: 13px;
line-height: 18px;
margin: 8px 0 0 0;
padding: 0;
}
.contact-information .container .contact-text p em{
font-size: 18px;
line-height: 26px;
font-style: normal;
color: rgba(189, 44, 42, 1.0);
margin: 0;
padding: 0;
}
@media (min-width: 768px){
.contact-information .container {
max-width: 768px;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 992px){
.contact-information {
padding-top: 80px;
}
.contact-information .container {
max-width: 992px;
padding-left: 0;
padding-right: 0;
}
.contact-information .container .contact-logo {
width: 280px;
float: left;
margin: 0;
text-align: right;
}
.contact-information .container .contact-text {
width: 620px;
float: left;
margin-left: 30px;
}
.contact-information .container .contact-text h3 {
font-size: 24px;
line-height: 26px;
margin: 0;
padding: 0;
}
.contact-information .container .contact-text h4 {
font-size: 18px;
line-height: 20px;
margin: 16px 0 0 0;
padding: 0;
}
.contact-information .container .contact-text p {
font-size: 15px;
line-height: 18px;
margin: 8px 0 0 0;
padding: 0;
}
.contact-information .container .contact-text p em {
font-size: 24px;
line-height: 26px;
font-style: normal;
color: rgba(189, 44, 42, 1.0);
margin: 0;
padding: 0;
}
}
@media (min-width: 1200px){
.contact-information .container {
max-width: 930px;
padding: 24px 0 0 0;
margin: 0 auto;
}
.contact-information .container .contact-logo {
width: 280px;
float: left;
margin: 0;
text-align: right;
}
.contact-information .container .contact-text {
width: 620px;
float: left;
margin-left: 30px;
}
}
/* ===== backtotop ===== */
.backToTop {
padding-top: 56px;
border-bottom: solid 15px rgba(0, 0, 0, 1.0);
}
@media (min-width: 768px){
.backToTop .container {
max-width: 768px;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 992px){
.backToTop .container {
max-width: 992px;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 1200px){
.backToTop .container {
max-width: 1200px;
padding: 24px 0 0 0;
margin: 0 auto;
}
}
.backToTop .container:after {
content: "";
clear: both;
display: block;
}
.backToTop .container a {
margin: 0;
padding: 8px 4px 0 8px;
width: 110px;
height: 32px;
font-size: 14px;
display: block;
text-align: center;
float: right;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 1.0);
}
.backToTop .container a:after {
content: "";
clear: both;
display: block;
}
.backToTop .container a .material-icons {
float: right;
vertical-align: middle;
}
.backToTop .container a:link,
.backToTop .container a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.backToTop .container a:hover,
.backToTop .container a:active {
text-decoration: none;
background: #444444;
}
/* ===== footer ===== */
.footer {
background: url(../img/footer-background.png) repeat top left;
padding-bottom: 24px;
}
.footer .container {
padding: 24px 16px 0 16px;
}
.footer .container:after {
content: "";
clear: both;
display: block;
}
.footer .container .list {
float: none;
width: 100%;
}
.footer .container .list ul {
margin: 0;
padding: 0;
}
.footer .container .list ul li {
margin: 0;
padding: 0;
list-style: none;
}
.footer .container .list ul li a {
font-size: 15px;
display: block;
padding: 8px 8px;
}
.footer .container .list ul li a:link,
.footer .container .list ul li a:visited {
text-decoration: none;
}
.footer .container .list ul li a:hover,
.footer .container .list ul li a:active {
background: rgba(230, 230, 230, 1.0);
}
.footer .container .list ul li a .material-icons{
vertical-align: middle;
font-size: 15px;
}
.footer .container .list ul li ul{
margin: 0 0 0 2em;
padding: 0;
}
.footer .container .list ul li ul li{
margin: 0;
padding: 0;
list-style: disc;
}
.footer .container .list ul li ul li a:link,
.footer .container .list ul li ul li a:visited {
text-decoration: none;
color: rgba(85, 85, 85, 1.0);
}
.footer .container .list ul li ul li a:hover,
.footer .container .list ul li ul li a:active {
background: rgba(230, 230, 230, 1.0);
}
@media (min-width: 768px){
.footer .container {
max-width: 768px;
padding: 24px 0 0 0;
}
}
@media (min-width: 992px){
.footer .container {
max-width: 992px;
padding: 24px 0 0 0;
margin: 0 auto;
}
.footer .container .list {
float: left;
width: 20%;
}
.footer .container .list ul li a {
font-size: 13px;
padding: 3px;
}
.footer .container .list ul li a .material-icons{
vertical-align: middle;
font-size: 13px;
}
}
@media (min-width: 1200px){
.footer .container {
max-width: 1200px;
padding: 24px 0 0 0;
margin: 0 auto;
}
}
/* ===== copyright ===== */
.copyright {
text-align: center;
padding: 8px 0;
font-size: 14px;
}
@media (min-width: 768px){
.copyright .container {
max-width: 768px;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 992px){
.copyright .container {
max-width: 992px;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 1200px){
.copyright .container {
max-width: 1200px;
padding: 24px 0 0 0;
margin: 0 auto;
}
}
/* ===== sp-header ===== */
.sp-header {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: rgba(255, 255, 255, 1.0);
z-index: 9998;
}
.sp-header .container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
@media (min-width: 768px){
.sp-header .container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 992px){
.sp-header {
display: none;
}
}
@media (min-width: 1200px){
.sp-header {
display: none;
}
}
.sp-header .container:after {
content: "";
clear: both;
display: block;
}
.sp-header .container .title {
float: left;
margin: 0;
padding: 12px 0 0 8px;
width: 175px;
height: 43.75px;
}
.sp-header .container .title img {
float: left;
width: 175px;
height: 43.75px;
}
.sp-header .container .menu-btn {
float: right;
display: block;
margin: 10px 12px 0 0;
width: 48px;
height: 48px;
padding-top: 2px;
border-radius: 4px;
font-size: 9px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
}
.sp-header .container .menu-btn .material-icons {
display: block;
font-size: 30px;
}
.sp-header .container .menu-btn:link,
.sp-header .container .menu-btn:visited {
background: rgba(0, 0, 0, 1.0);
color: rgba(255, 255, 255, 1.0);
}
.sp-header .container .menu-btn:hover,
.sp-header .container .menu-btn:active {
text-decoration: none;
background: rgba(80, 80, 80, 1.0);
color: rgba(255, 255, 255, 1.0);
}
.sp-header .container .plan-btn {
float: right;
display: block;
margin: 10px 16px 0 0;
width: 48px;
height: 48px;
padding-top: 2px;
margin-right: 12px;
border-radius: 4px;
font-size: 9px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
}
.sp-header .container .plan-btn .material-icons {
display: block;
font-size: 30px;
}
.sp-header .container .plan-btn:link,
.sp-header .container .plan-btn:visited {
background: rgba(0, 0, 0, 1.0);
color: rgba(255, 255, 255, 1.0);
}
.sp-header .container .plan-btn:hover,
.sp-header .container .plan-btn:active {
text-decoration: none;
background: rgba(80, 80, 80, 1.0);
color: rgba(255, 255, 255, 1.0);
}
/* ===== drawer-mask ===== */
.drawer-mask {
display: none;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
transition: opacity 0.5s;
opacity: 0;
}
body.openDrawer .drawer-mask {
display: block;
}
body.openDrawer .drawer-mask.show {
opacity: 1.0;
}
.drawer-mask .drawer-close-btn {
color:rgba(255, 255, 255, 1.0);
appearance: none;
border: none;
background: transparent;
display: block;
width: 56px;
height: 56px;
margin: 8px 0 0 8px;
padding: 0;
font-size: 12px;
text-align: center;
}
.drawer-mask .drawer-close-btn .material-icons {
display: block;
font-size: 40px;
}
/* ===== drawer ===== */
.drawer {
display: none;
position: fixed;
top: 0;
right: -236px;
width: 236px;
height: 100%;
background: rgba(255, 255, 255, 1.0);
transition: right 0.5s;
z-index: 10000;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
transition: right 0.25s;
}
body.openDrawer .drawer {
display: block;
}
body.openDrawer .drawer.show {
right: 0;
}
.drawer-inner {
display: block;
background: rgba(255, 255, 255, 1.0);
width: 236px;
padding: 0 16px 140px 16px;
}
@media (min-width: 768px){
.drawer {
display: block;
}
.drawer.show {
display: block;
right: 0px;
}
}
@media (min-width: 992px){
.drawer {
display: none;
}
}
@media (min-width: 1200px){
.drawer {
display: none;
}
}
.drawer .title,
.drawer .footer-title {
margin-top: 16px;
width: 204px;
height: 51px;
}
.drawer .title img,
.drawer .footer-title img {
width: 204px;
height: 51px;
}
.drawer .tel-btn,
.drawer .access-btn {
display: block;
padding: 4px;
border-radius: 4px;
text-align: center;
}
.drawer .tel-btn {
margin-top: 8px;
}
.drawer .access-btn {
margin-top: 8px;
}
.drawer .tel-btn:link,
.drawer .tel-btn:visited,
.drawer .access-btn:link,
.drawer .access-btn:visited {
color:rgba(255, 255, 255, 1.0);
text-decoration: none;
background: rgba(15, 181, 255, 1.0);
}
.drawer .tel-btn:hover,
.drawer .tel-btn:active,
.drawer .access-btn:hover,
.drawer .access-btn:active {
text-decoration: none;
background: rgba(15, 181, 255, 0.7);
}
.drawer .tel-btn span {
font-size: 14px;
}
.drawer .tel-btn .material-icons {
vertical-align: middle;
}
.drawer .tel-btn .tel-time {
display: inline;
font-size: 12px;
}
.drawer .list {
margin: 8px 0 0 0;
}
.drawer .list+.list {
margin-top: 0;
}
.drawer .list ul {
margin: 0;
padding: 0;
}
.drawer .list ul li {
margin: 0;
padding: 0;
list-style: none;
}
.drawer .list ul li a {
display: block;
font-size: 16px;
padding: 8px 0;
}
.drawer .list ul li a:link,
.drawer .list ul li a:visited {
text-decoration: none;
}
.drawer .list ul li a:hover,
.drawer .list ul li a:active {
background: rgba(230, 230, 230, 1.0);
}
.drawer .list ul li a .material-icons{
vertical-align: middle;
font-size: 16px;
}
.drawer .list ul li ul{
margin: 0 0 0 2em;
padding: 0;
}
.drawer .list ul li ul li{
margin: 0;
padding: 0;
list-style: disc;
}
.drawer .list ul li ul li a:link,
.drawer .list ul li ul li a:visited {
text-decoration: none;
color: rgba(85, 85, 85, 1.0);
}
.drawer .list ul li ul li a:hover,
.drawer .list ul li ul li a:active {
background: rgba(230, 230, 230, 1.0);
}
.drawer .footer-text {
font-size: 13px;
line-height: 1.5;
margin: 0;
padding: 0;
}
.drawer .sub-list ul {
margin: 0 0 0 2em;
padding: 0;
}
.drawer .sub-list ul li {
margin: 0;
padding: 0;
list-style: disc;
}
.drawer .sub-list ul li a {
display: block;
font-size: 16px;
padding: 8px 0;
}
.drawer .sub-list ul li a:link,
.drawer .sub-list ul li a:visited {
text-decoration: none;
color: rgba(85, 85, 85, 1.0);
}
.drawer .sub-list ul li a:hover,
.drawer .sub-list ul li a:active {
background: rgba(230, 230, 230, 1.0);
}
/* ===== content ===== */
.page .container {
padding: 0;
}
.page.room .container {
padding: 0;
}
.page.contact {
padding-top: 0;
}
/* ----- heading-01 ----- */
.page .heading-01 {
margin: 0;
padding: 0 16px;
}
.page .heading-01 h2 {
width: 100%px;
margin: 0;
padding-top: 24px;
font-size: 18px;
line-height: 28px;
font-weight: bold;
}
.page .heading-01 p {
width: 100%;
margin: 0;
padding-top: 24px;
font-size: 16px;
line-height: 28px;
}
/* ----- heading-02 ----- */
.page .heading-02 {
margin: 0;
padding: 0;
}
.page .heading-02 h2 {
text-align: center;
padding-top: 32px;
font-size: 20px;
line-height: 40px;
font-weight: bold;
}
/* ----- heading-03 ----- */
.page .heading-03 {
margin: 0;
padding: 24px 16px 0 16px;
}
.page .heading-03 h3 {
color: rgba(189, 44, 42, 1.0);
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-03 h2 {
font-size: 18px;
line-height: 22px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-03 p {
font-size: 16px;
line-height: 20px;
margin: 0;
padding: 4px 0 0 0;
}
/* ----- heading-04 ----- */
.page .heading-04 {
margin: 0;
padding: 56px 16px 0 16px;
}
.page .heading-04 h3 {
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-04 h2 {
font-size: 18px;
line-height: 22px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
/* ----- heading-05 ----- */
.page .heading-05 {
margin: 0;
padding: 56px 16px 0 16px;
}
.page .heading-05 h2 {
font-size: 18px;
line-height: 22px;
font-weight: normal;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-05 h2 span{
font-size: 14px;
line-height: 22px;
font-weight: normal;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-05 h3 {
font-size: 18px;
line-height: 22px;
font-weight: normal;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-05 h4 {
font-size: 18px;
line-height: 22px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-05 p {
font-size: 16px;
line-height: 28px;
font-weight: normal;
margin: 0;
padding: 8px 0 0 0;
color: rgba(189, 44, 42, 1.0);
}
/* ----- heading-06 ----- */
.page .heading-06 {
margin: 0;
padding: 56px 16px 0 16px;
}
.page .heading-06 h3 {
font-size: 18px;
line-height: 22px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
/* ----- heading-07 ----- */
.page .heading-07 {
margin: 0;
padding: 56px 16px 0 34px;
}
.page .heading-07 h3 {
font-size: 18px;
line-height: 22px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
/* ----- content-01 ----- */
.page .content-01 {
width: 100%;
height: auto;
margin: 0 0 0 0;
transition: background-color 0.5s;
}
.page .content-01+.content-01 {
margin: 56px 0 0 0;
}
.page .content-01 .text:after {
content: "";
clear: both;
display: block;
}
.page .content-01 .image {
width: 100%;
height: auto;
float: none;
}
.page .content-01 .text {
float: none;
margin-left: 0;
padding: 8px 16px 0 16px;
width: 100%;
}
.page .content-01 .text h4 {
color: rgba(189, 44, 42, 1.0);
font-size: 16px;
line-height: 18px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-01 .text h3 {
font-size: 18px;
line-height: 26px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-01 .text h5 {
color: rgba(105, 105, 105, 1.0);
font-size: 14px;
line-height: 18px;
margin: 0;
padding: 0 0 8px 0;
}
.page .content-01 .text p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 4px 0 0 0;
}
.page .content-01 .text a.button {
margin-top: 24px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(125, 125, 125, 1.0);
color: rgba(85, 85, 85, 1.0);
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
cursor: pointer;
}
.page .content-01 .text a.button:after {
content: "";
clear: both;
display: block;
}
.page .content-01 .text a.button .material-icons {
float: right;
vertical-align: middle;
}
.page .content-01 .text a.button:link,
.page .content-01 .text a.button:visited {
text-decoration: none;
background: rgba(250, 250, 250, 1.0);
}
.page .content-01 .text a.button:hover,
.page .content-01 .text a.button:active {
text-decoration: none;
background: #ededed;
}
/* ----- content-02 ----- */
.page .content-02 {
padding: 24px 16px 0 16px;
}
.page .content-02 h5 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin: 0;
padding: 16px 0 8px 0;
}
.page .content-02 h6 {
font-size: 12px;
line-height: 22px;
margin: 0;
padding: 16px 0 8px 0;
}
.page .content-02 p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 4px 0 0 0;
}
.page .content-02 p strong{
font-size: 20px;
line-height: 30px;
font-weight: normal;
margin: 0;
padding: 4px 0 0 0;
}
.page .content-02 img.image {
display: block;
margin: 16px 0;
width: 100%;
height: auto;
}
.page .content-02 .roommovie {
position: relative;
width: 100%;
}
@media (min-width: 768px){
.drawer {
display: block;
}
.drawer.show {
display: block;
right: 0px;
}
}
@media (min-width: 992px){
.drawer {
display: none;
}
}
@media (min-width: 1200px){
.drawer {
display: none;
}
}
.page .content-02 table {
font-size: 14px;
line-height: 26px;
width: 100%;
margin: 0 0 16px 0;
padding: 4px 16px 0 16px;
}
.page .content-02 table th {
border-bottom: solid 1px rgba(180, 180, 180, 1.0);
text-align: left;
font-weight: normal;
font-size: 14px;
padding: 4px 8px;
background: rgba(230, 230, 230, 1.0);
}
.page .content-02 table tr:first-child th,
.page .content-02 table tr:first-child td {
border-top: solid 1px rgba(180, 180, 180, 1.0);
}
.page .content-02 table td {
font-size: 14px;
text-align: left;
line-height: 26px;
padding: 4px 16px 4px 16px;
border-bottom: solid 1px rgba(180, 180, 180, 1.0);
}
.page .content-02 table td p {
font-size: 14px;
text-align: left;
line-height: 26px;
padding: 8px 0 0 0;
}
.page .content-02 table td p:first-child {
font-size: 14px;
text-align: left;
line-height: 26px;
padding: 0;
}
.page.access .container .content-02 .notice h3 {
font-size: 16px;
line-height: 20px;
margin: 16px 0 0 0;
padding: 0;
color: rgba(189, 44, 42, 1.0);
}
.page.access .container .content-02 .notice p {
font-size: 16px;
line-height: 22px;
margin: 8px 0 0 0;
padding: 0;
color: rgba(189, 44, 42, 1.0);
}
/*Riasページ お食事のご案内*/
.page .content-02 .riaslist01 {
display: flex;
justify-content: space-around;
padding: 20px 0 20px 0;
border-top: thin solid #6D6D6D;
border-bottom: thin solid #6D6D6D;
margin-bottom: 40px;
}
.riaslist01-1 {
padding: 10px;
font-size: 130%;
}
.riaslist01-1 a {
color: #4A4A4A;
border-bottom-style: none;
}
.page .content-02 .riaslist02 {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.riaslist02-2 {
}
.riaslist02-2 a:hover {
opacity: 0.5;
}
@media (max-width: 600px) {
.page .content-02 .riaslist01 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
padding: 20px 0 20px 0;
border-top: thin solid #6D6D6D;
border-bottom: thin solid #6D6D6D;
margin-bottom: 40px;
}
.riaslist01-1 {
padding: 10px;
font-size: 130%;
text-align: center;
}
.page .content-02 .riaslist02 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin-bottom: 20px;
}
.riaslist02-2 {
text-align: center;
padding: 10px 0 10px 0;
}
}
/* contact&recruit only */
.page.contact .container .content-02 h3,
.page.recruit .container .content-02.contact h3,{
font-size: 16px;
line-height: 22px;
margin: 0;
padding: 16px 0 0 0;
}
.page.contact .container .content-02 h4,
.page.recruit .container .content-02.contact h4 {
font-size: 18px;
line-height: 20px;
margin: 16px 0 0 0;
padding: 0;
}
.page.contact .container .content-02 p,
.page.recruit .container .content-02.contact p {
font-size: 14px;
line-height: 22px;
margin: 8px 0 0 0;
padding: 0;
}
.page.contact .container .content-02 p em,
.page.recruit .container .content-02.contact p em {
font-size: 18px;
line-height: 26px;
font-style: normal;
color: rgba(189, 44, 42, 1.0);
margin: 0;
padding: 0;
}
.page .content-02 .text a.button {
margin-top: 24px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(125, 125, 125, 1.0);
color: rgba(85, 85, 85, 1.0);
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
.page .content-02 .text a.button:after {
content: "";
clear: both;
display: block;
}
.page .content-02 .text a.button .material-icons {
float: right;
vertical-align: middle;
}
.page .content-02:hover .text a.button:link,
.page .content-02:hover .text a.button:visited,
.page .content-02:hover .text a.button:hover,
.page .content-02:hover .text a.button:active {
text-decoration: none;
background: rgba(250, 250, 250, 1.0);
}
.page .weddingcontent-02 {
padding: 24px 16px 0 16px;
text-align: center;
}
/* ----- content-03 ----- */
.page .content-03 {
padding: 48px 16px 0 16px;
}
.page .content-03.mt-0 {
padding: 16px 16px 0 16px;
}
.page .content-03:after {
content: "";
clear: both;
display: block;
}
.page .content-03 .unit-01 {
width: 48%;
float: left;
margin-left: 4%;
}
.page .content-03 .unit-01:first-child{
margin-left: 0;
}
.page .content-03 .unit-01 img{
width: 100%;
height: auto;
}
.page .content-03 .unit-02 {
width: 48%;
float: left;
margin-left: 4%;
padding: 4px;
border: solid 1px rgba(122, 122, 122, 1.0);
}
.page .content-03 .unit-02:first-child{
margin-left: 0;
}
.page .content-03 .unit-02 img{
width: 100%;
height: auto;
}
.page .content-03 .unit-01 p,
.page .content-03 .unit-02 p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 8px 0 0 0;
}
/* ----- content-04 ----- */
.page .content-04 {
padding: 48px 0 0 0;
}
.page .content-04+.content-04 {
padding-top: 0;
}
.page .content-04:after {
content: "";
clear: both;
display: block;
}
.page .content-04 .unit-01 {
width: 100%;
float: none;
margin-left: 0;
}
.page .content-04 .unit-01:first-child{
margin-left: 0;
}
.page .content-04 .unit-01 h3{
font-size: 14px;
line-height: 41px;
margin: 24px 0 0 0;
padding: 0 16px;
background: rgba(232, 232, 232, 1.0);
}
.page .content-04 .unit-01 p{
font-size: 14px;
line-height: 26px;
margin: 0;
padding: 4px 16px 0 16px;
}
.page .content-04 .unit-01 h6{
font-size: 12px;
line-height: 22px;
margin: 0;
padding: 16px 0 8px 14px;
}
/* ----- content-05 ----- */
.page .content-05 {
margin: 54px 16px 0 16px;
padding: 16px 16px 16px 16px;
border: solid 1px rgba(112, 112, 112, 1.0);
}
.page .content-05 h3 {
font-size: 14px;
line-height: 16px;
margin: 0 0 0 0;
padding: 0;
}
.page .content-05 p {
font-size: 14px;
line-height: 26px;
margin: 0;
padding: 6px 0 0 0;
}
/* ----- content-06 ----- */
.page .content-06 {
padding: 48px 0 0 0;
}
.page .content-06 {
padding-top: 0;
}
.page .content-06:after {
content: "";
clear: both;
display: block;
}
.page .content-06 .unit-01 {
width: 100%;
float: none;
margin-left: 0;
}
.page .content-06 .unit-01:first-child{
margin-left: 0;
}
.page .content-06 .unit-01 h3{
font-size: 14px;
line-height: 41px;
margin: 24px 0 0 0;
padding: 0 16px;
background: rgba(232, 232, 232, 1.0);
}
.page .content-06 .unit-01 p{
font-size: 14px;
line-height: 26px;
margin: 0;
padding: 16px 16px 0 16px;
}
.page .content-06 .unit-01 table {
font-size: 14px;
line-height: 26px;
width: 94%;
margin: 16px 3% 0 3%;
padding: 4px 16px 0 16px;
}
.page .content-06 .unit-01 table th {
border-bottom: solid 1px rgba(180, 180, 180, 1.0);
text-align: center;
}
.page .content-06 .unit-01 table td {
font-size: 14px;
text-align: center;
line-height: 26px;
padding: 4px 16px 0 16px;
border-bottom: solid 1px rgba(180, 180, 180, 1.0);
}
/* ----- content-07 ----- */
.page .content-07 {
margin: 26px 16px 0 16px;
padding: 16px 16px 16px 16px;
border: solid 1px rgba(180, 180, 180, 1.0);
}
.page .content-07 h3{
font-size: 14px;
line-height: 20px;
font-weight: bold;
margin: 0 0 0 0;
padding: 0;
}
.page .content-07 p {
font-size: 14px;
line-height: 26px;
margin: 0;
padding: 6px 0 0 16px;
}
/* ----- content-08 ----- */
.page .content-08 {
padding: 32px 16px 0 16px;
}
.page .content-08:after {
content: "";
clear: both;
display: block;
}
.page .content-08 .image {
width: 164px;
float: left;
margin-right: 16px;
margin-bottom: 4px;
}
.page .content-08 .text {
marign-left: 180px;
}
.page .content-08 .text h3 {
font-size: 16px;
line-height: 24px;
font-weight: bold;
margin: 0 0 0 0;
padding: 0;
}
.page .content-08 .text h3 span {
font-size: 13px;
display: block;
}
.page .content-08 .text p {
font-size: 14px;
line-height: 26px;
margin: 0;
padding: 6px 0 0 0;
}
.page .content-08 .text a.button {
margin: 24px 0 0 0;
width: 50%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(125, 125, 125, 1.0);
color: rgba(85, 85, 85, 1.0);
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
.page .content-008 .text a.button:after {
content: "";
clear: both;
display: block;
}
.page .content-08 .text a.button .material-icons {
float: right;
vertical-align: middle;
}
.page .content-08:hover .text a.button:link,
.page .content-08:hover .text a.button:visited,
.page .content-08:hover .text a.button:hover,
.page .content-08:hover .text a.button:active {
text-decoration: none;
background: rgba(250, 250, 250, 1.0);
}
/* ----- content-09 ----- */
.page .content-09 {
padding: 24px 16px 0 16px;
}
.page .content-09+.content-09 {
margin: 56px auto 0 auto;
}
.page .content-09 .unit-01 img,
.page .content-09 .unit-02 img {
width: 100%;
height: auto;
}
.page .content-09 .unit-01 {
width: 100%;
padding: 0;
}
.page .content-09 .unit-02 {
width: 100%;
padding: 0;
}
.page .content-09 .unit-01 h3,
.page .content-09 .unit-02 h3 {
font-size: 18px;
line-height: 24px;
margin: 0;
padding: 8px 0 8px 0;
}
.page .content-09 .unit-02 h3 {
padding-top: 16px;
}
.page .content-09 .unit-01 p,
.page .content-09 .unit-02 p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 16px 0 0 0;
}
.page .content-09 .unit-01 p.notice,
.page .content-09 .unit-02 p.notice {
font-size: 13px;
line-height: 18px;
margin: 0;
padding: 8px 0 0 0;
}
/* ----- content-10 ----- */
.page .content-10 {
padding: 24px 16px 0 16px;
margin: 24px auto 0 auto;
}
.page .content-10 img {
margin: 0;
padding: 8px 0 8px 0;
width: 100%;
height: auto;
}
.page .content-10.wd {
padding: 0px 16px 0 16px;
margin: 0px auto 0 auto;
}
@media (min-width: 768px){
.page .content-10.wd {
padding: 24px 0px 0 0px;
margin: 24px auto 0 auto;
}
}
/* ----- content-11 ----- */
.page .content-11 {
padding: 24px 16px 0 16px;
margin: 0 auto 0 auto;
}
.page .content-11 h3 {
font-size: 18px;
line-height: 24px;
margin: 0;
padding: 8px 0 8px 0;
color: #A38A20;
border-bottom: solid 1px rgba(163, 138, 32, 0.3);
}
.page .content-11 p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 16px 0 0 0;
}
.page .content-11 p strong {
font-size: 18px;
line-height: 18px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-11 p.notice {
font-size: 13px;
line-height: 18px;
margin: 0;
padding: 8px 0 0 0;
color: rgba(189, 44, 42, 1.0);
}
.page .content-11 p.enclosure
{
font-size: 15px;
line-height: 25px;
margin: 16px 0 0 0;
padding: 8px 16px;
border: solid 1px rgba(200, 200, 200, 1.0);
}
/* ----- content-12 ----- */
.page .content-12 {
width: 100%;
height: auto;
margin: 0 0 0 0;
transition: background-color 0.5s;
}
.page .content-12 {
margin: 56px 0 0 0;
}
.page .content-12 .text:after {
content: "";
clear: both;
display: block;
}
.page .content-12 .image {
width: 100%;
height: auto;
float: none;
}
.page .content-12 .text {
float: none;
margin-left: 0;
padding: 8px 16px 0 16px;
width: 100%;
}
.page .content-12 .text h4 {
color: rgba(189, 44, 42, 1.0);
font-size: 16px;
line-height: 18px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-12 .text h3 {
font-size: 18px;
line-height: 26px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-12 .text p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 4px 0 0 0;
}
.page .content-12 .text a.button {
margin-top: 24px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(125, 125, 125, 1.0);
color: rgba(85, 85, 85, 1.0);
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
.page .content-12 .text a.button:after {
content: "";
clear: both;
display: block;
}
.page .content-12 .text a.button .material-icons {
float: right;
vertical-align: middle;
}
.page .content-12:hover .text a.button:link,
.page .content-12:hover .text a.button:visited,
.page .content-12:hover .text a.button:hover,
.page .content-12:hover .text a.button:active {
text-decoration: none;
background: rgba(250, 250, 250, 1.0);
}
/* ----- content-13 ----- */
.content-13 {
padding: 24px 0 16px 0;
width: 100%;
height: 96px;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.content-13 .inner {
width: 1040px;
height: 56px;
margin: 0;
padding: 0;
}
.content-13 .inner:after {
content: "";
clear: both;
display: block;
}
.content-13 .item {
width: 80px;
height: 56px;
float: left;
}
.content-13 .item:hover {
cursor: pointer;
}
.content-13 .item img {
width: 80px;
height: 56px;
opacity: 0.5;
transition: opacity 0.5s;
}
.content-13 .item.current img {
opacity: 1.0;
}
/* ----- content-14 ----- */
.content-14 {
width: 100%;
height: auto;
position: relative;
}
.content-14 .item {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.content-14 .item img {
width: 100%;
height: auto;
opacity: 0.0;
transition: opacity 0.5s;
}
.content-14 .item img.current {
opacity: 1.0;
}
/* ----- content-15 ----- */
.content-15 {
padding: 24px 0 16px 0;
width: 100%;
}
.content-15 h3 {
font-size: 18px;
line-height: 26px;
margin: 0 16px 8px 16px;
padding: 24px 0 8px 0;
border-bottom: solid 1px rgba(230, 230, 230, 1.0);
}
.content-15 .item {
padding: 8px 16px 16px 16px;
}
.content-15 .item:after {
content: "";
clear: both;
display: block;
}
.content-15 .item h4 {
padding: 0;
font-size: 16px;
line-height: 24px;
border-bottom: solid 1px rgba(230, 230, 230, 1.0);
}
.content-15 .item h5 {
padding: 0;
font-size: 16px;
line-height: 24px;
}
.content-15 .item img {
width: 100%;
height: auto;
display: block;
font-size: 16px;
line-height: 20px;
margin-bottom: 16px;
}
.content-15 .item .text {
width: 100%;
}
.content-15 .item .unit-01 {
width: 100%;
}
.content-15 .item .unit-01:after {
content: "";
clear: both;
display: block;
}
.content-15 .item .unit-01 .part-01 {
width: 100%;
}
.content-15 .item .unit-01 .part-02 {
width: 100%;
}
.content-15 span {
font-size: 80%;
}
/* ----- content-16 ----- */
.page .content-16 {
padding: 0 16px 0 16px;
}
.page .content-16 h5 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin: 0;
padding: 16px 0 8px 0;
}
.page .content-16 p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 4px 0 0 0;
}
.page .content-16 img.image {
display: block;
margin: 16px 0 16px 0;
width: 100%;
height: auto;
}
.page .content-16 img.fairimg {
display: block;
margin: 16px 0 16px 0;
width: 100%;
height: auto;
}
/* ----- content-17 ----- */
.page .content-17 {
padding: 16px 16px 0 16px;
}
.page .content-17:after {
content: "";
clear: both;
display: block;
}
.page .content-17 .unit-01 {
width: 48%;
float: left;
margin-left: 4%;
}
.page .content-17 .unit-01:first-child{
margin-left: 0;
}
.page .content-17 .unit-01 img{
width: 100%;
height: auto;
}
.page .content-17 .unit-02 {
width: 48%;
float: left;
margin-left: 4%;
padding: 2px;
border: solid 1px rgba(160, 160, 160, 0.5);
}
.page .content-17 .unit-02 a {
display: block;
transition: background-color 0.5s;
}
.page .content-17 .unit-02 a:hover {
text-decoration: none;
background: rgba(240, 240, 240, 0.9);
}
.page .content-17 .unit-02:first-child{
margin-left: 0;
}
.page .content-17 .unit-02 img {
width: 100%;
height: auto;
}
.page .content-17 .unit-02 a:hover img {
opacity: 0.8;
}
.page .content-17 .unit-02 h3 {
font-size: 20px;
line-height: 26px;
margin: 0;
padding: 8px 16px 16px 16px;
color: rgba(0, 0, 0, 1.0);
}
.page .content-17 .unit-02 h4 {
font-size: 18px;
line-height: 20px;
margin: 0;
padding: 16px 16px 0 16px;
color: rgba(0, 0, 0, 1.0);
}
.page .content-17 .unit-02 h5 {
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 4px 16px 0 16px;
color: rgba(0, 0, 0, 1.0);
}
/* ----- content-18 ----- */
.page .content-18 {
padding: 64px 16px 0 16px;
}
.page .content-18:after {
content: "";
clear: both;
display: block;
}
.page .content-18 .unit-01 {
width: 100%;
}
.page .content-18 .unit-01 img{
width: 100%;
height: auto;
}
.page .content-18 .unit-02 {
width: 100%;
}
.page .content-18 .unit-02 h3 {
font-size: 20px;
line-height: 32px;
margin: 0;
padding: 8px 0 0 0;
color: rgba(0, 0, 0, 1.0);
}
.page .content-18 .unit-02 h4 {
font-size: 18px;
line-height: 20px;
margin: 0;
padding: 16px 16px 0 16px;
color: rgba(0, 0, 0, 1.0);
}
.page .content-18 .unit-02 h5 {
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 4px 16px 0 16px;
color: rgba(0, 0, 0, 1.0);
}
.page .content-18 .unit-02 p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 0 0 4px 0;
}
/* ----- content-19 ----- */
.page .content-19 {
padding: 64px 16px 0 16px;
}
.page .content-19.mt-0 {
padding: 16px 16px 0 16px;
}
.page .content-19:after {
content: "";
clear: both;
display: block;
}
.page .content-19 .unit-01 {
width: 100%;
}
.page .content-19 .unit-01 img{
width: 100%;
height: auto;
}
.page .content-19 .unit-02 {
width: 100%;
padding: 2px;
}
.page .content-19 .unit-02 h3 {
font-size: 20px;
line-height: 32px;
margin: 0;
padding: 8px 0 0 0;
color: rgba(0, 0, 0, 1.0);
}
.page .content-19 .unit-02 h4 {
font-size: 18px;
line-height: 20px;
margin: 0;
padding: 16px 16px 0 16px;
color: rgba(0, 0, 0, 1.0);
}
.page .content-19 .unit-02 h5 {
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 4px 16px 0 16px;
color: rgba(0, 0, 0, 1.0);
}
.page .content-19 .unit-02 p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 0 0 4px 0;
}
/* ----- content-20 ----- */
.page .content-20 {
background: rgba(242, 242, 242, 1.0);
margin: 32px 16px 0 16px;
padding: 16px 16px;
}
.page .content-20:after {
content: "";
clear: both;
display: block;
}
.page .content-20 .unit-01 {
width: 48%;
float: left;
}
.page .content-20 .unit-02 {
width: 48%;
float: left;
margin-left: 4%;
}
.page .content-20 h3 {
font-size: 16px;
line-height: 32px;
margin: 0;
padding: 0 0 8px 0;
}
.page .content-20 .unit-01 p,
.page .content-20 .unit-02 p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 4px 0 0 0;
}
/* ----- content-21 ----- */
.page .content-21 {
padding: 48px 16px 0 16px;
}
.page .content-21.mt-0 {
padding: 16px 16px 0 16px;
}
.page .content-21:after {
content: "";
clear: both;
display: block;
}
.page .content-21 .unit-01 {
width: 100%;
}
.page .content-21 .unit-01:first-child{
margin-left: 0;
}
.page .content-21 .unit-01 img{
width: 100%;
height: auto;
}
.page .content-21 .unit-02 {
width: 100%;
padding: 4px;
border: solid 1px rgba(122, 122, 122, 1.0);
}
.page .content-21 .unit-02:first-child{
margin-left: 0;
}
.page .content-21 .unit-02 img{
width: 100%;
height: auto;
}
.page .content-21 h3 {
font-size: 20px;
line-height: 32px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-21 .unit-01 p,
.page .content-21 .unit-02 p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 0 0 4px 0;
}
/* ----- content-22 ----- */
.page .content-22 {
padding: 16px 16px 0 16px;
}
.page .content-22:after {
content: "";
clear: both;
display: block;
}
.page .content-22 .item {
width: 46%;
float: left;
margin-right: 4%;
margin-top: 16px;
margin-bottom: 16px;
}
.page .content-22 .item:nth-child(2n) {
margin-right: 0;
}
.page .content-22 .item img{
width: 100%;
height: auto;
}
.page .content-22 h3 {
font-size: 18px;
line-height: 28px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-22 .item p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 0 0 4px 0;
}
/* ----- content-23 ----- */
.page .content-23 {
padding: 16px 16px 0 16px;
}
.page .content-23:after {
content: "";
clear: both;
display: block;
}
.page .content-23 ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.page .content-23 ul li {
margin:0;
padding:0;
display: inline;
}
.page .content-23 ul li strong,
.page .content-23 ul li a {
margin: 0;
padding: 8px;
display: inline-block;
}
.page .content-23 ul li a i.material-icons {
vertical-align: middle;
}
/* ----- content-24 ----- */
.page .content-24 {
margin-top: 16px;
padding: 16px;
transition: background-color 0.5s ease 0s;
border-bottom: solid 1px rgba(230, 230, 230, 1.0);
}
.page .content-24:after {
content: "";
clear: both;
display: block;
}
.page .content-24:hover {
cursor: pointer;
background: rgba(240, 240, 240, 0.4);
}
.page .content-24 .image {
width: 82px;
float: left;
margin-right: 16px;
margin-bottom: 4px;
}
.page .content-24 .image img {
width: 100%;
height: auto;
}
.page .content-24 .text {
margin-left: 98px;
width: auto;
}
.page .content-24 .text h3 {
font-size: 16px;
line-height: 24px;
font-weight: bold;
margin: 0 0 0 0;
padding: 0;
}
.page .content-24 .text h4 {
font-size: 13px;
display: block;
}
.page .content-24 .text p {
font-size: 14px;
line-height: 26px;
margin: 0;
padding: 6px 0 0 0;
}
/* ----- content-25 ----- */
.page .content-25 {
margin-top: 16px;
padding: 16px;
}
.page .content-25:after {
content: "";
clear: both;
display: block;
}
.page .content-25 .image {
text-align: center;
margin: 16px 0 32px 0;
}
.page .content-25 .image img {
width: 100%;
height: auto;
}
.page .content-25 .text {
}
.page .content-25 .text h3 {
font-size: 16px;
line-height: 24px;
font-weight: bold;
margin: 0 0 16px 0;
padding: 0;
}
.page .content-25 .text h4 {
font-size: 13px;
display: block;
}
.page .content-25 .text p {
font-size: 14px;
line-height: 26px;
margin: 0;
padding: 6px 0 0 0;
}
/* ----- content-btn-01 ----- */
.page .content-btn-01 {
width: 100%;
margin: 56px 0 0 0;
padding: 0 16px 0 16px;
text-align: center;
}
.page .content-btn-01 a {
margin: 0 auto;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(150, 150, 150, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
.page .content-btn-01 a:after {
content: "";
clear: both;
display: block;
}
.page .content-btn-01 a .material-icons {
float: right;
vertical-align: middle;
}
.page .content-btn-01 a:link,
.page .content-btn-01 a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.page .content-btn-01 a:hover,
.page .content-btn-01 a:active {
text-decoration: none;
background: rgba(150, 150, 150, 1.0);
}
/* ----- content-26 ----- */
.page .content-26 {
padding: 0 0 0 0;
margin: 0 auto 0 auto;
}
.page .content-26 img {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.page .content-26.wd {
padding: 0px 16px 0 16px;
margin: 0px auto 0 auto;
}
@media (min-width: 768px){
.page .content-26.wd {
padding: 24px 0px 0 0px;
margin: 24px auto 0 auto;
}
}
/* ----- content-btn-02 ----- */
.page .content-btn-02 {
width: 100%;
margin: 16px 0 0 0;
padding: 0 16px 0 16px;
text-align: center;
}
.page .content-btn-02 p{
font-size: 14px;
line-height: 26px;
text-align: left;
margin: 0;
padding: 16px 0 8px 0;
}
.page .content-btn-02 a {
margin: 0;
width: 160px;
padding: 8px;
font-size: 16px;
display: block;
text-align: center;
border:solid 1px rgba(150, 150, 150, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
.page .content-btn-02 a:after {
content: "";
clear: both;
display: block;
}
.page .content-btn-02 a .material-icons {
float: right;
vertical-align: middle;
}
.page .content-btn-02 a:link,
.page .content-btn-02 a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.page .content-btn-02 a:hover,
.page .content-btn-02 a:active {
text-decoration: none;
background: rgba(150, 150, 150, 1.0);
}
/* ----- content-btn-03 ----- */
.page .content-btn-03 {
width: 100%;
margin: 16px 0 0 0;
padding: 0 16px 0 16px;
text-align: center;
}
.page .content-btn-03 p{
font-size: 14px;
line-height: 26px;
text-align: left;
margin: 0;
padding: 16px 0 8px 0;
}
.page .content-btn-03 a {
margin: 0;
width: 160px;
padding: 8px;
font-size: 16px;
display: block;
text-align: center;
border:solid 1px rgba(150, 150, 150, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
.page .content-btn-03 a:after {
content: "";
clear: both;
display: block;
}
.page .content-btn-03 a .material-icons {
float: right;
vertical-align: middle;
}
.page .content-btn-03 a:link,
.page .content-btn-03 a:visited{
text-decoration: none;
transition: background-color 0.5s;
}
.page .content-btn-03 a:hover,
.page .content-btn-03 a:active {
text-decoration: none;
background: rgba(150, 150, 150, 1.0);
}
.page.sitemap .container .list {
float: none;
width: 100%;
}
.page.sitemap .container .heading-05+.list {
margin-top: 48px;
}
.page.sitemap .container .list ul {
margin: 0 0 0 16px;
padding: 0;
}
.page.sitemap .container .list ul li {
margin: 0;
padding: 0;
list-style: none;
}
.page.sitemap .container .list ul li a {
font-size: 15px;
display: block;
padding: 8px 8px;
}
.page.sitemap .container .list ul li a:link,
.page.sitemap .container .list ul li a:visited {
text-decoration: none;
}
.page.sitemap .container .list ul li a:hover,
.page.sitemap .container .list ul li a:active {
background: rgba(230, 230, 230, 1.0);
}
.page.sitemap .container .list ul li a .material-icons{
vertical-align: middle;
font-size: 15px;
}
.page.sitemap .container .list ul li ul{
margin: 0 0 0 48px;
padding: 0;
}
.page.sitemap .container .list ul li ul li{
margin: 0;
padding: 0;
list-style: disc;
}
.page.sitemap .container .list ul li ul li a:link,
.page.sitemap .container .list ul li ul li a:visited {
text-decoration: none;
color: rgba(85, 85, 85, 1.0);
}
.page.sitemap .container .list ul li ul li a:hover,
.page.sitemap .container .list ul li ul li a:active {
background: rgba(230, 230, 230, 1.0);
}
@media (min-width: 768px){
.page .container {
max-width: 768px;
}
/* ----- content-04 -----*/
.page .content-04 {
padding: 48px 16px 0 16px;
}
}
@media (min-width: 992px){
.page .container {
max-width: 992px;
}
.page.room .container {
max-width: 888px;
}
.page.spa .container {
max-width: 888px;
}
.page.meal .container {
max-width: 888px;
}
.page.wedding .container {
max-width: 888px;
}
.page.access .container {
max-width: 888px;
}
.page.about .container {
max-width: 888px;
}
.page.facilities .container {
max-width: 888px;
}
.page.yakkan .container {
max-width: 888px;
}
.page.policy .container {
max-width: 888px;
}
.page.pet .container {
max-width: 888px;
}
.page.sitemap .container {
max-width: 888px;
}
.page.contact .container {
max-width: 888px;
}
.page.recruit .container {
max-width: 888px;
}
.page.info .container {
max-width: 888px;
}
.page.eigyo .container {
max-width: 888px;
}
.page.qa .container {
max-width: 888px;
}
.page.spot .container {
max-width: 888px;
}
/* ----- heading-01 ----- */
.page .heading-01 {
margin: 0;
padding: 0 16px;
}
.page .heading-01 h2 {
width: 740px;
margin: 0 auto;
padding-top: 56px;
font-size: 24px;
line-height: 40px;
}
.page .heading-01 p {
width: 830px;
margin: 0 auto;
padding-top: 56px;
font-size: 16px;
line-height: 28px;
}
/* ----- heading-02 ----- */
.page .heading-02 {
margin: 0;
padding: 0;
}
.page .heading-02 h2 {
text-align: center;
padding-top: 88px;
font-size: 20px;
line-height: 40px;
}
/* ----- heading-03 ----- */
.page .heading-03 h3 {
font-size: 16px;
line-height: 20px;
padding: 8px 0 0 0;
}
.page .heading-03 h2 {
font-size: 24px;
line-height: 28px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-03 p {
font-size: 16px;
line-height: 20px;
margin: 0;
padding: 4px 0 0 0;
}
/* ----- heading-04 ----- */
.page .heading-04 h3 {
font-size: 16px;
line-height: 20px;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-04 h2 {
font-size: 24px;
line-height: 28px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
/* ----- heading-05 ----- */
.page .heading-05 h3 {
font-size: 16px;
line-height: 20px;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-05 h3 span {
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-05 h3.sub {
font-size: 20px;
line-height: 20px;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-05 h2 {
font-size: 24px;
line-height: 28px;
font-weight: normal;
margin: 0;
padding: 8px 0 0 0;
}
.page .heading-05 p {
font-size: 16px;
line-height: 28px;
font-weight: normal;
margin: 0;
padding: 8px 0 0 0;
color: rgba(189, 44, 42, 1.0);
}
/* ----- content-01 ----- */
.page .content-01 {
width: 880px;
height: 330px;
margin: 28px auto 0 auto;
transition: background-color 0.5s;
}
.page .content-01+.content-01 {
margin: 56px auto 0 auto;
}
.page .content-01 .image {
width: 430px;
float: left;
}
.page .content-01 .text {
float: left;
margin-left: 20px;
padding: 0 16px 0 0;
width: 430px;
}
.page .content-01 .text h4 {
color: rgba(189, 44, 42, 1.0);
font-size: 16px;
line-height: 20px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-01 .text h3 {
font-size: 22px;
line-height: 30px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-01 .text p.anniversary {
font-size: 14px;
font-weight: 600;
line-height: 22px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-01 .text p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-01 .text a.button {
margin-top: 56px;
width: 270px;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(125, 125, 125, 1.0);
color: rgba(85, 85, 85, 1.0);
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
.page .content-01 .text a.button+a.button {
margin-top: 32px;
}
.page .content-btn-01 a {
margin: 0 auto;
width: 270px;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(150, 150, 150, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
/* ----- content-02 ----- */
.page .content-02 p {
font-size: 16px;
line-height: 28px;
}
.page.contact .container .content-02 h3,
.page.recruit .container .content-02.contact h3 {
font-size: 24px;
line-height: 26px;
margin: 0;
padding: 16px 0 0 0;
}
.page.contact .container .content-02 h4,
.page.recruit .container .content-02.contact h4 {
font-size: 18px;
line-height: 20px;
margin: 32px 0 0 0;
padding: 0;
}
.page.contact .container .content-02 p,
.page.recruit .container .content-02.contact p {
font-size: 16px;
line-height: 22px;
margin: 8px 0 0 0;
padding: 0;
}
.page.contact .container .content-02 p em,
.page.recruit .container .content-02.contact p em {
font-size: 24px;
line-height: 26px;
font-style: normal;
color: rgba(189, 44, 42, 1.0);
margin: 0;
padding: 0;
}
.page.access .container .content-02 .notice h3 {
font-size: 18px;
line-height: 20px;
margin: 32px 0 0 0;
padding: 0;
color: rgba(189, 44, 42, 1.0);
}
.page.access .container .content-02 .notice p {
font-size: 16px;
line-height: 22px;
margin: 8px 0 0 0;
padding: 0;
color: rgba(189, 44, 42, 1.0);
}
/* ----- content-04 ----- */
.page .content-04 {
padding: 48px 16px 0 16px;
}
.page .content-04+.content-04 {
padding-top: 0;
}
.page .content-04:after {
content: "";
clear: both;
display: block;
}
.page .content-04 .unit-01 {
width: 48%;
float: left;
margin-left: 4%;
}
.page .content-04 .unit-01:first-child{
margin-left: 0;
}
.page .content-04 .unit-01 h3{
font-size: 18px;
line-height: 45px;
margin: 24px 0 0 0;
padding: 0 16px;
}
.page .content-04 .unit-01 p{
font-size: 16px;
line-height: 28px;
margin: 0;
padding: 4px 16px 0 16px;
}
.page .content-04 .unit-01 h6{
font-size: 12px;
line-height: 22px;
margin: 0;
padding: 16px 0 8px 14px;
}
/* ----- content-05 ----- */
.page .content-05 {
margin: 54px 16px 0 16px;
padding: 16px 16px 16px 16px;
border: solid 1px rgba(112, 112, 112, 1.0);
}
.page .content-05 h3{
font-size: 18px;
line-height: 20px;
margin: 0 0 0 0;
padding: 0;
}
.page .content-05 p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 6px 0 0 0;
}
/* ----- content-06 ----- */
.page .content-06 {
padding: 48px 16px 0 16px;
}
.page .content-06:after {
content: "";
clear: both;
display: block;
}
.page .content-06 .unit-01 {
width: 48%;
float: left;
margin-left: 4%;
}
.page .content-06 .unit-01:first-child {
margin-left: 0;
}
.page .content-06 .unit-01 h3 {
font-size: 18px;
line-height: 45px;
margin: 0 0 0 0;
padding: 0 16px;
}
.page .content-06 .unit-01 h3 span {
font-size: 13px;
}
.page .content-06 .unit-01 p {
font-size: 16px;
line-height: 28px;
margin: 0;
padding: 0 16px 0 16px;
}
/* ----- content-07 ----- */
.page .content-07 h3{
font-size: 16px;
line-height: 28px;
font-weight: bold;
margin: 0 0 0 0;
padding: 0;
}
.page .content-07 p {
font-size: 16px;
line-height: 28px;
margin: 0;
padding: 6px 0 0 20px;
}
/* ----- content-08 ----- */
.page .content-08 .text h3 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin: 0 0 0 0;
padding: 0;
}
.page .content-08 .text h3 span {
font-size: 13px;
display: inline;
}
.page .content-08 .text p {
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 6px 0 0 16px;
}
.page .content-08 .text a.button {
margin-top: 24px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(125, 125, 125, 1.0);
color: rgba(85, 85, 85, 1.0);
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
cursor: pointer;
}
.page .content-08 .text a.button:after {
content: "";
clear: both;
display: block;
}
.page .content-08 .text a.button .material-icons {
float: right;
vertical-align: middle;
}
.page .content-08:hover .text a.button:link,
.page .content-08:hover .text a.button:visited,
.page .content-08:hover .text a.button:hover {
text-decoration: none;
background: #ededed;}
.page .content-08:hover .text a.button:active {
text-decoration: none;
background: rgba(250, 250, 250, 1.0);
}
/* ----- content-09 ----- */
.page .content-09 {
width: 880px;
margin: 56px auto 0 auto;
}
.page .content-09:after {
content: "";
clear: both;
display: block;
}
.page .content-09+.content-09 {
margin: 56px auto 0 auto;
}
.page .content-09 .unit-01 img,
.page .content-09 .unit-02 img {
width: 100%;
height: auto;
}
.page .content-09 .unit-01 {
width: 414px;
padding: 0;
float: left;
}
.page .content-09 .unit-02 {
float: left;
margin-left: 20px;
padding: 0;
width: 414px;
}
.page .content-09 .unit-01 h3,
.page .content-09 .unit-02 h3 {
font-size: 18px;
line-height: 24px;
margin: 0;
padding: 8px 0 8px 0;
}
.page .content-09 .unit-01 p,
.page .content-09 .unit-02 p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 16px 0 0 0;
}
.page .content-09 .unit-01 p.notice,
.page .content-09 .unit-02 p.notice {
font-size: 13px;
line-height: 18px;
margin: 0;
padding: 8px 0 0 0;
}
/* ----- content-11 ----- */
.page .content-11 {
padding: 24px 16px 0 16px;
margin: 0 auto 0 auto;
}
.page .content-11 h3 {
font-size: 18px;
line-height: 24px;
margin: 0;
padding: 8px 0 8px 0;
color: #A38A20;
border-bottom: solid 1px rgba(163, 138, 32, 0.3);
}
.page .content-11 p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 16px 0 0 0;
}
.page .content-11 p strong {
font-size: 18px;
line-height: 18px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-11 p.notice {
font-size: 13px;
line-height: 18px;
margin: 0;
padding: 8px 0 0 0;
color: rgba(189, 44, 42, 1.0);
}
.page .content-11 p.enclosure
{
font-size: 13px;
line-height: 18px;
margin: 16px 0 0 0;
padding: 8px 16px;
border: solid 1px rgba(200, 200, 200, 1.0);
}
/* ----- content-12 ----- */
.page .content-12 {
width: 880px;
height: 196px;
margin: 60px auto 100px auto;
transition: background-color 0.5s;
}
.page .content-12 .image {
width: 430px;
float: left;
}
.page .content-12 .text {
float: left;
margin-left: 20px;
padding: 0 16px 0 0;
width: 430px;
}
.page .content-12 .text h4 {
color: rgba(189, 44, 42, 1.0);
font-size: 16px;
line-height: 20px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-12 .text h3 {
font-size: 22px;
line-height: 30px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-12 .text p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-12 .text a.button {
margin-top: 24px;
/* width: 270px; */
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(125, 125, 125, 1.0);
color: rgba(85, 85, 85, 1.0);
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
.page .content-btn-12 a {
margin: 0 auto;
width: 270px;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(150, 150, 150, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
/* ----- content-13 ----- */
.content-13 {
margin: 0 auto;
padding: 24px 0 24px 0;
width: 880px;
height: 112px;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.content-13 .inner {
width: 1040px;
height: 56px;
margin: 0;
padding: 0;
}
.content-13 .inner:after {
content: "";
clear: both;
display: block;
}
.content-13 .item {
width: 80px;
height: 56px;
float: left;
}
.content-13 .item:hover {
background: rgba(70, 70, 70, 0.5);
}
.content-13 .item img {
width: 80px;
height: 56px;
opacity: 0.5;
transition: opacity 0.5s;
}
.content-13 .item.current img {
opacity: 1.0;
}
/* ----- content-14 ----- */
.content-14 {
margin: 0 auto;
padding: 24px 0 16px 0;
width: 880px;
height: auto;
position: relative;
}
.content-14 .item {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.content-14 .item img {
width: 100%;
height: auto;
opacity: 0.0;
transition: opacity 0.5s;
}
.content-14 .item img.current {
opacity: 1.0;
}
/* ----- content-15 ----- */
.content-15 {
padding: 24px 0 16px 0;
width: 100%;
}
.content-15 h3 {
font-size: 18px;
line-height: 26px;
margin: 0 16px 8px 16px;
padding: 24px 0 8px 0;
border-bottom: solid 1px rgba(230, 230, 230, 1.0);
}
.content-15 .item {
padding: 8px 16px 16px 16px;
}
.content-15 .item:after {
content: "";
clear: both;
display: block;
}
.content-15 .item h4 {
padding: 0;
font-size: 16px;
line-height: 24px;
border-bottom: solid 1px rgba(230, 230, 230, 1.0);
}
.content-15 .item h5 {
padding: 0;
font-size: 16px;
line-height: 24px;
}
.content-15 .item img {
width: 262px;
height: auto;
float: left;
display: block;
margin-right: 24px;
font-size: 16px;
line-height: 20px;
margin-bottom: 0;
}
.content-15.wwp .item img {
height: auto;
float: left;
display: block;
margin-right: 24px;
font-size: 16px;
line-height: 20px;
margin-bottom: 0;
}
.content-15 .item .text {
float: left;
width: 570px;
}
.content-15 .item .unit-01 {
width: 570px;
}
.content-15 .item .unit-01:after {
content: "";
clear: both;
display: block;
}
.content-15 .item .unit-01 .part-01 {
width: 230px;
float: left;
}
.content-15 .item .unit-01 .part-02 {
width: 230px;
float: left;
margin-left: 16px;
}
.content-15 span {
font-size: 80%;
}
/* ----- content-16 ----- */
.page .content-16 {
padding: 24px 16px 0 16px;
}
.page .content-16 h5 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin: 0;
padding: 16px 0 8px 0;
}
.page .content-16 p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 4px 0 0 0;
}
.page .content-16 img.image {
display: block;
margin: 16px auto;
width: 662px;
height: 662px;
}
.fairimg {
display: block;
margin: 16px auto;
width: 662px;
height: 442px;
}
/* ----- content-18 ----- */
.page .content-18 {
padding: 64px 16px 0 16px;
}
.page .content-18:after {
content: "";
clear: both;
display: block;
}
.page .content-18 .unit-01 {
width: 66%;
float: left;
margin-left: 0;
}
.page .content-18 .unit-01:first-child{
margin-left: 0;
}
.page .content-18 .unit-01 img{
width: 100%;
height: auto;
}
.page .content-18 .unit-02 {
width: 30%;
float: left;
margin-left: 4%;
padding: 2px;
}
.page .content-18 .unit-02 h3 {
font-size: 24px;
line-height: 32px;
margin: 0;
padding: 8px 16px 8px 0;
color: rgba(0, 0, 0, 1.0);
}
.page .content-18 .unit-02 h4 {
font-size: 18px;
line-height: 20px;
margin: 0;
padding: 16px 16px 0 16px;
color: rgba(0, 0, 0, 1.0);
}
.page .content-18 .unit-02 h5 {
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 4px 16px 0 16px;
color: rgba(0, 0, 0, 1.0);
}
.page .content-18 .text p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 4px 0 0 0;
}
/* ----- content-19 ----- */
.page .content-19 {
padding: 64px 16px 0 16px;
}
.page .content-19.mt-0 {
padding: 16px 16px 0 16px;
}
.page .content-19:after {
content: "";
clear: both;
display: block;
}
.page .content-19 .unit-01 {
width: 66%;
float: right;
margin-left: 0;
}
.page .content-19 .unit-01:first-child{
margin-left: 0;
}
.page .content-19 .unit-01 img{
width: 100%;
height: auto;
}
.page .content-19 .unit-02 {
width: 30%;
float: left;
margin-right: 4%;
padding: 2px;
}
.page .content-19 .unit-02 h3 {
font-size: 24px;
line-height: 32px;
margin: 0;
padding: 8px 16px 8px 0;
color: rgba(0, 0, 0, 1.0);
}
.page .content-19 .unit-02 h4 {
font-size: 18px;
line-height: 20px;
margin: 0;
padding: 16px 16px 0 16px;
color: rgba(0, 0, 0, 1.0);
}
.page .content-19 .unit-02 h5 {
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 4px 16px 0 16px;
color: rgba(0, 0, 0, 1.0);
}
.page .content-19 .text p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 4px 0 0 0;
}
/* ----- content-17 ----- */
.page .content-17 .unit-02 h3 {
font-size: 20px;
line-height: 32px;
}
/* ----- content-20 ----- */
.page .content-20 {
background: rgba(242, 242, 242, 1.0);
margin: 32px 16px 0 16px;
padding: 32px 32px;
}
.page .content-20:after {
content: "";
clear: both;
display: block;
}
.page .content-20 .unit-01 {
width: 48%;
float: left;
}
.page .content-20 .unit-02 {
width: 48%;
float: left;
margin-left: 4%;
}
.page .content-20 h3 {
font-size: 16px;
line-height: 32px;
margin: 0;
padding: 0 0 8px 0;
}
.page .content-20 .unit-01 p,
.page .content-20 .unit-02 p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 4px 0 0 0;
}
/* ----- content-21 ----- */
.page .content-21 {
padding: 48px 16px 0 16px;
}
.page .content-21.mt-0 {
padding: 16px 16px 0 16px;
}
.page .content-21:after {
content: "";
clear: both;
display: block;
}
.page .content-21 .unit-01 {
width: 48%;
float: left;
margin-left: 4%;
}
.page .content-21 .unit-01:first-child{
margin-left: 0;
}
.page .content-21 .unit-01 img{
width: 100%;
height: auto;
}
.page .content-21 .unit-02 {
width: 48%;
float: left;
margin-left: 4%;
padding: 4px;
border: solid 1px rgba(122, 122, 122, 1.0);
}
.page .content-21 .unit-02:first-child{
margin-left: 0;
}
.page .content-21 .unit-02 img{
width: 100%;
height: auto;
}
.page .content-21 .unit-01 h3,
.page .content-21 .unit-02 h3 {
font-size: 28px;
line-height: 32px;
margin: 0;
padding: 4px 0 4px 0;
}
.page .content-21 .unit-01 p,
.page .content-21 .unit-02 p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 0 0 8px 0;
}
/* ----- content-22 ----- */
.page .content-22 {
padding: 16px 16px 0 16px;
}
.page .content-22:after {
content: "";
clear: both;
display: block;
}
.page .content-22 .item {
width: 17.6%;
float: left;
margin-right: 3%;
margin-top: 16px;
margin-bottom: 16px;
}
.page .content-22 .item:nth-child(2n) {
margin-right: 3%;
}
.page .content-22 .item:nth-child(5n) {
margin-right: 0;
}
.page .content-22 .item img{
width: 100%;
height: auto;
}
.page .content-22 h3 {
font-size: 18px;
line-height: 28px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-22 .item p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 0 0 4px 0;
}
/* ----- content-24 ----- */
.page .content-24 {
margin-top: 16px;
padding: 16px;
transition: background-color 0.5s ease 0s;
border-bottom: none;
}
.page .content-24:after {
content: "";
clear: both;
display: block;
}
.page .content-24:hover {
cursor: pointer;
background: rgba(240, 240, 240, 0.4);
}
.page .content-24 .image {
width: 164px;
float: left;
margin-right: 16px;
margin-bottom: 4px;
}
.page .content-24 .text {
float: left;
margin-left: 0;
width: 670px;
}
.page .content-24 .text h3 {
font-size: 16px;
line-height: 24px;
font-weight: bold;
margin: 0 0 0 0;
padding: 0;
}
.page .content-24 .text h4 {
font-size: 13px;
display: block;
}
.page .content-24 .text p {
font-size: 14px;
line-height: 26px;
margin: 0;
padding: 6px 0 0 0;
}
/* ----- content-25 ----- */
.page .content-25 {
margin-top: 16px;
padding: 16px;
}
.page .content-25:after {
content: "";
clear: both;
display: block;
}
.page .content-25 .image {
text-align: center;
margin: 16px 0 32px 0;
}
.page .content-25 .image img {
width: 320px;
height: auto;
}
.page .content-25 .text {
padding-top: 16px;
}
.page .content-25 .text h3 {
font-size: 24px;
line-height: 24px;
font-weight: bold;
margin: 0 0 16px 0;
padding: 0;
}
.page .content-25 .text h4 {
font-size: 18px;
display: block;
}
.page .content-25 .text p {
font-size: 16px;
line-height: 26px;
margin: 0;
padding: 6px 0 0 0;
}
}
@media (min-width: 1200px){
.page .container {
max-width: 1200px;
}
}
/* ----- content-26----- */
.page .content-26 {
width: 100%;
height: auto;
margin: 0 0 0 0;
transition: background-color 0.5s;
}
.page .content-26+.content-26 {
margin: 56px 0 0 0;
}
.page .content-26:hover {
background: rgba(240, 240, 240, 1.0);
cursor: pointer;
}
.page .content-26 .text:after {
content: "";
clear: both;
display: block;
}
.page .content-26 .image {
width: 100%;
height: auto;
float: none;
}
.page .content-26 .text {
float: none;
margin-left: 0;
padding: 8px 16px 0 16px;
width: 100%;
}
.page .content-26 .text h4 {
color: rgba(189, 44, 42, 1.0);
font-size: 16px;
line-height: 18px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-26 .text h3 {
font-size: 18px;
line-height: 26px;
font-weight: bold;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-26 .text h5 {
color: rgba(105, 105, 105, 1.0);
font-size: 14px;
line-height: 18px;
margin: 0;
padding: 0 0 8px 0;
}
.page .content-26 .text p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 4px 0 0 0;
}
.page .content-26 .text a.button {
margin-top: 24px;
width: 100%;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(125, 125, 125, 1.0);
color: rgba(85, 85, 85, 1.0);
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
.page .content-26 .text a.button:after {
content: "";
clear: both;
display: block;
}
.page .content-26 .text a.button .material-icons {
float: right;
vertical-align: middle;
}
.page .content-26:hover .text a.button:link,
.page .content-26:hover .text a.button:visited,
.page .content-26:hover .text a.button:hover,
.page .content-26:hover .text a.button:active {
text-decoration: none;
background: rgba(250, 250, 250, 1.0);
}
.heading-05.wd {
padding-top: 20px;
letter-spacing: 0.2em;
}
.wedding-br {
}
@media (min-width: 768px){
.heading-05.wd {
padding-top: 56px;
letter-spacing: 0;
}
.wedding-br {
display: none;
}
}
@media (min-width: 992px){
}
@media (min-width: 1200px){
}
.gallery {
width:500px;
max-width: 100%;
height: auto;
}
.weddingreport {
text-align: center;
padding: 20px 0 50px 0;
}
.amaris {
font-size: 12px;
line-height: 22px;
margin: 0;
padding: 16px 0 8px 0;
}
/* ----- content-27 ----- */
.page .content-27 {
padding :24px 16px 0 16px;
}
.page .content-27 h4 {
position: relative;
font-size: 20px;
line-height: 20px;
padding-bottom: 4px;
border-bottom: solid 1px rgba(150, 127, 4, 0.3);
}
.page .content-27 h4 span {
display: inline-block;
font-size: 14px;
color: rgba(150, 127, 4, 1.0);
}
.page .content-27 h4 span.price {
color: #000000;
font-size: 20px;
line-height: 20px;
display: inline-block;
position: absolute;
right: 0;
bottom: 4px;
}
.page .content-27 ul {}
.page .content-27 ul li {
padding: 16px 0 0 0;
}
.page .content-27 ul li b{
font-weight: normal;
display: inline-block;
padding:0.5em 0 0.5em 2em;
}
.page .content-27 ul li span {
font-size: 14px;
line-height: 20px;
padding-top: 2px;
display: inline-block;
color: rgba(150, 127, 4, 1.0);
}
/* ----- content-29 ----- */
.content-29 {
padding: 24px 0 16px 0;
width: 100%;
}
.content-29 h3 {
font-size: 20px;
line-height: 28px;
margin: 0 16px 8px 16px;
padding: 24px 0 8px 0;
border-bottom: solid 1px rgba(230, 230, 230, 1.0);
}
.content-29 .item {
padding: 8px 16px 16px 16px;
}
.content-29 .item:after {
content: "";
clear: both;
display: block;
}
.content-29 .item h4 {
padding: 0;
font-size: 16px;
line-height: 24px;
border-bottom: solid 1px rgba(230, 230, 230, 1.0);
}
.content-29 .item h5 {
padding: 10px 0 0 0;
font-size: 16px;
line-height: 24px;
}
.content-29 .item img {
width: 100%;
height: auto;
float: left;
display: block;
margin: 20px 24px 30px 0;
font-size: 16px;
line-height: 20px;
}
.content-29 .item .text {
float: left;
width: 860px;
}
.content-29 .item .unit-01 {
width: 860px;
padding: 0 0 40px 0;
}
.content-29 .item .unit-01:after {
content: "";
clear: both;
display: block;
}
.content-29 .item .unit-01 .part-01 {
width: 400px;
float: left;
}
.content-29 .item .unit-01 .part-02 {
width: 230px;
float: left;
margin-left: 16px;
}
.content-29 span {
font-size: 80%;
}
/* ----- content-30 ----- */
.page .content-30 {
width: 880px;
height: 120px;
margin: 10px auto 10px auto;
transition: background-color 0.5s;
}
.page .content-30 .image {
width: 430px;
float: left;
}
.page .content-30 .text {
float: left;
margin-left: 20px;
padding: 0 16px 0 0;
width: 430px;
}
.page .content-30 .text h4 {
color: rgba(189, 44, 42, 1.0);
font-size: 16px;
line-height: 20px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-30 .text h3 {
font-size: 22px;
line-height: 30px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-30 .text p {
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 8px 0 0 0;
}
.page .content-30 .text a.button {
margin-top: 24px;
/* width: 270px; */
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(125, 125, 125, 1.0);
color: rgba(85, 85, 85, 1.0);
background: rgba(255, 255, 255, 1.0);
transition: background-color 0.5s;
}
.page .content-btn-30 a {
margin: 0 auto;
width: 270px;
padding: 8px;
display: block;
text-align: center;
border:solid 1px rgba(150, 150, 150, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(120, 120, 120, 1.0);
}
@media (min-width: 768px){
}
@media (min-width: 992px){
}
@media (min-width: 1200px){
}
/* dayuse-plan */
.dayuse-plan {
margin: 64px 16px 0 16px;
padding: 0;
}
.dayuse-plan h1 {
margin: 0;
padding: 8px 0 16px 0;
font-size: 20px;
line-height: 1.0;
font-weight: bold;
border-bottom: solid 1px #ddd;
}
.dayuse-plan h1 span {
font-size: 14px;
line-height: 1.4;
display: inline-block;
padding-bottom: 8px;
color: #555;
}
.dayuse-plan h4 {
margin: 0;
padding: 32px 0 0 0;
font-size: 16px;
font-weight: bold;
line-height: 1.6;
}
.dayuse-plan .no-border h4 {
padding: 8px 0 0 0;
}
.dayuse-plan p {
margin: 0;
padding: 8px 0 0 0;
font-size: 16px;
line-height: 1.6;
text-align: justify;
}
.dayuse-plan p.caution {
margin: 0;
padding: 8px 0 0 0;
font-size: 14px;
line-height: 1.6;
}
@media (min-width: 576px){
.dayuse-plan {
margin: 64px 0 0 0;
}
.dayuse-plan h1 {
font-size: 28px;
}
.dayuse-plan h1 span {
font-size: 18px;
padding-bottom: 12px;
}
}
@media (min-width: 768px){
}
@media (min-width: 992px){
}
@media (min-width: 1200px){
}
/* please */
.please {
border: solid 2px #eee;
border-radius: 8px;
margin: 32px 16px 0 16px;
padding: 8px 16px 0 16px;
}
.please h3 {
padding: 8px 0;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.please p {
padding: 0;
font-size: 14px;
line-height: 1.6;
text-align: justify;
}
@media (min-width: 576px){
.please {
margin: 32px 0 0 0;
}
}
@media (min-width: 768px){
.please p {
text-align: center;
}
}
@media (min-width: 992px){
}
@media (min-width: 1200px){
}
/* content-28 */
.content-28 {
margin: 48px 16px 0 16px;
padding: 0;
}
.content-28 h2 {
padding: 8px 0;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
}
.content-28 p {
padding: 0;
font-size: 16px;
line-height: 1.6;
text-align: justify;
}
.content-28 p span {
padding: 0;
font-size: 14px;
line-height: 1.6;
}
@media (min-width: 576px){
.content-28 {
margin: 48px 0 0 0;
}
}
@media (min-width: 768px){
}
@media (min-width: 992px){
}
@media (min-width: 1200px){
}
/* about-kokotxa, about-cruising, about-recuerdos */
.about-kokotxa,
.about-cruising,
.about-recuerdos {
margin: 32px 0 24px 0;
padding: 8px 16px 8px 16px;
border: solid 1px #eee;
border-radius: 8px;
background: #f4f4f4;
min-height: 160px;
}
.about-kokotxa:after,
.about-cruising:after,
.about-recuerdos:after {
clear: both;
}
.about-kokotxa img,
.about-cruising img,
.about-recuerdos img {
float: left;
width: 160px;
height: 160px;
margin: -8px 16px 8px -16px;
border-top-left-radius: 4px;
border-bottom-left-radius: 0;
}
.about-kokotxa h3,
.about-cruising h3,
.about-recuerdos h3 {
margin: 0;
padding: 0;
font-size: 18px;
font-weight: bold;
line-height: 1.6;
}
.about-kokotxa p,
.about-cruising p,
.about-recuerdos p {
margin: 0;
padding: 4px 0 8px 0;
font-size: 14px;
line-height: 1.6;
text-align: justify;
}
@media (min-width: 576px){
}
@media (min-width: 768px){
}
@media (min-width: 992px){
}
@media (min-width: 1200px){
}
/* row */
.row {
width: 100%;
margin: 0;
padding: 0;
}
.row:after {
clear: both;
}
.row .item {
border: solid 1px #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
box-sizing: content-box;
margin: 32px 0 0 0;
padding: 0;
width: 100%;
position: relative;
}
.row .item.no-border {
border: none;
}
.row .item img {
width: 100%;
height: auto;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.row .item h2 {
margin: 0;
padding: 8px 16px 0 16px;
font-size: 20px;
font-weight: bold;
line-height: 1.4;
text-align: justify;
}
.row .item h2 span {
color: #555;
font-size: 16px;
font-weight: normal;
line-height: 2.4;
}
.row .item h3 {
margin: 0;
padding: 8px 16px 0 16px;
font-size: 16px;
line-height: 1.6;
}
.row .item h3 span {
color: #555;
font-size: 14px;
font-weight: normal;
line-height: 1.0;
}
.row .item p {
font-size: 16px;
line-height: 1.6;
text-align: justify;
}
.row .item p.caution {
font-size: 14px;
line-height: 1.75;
text-align: justify;
}
.row .item a {
font-size: 16px;
text-align: center;
display: block;
background: rgba(30,30,30,1.0);
color: #fff;
line-height: 64px;
}
.row .item a:link,
.row .item a:visited {
background: rgba(30,30,30,1.0);
color: #fff;
text-decoration: none;
}
.row .item a:hover,
.row .item a:active{
background: rgba(70,70,70,1.0);
color: #fff;
text-decoration: none;
}
.row .item .reservation {
background: rgba(30,30,30,1.0);
color: #fff;
margin: 8px 0 0 0;
padding: 8px 0;
text-align: center;
}
.row .item .reservation h4 {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.6;
}
.row .item .reservation p {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.6;
text-align: center;
}
.row .item .reservation p span {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 1.6;
}
@media (min-width: 576px){
.row {
width: 540px;
}
}
@media (min-width: 768px){
.row {
width: 768px;
}
.row .item {
width: 768px;
}
}
@media (min-width: 992px){
.row {
margin: 16px 0 0 0;
width: 992px;
}
.row:after {
clear: both;
}
.row .item {
margin-top: 0;
width: 477px;
float: left;
}
.row .item:first-child {
margin-right: 32px;
}
.row .item a {
width: 100%;
line-height: 64px;
position: absolute;
bottom: 0;
}
.row .item .reservation {
width: 100%;
position: absolute;
bottom: 0;
}
}
@media (min-width: 1200px){
.row {
width: 1200px;
}
.row .item {
width: 581px;
}
}