@charset "utf-8"; @imgdir: "/assets/images"; .marginCenter { margin-left:auto; margin-right:auto; } .clearfix { display:block; clear:both; } html { display:block; } head { display:none; } img { max-width:100%; } ul { list-style:none; padding:0; } /* Body Style -------------------------------------------------------------------------------*/ body { font-family: "Sawarabi Mincho",serif; font-size:17px; color:#4D4D4D; line-height:1.8em; margin:0; } body.home { #wrapper { max-width:1200px; width:100%; background-color:transparent; text-align:center; padding-top:16px; .marginCenter; } #wrapper:after { content:''; display:block; clear:both; } } /* Header Style -------------------------------------------------------------------------------*/ #main-header { .screen-reader-text { position: absolute; display: block; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; } } body.home { #main-header { float:left; width:30%; margin-left:20px; .logo, .txt01 { display:block; margin-left:auto; margin-right:auto; } .logo { margin-top:56px; margin-bottom:24px; } .sub-txt { font-size:13px; } .txt01 { margin:40px auto 0; } } } body.page { #main-header { background-color:#9a9a9a; .inner { max-width:1000px; width:100%; .marginCenter; color:#FFF; padding:6px 20px; text-align:center; * { display:inline-block; vertical-align: middle; margin:0 10px; } .logo { width:90px; } } #pagetitle { background-position:center center; background-size:cover; background-repeat:no-repeat; text-align: center; padding:100px 10px; } h2 { display:inline-block; font-size:210%; font-weight:normal; line-height:1.8em; padding:6px 30px; border:1px solid #FFF; background-color:rgba(255,255,255,0.7); .icon { width:60px; vertical-align: middle; margin-right:20px; } .en { font-size:56%; margin-left:20px; } } } } body.restaurant { #pagetitle { background-image:url("@{imgdir}/restaurant/bg_pagetitle.jpg"); } } body.shopping { #pagetitle { background-image:url("@{imgdir}/shopping/bg_pagetitle.jpg"); } } body.philosophy { #pagetitle { background-image:url("@{imgdir}/philosophy/bg_pagetitle.jpg"); } } body.aboutus { #pagetitle { background-image:url("@{imgdir}/aboutus/bg_pagetitle.jpg"); } } body.news { #pagetitle { background-image:url("@{imgdir}/news/bg_pagetitle.jpg"); } } body.recruit { #pagetitle { background-image:url("@{imgdir}/recruit/bg_pagetitle.jpg"); } } body.contact { #pagetitle { background-image:url("@{imgdir}/contact/bg_pagetitle.jpg"); } } #g-menu { background-color:#FFF; ul { font-size:0; line-height:0; text-align:center; max-width:1000px; width:100%; .marginCenter; li { display:inline-block; vertical-align:top; font-size:20px; line-height:1.3em; position:relative; ul { display:none; position:absolute; left:0; li { display:block; width:100%; font-size:16px; } } } } a { display:block; color:#000; text-decoration:none; padding:14px 20px; border:1px solid #FFF; background-color:rgba(255,255,255,0.9); } a:hover,a.touch { color:#6BB93F; border-color:#6BB93F; } a.parent:after { content:'▼'; display: inline-block; vertical-align: bottom; margin-left:6px; } a.parent.active:after { content:'▲'; } } /* Footer Style -------------------------------------------------------------------------------*/ #main-footer { width:100%; background-color:#FFCC00; font-size:15px; padding:15px 0; text-align: center; a { color:#4D4D4D; text-decoration:none; } nav a { display:inline-block; vertical-align:top; margin:0 16px; font-size:126%; font-family:"Sawarabi Mincho"; } .copyright { margin:7px 0 0; font-size:13px; line-height:1.6em; } } body.home { #main-footer { position:fixed; bottom:0; left:0; } } /* Common Style -------------------------------------------------------------------------------*/ a:link { } a:visited { } a:hover { } a:active { } h1 { font-weight:normal; font-size:130%; line-height:1.8em; margin:0 auto; span { display:inline-block; vertical-align: top; } span:nth-of-type(1) { margin-right:19%; } span:nth-of-type(2) { margin-left:19%; } } h2 { } h3 { font-weight:normal; font-size:150%; line-height:1.8em; margin:0 auto 20px; border-bottom:1px solid #000; } h4 { font-size:128%; line-height:1.6em; border-left:4px solid #333; padding:0 0.7em; } a.btn-style, input[type="submit"].btn-style { display: inline-block; padding: 0.5em 1em; text-decoration: none; background:#E5801A; color: #FFF; border:0; border-bottom: solid 4px #D36602; border-radius: 3px; font-size:26px; margin-bottom:30px; } a.btn-style:active, a.btn-style.touch { -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none; } .page-navi { a,span { display:inline-block; vertical-align: top; border:1px solid #8c8c8c; line-height:1em; font-size:120%; padding:10px; color:#000; text-decoration:none; margin:4px; } a:hover, .current { background-color:#8c8c8c; color:#FFF; text-decoration:none; } } /* Main Contents Style -------------------------------------------------------------------------------*/ body.page { #main-contents { max-width:950px; width:94%; .marginCenter; margin-top:40px; margin-bottom:70px; } } body.news { #main-contents { max-width:700px; width:94%; } } /* Home Style -------------------------------------------------------------------------------*/ body.home { .main-bg { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; background:url("@{imgdir}/home/bg_main.jpg") center top no-repeat; background-size:cover; } ul.link-list { list-style:none; padding:0; font-size:0; line-height:0; width:60%; .marginCenter; margin-top:40px; float:right; } .link { display:inline-block; vertical-align: top; margin-bottom:3%; width:23%; position: relative; .title { margin-top:15px; } a:hover,a.touch { img { opacity:0.6; } } a:before { content:''; display:block; width:200px; height:200px; background-color:#6BB93F; position:absolute; top:0; left:0; z-index:-1; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; } a.move { img { opacity:1; } } a.move:before { z-index:999; -moz-transform: scale(20); -webkit-transform: scale(20); -o-transform: scale(20); -ms-transform: scale(20); transform: scale(20); } } .link:nth-of-type(2), .link:nth-of-type(5), .link:nth-of-type(8) { margin-left:8%; margin-right:8%; } } body.home.move { overflow:hidden; } /* Page Style -------------------------------------------------------------------------------*/ body.philosophy { .pres-name { text-align:right; } } body.aboutus { table{ width:700px; .marginCenter; } tr { border-bottom:1px solid #000; } th,td { text-align:left; vertical-align: top; font-weight:normal; padding:18px 12px; } } body.news { .post { border-bottom:1px dashed #333; margin-top:20px; margin-bottom:50px; .date { text-align:right; } } } body.recruit { section { margin-top:20px; margin-bottom:50px; } } body.contact { .tel { font-size:170%; line-height:1.8em; margin:20px auto 45px; } table { max-width:700px; width:94%; .marginCenter; margin-bottom:25px; } th, td { font-weight:normal; vertical-align: top; text-align:left; padding:10px; } th { width:30%; } .required { display: inline-block; color:red; margin-right:0.8em; } input[type="text"], input[type="tel"], input[type="email"], textarea { border:1px solid #000; -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; width:300px; } input.your-email, input.your-address { width:100%; } .your-message { width:100%; height:200px; } .privacy { max-width:700px; width:94%; margin:20px auto; .inner { text-align:left; } } .wpcf7-form { text-align:center; } .screen-reader-response { display:none; } .wpcf7-not-valid-tip { display:inline-block; vertical-align: top; border:2px solid red; padding:0 10px; } .wpcf7-validation-errors { display:inline-block; vertical-align: top; border:2px solid yellow; padding:0 10px; } .wpcf7-mail-sent-ok { display:inline-block; vertical-align: top; border:2px solid green; padding:0 10px; } } /* Archive Style -------------------------------------------------------------------------------*/ /* Single Style -------------------------------------------------------------------------------*/ .single article { border-bottom:2px solid #000; padding-bottom:30px; margin-bottom:40px; } .single .article-date { display:block; margin-bottom:8px; } .pagelink { border-top:2px solid #000; padding-top:15px; margin-top:20px; } .pagelink a { color:#000; text-decoration:none; } .pagelink a:hover { opacity:0.6; } .pageprev { width:48%; float:left; text-align:left; } .pagenext { width:48%; float:right; text-align:right; } .sp-menu-area { display:none; } @media screen and (max-height:50em) { #main-footer { padding:5px 0; .inner { max-width:1000px; width:94%; .marginCenter; nav { float:left; } .copyright { float:right; } } .inner:after { content:''; display:block; clear:both; } } } @media screen and (max-height:47.5em) { body.home { ul.link-list { width:62%; margin-bottom:50px; } } } @media screen and (max-width:68.75em) and (min-height:40em) { body.home { #wrapper { padding-top:60px; } } #main-footer { /*padding:15px 0;*/ /*.inner { nav { float:none; } .copyright { float:none; } }*/ } } @media screen and (max-width:60em) { #wrapper { width:100%; padding-top:0; } body.home { #main-header, ul.link-list { float:none; .marginCenter; margin-bottom:80px; } #main-header { width:65%; } ul.link-list { width:90%; } #main-footer { position:static; } } } @media screen and (max-width:51.75em) { #g-menu { ul { li { font-size:17px; } } } } @media screen and (max-width:47.5em) { .sp-menu-area { display:block; } #g-menu { display:none; } body.page { #main-header { position:relative; .inner { text-align:left; padding-right:60px; padding-left:0; } #btn-sp-menu { display: block; position:absolute; top:12px; right:12px; } #sp-g-menu { position:absolute; top:78px; left:0; width:100%; background-color:#FFF; display:none; a { display:block; border-bottom:1px solid #9a9a9a; color:#000; text-decoration: none; padding:12px 20px; } a:hover,a.touch { background-color:#e0e0e0; } a.parent:after { content:'▼'; display: inline-block; vertical-align: bottom; margin-left:6px; } a.parent.active:after { content:'▲'; } li { ul { display: none; border-bottom:1px solid #9a9a9a; a { padding-left:45px; } } } } } } body.aboutus, body.contact { table { width:94%; th,td { float:left; width:100%; } td { padding-top:0; } } input[type="text"], input[type="tel"], input[type="email"], textarea { width:100%; } input.your-zipcode { width:180px; } } } @media screen and (max-width:30em) { h1 { font-size:86%; } } @media screen and (max-width:26.25em) { body.page { #main-header { .inner { .logo { width:65px; } } #pagetitle { padding:60px 10px; } h2 { font-size:130%; padding:6px 10px; .icon { width:32px; margin-right:10px; } .en { margin-left: 10px; } } } } } // 20210331追記 body.home { #main-contents .link-list { li.link:nth-of-type(2), li.link:nth-of-type(5), li.link:nth-of-type(8) { margin-left: unset; margin-right: unset; } li.link { margin-left: 5px; margin-right: 5px; } } } body.lease { #pagetitle { background-image:url("@{imgdir}/lease/bg_pagetitle.jpg"); } #main-contents h4 { margin-top: 20px; } section#description_ { h3:not(:first-child) { margin-top: 25px; } } section#fee_ { h3 { margin-top: 25px; } table { width: 100%; // margin-bottom: 20px; tr { th, td { text-align: center; padding: 5px; } th:nth-child(1) { border-right: solid 1px #666; width: 100px; } th:not(:first-child):not(:last-child), td:not(:first-child):not(:last-child) { border-right: solid 1px #666; } } tr.table-header { th { border-bottom: solid 1px #666; } } tr:not(.table-header):not(:last-child) { th, td { border-bottom: solid 1px #666; } } } ul { li { list-style: inside; } } #list-address { li { span { font-size: 95%; color: #666; margin-left: 30px; } } } } }