/*
html5doctor.com
Reset Stylesheetv1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body {line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}nav ul {list-style:none;}blockquote, q {quotes:none;}blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}/* change colours to suit your needs */ins {background-color:#ff9;color:#000;text-decoration:none;}/* change colours to suit your needs */mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del {text-decoration: line-through;}abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}table {border-collapse:collapse;border-spacing:0;}/* change border colour to suit your needs */hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}input, select {vertical-align:middle;}li{list-style-type:none;}input[type="submit"] {-webkit-appearance: none;border-radius: 0px;}
body{
font-family:"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
color: #222222;
letter-spacing: 0.05rem;
line-height: 1.75rem;
background-color: #fcfcfc;
}
.dnbs{
display: none;
}
.db{
display: block;
}
h2.bt{
font-size: 1.75rem;
line-height: 2.75rem;
text-align: center;
letter-spacing: 0.1rem;
}
h2.bt span.bts{
display: inline-block;
background: no-repeat left center / auto 100% url(images/basic-title-left.svg),no-repeat right center / auto 100% url(images/basic-title-right.svg),#ebf5fa;
padding: 16px 108px;
border-radius: 6px;
}
h2.bt span.bts span.btc{
color: #0099ff;
}
.ap{
background: repeat-x center bottom / 70% url(images/basic-ap-back.svg);
color: #0099ff;
font-weight: bold;
}
.b-sec{
background-color: #f0f0f0;
padding: 40px 0px;
border-top: solid 1px #b6b6b6;
border-bottom: solid 1px #b6b6b6;
margin: 40px auto;
max-width: 1040px;
}
.b-m80{
margin: 80px auto;
}
.b-p24{
padding: 24px;
}
.b-p40{
padding: 40px;
}
.b-bold{
font-weight: bold;
}
.ti2{
font-size: 3rem;
line-height: 5rem;
font-weight: bold;
text-align: center;
margin-bottom: 60px;
font-family: 'Hind', sans-serif;
}
.ti2 span{
display: block;
font-size: 1.5rem;
line-height: 2.75rem;
position: relative;
}
.ti2 span:after{
content: "";
display: block;
width: 40px;
height: 2px;
background-color: #222222;
bottom: -20px;
left: calc(50% - 20px);
position: absolute;
}
.ti3{
font-size: 1.5rem;
line-height: 2.75rem;
text-align: center;
position: relative;
margin-bottom: 60px;
font-family: 'Hind', sans-serif;
}
.ti3:after{
content: "";
display: block;
width: 20px;
height: 2px;
background-color: #003333;
bottom: -20px;
left: calc(50% - 10px);
position: absolute;
}
.ti4{
font-size: 1.25rem;
line-height: 2.5rem;
text-align: center;
font-weight: bold;
margin-bottom: 20px;
}
a{
color: #0099ff;
}
.a-ghost{
padding: 20px 0px;
border: solid 2px #fcfcfc;
color: #fcfcfc;
text-decoration: none;
display: inline-block;
max-width: 312px;
margin: 0 auto;
width: 100%;
transition: all 0.2s ease;
}
.a-ghost:hover{
color: #222222;
background-color: #fcfcfc;
}
.a-b{
display: flex;
justify-content: center;
width: 100%;
max-width: 312px;
background-color: rgba(240,190,12, 1);
text-align: center;
padding: 20px 0px;
text-decoration: none;
margin: 0 auto;
font-weight: bold;
transition: all 0.2s ease;
border: solid 2px #222222;
box-sizing: border-box;
}
.a-b:hover{
background-color: #fcfcfc;
color: #222222;
}
.a-b:before{
content: "➡ ";
display: block;
}
.a-bw{
display: block;
width: 100%;
max-width: 312px;
background-color: #fcfcfc;
color: #222222;
text-align: center;
padding: 20px 0px;
text-decoration: none;
margin: 0 auto;
transition: all 0.2s ease;
border: solid 2px #fcfcfc;
box-sizing: border-box;
}
.a-bw:hover{
background-color: #222222;
color: #fcfcfc;
}
.explain{
font-size: 1.125rem;
line-height: 2.25rem;
text-align: center;
margin: 40px auto;
font-weight: bold;
padding: 0px 12px;
}
.center{
max-width: 1040px;
margin: 0 auto;
padding: 0px 12px;
}
.under-title{
padding: 40px 12px 0px;
}
div.table{
border-top: solid 1px #b8b8b8;
border-bottom: solid 1px #b8b8b8;
margin: 0px 40px 40px;
}
div.table dl {
border-bottom: solid 1px #e5e5e5;
display: flex;
background-color: #fefefe;
}
div.table dl dt {
box-sizing: border-box;
padding: 12px;
font-size: 1.125rem;
line-height: 2.25rem;
font-weight: bold;
min-width: 240px;
background-color: #fafafa;
}
div.table dl dd {
box-sizing: border-box;
padding: 12px;
}
nav#campaign{
text-align: center;
margin: 24px auto;
line-height: 1.5;
}
nav#campaign h2{
font-size: 1.25rem;
margin-bottom: 12px !important;
}
nav#campaign ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
nav#campaign ul li {
margin: 12px;
max-width: 120px;
}
nav#campaign ul li img{
display: block;
width: 100%;
}
span#recaptcha_nocheck{
color: red;
display: block;
text-align: center;
margin: 4px 0 0;
}
div.tabiiro-banner {
padding: 12px;
}
div.tabiiro-banner a {
display: block;
width: fit-content;
max-width: 1040px;
margin: 40px auto;
}
div.tabiiro-banner a img {
display: block;
width: 100%;
}
header#a-header {
padding-top: 24px;
height: 120px;
}
header#a-header div.inner {
display: flex;
justify-content: space-between;
}
header#a-header div.inner h1 {
}
header#a-header div.inner h1 a {
display: block;
width: 264px;
height: 64px;
text-indent: -9999px;
background: no-repeat center url(images/a-header-logo.svg);
}
header#a-header div.inner ul {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 680px;
padding-top: 26px;
margin-left: 12px;
}
header#a-header div.inner ul li {
}
header#a-header div.inner ul li a {
font-family: 'Hind', sans-serif;
font-weight: bold;
display: block;
position: relative;
color: #222222;
text-decoration: none;
}
header#a-header div.inner ul li a:after{
content: "";
display: block;
width: 16px;
height: 2px;
background-color: #222222;
position: absolute;
bottom: -8px;
transition: all 0.2s ease;
}
header#a-header div.inner ul li a:hover:after{
width: 100%;
}
header#a-header div.inner a#a-sp-menu{
display: none;
}
footer#a-footer {
background-color: #222222;
color: #fcfcfc;
display: flex;
flex-direction: column;
}
footer#a-footer div {
order: 2;
}
footer#a-footer div h2 {
}
footer#a-footer div h2 a {
display: block;
width: 264px;
height: 64px;
text-indent: -9999px;
background: no-repeat center url(images/a-hooter-logo.svg);
margin: 0 auto;
}
footer#a-footer div p {
text-align: center;
}
footer#a-footer nav {
order: 1;
}
footer#a-footer nav ul {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 800px;
margin: 40px auto;
}
footer#a-footer nav ul li {
}
footer#a-footer nav ul li a {
display: block;
color: #fcfcfc;
text-decoration: none;
position: relative;
font-weight: bold;
font-family: 'Hind', sans-serif;
}
footer#a-footer nav ul li a:after{
content: "";
display: block;
width: 16px;
height: 2px;
background-color: #fcfcfc;
position: absolute;
bottom: -8px;
transition: all 0.2s ease;
}
footer#a-footer nav ul li a:hover:after{
width: 100%;
}
footer#a-footer p {
order: 3;
text-align: center;
margin: 40px auto 20px;
}
/* =========================================================
page-index
========================================================= */
div#page-index {
}
div#page-index main {
}
div#page-index main section#catch {
position: relative;
max-width: 1280px;
}
div#page-index main section#catch div {
position: relative;
height: 560px;
box-sizing: border-box;
padding-top: 100px;
}
div#page-index main section#catch div h2 {
text-indent: -9999px;
width: 506px;
height: 202px;
background: no-repeat url(images/a-index-message.svg);
}
div#page-index main section#catch div p {
font-size: 1.125rem;
line-height: 2.25rem;
font-weight: bold;
position: absolute;
left: 0px;
top: 180px;
padding: 140px 90px 40px 20px;
background-color: rgba(255,255,255,0.8);
z-index: -1;
}
div#page-index main section#catch ul {
position: absolute;
right: 0px;
width: 900px;
top: 0px;
}
div#page-index main section#catch ul li{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: -3;
}
div#page-index main section#catch ul li img{
display: block;
width: 100%;
position: relative;
}
div#page-index main section#catch ul li#img1 {
animation: fade3 16s infinite;
z-index: -3;
}
div#page-index main section#catch ul li#img1 img {
}
div#page-index main section#catch ul li#img2 {
animation: fade2 16s infinite;
z-index: -3;
}
div#page-index main section#catch ul li#img2 img {
}
div#page-index main section#catch ul li#img3 {
animation: fade1 16s infinite;
z-index: -3;
}
div#page-index main section#catch ul li#img3 img {
}
div#page-index main section#catch ul li#img4 {
animation: fade4 16s infinite;
z-index: -3;
}
div#page-index main section#catch ul li#img4 img {
}
div#page-index main section#business {
}
div#page-index main section#business h2 {
}
div#page-index main section#business h2 span {
}
div#page-index main section#business div.dfside {
display: flex;
color: #fcfcfc;
text-align: center;
}
div#page-index main section#business div.dfside section#livi {
width: 50%;
background: no-repeat center / cover url(images/a-index-livithe5.jpg);
height: 800px;
display: flex;
flex-direction: column;
justify-content: flex-end;
box-sizing: border-box;
padding: 24px;
}
div#page-index main section#business div.dfside section#livi h3 {
font-size: 2.5rem;
line-height: 4rem;
}
div#page-index main section#business div.dfside section#livi p {
text-align: left;
margin: 20px auto;
}
div#page-index main section#business div.dfside section#livi a.a-ghost {
}
div#page-index main section#business div.dfside div.column {
width: 50%;
}
div#page-index main section#business div.dfside div.column section#kintoun {
height: 50%;
background: no-repeat center / cover url(images/a-index-rahmen.jpg);
display: flex;
flex-direction: column;
justify-content: flex-end;
box-sizing: border-box;
padding: 24px;
}
div#page-index main section#business div.dfside div.column section#kintoun h3 {
font-size: 1.25rem;
line-height: 2.5rem;
}
div#page-index main section#business div.dfside div.column section#kintoun p {
text-align: left;
margin: 20px auto;
}
div#page-index main section#business div.dfside div.column section#kintoun a.a-ghost {
}
div#page-index main section#business div.dfside div.column section#store-design {
height: 50%;
background: no-repeat center / cover url(images/a-index-interior.jpg);
display: flex;
flex-direction: column;
justify-content: flex-end;
box-sizing: border-box;
padding: 24px;
}
div#page-index main section#business div.dfside div.column section#store-design h3 {
font-size: 1.25rem;
line-height: 2.5rem;
}
div#page-index main section#business div.dfside div.column section#store-design p {
text-align: left;
margin: 20px auto;
}
div#page-index main section#business div.dfside div.column section#store-design a.a-ghost {
}
div#page-index main section#business p {
}
div#page-index main section#business a.a-b {
}
div#page-index main section#about {
}
div#page-index main section#about h2 {
}
div#page-index main section#about h2 span {
}
div#page-index main section#about div.ib {
width: 100%;
height: 420px;
background: no-repeat center / cover url(images/a-about-office.jpg);
}
div#page-index main section#about div.ib img {
display: none;
}
div#page-index main section#about p {
}
div#page-index main section#about a.a-b {
}
@keyframes fade1{
0%{
opacity: 1;
}
12.5%{
opacity: 1;
}
25%{
opacity: 0;
}
37.5%{
opacity: 0;
}
50%{
opacity: 0;
}
62.5%{
opacity: 0;
}
75%{
opacity: 0;
}
87.5%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes fade2{
0%{
opacity: 0;
}
12.5%{
opacity: 0;
}
25%{
opacity: 1;
}
37.5%{
opacity: 1;
}
50%{
opacity: 0;
}
62.5%{
opacity: 0;
}
75%{
opacity: 0;
}
87.5%{
opacity: 0;
}
100%{
opacity: 0;
}
}
@keyframes fade3{
0%{
opacity: 0;
}
12.5%{
opacity: 0;
}
25%{
opacity: 0;
}
37.5%{
opacity: 0;
}
50%{
opacity: 1;
}
62.5%{
opacity: 1;
}
75%{
opacity: 0;
}
87.5%{
opacity: 0;
}
100%{
opacity: 0;
}
}
@keyframes fade4{
0%{
opacity: 0;
}
12.5%{
opacity: 0;
}
25%{
opacity: 0;
}
37.5%{
opacity: 0;
}
50%{
opacity: 0;
}
62.5%{
opacity: 0;
}
75%{
opacity: 1;
}
87.5%{
opacity: 1;
}
100%{
opacity: 0;
}
}
/* =========================================================
page-business
========================================================= */
div#page-business {
}
div#page-business main {
}
div#page-business main div.under-title {
}
div#page-business main div.under-title h2.ti2 {
}
div#page-business main div.under-title h2.ti2 span {
}
div#page-business main section#business {
}
div#page-business main section#business h3.ti3 {
}
div#page-business main section#business ul {
}
div#page-business main section#business ul li {
}
div#page-business main section#business ul li section#livi {
display: flex;
flex-direction: column-reverse;
}
div#page-business main section#business ul li section#livi img {
width: 100%;
height: auto;
display: block;
}
div#page-business main section#business ul li section#livi div.colored {
background-color: #3f51b5;
margin: -60px 80px 40px 80px;
position: relative;
color: #fcfcfc;
}
div#page-business main section#business ul li section#livi div.colored h4 {
text-align: center;
font-size: 2rem;
line-height: 3.5rem;
font-weight: bold;
}
div#page-business main section#business ul li section#livi div.colored p {
margin-bottom: 40px;
}
div#page-business main section#business ul li section#livi div.colored a.a-bw {
color: #3f51b5;
}
div#page-business main section#business ul li section#livi div.colored a.a-bw:hover{
color: #fcfcfc;
background-color: #3f51b5;
}
div#page-business main section#business ul li section#kintoun {
display: flex;
flex-direction: column-reverse;
}
div#page-business main section#business ul li section#kintoun div.colored {
background-color: #222222;
margin: -60px 80px 40px 80px;
position: relative;
color: #fcfcfc;
}
div#page-business main section#business ul li section#kintoun div.colored h4 {
font-size: 1.5rem;
line-height: 2.75rem;
text-align: center;
}
div#page-business main section#business ul li section#kintoun div.colored h4 span {
}
div#page-business main section#business ul li section#kintoun div.colored p {
margin-bottom: 40px;
}
div#page-business main section#business ul li section#kintoun div.colored a.a-bw {
}
div#page-business main section#business ul li section#kintoun img {
display: block;
width: 100%;
}
div#page-business main section#business section#design {
display: flex;
flex-direction: column-reverse;
}
div#page-business main section#business section#design div.colored {
background-color: #fcfcfc;
margin: -80px 40px 40px 40px;
padding: 120px 24px 24px 24px;
}
div#page-business main section#business section#design div.colored h4.ti4 {
}
div#page-business main section#business section#design div.colored p {
}
div#page-business main section#business section#design div.colored nav {
}
div#page-business main section#business section#design div.colored nav ul {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 700px;
margin: 20px auto;
}
div#page-business main section#business section#design div.colored nav ul li {
width: 100%;
}
div#page-business main section#business section#design div.colored nav ul li:first-child{
margin-right: 6px;
}
div#page-business main section#business section#design div.colored nav ul li:last-child{
margin-left: 6px;
}
div#page-business main section#business section#design div.colored nav ul li a {
}
div#page-business main section#business section#design div.ib {
}
div#page-business main section#business section#design div.ib img {
width: 100%;
max-width: 800px;
margin: 0 auto;
display: block;
}
div#page-business main section#business section#anshante {
background-color: #fcfcfc;
margin: 40px;
display: flex;
}
div#page-business main section#business section#anshante div.left {
}
div#page-business main section#business section#anshante div.left h4 {
}
div#page-business main section#business section#anshante div.left h4 img {
display: block;
}
div#page-business main section#business section#anshante div.left p {
}
div#page-business main section#business section#anshante div.left p.b-bold {
font-size: 1.25rem;
line-height: 2.5rem;
margin-bottom: 20px;
}
div#page-business main section#business section#anshante div.left a.b-a {
}
div#page-business main section#business section#anshante div.ib {
height: 100%;
}
div#page-business main section#business section#anshante div.ib img {
display: block;
width: 100%;
}
div#page-business main section#business section.biz-n {
background-color: #fcfcfc;
margin: 40px;
padding: 24px;
}
div#page-business main section#business section.biz-n h4 {
font-size: 1.25rem;
line-height: 2.5rem;
}
div#page-business main section#business section.biz-n p {
margin-bottom: 20px;
}
div#page-business main section#business section.biz-n a.b-a {
}
div#page-business main section#business section.biz-n-i {
margin: 40px;
background-color: #fcfcfc;
display: flex;
justify-content: space-between;
}
div#page-business main section#business section.biz-n-i:last-child{
margin-bottom: 0px;
}
div#page-business main section#business section.biz-n-i div.left {
max-width: 600px;
padding: 24px;
box-sizing: border-box;
}
div#page-business main section#business section.biz-n-i div.left h4 {
font-size: 1.25rem;
line-height: 2.5rem;
}
div#page-business main section#business section.biz-n-i div.left p {
}
div#page-business main section#business section.biz-n-i div.ib{
max-width: 300px;
}
div#page-business main section#business section.biz-n-i div.ib img{
display: block;
width: 100%;
}
/* =========================================================
page-about
========================================================= */
div#page-about {
}
div#page-about main {
}
div#page-about main div.under-title {
}
div#page-about main div.under-title h2.ti2 {
margin-bottom: 60px;
}
div#page-about main div.under-title h2.ti2 span {
}
div#page-about main p#concept {
background: no-repeat center / cover url(images/a-about-office.jpg);
padding: 80px 20px;
margin: 0px auto -40px;
max-width: 1040px;
color: #fcfcfc;
text-align: right;
box-sizing: border-box;
font-size: 1.25rem;
line-height: 2.5rem;
}
div#page-about main section#about {
}
div#page-about main section#about h3.ti3 {
}
div#page-about main section#about div.table {
}
div#page-about main section#about div.table dl {
}
div#page-about main section#about div.table dl dt {
}
div#page-about main section#about div.table dl dd {
display: flex;
align-items: center;
}
div#page-about main section#about div.table dl dd ul {
}
div#page-about main section#about div.table dl dd ul li {
}
div#page-about main section#about div.table dl dd a {
}
div#page-about main section#about section.b-p40 {
padding-bottom: 0px;
}
div#page-about main section#about section.b-p40 h3.ti3 {
}
div#page-about main section#about section.b-p40 p.explain {
}
div#page-about main section#about section.b-p40 iframe#map {
width: 100%;
}
div#page-about main section#to-business {
}
div#page-about main section#to-business h2.ti2 {
}
div#page-about main section#to-business h2.ti2 span {
}
div#page-about main section#to-business ul.center {
display: flex;
}
div#page-about main section#to-business ul.center li {
width: 100%;
position: relative;
}
div#page-about main section#to-business ul.center li img {
display: block;
width: 100%;
}
div#page-about main section#to-business ul.center li span {
position: absolute;
bottom: 20px;
right: 0px;
display: block;
background-color: #222222;
padding: 16px;
text-align: center;
color: #fcfcfc;
font-weight: bold;
}
div#page-about main section#to-business p.explain {
}
div#page-about main section#to-business a.a-b {
}
/* =========================================================
page-contact
========================================================= */
div#page-contact {
}
div#page-contact main {
}
div#page-contact main div.under-title {
}
div#page-contact main div.under-title h2.ti2 {
}
div#page-contact main div.under-title h2.ti2 span {
}
div#page-contact main section#contact {
}
div#page-contact main section#contact h3.ti3 {
}
div#page-contact main section#contact p.explain {
}
div#page-contact main section#contact form {
margin: 0px 40px;
background-color: #fcfcfc;
padding: 40px;
}
div#page-contact main section#contact form dl {
display: flex;
margin-bottom: 12px;
}
div#page-contact main section#contact form dl dt {
width: 100%;
max-width: 156px;
padding-left: 12px;
height: 56px;
display: flex;
align-items: center;
font-weight: bold;
}
div#page-contact main section#contact form dl dd {
width: 100%;
}
div#page-contact main section#contact form dl dd input {
padding: 12px;
border: solid 1px #c1c1c1;
box-sizing: border-box;
height: 56px;
display: flex;
align-items: center;
width: 100%;
font-size: 1rem;
line-height: 1.5rem;
}
div#page-contact main section#contact form dl dd textarea#prv {
padding: 12px;
border: solid 1px #c1c1c1;
box-sizing: border-box;
display: flex;
height: 320px;
align-items: center;
width: 100%;
font-size: 1rem;
line-height: 1.5rem;
}
div#page-contact main section#contact form input#submit {
font-size: 1.25rem;
line-height: 2.5rem;
margin-top: 40px;
}
div#page-contact main section#contact form input {
}
div#page-contact main section#contact form div.g-recaptcha{
display: flex;
justify-content: center;
margin: 8px auto 0;
}
div#page-reqruit {
}
div#page-reqruit main {
}
div#page-reqruit main div.under-title {
}
div#page-reqruit main div.under-title h2.ti2 {
}
div#page-reqruit main div.under-title h2.ti2 span {
}
div#page-reqruit main section#about {
}
div#page-reqruit main section#about h3.ti3 {
}
div#page-reqruit main section#about div.table {
}
div#page-reqruit main section#about div.table dl {
}
div#page-reqruit main section#about div.table dl dt {
}
div#page-reqruit main section#about div.table dl dd {
}
div#page-reqruit main section#about div.table dl dd img {
display: block;
width: 100%;
max-width: 464px;
margin-top: 12px;
}
div#page-reqruit main section#about a.a-b {
}
div#page-reqruit main section#recruit {
}
div#page-reqruit main section#recruit h3.ti3 {
}
div#page-reqruit main section#recruit p.explain {
}
div#page-reqruit main section#recruit div.table {
}
div#page-reqruit main section#recruit div.table dl {
}
div#page-reqruit main section#recruit div.table dl dt {
}
div#page-reqruit main section#recruit div.table dl dd {
}
div#page-reqruit main section#recruit div.table dl dd img{
display: block;
width: 100%;
max-width: 514px;
}
div#page-reqruit main section#recruit a.a-b {
}
/* =========================================================
page-shopdesign
========================================================= */
div#page-shopdesign {
}
div#page-shopdesign main {
}
div#page-shopdesign main section#catch {
width: 100%;
max-width: 1280px;
margin: 0 auto;
position: relative;
height: 812px;
}
div#page-shopdesign main section#catch div.title {
padding: 40px 110px 60px 120px;
width: 348px;
position: relative;
z-index: 301;
background-color: rgba(252,252,252,0.8);
}
div#page-shopdesign main section#catch div.title h2 {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 4rem;
line-height: 6rem;
letter-spacing: 0.3rem;
border-bottom: solid 2px;
display: inline-block;
margin-bottom: 10px;
}
div#page-shopdesign main section#catch div.title h3 {
font-family: 'M PLUS 1p', sans-serif;
font-size: 1.375rem;
line-height: 2.625rem;
letter-spacing: 0.1rem;
}
div#page-shopdesign main section#catch div.title p {
font-family: 'M PLUS 1p', sans-serif;
margin-top: 16px;
}
div#page-shopdesign main section#catch ul {
width: 100%;
height: 100%;
}
div#page-shopdesign main section#catch ul li{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
div#page-shopdesign main section#catch ul li img{
display: none;
}
div#page-shopdesign main section#catch ul li#img-cafe {
background: no-repeat center / cover url(images/a-shopdesign-pic1.jpg);
animation: fade 10s ease infinite;
}
div#page-shopdesign main section#catch ul li#img-cafe img {
}
div#page-shopdesign main section#catch ul li#img-town {
opacity: 0;
background: no-repeat center / cover url(images/a-shopdesign-pic2.jpg);
animation: fade 10s ease 5s infinite;
}
div#page-shopdesign main section#catch ul li#img-town img {
}
div#page-shopdesign main section#archive {
}
div#page-shopdesign main section#archive h3.ti3 {
}
div#page-shopdesign main section#archive p.explain {
}
div#page-shopdesign main section#archive ul#archive_ul {
display: flex;
justify-content: space-around;
padding: 40px;
flex-wrap: wrap;
}
div#page-shopdesign main section#archive ul#archive_ul li {
margin-bottom: 60px;
}
div#page-shopdesign main section#archive ul#archive_ul li a {
display: block;
color: #222222;
text-decoration: none;
}
div#page-shopdesign main section#archive ul#archive_ul li a:hover > div.img_base img{
transform: scale(1.05);
}
div#page-shopdesign main section#archive ul#archive_ul li a:hover > h4:after{
width: 100%;
}
div#page-shopdesign main section#archive ul#archive_ul li a div.img_base {
width: 300px;
height: 185px;
overflow: hidden;
}
div#page-shopdesign main section#archive ul#archive_ul li a div.img_base img.attachment-post-thumbnail {
display: block;
width: 100%;
transition: all 0.2s ease;
height: auto;
}
div#page-shopdesign main section#archive ul#archive_ul li a h4 {
position: relative;
margin-top: 12px;
}
div#page-shopdesign main section#archive ul#archive_ul li a h4:after{
content: "";
display: block;
height: 2px;
width: 20px;
background-color: #222222;
position: absolute;
bottom: -12px;
left: 0px;
transition: all 0.2s ease;
}
div#page-shopdesign main section#archive nav.navigation {
}
div#page-shopdesign main section#archive nav.navigation h2.screen-reader-text {
}
div#page-shopdesign main section#archive nav.navigation div.nav-links {
}
div#page-shopdesign main section#archive nav.navigation div.nav-links ul.page-numbers {
display: flex;
justify-content: center;
}
div#page-shopdesign main section#archive nav.navigation div.nav-links ul.page-numbers li {
}
div#page-shopdesign main section#archive nav.navigation div.nav-links ul.page-numbers li span.page-numbers {
padding: 12px;
font-weight: bold;
}
div#page-shopdesign main section#archive nav.navigation div.nav-links ul.page-numbers li a.page-numbers {
color: #222222;
text-decoration: none;
padding: 12px;
}
div#page-shopdesign main section#archive nav.navigation div.nav-links ul.page-numbers li a.page-numbers:hover{
text-decoration: underline;
}
div#page-shopdesign main section#archive nav.navigation div.nav-links ul.page-numbers li a.next {
}
div#page-shopdesign main section#archive section#to-order{
margin-top: 40px;
}
div#page-shopdesign main section#archive section#to-order a{
margin-top: 40px;
}
@keyframes fade{
0%{
opacity: 0;
}
15%{
opacity: 1;
}
50%{
opacity: 1;
}
65%{
opacity: 0;
}
100%{
opacity: 0;
}
}
/* =========================================================
page-shopdesign-detail
========================================================= */
div#page-shopdesign-detail {
}
div#page-shopdesign-detail main {
background: no-repeat center top / 1280px auto url(images/a-shopdesign-pic2.jpg);
}
div#page-shopdesign-detail main section#catch {
}
div#page-shopdesign-detail main section#catch div.title {
padding: 40px 110px 60px 0px;
width: 348px;
position: relative;
z-index: 301;
background-color: rgba(252,252,252,0.8);
}
div#page-shopdesign-detail main section#catch div.title h2 {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 4rem;
line-height: 6rem;
letter-spacing: 0.3rem;
border-bottom: solid 2px;
display: inline-block;
margin-bottom: 10px;
}
div#page-shopdesign-detail main section#catch div.title h3 {
font-family: 'M PLUS 1p', sans-serif;
font-size: 1.375rem;
line-height: 2.625rem;
letter-spacing: 0.1rem;
}
div#page-shopdesign-detail main section#detail {
padding-right: 12px;
padding-left: 12px;
}
div#page-shopdesign-detail main section#detail h3.ti3 {
}
div#page-shopdesign-detail main section#detail div.content {
}
div#page-shopdesign-detail main section#detail div.content h2{
padding-top: 8px;
padding-bottom: 8px;
margin-top: 40px;
margin-bottom: 20px;
font-size: 1.5rem;
line-height: 2.75rem;
text-align: center;
color: #fcfcfc;
background-color: #222222;
}
div#page-shopdesign-detail main section#detail div.content p {
}
div#page-shopdesign-detail main section#detail div.content p img.alignnone {
display: block;
margin: 10px auto;
width: 100%;
height: auto;
}
div#page-shopdesign-detail main section#detail a.back {
color: #222222;
text-align: center;
margin: 20px auto;
display: block;
}
div#page-shopdesign-detail main section#detail section#to-order {
}
div#page-shopdesign-detail main section#detail section#to-order h3.ti3 {
}
div#page-shopdesign-detail main section#detail section#to-order p.explain {
}
div#page-shopdesign-detail main section#detail section#to-order a.a-b {
}
#page-livi .b-sec{
background-color: transparent;
padding: 64px 0px;
border-top: none;
border-bottom: none;
margin: auto;
max-width: 100%;
}
.center{
max-width: 1040px;
margin: 0 auto;
}
.f-g{
font-family: 'Hind', sans-serif;
font-weight: 500;
font-size: 4rem;
line-height: 6rem;
text-align: center;
letter-spacing: 0.2rem;
}
a{
color: #333333;
}
.b-a{
opacity: 0.75;
display: block;
padding: 12px;
text-align: center;
font-size: 1.25rem;
line-height: 2rem;
border: solid 4px;
max-width: 248px;
margin: 40px auto;
text-decoration: none;
transition: all 0.4s ease;
font-family: 'Hind', sans-serif;
font-weight: 600;
}
.b-a:hover{
opacity: 1;
}
.dib{
display: inline-block;
}
#page-livi .b-back{
background: linear-gradient(0deg, #e6c517 0%,#e6c517 50%,transparent 50%, transparent);
padding-bottom: 1%;
}
body#livi-body h2{
margin-bottom: 80px;
}
body#livi-body{
/* background: no-repeat center -174px url(images/layout-livi.jpg) #f3f3f3;. */
color: #333333;
background-color: #f3f3f3;
}
/* =========================================================
page-livi
========================================================= */
div#page-livi {
font-size: 1rem;
line-height: 2.25rem;
}
div#page-livi main {
}
div#page-livi main section#livi {
}
/* =========================================================
catch
========================================================= */
div#page-livi main section#livi div#catch {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.1);
}
div#page-livi main section#livi div#catch h1 {
background: no-repeat center / 640px auto url(images/l-header-logo.svg);
width: 530px;
height: 360px;
text-indent: -9999px;
}
div#page-livi main section#livi div#catch h2 {
text-align: center;
color: #f3f3f3;
}
div#page-livi main section#livi div#catch ul.imgs {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
div#page-livi main section#livi div#catch ul.imgs li
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
div#page-livi main section#livi div#catch ul.imgs li img{
display: none;
}
div#page-livi main section#livi div#catch ul.imgs li#img1 {
background: no-repeat center / cover url(images/l-index-slide_1.jpg);
animation: fade1 16s infinite;
}
div#page-livi main section#livi div#catch ul.imgs li#img1 img {
}
div#page-livi main section#livi div#catch ul.imgs li#img2 {
background: no-repeat center / cover url(images/l-index-slide_2.jpg);
animation: fade2 16s infinite;
}
div#page-livi main section#livi div#catch ul.imgs li#img2 img {
}
div#page-livi main section#livi div#catch ul.imgs li#img3 {
background: no-repeat center / cover url(images/l-index-slide_3.jpg);
animation: fade3 16s infinite;
}
div#page-livi main section#livi div#catch ul.imgs li#img3 img {
}
div#page-livi main section#info {
}
div#page-livi main section#info h2.f-g {
background-repeat: repeat-x;
background-position: center;
background-image: url(images/l-index-news-line-dot.svg);
}
div#page-livi main section#info h2.f-g span{
display: block;
border-top: solid 8px;
border-bottom: solid 8px;
background-color: #f3f3f3;
max-width: 400px;
margin: 0 auto;
text-align: center;
font-size: 4rem;
line-height: 6rem;
}
div#page-livi main section#info ul {
display: flex;
justify-content: center;
}
div#page-livi main section#info ul li {
max-width: 320px;
margin-right: 12px;
}
div#page-livi main section#info ul li a {
display: block;
text-decoration: none;
color: #333333;
}
div#page-livi main section#info ul li a div.img_base {
overflow: hidden;
height: 185px;
}
div#page-livi main section#info ul li a div.img_base img{
display: block;
width: 100%;
height: auto;
}
div#page-livi main section#info ul li a h4 {
font-size: 1.25rem;
line-height: 2rem;
padding-top: 12px;
}
div#page-livi main section#info ul li a p.date {
}
div#page-livi main section#info a#to-news {
margin-top: 40px;
}
div#page-livi main section#concept {
background: repeat-x center top url(images/l-piece-lower.svg),repeat url(images/l-texture-blue.png);
color: #f3f3f3;
overflow: hidden;
padding-bottom: 148px;
}
div#page-livi main section#concept h2.f-g {
border-bottom: solid 8px #f3f3f3;
padding-bottom: 12px;
width: 280px;
margin: 40px auto 0px;
line-height: 5rem;
}
div#page-livi main section#concept h3 {
margin: 40px auto 60px;
text-align: center;
font-size: 1.5rem;
line-height: 3rem;
letter-spacing: 0.2rem;
}
div#page-livi main section#concept p {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
div#page-livi main section#concept ul.i-list-u {
display: flex;
justify-content: center;
width: 100%;
margin-top: 104px;
}
div#page-livi main section#concept ul.i-list-u li {
max-width: 320px;
width: 100%;
margin: 8px;
}
div#page-livi main section#concept ul.i-list-u li img {
display: block;
width: 320px;
}
div#page-livi main section#concept ul.i-list-l {
display: flex;
justify-content: center;
width: 100%;
}
div#page-livi main section#concept ul.i-list-l li {
max-width: 320px;
width: 100%;
margin: 8px;
}
div#page-livi main section#concept ul.i-list-l li img {
display: block;
width: 320px;
}
div#page-livi main section#instagram {
}
div#page-livi main section#instagram h2.f-g {
}
div#page-livi main section#instagram ul {
display: flex;
justify-content: space-between;
}
div#page-livi main section#instagram ul li {
max-width: 240px;
margin-right: 12px;
}
div#page-livi main section#instagram ul li:last-child{
margin-right: 0px;
}
div#page-livi main section#instagram ul li a {
display: block;
width: 100%;
}
div#page-livi main section#instagram ul li a img{
display: block;
width: 100%;
}
div#page-livi main section#instagram a#to-instagram {
}
div#page-livi main section#menu {
background: url(images/l-texture-white.png);
}
div#page-livi main section#menu h2.f-g {
border-bottom: solid 8px;
width: 192px;
margin: 40px auto;
}
div#page-livi main section#menu div.img-l {
display: flex;
max-width: 1280px;
margin: 64px auto;
justify-content: space-between;
flex-direction: row-reverse;
}
div#page-livi main section#menu div.img-l div.right {
max-width: 572px;
}
div#page-livi main section#menu div.img-l div.right h3 {
font-size: 1.25rem;
line-height: 2rem;
}
div#page-livi main section#menu div.img-l div.right p.price {
font-weight: bold;
}
div#page-livi main section#menu div.img-l div.right p.explain {
font-weight: normal;
font-size: 1rem;
line-height: 2.25rem;
text-align: left;
}
div#page-livi main section#menu div.img-l div.ib {
max-width: 680px;
margin-right: 24px;
}
div#page-livi main section#menu div.img-l div.ib img {
display: block;
width: 100%;
}
div#page-livi main section#menu div.img-r {
display: flex;
max-width: 1280px;
margin: 64px auto;
justify-content: space-between;
}
div#page-livi main section#menu div.img-r div.right {
max-width: 572px;
}
div#page-livi main section#menu div.img-r div.right h3 {
font-size: 1.25rem;
line-height: 2rem;
}
div#page-livi main section#menu div.img-r div.right p.price {
font-weight: bold;
}
div#page-livi main section#menu div.img-r div.right p.explain {
font-size: 1rem;
line-height: 2.25rem;
font-weight: normal;
text-align: left;
}
div#page-livi main section#menu div.img-r div.ib {
max-width: 680px;
margin-left: 24px;
}
div#page-livi main section#menu div.img-r div.ib img {
display: block;
width: 100%;
}
div#page-livi main section#menu section#lunch-menu {
max-width: 1040px;
margin: 160px auto 80px;
}
div#page-livi main section#menu section#lunch-menu div#img-area {
position: relative;
}
div#page-livi main section#menu section#lunch-menu div#img-area h3 {
width: 370px;
height: 118px;
text-indent: -9999px;
background: no-repeat center / contain url(images/l-index-menu-lunch-title.svg);
position: absolute;
top: -74px;
left: 10px;
}
div#page-livi main section#menu section#lunch-menu div#img-area div {
width: 100%;
}
div#page-livi main section#menu section#lunch-menu div#img-area div img {
display: block;
width: 100%;
}
div#page-livi main section#menu section#lunch-menu div#img-area p.peice {
width: 250px;
height: 120px;
text-indent: -9999px;
background: no-repeat center / contain url(images/l-index-menu-lunch-price.svg);
position: absolute;
bottom: -26px;
right: 20px;
z-index: 1;
}
div#page-livi main section#menu section#lunch-menu div.explain-area {
background: url(images/l-texture-line.svg);
padding: 16px;
margin: -16px auto 16px;
box-sizing: border-box;
z-index: 0;
position: relative;
width: fit-content;
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner {
background-color: #f3f3f3;
display: flex;
justify-content: space-around;
padding: 32px 8px 32px 20px;
flex-wrap: wrap;
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner dl {
max-width: 480px;
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner dl dt {
font-size: 1.5rem;
line-height: 3rem;
letter-spacing: 0.2rem;
font-weight: bold;
padding-bottom: 6px;
background: no-repeat center bottom / contain url(images/l-index-menu-lunch-underline.svg);
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner dl dt span.sub{
display: block;
font-size: 1.25rem;
line-height: 2rem;
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner dl dd {
font-weight: bold;
font-size: 1.125rem;
line-height: 2rem;
margin-top: 20px;
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner div.add {
padding: 12px;
color: #d67c58;
position: relative;
margin-left: 12px;
font-size: 1.25rem;
line-height: 2rem;
font-weight: bold;
width: 100%;
max-width: 440px;
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner div.add p{
font-weight: normal;
text-align: center;
display: flex;
justify-content: center;
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner div.add p:before{
content: "";
display: block;
margin-right: 8px;
width: 23px;
height: 30px;
background: no-repeat center / contain url(images/l-index-menu-lunch-apl.svg);
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner div.add p:after{
content: "";
display: block;
margin-left: 8px;
width: 23px;
height: 30px;
background: no-repeat center / contain url(images/l-index-menu-lunch-apr.svg);
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner div.add:before{
content: "";
display: block;
position: absolute;
left: calc(50% - 80px);
top: -20px;
width: 160px;
height: 46px;
background: no-repeat center url(images/l-index-menu-lunch-drinkanddessert.svg) #f3f3f3;
display: none;
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner div.add ul{
color: #333333;
display: flex;
flex-wrap: wrap;
padding: 24px 26px;
background: no-repeat center / contain url(images/l-index-menu-lunch-menu-border.svg);
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner div.add ul li{
padding-left: 20px;
background: no-repeat 2px center url(images/l-index-menu-lunch-dot.svg);
font-size: 0.875rem;
line-height: 1.375rem;
margin: 4px 12px 4px 0px;
}
div#page-livi main section#menu section#lunch-menu div.explain-area div.inner p span.large {
font-size: 1.25rem;
line-height: 2rem;
font-weight: bold;
}
div#page-livi main section#menu p.takeout{
font-size: 1.75rem;
line-height: 2.75rem;
text-align: center;
font-weight: bold;
margin: 20px 12px;
}
div#page-livi main section#menu p.takeout strong{
background: linear-gradient(0deg, #e6c517 0%,#e6c517 50%,transparent 50%, transparent);
}
div#page-livi main section#menu a#to-demaekan{
display: flex;
background: no-repeat 20px center / 60px url(images/l-demaekan.jpg) #f42900;
padding: 20px 20px 20px 98px;
text-decoration: none;
font-size: 1.25rem;
align-items: center;
width: 200px;
margin: 0 auto;
color: #f3f3f3;
font-weight: bold;
}
div#page-livi main section#menu a#to-instagram {
}
div#page-livi main section#contact {
background-color: #dfdad3;
}
div#page-livi main section#contact h2.f-g {
border-bottom: solid 8px;
width: 300px;
margin: 40px auto;
}
div#page-livi main section#contact div.img-r {
display: flex;
}
div#page-livi main section#contact div.img-r div.left {
width: 100%;
max-width: 524px;
margin-right: 40px;
}
div#page-livi main section#contact div.img-r div.left h3 {
font-size: 2.25rem;
line-height: 3.5rem;
}
div#page-livi main section#contact div.img-r div.left h3 span {
font-size: 1.25rem;
line-height: 2rem;
}
div#page-livi main section#contact div.img-r div.left dl {
margin-bottom: 16px;
}
div#page-livi main section#contact div.img-r div.left dl dt {
background-color: #333333;
color: #f3f3f3;
font-weight: bold;
padding: 4px;
font-size: 1.25rem;
line-height: 2rem;
}
div#page-livi main section#contact div.img-r div.left dl dd {
font-size: 1.25rem;
line-height: 2rem;
}
div#page-livi main section#contact div.img-r div.left dl dd.exinfo{
font-size: 1rem;
line-height: 2.25rem;
line-height: 1.75;
color: #d67c58;
}
div#page-livi main section#contact div.img-r div.left dl dd a {
font-size: 2.5rem;
line-height: 4rem;
font-family: 'Hind', sans-serif;
font-weight: 700;
padding-left: 40px;
background: no-repeat left center url(images/l-contact-tel-icon.svg);
text-decoration: none;
padding-top: 9px;
}
div#page-livi main section#contact div.img-r div.left dl dd ul {
}
div#page-livi main section#contact div.img-r div.left dl dd ul li {
}
div#page-livi main section#contact div.img-r div.ib {
max-width: 474px;
margin-top: 57px;
}
div#page-livi main section#contact div.img-r div.ib img {
display: block;
width: 100%;
}
/* =========================================================
events
========================================================= */
div#page-livi main section#contact div#addinfo-area{
padding: 40px;
box-sizing: border-box;
margin-bottom: 40px;
background-color: #f3f3f3;
}
div#page-livi main section#contact div#addinfo-area div.addinfo {
display: flex;
margin-bottom: 40px;
}
div#page-livi main section#contact div#addinfo-area div.addinfo:last-child{
margin-bottom: 0px;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.left {
max-width: 480px;
margin-right: 40px;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.left h3 {
font-size: 2rem;
line-height: 3.5rem;
border-bottom: solid 4px;
margin-bottom: 16px;
padding-bottom: 8px;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.left h3 strong{
padding: 0px 4px 8px;
margin-right: 4px;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.left h3 span {
display: block;
font-size: 1.25rem;
line-height: 2rem;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.left h3 span.di{
display: inline;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.left h4{
background-color: #3f51b3;
color: #f3f3f3;
font-weight: bold;
padding: 4px 8px;
font-size: 1.125rem;
line-height: 2rem;
margin-top: 20px;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.left ul.events{
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.left ul.events li{
padding: 8px;
font-weight: bold;
border-radius: 4px;
background: #333333;
color: #fff;
margin: 4px 8px 4px 0px;
line-height: 1.25rem;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.left strong{
background: linear-gradient(0deg, #e6c517 0%,#e6c517 50%,transparent 50%, transparent);
padding-bottom: 1%;
}
div#page-livi main section#contact div#addinfo-area p.add {
color: #808080;
font-weight: bold;
font-size: 0.875rem;
line-height: 1.375rem;
padding: 8px;
background-color: #dfdad3;
margin-top: 18px;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.ib {
max-width: 440px;
}
div#page-livi main section#contact div#addinfo-area div.addinfo div.ib img {
display: block;
width: 100%;
}
div#page-livi main section#contact h3.f-g {
font-size: 2.25rem;
letter-spacing: 0rem;
text-align: left;
max-width: 1040px;
margin: 0 auto;
}
div#page-livi main section#contact iframe#map {
max-width: 1040px;
margin: 0 auto;
width: 100%;
display: block;
height: 400px;
}
div#page-livi main section#reqruit {
color: #f3f3f3;
background: no-repeat center / cover url(images/l-index-recruit-bg.jpg);
padding: 80px 12px;
}
div#page-livi main section#reqruit h2.f-g {
color: #f3f3f3;
border-bottom: solid 8px;
width: 248px;
margin: 0 auto;
}
div#page-livi main section#reqruit p.explain {
font-size: 1.5rem;
line-height: 3rem;
letter-spacing: 0.2rem;
}
div#page-livi main section#reqruit h3 {
max-width: 1040px;
border-bottom: solid 2px #f3f3f3;
text-align: center;
margin: 0 auto 40px;
font-size: 1.5rem;
line-height: 3rem;
letter-spacing: 0.2rem;
}
div#page-livi main section#reqruit div.inner div.ib{
max-width: 320px;
margin: 20px auto;
}
div#page-livi main section#reqruit div.inner div.ib img{
display: block;
width: 100%;
}
div#page-livi main section#reqruit div.tables {
max-width: 640px;
margin: 0 auto;
line-height: 1.75rem;
}
div#page-livi main section#reqruit div.tables dl {
display: flex;
margin-bottom: 20px;
}
div#page-livi main section#reqruit div.tables dl dt {
text-align: right;
min-width: 200px;
padding-right: 20px;
}
div#page-livi main section#reqruit div.tables dl dd {
}
div#page-livi main section#reqruit p#tel {
}
div#page-livi main section#reqruit p#tel a {
text-align: center;
font-size: 3rem;
line-height: 4.5rem;
font-weight: bold;
color: #f3f3f3;
display: block;
padding-left: 40px;
background: no-repeat left center url(images/l-index-recruit-tel-icon.svg);
text-decoration: none;
width: 400px;
margin: 0 auto;
}
div#page-livi main footer {
background-color: #333333;
display: flex;
flex-direction: column-reverse;
color: #f3f3f3;
padding: 60px 12px 40px;
}
div#page-livi main footer h2 {
text-align: center;
margin: 80px auto 0px;
}
div#page-livi main footer nav {
}
div#page-livi main footer nav ul {
display: flex;
justify-content: center;
}
div#page-livi main footer nav ul li {
}
div#page-livi main footer nav ul li a {
font-size: 1.25rem;
line-height: 2rem;
text-decoration: none;
color: #f3f3f3;
font-family: 'Hind', sans-serif;
padding: 0px 20px;
}
/* =========================================================
page-livi
========================================================= */
div#page-livi {
}
div#page-livi main {
}
div#page-livi main header#news-header {
height: 160px;
background: no-repeat center / cover url(images/l-header-bg.jpg);
}
div#page-livi main header#news-header h1 {
height: 160px;
width: 493px;
background: no-repeat center / contain url(images/l-header-logo.svg);
margin: 0 auto;
text-indent: -9999px;
}
div#page-livi main section.detail {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
div#page-livi main section.detail h2.f-g {
}
div#page-livi main section.detail h2.f-g span {
}
div#page-livi main section.detail h3.ti3 {
}
div#page-livi main section.detail p.date {
text-align: center;
margin-top: -30px;
margin-bottom: 20px;
font-size: 0.875rem;
line-height: 1.375rem;
}
div#page-livi main section.detail div.img_base img{
display: block;
margin: 0 auto;
max-width: 100%;
}
div#page-livi main section.detail div.content {
padding: 40px;
font-weight: bold;
font-size: 1.125rem;
line-height: 2rem;
}
div#page-livi main section.detail div.content img{
display: block;
max-width: 100%;
height: auto;
}
div#page-livi main section.detail div.content p {
}
div#page-livi main section.detail a#to-news {
}
/* =========================================================
space
========================================================= */
div#space {
padding: 40px;
box-sizing: border-box;
margin-bottom: 40px;
background-color: #f3f3f3;
font-weight: bold;
}
div#space h3 {
font-size: 2rem;
line-height: 3.5rem;
line-height: 3.5rem;
border-bottom: solid 4px;
margin-bottom: 16px;
padding-bottom: 8px;
}
div#space h3 span {
font-size: 1rem;
line-height: 2.25rem;
margin-left: 12px;
}
div#space div.flex {
display: flex;
justify-content: space-between;
}
div#space div.flex div.left {
width: 100%;
margin-right: 28px;
}
div#space div.flex div.left div.price {
background-color: #dfdad3;
padding: 16px;
}
div#space div.flex div.left div.price dl {
display: flex;
margin-bottom: 8px;
}
div#space div.flex div.left div.price dl:last-child {
margin-bottom: 0;
}
div#space div.flex div.left div.price dl dt {
width: 132px;
text-align: center;
background-color: #f3f3f3;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
}
div#space div.flex div.left div.price dl dd {
font-size: 1.5rem;
line-height: 3rem;
letter-spacing: 0.2rem;
line-height: 1;
display: flex;
align-items: center;
}
div#space div.flex div.left div.price dl dd span {
font-size: 1rem;
line-height: 2.25rem;
}
div#space div.flex div.left ul#apeal-list {
display: flex;
justify-content: space-between;
margin: 24px auto;
}
div#space div.flex div.left ul#apeal-list li {
border: solid 2px #333333;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
height: 144px;
width: 144px;
}
div#space div.flex div.left ul#apeal-list li span.line {
background: linear-gradient(0deg, #e6c517 0%,#e6c517 50%,transparent 50%, transparent);
line-height: 1;
}
div#space div.flex div.left ul#apeal-list li:nth-child(2){
margin: 0px 8px;
}
div#space div.flex div.left h4 {
font-size: 1.25rem;
line-height: 2rem;
border-bottom: solid 4px;
margin-bottom: 16px;
padding-bottom: 8px;
}
div#space div.flex div.left ul#tags {
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
}
div#space div.flex div.left ul#tags li {
padding: 8px;
font-weight: bold;
border-radius: 4px;
background: #333333;
color: #fff;
margin: 4px 8px 4px 0px;
line-height: 1.25rem;
}
div#space div.flex div.left ul#tags li.etc {
}
div#space div.flex div.ib {
max-width: 440px;
}
div#space div.flex div.ib img {
display: block;
width: 100%;
}
div#space p {
color: #808080;
font-weight: bold;
font-size: 0.875rem;
line-height: 1.375rem;
padding: 8px;
background-color: #dfdad3;
margin-top: 18px;
}
@keyframes fade1{0%{opacity:1}16.7%{opacity:1}33.4%{opacity:0}50.1%{opacity:0}66.8%{opacity:0}83.5%{opacity:0}100%{opacity:1}}@keyframes fade2{0%{opacity:0}16.7%{opacity:0}33.4%{opacity:1}50.1%{opacity:1}66.8%{opacity:0}83.5%{opacity:0}100%{opacity:0}}@keyframes fade3{0%{opacity:0}16.7%{opacity:0}33.4%{opacity:0}50.1%{opacity:0}66.8%{opacity:1}83.5%{opacity:1}100%{opacity:0}}
div#page-anshante{
color: #333333;
font-size: 1rem;
line-height: 2rem;
}
body{
/* background: no-repeat center top url(images/layout-e.jpg); */
}
div#page-anshante {
}
div#page-anshante main {
}
div#page-anshante main .yb{
position: relative;
z-index: 0;
}
div#page-anshante main .yb:after{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 30%;
left: 0px;
background-color: rgba(240,234,12, 1);
z-index: -1;
}
div#page-anshante main .hyb{
position: relative;
z-index: 0;
}
div#page-anshante main .hyb:after{
content: "";
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 50%;
left: 0px;
background-color: rgba(240,234,12, 1);
z-index: -1;
}
div#page-anshante main section.bsec{
padding: 80px 12px;
}
div#page-anshante main div.centering{
max-width: 1040px;
margin: 0 auto;
}
div#page-anshante main header{
border-bottom: solid 8px #009688;
}
div#page-anshante main header div.inner {
max-width: 1040px;
margin: 0 auto;
padding: 40px 0px 20px;
}
div#page-anshante main header div.inner h1 {
}
div#page-anshante main header div.inner h1 a {
display: block;
width: 204px;
height: 64px;
margin: 0 auto 20px;
text-indent: -9999px;
background: no-repeat url(images/e-header-logo.svg);
}
div#page-anshante main header div.inner nav {
display: flex;
justify-content: center;
}
div#page-anshante main header div.inner nav ul {
display: flex;
justify-content: center;
}
div#page-anshante main header div.inner nav ul li {
}
div#page-anshante main header div.inner nav ul li a {
display: block;
padding: 12px;
color: #333333;
text-decoration: none;
font-weight: bold;
transition: all 0.4s ease;
}
div#page-anshante main header div.inner nav ul li a:hover{
color: #fefefe;
background-color: #009688;
}
div#page-anshante main header div.inner nav a#header-entry {
background: no-repeat 12px center url(images/e-header-entry.svg) #009688;
color: #fefefe;
padding: 12px 12px 12px 60px;
text-decoration: none;
margin-left: 40px;
}
div#page-anshante main header div.inner a#sp-menu {
display: none;
}
div#page-anshante main section#catch {
height: 580px;
overflow: hidden;
position: relative;
background: no-repeat center / cover url(images/e-catch-back.jpg);
}
div#page-anshante main section#catch div.colored {
color: #fefefe;
/* position: absolute;
right: 48vw; */
transform: rotate(-10deg);
width: 50vw;
top: 54px;
/* max-width: 500px; */
z-index: 1;
display: flex;
justify-content: flex-end;
}
div#page-anshante main section#catch div.colored:before{
content: "";
display: block;
width: 100vw;
position: absolute;
top: -480px;
right: -20px;
background-color: rgba(0,150,136, 0.5);
height: 50vw;
z-index: -1;
min-height: 1200px;
}
div#page-anshante main section#catch div.colored div.content{
width: 100%;
margin-top: 5vw;
max-width: 530px;
}
div#page-anshante main section#catch div.colored div.content h2 {
font-size: 1.5rem;
line-height: 2.75rem;
padding-left: 24px;
}
div#page-anshante main section#catch div.colored div.content h2 span#h2add {
display: block;
text-indent: -9999px;
background: no-repeat center top / contain url(images/e-catch-title.svg);
max-height: 220px;
max-width: 442px;
width: 100%;
transform: rotate(9deg);
height: 24vw;
}
div#page-anshante main section#catch div.colored div.content h2 span.yb {
position: relative;
}
div#page-anshante main section#catch div.colored div.content h2 span.yb:after{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 30%;
left: 0px;
background-color: rgba(240,234,12, 0.6);
z-index: -1;
}
div#page-anshante main section#catch div.colored div.content p {
font-size: 1.125rem;
line-height: 2rem;
}
div#page-anshante main section#catch div#catch-links{
position: absolute;
max-width: 720px;
width: 100%;
left: calc(50vw - 366px);
display: flex;
justify-content: space-around;
flex-wrap: wrap;
bottom: 28px;
}
div#page-anshante main section#catch a#tosubscribe {
margin: 0px 8px 8px;
font-size: 1.125rem;
line-height: 2rem;
color: #009688;
background: no-repeat 22px center url(images/e-catch-entry.svg) #fefefe;
display: flex;
align-items: center;
text-decoration: none;
max-width: 340px;
z-index: 1;
border: solid 3px #009688;
padding: 8px 0px 8px 80px;
box-sizing: border-box;
bottom: 44px;
font-weight: bold;
width: 100%;
}
div#page-anshante main section#catch a#toanshante {
margin: 0px 8px 8px;
font-size: 1.125rem;
line-height: 2rem;
color: #fff;
background: no-repeat left top url(images/e-catch-order-1.svg) ,no-repeat right bottom url(images/e-catch-order-1.svg), #e3b00b ;
display: block;
text-decoration: none;
max-width: 340px;
z-index: 1;
border: solid 3px #fff;
padding: 8px;
text-align: center;
box-sizing: border-box;
bottom: 44px;
font-weight: bold;
width: 100%;
}
div#page-anshante main section#catch a#toanshante span.border{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
border: solid 1px #e3b00b;
}
div#page-anshante main section#catch a#toanshante span.border span.large{
font-size: 1.5rem;
line-height: 2.75rem;
}
div#page-anshante main section#catch a span.upper {
display: block;
}
div#page-anshante main section#catch a span.lower {
}
/*============================
#covid
============================*/
div#page-anshante main section#covid {
padding: 40px 12px 0;
}
div#page-anshante main section#covid div.inner {
max-width: 704px;
box-sizing: border-box;
margin: 0 auto;
border: solid 3px #E3606B;
padding: 20px;
color: #E3606B;
}
div#page-anshante main section#covid div.inner h2 {
text-align: center;
font-size: 1.25rem;
}
div#page-anshante main section#covid div.inner p {
}
div#page-anshante main section#about {
background: no-repeat 56vw bottom / 43vw url(images/e-about-img.jpg);
}
div#page-anshante main section#about h2 {
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
padding: 12px;
max-width: 400px;
margin: 0 auto;
background-color: rgba(255,255,255,0.9);
}
div#page-anshante main section#about h2 span.apeal{
background: linear-gradient(0deg, rgba(240,234,12, 1) 0%,rgba(240,234,12, 1) 50%,transparent 50%, transparent);
padding-bottom: 1%;
}
div#page-anshante main section#about dl {
margin: 42px 0px 0px;
}
div#page-anshante main section#about dl dt {
max-width: 604px;
padding: 24px 24px 24px 108px;
color: #fefefe;
font-weight: bold;
background: no-repeat 40px center url(images/e-about-q.svg) #009688;
font-size: 1.125rem;
line-height: 2rem;
}
div#page-anshante main section#about dl dd{
padding: 54px 0px 0px 48px;
}
div#page-anshante main section#about dl dd:before {
content: "";
display: block;
width: 60px;
height: 80px;
background: no-repeat url(images/e-about-a.svg);
}
div#page-anshante main section#about dl dd div.outline {
font-size: 1.25rem;
line-height: 2.5rem;
font-weight: bold;
}
div#page-anshante main section#about dl dd div.outline span.apeal {
color: #009688;
background-color: rgba(255,255,255, 0.5);
padding: 4px;
font-size: 2rem;
line-height: 3.5rem;
font-weight: bold;
max-width: 680px;
display: block;
}
div#page-anshante main section#about dl dd div.detail {
max-width: 532px;
margin-top: 40px;
}
div#page-anshante main section#about dl dd div.detail span.apeal {
}
div#page-anshante main section#reason {
background:no-repeat top right url(images/e-reason-back.svg), linear-gradient(90deg, #c3f1cb, #a1e9ae);
}
div#page-anshante main section#reason h2 {
text-align: center;
font-size: 1.5rem;
line-height: 2.75rem;
}
div#page-anshante main section#reason h2 span.apeal {
font-size: 2.5rem;
line-height: 4rem;
position: relative;
z-index: 1;
}
div#page-anshante main section#reason h2 span.apeal:after{
content: "";
display: block;
width: 100%;
height: 70%;
position: absolute;
top: 30%;
left: 0px;
background-color: #fefefe;
z-index: -1;
}
div#page-anshante main section#reason p.explain {
margin-top: 24px;
font-size: 1.25rem;
line-height: 2.5rem;
text-align: center;
font-weight: bold;
}
div#page-anshante main section#reason ol {
margin-top: 40px;
display: flex;
justify-content: space-between;
}
div#page-anshante main section#reason ol li{
margin-right: 12px;
width: 100%;
max-width: 320px;
}
div#page-anshante main section#reason ol li:last-child {
margin-right: 0px;
}
div#page-anshante main section#reason ol li span.point{
display: block;
height: 62px;
text-indent: -9999px;
}
div#page-anshante main section#reason ol li span#point1{
background: no-repeat center url(images/e-reason-point1.svg);
}
div#page-anshante main section#reason ol li span#point2{
background: no-repeat center url(images/e-reason-point2.svg);
}
div#page-anshante main section#reason ol li span#point3{
background: no-repeat center url(images/e-reason-point3.svg);
}
div#page-anshante main section#reason ol li section {
border-top: solid 8px #333333;
padding: 20px;
background-color: #fefefe;
height: calc(100% - 82px);
}
div#page-anshante main section#reason ol li section h3 {
text-align: center;
font-size: 1.75rem;
line-height: 2.75rem;
}
div#page-anshante main section#reason ol li section h3 span.db {
display: block;
}
div#page-anshante main section#reason ol li section p {
font-size: 1.125rem;
line-height: 2rem;
margin-top: 12px;
}
div#page-anshante main section#reason ol li section a {
color: #fefefe;
background: no-repeat calc(100% - 11px) center url(images/e-b-link.svg) #009688;
display: block;
text-decoration: none;
text-align: center;
font-size: 1.125rem;
line-height: 2rem;
padding: 8px 40px 8px 8px;
margin: 20px auto 0px;
max-width: 232px;
width: 100%;
box-sizing: border-box;
}
div#page-anshante main section#voice {
background: linear-gradient(90deg, #accfe9, #cde2f2);
}
div#page-anshante main section#voice div.df {
display: flex;
}
div#page-anshante main section#voice div.df h2 {
font-size: 2.5rem;
line-height: 4rem;
border-bottom: solid 4px;
padding-bottom: 20px;
display: inline-block;
width: 100%;
max-width: 408px;
}
div#page-anshante main section#voice div.df p.explain {
font-size: 1.25rem;
line-height: 2.5rem;
font-weight: bold;
margin-left: 48px;
width: 100%;
max-width: 500px;
}
div#page-anshante main section#voice div#voice-main{
margin-top: 42px;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
}
div#page-anshante main section#voice div.df section.circle {
min-width: 512px;
margin-bottom: 40px;
}
div#page-anshante main section#voice div.df section.circle div.title-area {
border-left: solid 8px;
padding-left: 12px;
}
div#page-anshante main section#voice div.df section.circle div.title-area h3 {
font-size: 2.5rem;
line-height: 4rem;
}
div#page-anshante main section#voice div.df section.circle div.title-area h3 span.apeal {
}
div#page-anshante main section#voice div.df section.circle div.title-area h3 span.db {
}
div#page-anshante main section#voice div.df section.circle div.title-area p.class {
font-size: 1.5rem;
line-height: 2.75rem;
font-weight: bold;
margin-top: 20px;
}
div#page-anshante main section#voice div.df section.circle div.title-area p.class span.year {
display: block;
font-weight: normal;
font-size: 1rem;
line-height: 2rem;
}
div#page-anshante main section#voice div.df section.circle p.voice-main {
background-color: #fefefe;
border-radius: 50%;
font-size: 1.25rem;
line-height: 2.5rem;
padding: 96px;
box-sizing: border-box;
width: 100%;
max-width: 512px;
height: 512px;
position: relative;
}
div#page-anshante main section#voice div.df section.circle p.voice-main:before{
position: absolute;
content: "";
display: block;
width: 512px;
height: 512px;
border: solid 4px #b5a693;
border-radius: 50%;
top: 5px;
left: 8px;
}
div#page-anshante main section#voice div.df section.circle p.voice-main:after{
position: absolute;
content: "";
display: block;
width: 498px;
height: 498px;
border: solid 2px #b5a693;
border-radius: 50%;
top: 14px;
left: 16px;
}
div#page-anshante main section#voice div.df section.circle p.voice-main span.yb:after {
height: 30%;
top: 16%;
}
div#page-anshante main section#voice div.df div.right {
max-width: 480px;
}
div#page-anshante main section#voice div.df div.right section.square {
margin-bottom: 40px;
}
div#page-anshante main section#voice div.df div.right section.square:last-child {
margin-bottom: 0px;
}
div#page-anshante main section#voice div.df div.right section.square div.title-area {
border-left: solid 8px;
padding-left: 12px;
}
div#page-anshante main section#voice div.df div.right section.square div.title-area h3 {
font-size: 1.5rem;
line-height: 2.75rem;
}
div#page-anshante main section#voice div.df div.right section.square div.title-area h3 span.db {
}
div#page-anshante main section#voice div.df div.right section.square div.title-area h3 span.db span.apeal {
}
div#page-anshante main section#voice div.df div.right section.square div.title-area p.class {
font-size: 1rem;
line-height: 2rem;
font-weight: bold;
}
div#page-anshante main section#voice div.df div.right section.square div.title-area p.class span.year {
}
div#page-anshante main section#voice div.df div.right section.square p.voice-main {
background-color: #fefefe;
padding: 20px;
font-size: 1rem;
line-height: 2rem;
box-sizing: border-box;
position: relative;
margin-top: 20px;
position: relative;
}
div#page-anshante main section#voice div.df div.right section.square p.voice-main:before{
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
border: solid 4px #b5a693;
top: 0px;
left: 8px;
transform: rotate(-2deg);
}
div#page-anshante main section#voice div.df div.right section.square p.voice-main:after{
position: absolute;
content: "";
display: block;
width: calc(100% - 12px);
height: calc(100% - 12px);
border: solid 2px #b5a693;
top: 8px;
left: 16px;
transform: rotate(-2deg);
}
div#page-anshante main section#voice div.df div.right section.square p.voice-main span.apeal {
}
div#page-anshante main section#offer {
border-top: solid 18px #009688;
border-bottom: solid 18px #009688;
}
div#page-anshante main section#offer p.explain{
text-align: center;
font-size: 1.5rem;
line-height: 2.75rem;
color: #009688;
}
div#page-anshante main section#offer:before{
content: "";
display: block;
margin-top: 8px;
border-top: solid 8px #009688;
margin-bottom: 60px;
}
div#page-anshante main section#offer:after{
content: "";
display: block;
margin-top: 60px;
border-top: solid 8px #009688;
margin-bottom: 8px;
}
div#page-anshante main section#offer h2 {
text-indent: -9999px;
background: no-repeat center url(images/e-offer-logo.svg);
width: 176px;
height: 56px;
margin: 0 auto;
}
div#page-anshante main section#offer h3 {
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
color: #009688;
margin: 40px auto;
}
div#page-anshante main section#offer div.table {
margin: 0 12px;
}
div#page-anshante main section#offer div.table div.textarea {
padding-left: 12px;
}
div#page-anshante main section#offer div.table dl {
border-top: dotted 2px #333333;
display: flex;
}
div#page-anshante main section#offer div.table dl:last-child{
border-bottom: dotted 2px #333333;
}
div#page-anshante main section#offer div.table dl dt {
box-sizing: border-box;
padding: 12px;
font-size: 1.25rem;
line-height: 2.5rem;
font-weight: bold;
min-width: 240px;
background-color: #e1dbd4;
}
div#page-anshante main section#offer div.table dl dd {
box-sizing: border-box;
padding: 12px;
}
div#page-anshante main section#offer div.table dl dd ul {
}
div#page-anshante main section#offer div.table dl dd ul li {
margin-left: 20px;
}
div#page-anshante main section#offer div.table dl dd p.pink {
color: #E3606B;
}
div#page-anshante main section#offer div.table dl dd a {
}
div#page-anshante main section#flow {
background: url(images/e-flow-back.svg) #f1ede8;
}
div#page-anshante main section#flow h2 {
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
}
div#page-anshante main section#flow h2 span.yb{
}
div#page-anshante main section#flow h2 span.yb:after{
background-color: #fefefe;
}
div#page-anshante main section#flow ol {
}
div#page-anshante main section#flow ol li.main-li {
background-color: #fefefe;
margin-top: 66px;
margin-bottom: 136px;
padding: 40px 40px 80px 40px;
position: relative;
}
div#page-anshante main section#flow ol li.main-li:after{
content: "";
position: absolute;
bottom: -80px;
left: calc(50% - 30px);
width: 60px;
height: 32px;
background: no-repeat center url(images/e-flow-dir.svg);
}
div#page-anshante main section#flow ol li.main-li:last-child:after{
display: none;
}
div#page-anshante main section#flow ol li.main-li section h3 span.text {
position: relative;
z-index: 1;
}
div#page-anshante main section#flow ol li.main-li section h3 span.text:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 30%;
left: 0px;
background-color: #f1ede8;
z-index: -1;
}
div#page-anshante main section#flow ol li.main-li section.flows{
margin-top: -66px;
}
div#page-anshante main section#flow ol li.main-li section h3 {
font-size: 2rem;
line-height: 3.5rem;
text-align: center;
margin-bottom: 60px;
}
div#page-anshante main section#flow ol li.main-li section h3 span.no {
display: block;
}
div#page-anshante main section#flow ol li.main-li section h3 span.text {
}
div#page-anshante main section#flow ol li.main-li section p {
font-size: 1.125rem;
line-height: 2rem;
max-width: 800px;
box-sizing: border-box;
padding-right: 140px;
}
div#page-anshante main section#flow ol li.main-li section p span.yb:after {
}
div#page-anshante main section#flow ol li.main-li section#no1 {
background: no-repeat calc(100% - 40px) 56px url(images/e-flow-sp.svg);
}
div#page-anshante main section#flow ol li.main-li section#no1 h3 {
}
div#page-anshante main section#flow ol li.main-li section#no1 h3 span.no {
}
div#page-anshante main section#flow ol li.main-li section#no1 h3 span.text {
}
div#page-anshante main section#flow ol li.main-li section#no1 p {
}
div#page-anshante main section#flow ol li.main-li section#no1 p span.yb:after {
}
div#page-anshante main section#flow ol li.main-li section#no2 {
background: no-repeat calc(100% - 70px) 210px url(images/e-flow-note.svg),no-repeat calc(100% - 20px) 480px url(images/e-flow-wear.svg);
}
div#page-anshante main section#flow ol li.main-li section#no2 h3 {
}
div#page-anshante main section#flow ol li.main-li section#no2 h3 span.no {
}
div#page-anshante main section#flow ol li.main-li section#no2 h3 span.text {
}
div#page-anshante main section#flow ol li.main-li section#no2 ul {
max-width: 820px;
}
div#page-anshante main section#flow ol li.main-li section#no2 ul li {
margin-bottom: 66px;
}
div#page-anshante main section#flow ol li.main-li section#no2 ul li:last-child {
margin-bottom: 0px;
}
div#page-anshante main section#flow ol li.main-li section#no2 ul li section.lists {
}
div#page-anshante main section#flow ol li.main-li section#no2 ul li section.lists h4 {
font-size: 1.5rem;
line-height: 2.75rem;
padding-left: 50px;
background: no-repeat left center url(images/e-flow-check.svg);
}
div#page-anshante main section#flow ol li.main-li section#no2 ul li section.lists p {
}
div#page-anshante main section#flow ol li.main-li section#no2 ul li section.lists p span.yb:after {
}
div#page-anshante main section#flow ol li.main-li section#no2 ul li section.lists p a.accessmap {
color: #009688;
padding-right: 30px;
background: no-repeat right center url(images/e-flow-map.svg);
display: inline-block;
}
div#page-anshante main section#flow ol li.main-li section#no3 {
background: no-repeat calc(100% - 40px) 92px url(images/e-flow-bag.svg);
}
div#page-anshante main section#flow ol li.main-li section#no3 h3 {
}
div#page-anshante main section#flow ol li.main-li section#no3 h3 span.no {
}
div#page-anshante main section#flow ol li.main-li section#no3 h3 span.text {
}
div#page-anshante main section#flow ol li.main-li section#no3 p {
}
div#page-anshante main section#flow ol li.main-li section#no3 p span.yb:after {
}
div#page-anshante main section#entry {
background: #cceae7;
}
div#page-anshante main section#entry h2 {
text-align: center;
font-size: 2.5rem;
line-height: 4rem;
}
div#page-anshante main section#entry p {
font-size: 1.25rem;
line-height: 2.5rem;
text-align: center;
font-weight: bold;
margin: 20px 0px;
}
div#page-anshante main section#entry div.contact {
}
div#page-anshante main section#entry div.contact dl {
border: solid 2px;
width: 494px;
margin: 32px auto 84px;
}
div#page-anshante main section#entry div.contact dl dt {
background-color: #cceae7;
height: 48px;
text-align: center;
color: #009688;
font-size: 1.5rem;
line-height: 2.75rem;
font-weight: bold;
width: 420px;
margin: -20px auto 6px;
}
div#page-anshante main section#entry div.contact dl dd.sp {
display: none;
}
div#page-anshante main section#entry div.contact dl dd {
width: 394px;
margin: 0 auto -4px;
height: 108px;
background: #cceae7;
position: relative;
}
div#page-anshante main section#entry div.contact dl dd span#line-add{
background: no-repeat center / contain url(images/e-entry-line-back.svg);
display: block;
width: 286px;
height: 150px;
padding: 30px 0px 16px 36px;
box-sizing: border-box;
position: absolute;
top: -100px;
right: -260px;
font-weight: bold;
}
div#page-anshante main section#entry div.contact dl dd span#line-add span.apeal{
color: #00b900;
font-size: 1.5rem;
line-height: 2.75rem;
font-weight: bold;
}
div#page-anshante main section#entry div.contact dl dd a.tel {
color: #333333;
font-size: 3rem;
line-height: 4.5rem;
letter-spacing: 0.2rem;
box-sizing: border-box;
padding-left: 60px;
background: no-repeat left center url(images/e-entry-telicon.svg) #cceae7;
display: block;
text-decoration: none;
font-weight: bold;
font-family: 'Hind', sans-serif;
}
div#page-anshante main section#entry div.contact dl dd img {
display: block;
margin: 0 auto;
}
div#page-anshante main section#entry h3 {
color: #009688;
font-size: 1.5rem;
line-height: 2.75rem;
text-align: center;
}
div#page-anshante main section#entry p#kyuzin-kagoshima{
font-size: 1.5rem;
line-height: 2.75rem;
margin-bottom: 60px;
}
div#page-anshante main section#entry p#kyuzin-kagoshima a{
display: inline-block;
padding-right: 8px;
color: #D71518;
font-size: 2.5rem;
line-height: 4rem;
}
div#page-anshante main section#entry p#kyuzin-kagoshima a:hover{
text-decoration: none;
}
div#page-anshante main section#entry div.table {
}
div#page-anshante main section#entry div.table dl {
border-top: dotted 2px #333333;
display: flex;
}
div#page-anshante main section#entry div.table dl:last-child{
border-bottom: dotted 2px #333333;
}
div#page-anshante main section#entry div.table dl dt {
box-sizing: border-box;
padding: 8px;
font-size: 1.25rem;
line-height: 2.5rem;
font-weight: bold;
min-width: 240px;
background-color: #e1dbd4;
}
div#page-anshante main section#entry div.table dl dd {
box-sizing: border-box;
padding: 8px;
}
div#page-anshante main section#entry iframe#map {
width: 100%;
margin-top: 20px;
}
div#page-anshante main footer {
padding: 44px 12px;
background-color: #333333;
}
div#page-anshante main footer div.df {
display: flex;
justify-content: center;
align-items: center;
}
div#page-anshante main footer div.df h2 {
}
div#page-anshante main footer div.df h2 a {
display: block;
background: no-repeat url(images/e-footer-logo.svg);
width: 176px;
height: 56px;
text-indent: -9999px;
text-decoration: none;
}
div#page-anshante main footer div.df nav {
width: 100%;
}
div#page-anshante main footer div.df nav ul {
display: flex;
width: 100%;
justify-content: space-around;
}
div#page-anshante main footer div.df nav ul li {
}
div#page-anshante main footer div.df nav ul li a {
display: block;
color: #fefefe;
text-decoration: none;
}
div#page-anshante main footer a#to-company {
color: #fefefe;
font-weight: bold;
display: block;
padding-right: 24px;
background: no-repeat right center url(images/e-b-link.svg);
width: 120px;
margin: 20px auto 40px;
text-decoration: none;
}
div#page-anshante main footer p#anshante-cp {
text-align: center;
color: #fefefe;
}
div#page-anshante main #instant-banner {
display: block;
width: 100%;
max-width: 540px;
margin: 0 auto 24px;
}
div#page-kintoun{
color: #fefefe;
font-size: 1rem;
line-height: 2rem;
font-family: 'Noto Serif JP', serif;
/* background-color: #222222; */
}
body#kintoun-body{
background-color: #222222;
/* background: no-repeat center top url(images/layout_kintoun.jpg) #222222; */
}
body#kintoun-body ::selection {
background-color: #ff5151;
color: #fefefe;
}
div#page-kintoun a{
text-decoration: none;
color: #fefefe;
}
div#page-kintoun a:hover{
text-decoration: underline;
}
div#page-kintoun .c{
max-width: 1040px;
margin: 0 auto;
padding: 0px 12px;
}
div#page-kintoun .bs{
margin-bottom: 80px;
}
div#page-kintoun .b-h21{
font-size: 2rem;
line-height: 3.5rem;
background: no-repeat center bottom / contain url(images/k-index-head-bg.svg);
display: inline-block;
letter-spacing: 0.2rem;
padding: 0px 44px 24px 12px;
margin-bottom: 20px;
}
div#page-kintoun .b-h22{
font-size: 2rem;
line-height: 3.5rem;
text-align: center;
background: no-repeat center bottom / contain url(images/k-index-head-bg.svg);
letter-spacing: 0.2rem;
padding: 0px 44px 24px;
margin: 0px auto 20px;
}
div#page-kintoun .b-h3{
font-size: 1.25rem;
line-height: 2.5rem;
padding: 12px 0px 12px 20px;
color: #222222;
background: linear-gradient(to right, #f8cc6f 0%,rgba(248,204,111,0.35) 80%,transparent 90%,transparent 100%);
}
body#kintoun-body span.osusume {
display: inline-block;
background: no-repeat left bottom / contain url(images/k-index-osusume.svg);
font-weight: bold;
margin-right: 12px;
padding: 0 12px;
font-weight: bold;
}
div#page-kintoun main {
}
div#page-kintoun main header#kintoun-header {
position: relative;
}
div#page-kintoun main header#kintoun-header div.inner {
position: absolute;
top: 24px;
left: 0px;
z-index: 1;
}
div#page-kintoun main header#kintoun-header div.inner h1 {
}
div#page-kintoun main header#kintoun-header div.inner h1 a {
display: block;
text-indent: -9999px;
width: 185px;
height: 128px;
background: no-repeat center / contain url(images/k-header-logo.png);
}
div#page-kintoun main header#kintoun-header div.inner p {
color: #f8cc6f;
text-align: center;
font-weight: bold;
border-bottom: solid 1px #f8cc6f;
padding-bottom: 20px;
margin-top: 18px;
}
div#page-kintoun main header#kintoun-header div.inner a#tel{
font-family: 'Hind', sans-serif;
font-size: 1.25rem;
line-height: 2.5rem;
text-align: center;
display: block;
padding-top: 16px;
}
div#page-kintoun main header#kintoun-header a#sp-menu{
display: none;
}
div#page-kintoun main header#kintoun-header div.inner nav {
}
div#page-kintoun main header#kintoun-header div.inner nav ul {
padding-top: 12px;
}
div#page-kintoun main header#kintoun-header div.inner nav ul li {
}
div#page-kintoun main header#kintoun-header div.inner nav ul li a {
display: block;
padding: 12px 20px;
margin-bottom: 16px;
}
div#page-kintoun main section#catch {
position: relative;
}
div#page-kintoun main section#catch h2 {
writing-mode: vertical-rl;
position: absolute;
right: 0px;
font-size: 2.75rem;
line-height: 4rem;
line-height: 2.75rem;
padding: 62px 0px;
background: linear-gradient(#f8cc6f 0%,rgba(248,204,111,0.35) 65%,transparent 80%,transparent 100%);
height: 100%;
color: #222222;
z-index: -1;
max-width: 264px;
width: calc(264/1040*100vw);
display: flex;
align-items: center;
}
div#page-kintoun main section#catch h2 span{
display: block;
width: 38px;
}
div#page-kintoun main section#catch ul {
width: calc(626/1040*100vw);
max-width: 626px;
margin: 0px auto;
padding-top: 80px;
height: calc(748/1040*100vw);
max-height: 748px;
min-height: 520px;
position: relative;
}
div#page-kintoun main section#catch ul li {
width: 100%;
position: absolute;
top: 104px;
left: 0px;
}
div#page-kintoun main section#catch ul li img {
display: block;
width: 100%;
}
div#page-kintoun main section#catch img.yuges{
width: 100%;
max-width: 90vw;
height: auto;
max-height: 90vh;
}
div#page-kintoun main section#catch img#yuge{
position: absolute;
animation: steam_Move 6s infinite linear;
transform: scale(1);
opacity: 0;
}
@keyframes steam_Move {
0% {
transform: scale(1);
opacity: 0;
top: 100px;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
top: -400px;
}
}
div#page-kintoun main section#catch img#yuge2{
display: none;
position: absolute;
animation: steam_Move2 6s infinite 2s linear;
transition: all 1s;
filter: blur(15px);
transform: rotateZ(90deg);
transform: scale(1, 1);
opacity: 0;
}
@keyframes steam_Move2 {
0% {
transform: rotateY(0deg);
transform: scale(1, 1);
opacity: 0;
top: 150px;
}
50% {
transform: rotateY(0deg);
transform: scale(1, 1);
opacity: 1;
}
100% {
filter: blur(16px);
transform: scale(1.5, 1.5);
opacity: 0;
top: -400px;
}
}
div#page-kintoun main section#catch img#yuge3{
display: none;
position: absolute;
animation: steam_Move3 6s infinite 4s linear;
transition: all 1s;
filter: blur(15px);
transform: rotateZ(270deg);
transform: scale(1, 1);
opacity: 0;
}
div#page-kintoun main section#catch p#year-end {
border-top: solid 1px #f8cc6f;
border-bottom: solid 1px #f8cc6f;
width: fit-content;
margin: -64px auto 0;
color: #f8cc6f;
display: none;
}
@keyframes steam_Move3 {
0% {
transform: rotateY(0deg);
transform: scale(1, 1);
opacity: 0;
top: 150px;
left: 0px;
}
50% {
transform: rotateY(0deg);
transform: scale(1, 1);
opacity: 1;
}
100% {
filter: blur(16px);
transform: scale(1.5, 1.5);
opacity: 0;
top: -400px;
left: 100px;
}
}
div#page-kintoun main div.split-area {
margin: 128px auto;
padding: 12px;
max-width: 1040px;
display: flex;
justify-content: space-between;
}
div#page-kintoun main div.split-area section {
width: 100%;
}
/*============================
#about-line
============================*/
div#page-kintoun main div.split-area section#about-line {
margin-right: 20px;
}
div#page-kintoun main div.split-area section#about-line h2 {
text-align: center;
font-size: 1.25rem;
margin-bottom: 12px;
}
div#page-kintoun main div.split-area section#about-line p {
text-align: center;
}
div#page-kintoun main div.split-area section#about-line a {
display: block;
padding: 12px 24px;
width: fit-content;
font-size: 1.25rem;
font-weight: bold;
background-color: #07b53b;
border-radius: 12px;
margin: 12px auto;
}
div#page-kintoun main div.split-area section#about-line img {
display: block;
max-width: 120px;
margin: 12px auto 20px;
}
div#page-kintoun main section#counterplan {
}
div#page-kintoun main section#counterplan h2 {
text-align: center;
font-size: 1.25rem;
margin-bottom: 12px;
}
div#page-kintoun main section#counterplan p {
}
div#page-kintoun main section#counterplan p a {
color: #f8cc6f;
}
div#page-kintoun main section#counterplan img {
display: block;
margin: 12px auto 0;
height: auto;
width: 240px;
}
div#page-kintoun main section#kintoun-news {
margin: 128px auto;
max-width: 1040px;
}
div#page-kintoun main section#kintoun-news h2.b-h22 {
}
div#page-kintoun main section#kintoun-news h3{
text-align: center;
font-size: 1.5rem;
line-height: 2.75rem;
border-bottom: solid 1px #f8cc6f;
padding: 20px 12px;
}
div#page-kintoun main section#kintoun-news p.date {
margin-top: 12px;
}
div#page-kintoun main section#kintoun-news div.contents {
margin-top: 12px;
}
div#page-kintoun main section#kintoun-news div.contents p {
}
div#page-kintoun main section#kintoun-news div.contents img{
display: block;
height: auto;
max-width: 100%;
}
div#page-kintoun main section#kintoun-news div.contents img.aligncenter {
max-width: 0 auto;
}
div#page-kintoun main section#greet {
}
div#page-kintoun main section#greet div.inner{
display: flex;
flex-direction: row-reverse;
margin-left: -120px;
justify-content: flex-end;
}
div#page-kintoun main section#greet div.inner div.right {
padding-top: 80px;
}
div#page-kintoun main section#greet div.inner div.right h2 {
}
div#page-kintoun main section#greet div.inner div.right p {
font-size: 1.125rem;
line-height: 2.25rem;
}
div#page-kintoun main section#greet div.inner div.right p#owner {
margin-top: 20px;
text-align: right;
}
div#page-kintoun main section#greet div.inner div.ib {
width: 100%;
max-width: 590px;
position: relative;
z-index: -1;
}
div#page-kintoun main section#greet div.inner div.ib img {
display: block;
width: 100%;
}
div#page-kintoun main section#menu {
}
div#page-kintoun main section#menu h2 {
}
div#page-kintoun main section#menu section#takeout-menu {
margin-bottom: 120px;
}
div#page-kintoun main section#menu section#takeout-menu h3 {
text-align: center;
font-size: 1.5rem;
line-height: 2.75rem;
border-bottom: solid 1px #f8cc6f;
padding: 20px 12px;
}
div#page-kintoun main section#menu section#takeout-menu p.center{
margin-top: 20px;
text-align: center;
}
div#page-kintoun main section#menu section#takeout-menu ul.img-list{
display: flex;
justify-content: center;
margin: 12px auto;
flex-wrap: wrap;
}
div#page-kintoun main section#menu section#takeout-menu ul.img-list li{
width: 100%;
max-width: 240px;
margin: 0 auto 12px;
}
div#page-kintoun main section#menu section#takeout-menu ul.img-list li img{
display: block;
width: 100%;
}
div#page-kintoun main section#menu section#takeout-menu ul.side-menu-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div#page-kintoun main section#menu section#takeout-menu ul.side-menu-list li {
max-width: 500px;
width: 100%;
border-bottom: dotted 1px #fefefe;
padding: 12px 0px;
font-size: 1.25rem;
line-height: 2.5rem;
}
div#page-kintoun main section#menu section#takeout-menu ul.side-menu-list li dl {
display: flex;
justify-content: space-between;
}
div#page-kintoun main section#menu section#takeout-menu ul.side-menu-list li dl dt {
}
div#page-kintoun main section#menu section#takeout-menu ul.side-menu-list li dl dd {
}
div#page-kintoun main section#menu section#takeout-menu div#delivery {
margin: 40px auto;
display: flex;
justify-content: space-between;
}
div#page-kintoun main section#menu section#takeout-menu div#delivery div.left {
width: 100%;
margin-right: 24px;
}
div#page-kintoun main section#menu section#takeout-menu div#delivery div.left h4.b-h3 {
margin-bottom: 28px;
}
div#page-kintoun main section#menu section#takeout-menu div#delivery div.left p {
}
div#page-kintoun main section#menu section#takeout-menu div#delivery div.left a {
font-family: 'Hind', sans-serif;
font-size: 1.25rem;
line-height: 2.5rem;
display: block;
padding-top: 16px;
}
div#page-kintoun main section#menu section#takeout-menu div#delivery div.ib {
max-width: 320px;
width: 100%;
}
div#page-kintoun main section#menu section#takeout-menu div#delivery div.ib img {
width: 100%;
display: block;
}
div#page-kintoun main section#menu ul.regular {
margin-top: 64px;
}
div#page-kintoun main section#menu ul.regular li {
margin-bottom: 122px;
}
div#page-kintoun main section#menu ul.regular li:nth-child(odd) section {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
div#page-kintoun main section#menu ul.regular li:nth-child(odd) section div.right {
margin-left: 12px;
width: 100%;
max-width: 690px;
}
div#page-kintoun main section#menu ul.regular li:nth-child(odd) section div.right h3 {
margin-bottom: 28px;
}
div#page-kintoun main section#menu ul.regular li:nth-child(odd) section div.right h3 span.price {
}
div#page-kintoun main section#menu ul.regular li:nth-child(odd) section div.right p {
margin-left: 12px;
}
div#page-kintoun main section#menu ul.regular li:nth-child(odd) section div.ib {
width: 100%;
max-width: 300px;
position: relative;
z-index: -1;
}
div#page-kintoun main section#menu ul.regular li:nth-child(odd) section div.ib img {
display: block;
width: 100%;
}
div#page-kintoun main section#menu ul.regular li section div.ib img.menu-yuges {
display: block;
width: 25%;
position: absolute;
top: -50%;
left: 40%;
animation: menu_steam_Move 6s infinite linear;
transform: scale(1);
opacity: 0;
}
@keyframes menu_steam_Move {
0% {
transform: scale(1);
opacity: 0;
top: -50%;
}
50% {
opacity: 0.3;
}
100% {
transform: scale(3);
opacity: 0;
top: -100%;
}
}
div#page-kintoun main section#menu ul.regular li section div.ib img.menu-yuges2 {
display: block;
width: 25%;
position: absolute;
top: -50%;
left: 40%;
animation: menu_steam_Move 6s infinite 3s linear;
transform: scale(1);
opacity: 0;
}
@keyframes menu_steam_Move {
0% {
transform: scale(1);
opacity: 0;
top: -50%;
}
50% {
opacity: 0.3;
}
100% {
transform: scale(3);
opacity: 0;
top: -150%;
}
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section {
display: flex;
justify-content: space-between;
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section div.left {
width: 100%;
}
div#page-kintoun main section#menu ul.regular li section > div:first-child {
width: 100%;
}
div#page-kintoun main section#menu ul.regular li section > div:first-child h3{
margin-bottom: 12px;
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section > div:first-child {
margin-right: 24px;
}
div#page-kintoun main section#menu ul.regular li:nth-child(odd) section > div:first-child {
margin-left: 24px;
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section div.left h3 {
margin-bottom: 28px;
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section div.left h3 span.price {
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section div.left p {
margin-right: 12px;
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section div.ib {
width: 100%;
max-width: 300px;
position: relative;
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section div.ib img {
display: block;
width: 100%;
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section div.ib img.round {
border-radius: 4px;
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section div.ib img.menu-yuges{
width: 25%;
}
div#page-kintoun main section#menu ul.regular li:nth-child(even) section div.ib img.menu-yuges2{
width: 25%;
}
div#page-kintoun main section#menu section#lunch-menu {
}
div#page-kintoun main section#menu section#lunch-menu h3 {
background: linear-gradient(to right, transparent 0%,#f8cc6f 30%,#f8cc6f 70%,transparent 100%);
padding: 20px 0px;
color: #222222;
font-size: 1.75rem;
line-height: 2.75rem;
text-align: center;
}
div#page-kintoun main section#menu section#lunch-menu h3 span.title-center {
}
div#page-kintoun main section#menu section#lunch-menu h3 span.title-center span.upper {
display: block;
max-width: 360px;
margin: 0 auto;
}
div#page-kintoun main section#menu section#lunch-menu h3 span.title-center span.upper span.time {
font-size: 1.25rem;
line-height: 2.5rem;
}
div#page-kintoun main section#menu section#lunch-menu h3 span.title-center span.lower {
display: block;
border-top: solid 1px #222222;
}
div#page-kintoun main section#menu section#lunch-menu img {
display: block;
width: 100%;
margin: 72px auto 16px;
}
div#page-kintoun main section#set-menu {
margin-bottom: 120px;
}
div#page-kintoun main section#set-menu h3 {
text-align: center;
font-size: 1.5rem;
line-height: 2.75rem;
border-bottom: solid 1px #f8cc6f;
padding: 20px 12px;
margin:auto
}
div#page-kintoun main section#set-menu dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 12px;
width: 100%;
border-bottom: dotted 1px #fefefe;
padding: 12px 0px;
margin: 0 auto;
}
div#page-kintoun main section#set-menu dt {
font-size: 1.25rem;
line-height: 2.5rem;
width: 100%;
}
div#page-kintoun main section#set-menu dd {
font-size: 1.25rem;
line-height: 2.5rem;
}
div#page-kintoun main section#set-menu dd.set-menu-price {
}
div#page-kintoun main section#set-menu dd.set-menu-content {
font-size: 1rem;
line-height: 2rem;
}
div#page-kintoun main section#menu section#side-menu {
margin-bottom: 120px;
}
div#page-kintoun main section#menu section#side-menu h3 {
text-align: center;
font-size: 1.5rem;
line-height: 2.75rem;
border-bottom: solid 1px #f8cc6f;
padding: 20px 12px;
}
div#page-kintoun main section#menu section#side-menu ul.side-menu-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div#page-kintoun main section#menu section#side-menu ul.side-menu-list li {
max-width: 500px;
width: 100%;
border-bottom: dotted 1px #fefefe;
padding: 12px 0px;
font-size: 1.25rem;
line-height: 2.5rem;
margin: 0 auto;
}
div#page-kintoun main section#menu section#side-menu ul.side-menu-list li dl {
display: flex;
justify-content: space-between;
}
div#page-kintoun main section#menu section#side-menu ul.side-menu-list li dl dt {
}
div#page-kintoun main section#menu section#side-menu ul.side-menu-list li dl dd {
}
div#page-kintoun main section#instagram2 {
}
div#page-kintoun main section#instagram2.k-sec{
margin: 40px auto 128px;
max-width: 1040px;
}
div#page-kintoun main section#instagram2 h2.f-g {
}
div#page-kintoun main section#instagram2 ul {
display: flex;
justify-content: space-between;
margin-top: 64px;
}
div#page-kintoun main section#instagram2 ul li {
max-width: 240px;
margin-right: 12px;
}
div#page-kintoun main section#instagram2 ul li:last-child{
margin-right: 0px;
}
div#page-kintoun main section#instagram2 ul li a {
display: block;
width: 100%;
}
div#page-kintoun main section#instagram2 ul li a img{
display: block;
width: 100%;
}
div#page-kintoun main section#instagram2 a#to-instagram.k-a {
border: solid 2px #f8cc6f;
margin: 32px auto 64px;
text-decoration: none;
}
div#page-kintoun main section#access {
}
div#page-kintoun main section#access h2 {
}
div#page-kintoun main section#access div.upper {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
div#page-kintoun main section#access div.upper div.right {
width: 100%;
}
div#page-kintoun main section#access div.upper div.right h3 {
margin-bottom: 20px;
}
div#page-kintoun main section#access div.upper div.right dl {
display: flex;
margin-bottom: 12px;
}
div#page-kintoun main section#access div.upper div.right dl dt {
min-width: 128px;
}
div#page-kintoun main section#access div.upper div.right dl dd {
}
div#page-kintoun main section#access div.upper div.right dl dd p.exinfo{
color: #f8cc6f;
}
div#page-kintoun main section#access div.upper div.right dl dd a {
}
div#page-kintoun main section#access div.upper div.right dl dd ul {
}
div#page-kintoun main section#access div.upper div.right dl dd ul li {
}
div#page-kintoun main section#access div.upper div.ib{
width: 100%;
max-width: 480px;
margin-right: 20px;
}
div#page-kintoun main section#access div.upper div.ib img{
display: block;
width: 100%;
}
div#page-kintoun main section#access iframe#map {
width: 100%;
margin-top: 20px;
}
div#page-kintoun main footer {
padding: 20px 12px;
background: linear-gradient(to bottom, rgba(248,204,111,0.35) 0%,transparent 100%);
}
div#page-kintoun main footer div.ineer {
}
div#page-kintoun main footer div.ineer h2 {
width: 230px;
height: 104px;
margin: 20px auto 0px;
background: no-repeat center / contain url(images/k-footer-logo.svg);
text-indent: -9999px;
}
div#page-kintoun main footer div.ineer p.sub {
text-align: center;
color: #f8cc6f;
font-weight: bold;
}
div#page-kintoun main footer div.ineer nav {
margin: 32px auto 64px;
}
div#page-kintoun main footer div.ineer nav ul {
display: flex;
justify-content: space-between;
margin: 0 auto;
}
div#page-kintoun main footer div.ineer nav ul li {
}
div#page-kintoun main footer div.ineer nav ul li a {
}
div#page-kintoun main footer div.ineer p#copyright {
text-align: center;
font-size: 0.875rem;
line-height: 1.375rem;
}
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap');
/* settings */
:root {
--color-primary: #ff8393;
--color-sub: #ffd0d6;
--color-background: #ffeded;
--color-black: #383838;
--color-white: #fefefe;
}
/* base */
html.anshante-ad {
scroll-behavior: smooth;
scroll-padding-top: 136px;
@media (max-width:960px) {
scroll-padding-top: 120px;
}
@media (max-width:480px) {
scroll-padding-top: 104px;
}
body {
background-color: var(--color-background);
font-size: 16px;
font-family: "ヒラギノ角コ゚ ProN", sans-serif;
text-align: justify;
color: var(--color-black);
line-height: 1.6;
scroll-behavior: smooth;
overflow-x: hidden;
position: relative;
margin: 0 auto;
&::before {
position: absolute;
content: "";
width: 100%;
height: 554px;
top: 80px;
left: 0;
background: url(images/anshante-ad/mainvisual.png) 0 0 no-repeat;
background-size: cover;
}
@media (max-width:1200px) {
&::before {
background-position: left -120px center;
}
}
@media (max-width:960px) {
&::before {
height: 520px;
top: 72px;
background-position: left -200px center;
}
}
@media (max-width:480px) {
&::before {
top: 64px;
background-position: left -352px center;
}
}
div.ib {
padding: 40px 0;
max-width: 1040px;
width: 100%;
img {
display: block;
width: 100%;
}
}
p {
text-align: justify;
}
ul.menu {
display: flex;
li {
margin-right: 40px;
&:nth-child(5) {
margin-right: 0;
}
a {
text-decoration: none;
color: var(--color-white);
font-family: "M PLUS 1p", serif;
font-weight: bold;
}
}
}
main {
max-width: 1200px;
min-width: 320px;
width: 100%;
margin: 0 auto;
padding: 96px 80px 0;
box-sizing: border-box;
overflow-x: hidden;
@media (max-width:960px) {
padding: 80px 40px 0;
}
@media (max-width:480px) {
padding: 64px 16px 0;
}
h3 {
position: relative;
width: auto;
margin: 0 auto;
font-size: 32px;
font-family: "M PLUS 1p", serif;
font-weight: bold;
text-align: center;
&::before {
position: absolute;
content: "";
height: 8px;
width: 192px;
inset: 0;
top: 48px;
margin: 0 auto;
background-color: var(--color-sub);
}
@media (max-width:480px) {
font-size: 24px;
&::before {
top: 40px;
width: 100%;
}
}
}
h4 {
font-family: "M PLUS 1p", serif;
font-weight: bold;
text-align: center;
}
}
}
}
html.anshante-ad{
header {
position: fixed;
width: 100%;
height: 80px;
background-color: var(--color-primary);
z-index: 3;
@media (max-width:960px) {
height: 72px;
}
@media (max-width:480px) {
height: 64px;
}
div.headerWrapper {
position: relative;
max-width: 1200px;
min-width: 320px;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0 80px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
@media (max-width:960px) {
padding: 0 40px;
}
@media (max-width:480px) {
padding: 0 16px;
}
h1 {
width: 168px;
height: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url(images/anshante-ad/logo.svg) 0 0 no-repeat;
background-size: contain;
background-position: center;
flex-shrink: 0;
@media (max-width:480px) {
margin-left: -32px;
}
}
a.menuBtn {
display: none;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
filter: none;
@media (max-width:960px) {
position: relative;
display: block;
width: 24px;
height: 24px;
margin: auto 0;
background: linear-gradient(
to bottom,
rgba(254 254 254 / 0%) 10px,
var(--color-white) 10px,
var(--color-white) 14px,
rgba(254 254 254 / 0%) 14px
);
&::before {
position: absolute;
content: "";
width: 100%;
height: 4px;
inset: 0;
background-color: var(--color-white);
transition: 0.4s;
}
&::after {
position: absolute;
content: "";
width: 100%;
height: 4px;
left: 0;
bottom: 0;
background-color: var(--color-white);
transition: 0.4s;
}
&.menuBtnActive {
background: none;
transition: 0.4s;
&::before {
transform: rotate(45deg) translate(7px, 7px);
}
&::after {
transform: rotate(-45deg) translate(7px, -7px);
}
}
}
@media (max-width:480px) {
margin-top: 20px;
}
}
nav.headerMenu {
height: 24px;
margin: auto 0;
@media (max-width:960px) {
position: absolute;
inset: 0;
height: 100%;
margin: 0;
transform: translateY(-100%);
z-index: -1;
opacity: 0;
transition: 0.4s;
&.open {
top: 72px;
transition: 0.4s;
transform: translateY(0);
opacity: 1;
}
}
@media (max-width:480px) {
&.open {
top: 64px;
}
}
ul.menu {
@media (max-width:960px) {
flex-direction: column;
width: 100%;
height: auto;
padding: 0;
z-index: -1;
}
li {
white-space: nowrap;
@media (max-width:960px) {
width: 100%;
height: auto;
margin: 0;
padding: 16px 40px;
box-sizing: border-box;
text-align: center;
transition: 0.4s;
background-color: var(--color-white);
border-bottom: 1px solid var(--color-sub);
&:hover {
background-color: var(--color-primary);
a {
color: var(--color-white);
}
}
a {
color: var(--color-black);
}
}
}
}
}
}
}
div.cover {
width: 100%;
height: 536px;
padding-top: 152px;
box-sizing: border-box;
overflow: hidden;
@media (max-width:960px) {
height: 520px;
padding-top: 136px;
}
@media (max-width:480px) {
padding-top: 240px;
}
h2.catch {
margin-left: calc(100% - 360px);
font-size: 40px;
font-family: "M PLUS 1p", serif;
line-height: 2;
white-space: nowrap;
@media (max-width:960px) {
margin-left: calc(100% - 320px);
}
@media (max-width:480px) {
margin: 0;
text-align: end;
font-size: 32px;
}
span {
position: relative;
display: block;
font-weight: bold;
filter: drop-shadow(0 0 4px var(--color-white));
&::before {
position: absolute;
content: "";
top: 72px;
background-color: var(--color-white);
filter: drop-shadow(0 0 16px var(--color-primary));
}
@media (max-width:480px) {
&::before {
top: 56px;
}
}
&:nth-child(1) {
&::before {
width: 160px;
height: 6px;
}
}
&:nth-child(2) {
&::before {
width: 320px;
height: 6px;
}
}
&:nth-child(3) {
&::before {
width: 188px;
height: 6px;
}
}
}
}
}
section.serviceWrapper {
margin-top: 128px;
@media (max-width:960px) {
margin-top: 72px;
}
@media (max-width:480px) {
margin-top: 40px;
}
ul.serviceList {
margin-top: 72px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@media (max-width:960px) {
margin-top: 56px;
}
@media (max-width:480px) {
margin-top: 32px;
}
li {
position: relative;
width: 100%;
margin-top: 56px;
padding: 64px 64px;
box-sizing: border-box;
background-color: var(--color-primary);
border-radius: 16px;
color: var(--color-white);
overflow: hidden;
&::after {
position: absolute;
content: "";
width: calc(100% - 456px);
height: 100%;
}
@media (max-width:960px) {
padding: 40px 40px;
margin-top: 40px;
&::after {
width: calc(100% - 368px);
}
}
@media (max-width:768px) {
width: 100%;
padding: 256px 40px 40px;
}
@media (max-width:480px) {
padding: 216px 40px 40px;
margin-top: 24px;
}
h4 {
width: 328px;
font-size: 32px;
@media (max-width:960px) {
width: 288px;
}
@media (max-width:768px) {
width: 100%;
}
@media (max-width:480px) {
font-size: 24px;
}
}
p {
width: 328px;
margin-top: 40px;
@media (max-width:960px) {
width: 288px;
margin-top: 16px;
}
@media (max-width:768px) {
width: 100%;
}
}
&:nth-child(1) {
margin-top: 0;
&::after {
top: 0;
right: 0;
background: url(images/anshante-ad/banquet.jpg)0 0 no-repeat;
background-size: cover;
}
@media (max-width:768px) {
&::after {
width: 100%;
height: 232px;
}
}
@media (max-width:480px) {
&::after {
width: 100%;
height: 192px;
}
}
}
&:nth-child(2) {
&::after {
top: 0;
right: 0;
background: url(images/anshante-ad/party.jpg)0 0 no-repeat;
background-size: cover;
}
@media (max-width:768px) {
&::after {
width: 100%;
height: 232px;
}
}
@media (max-width:480px) {
&::after {
width: 100%;
height: 192px;
}
}
}
&:nth-child(3) {
&::after {
top: 0;
right: 0;
background: url(images/anshante-ad/event.jpg)0 0 no-repeat;
background-size: cover;
}
@media (max-width:768px) {
&::after {
width: 100%;
height: 232px;
}
}
@media (max-width:480px) {
&::after {
width: 100%;
height: 192px;
}
}
}
&:nth-child(4) {
&::after {
width: 100%;
height: 216px;
top: 0;
right: 0;
background: url(images/anshante-ad/golf.jpg)0 0 no-repeat;
background-size: cover;
background-position: center;
}
@media (max-width:960px) {
&::after {
width: calc(100% - 368px);
height: 100%;
}
}
@media (max-width:768px) {
&::after {
width: 100%;
height: 232px;
}
}
}
&:nth-child(5) {
&::after {
width: 100%;
height: 216px;
top: 0;
right: 0;
background: url(images/anshante-ad/sightseeing.jpg)0 0 no-repeat;
background-size: cover;
background-position: center;
}
@media (max-width:960px) {
&::after {
width: calc(100% - 368px);
height: 100%;
}
}
@media (max-width:768px) {
&::after {
width: 100%;
height: 232px;
}
}
}
&:nth-child(n+4) {
width: 48%;
padding: 256px 64px 40px;
box-sizing: border-box;
@media (max-width:960px) {
width: 100%;
padding: 40px 40px;
}
@media (max-width:768px) {
padding: 256px 40px 40px;
}
h4 {
width: 100%;
@media (max-width:960px) {
width: 288px;
}
@media (max-width:768px) {
width: 100%;
}
}
p {
width: 100%;
margin-top: 16px;
@media (max-width:960px) {
width: 288px;
}
@media (max-width:768px) {
width: 100%;
margin-top: 16px;
}
}
}
&::before {
position: absolute;
content: "";
width: 120px;
height: 120px;
top: -16px;
left: -16px;
clip-path: polygon(0 0, 100% 0, 0 100%);
background-color: var(--color-sub);
z-index: 1;
}
}
}
}
section.banquetWrapper {
margin-top: 128px;
@media (max-width:960px) {
margin-top: 72px;
}
@media (max-width:480px) {
margin-top: 40px;
}
h3 {
&::before {
width: 388px;
}
@media (max-width:480px) {
&::before {
width: 100%;
}
}
}
p {
position: relative;
width: 100%;
margin-top: 72px;
padding: 64px;
box-sizing: border-box;
background-color: var(--color-primary);
border-radius: 16px;
overflow: hidden;
&::after {
position: absolute;
content: "";
width: calc(100% - 480px);
height: 100%;
top: 0;
left: 0;
background: url(images/anshante-ad/introduction.jpg)0 0 no-repeat;
background-size: cover;
}
@media (max-width:960px) {
margin-top: 56px;
padding: 40px;
&::after {
width: calc(100% - 416px);
}
}
@media (max-width:768px) {
padding: 264px 40px 40px;
&::after {
width: 100%;
height: 232px;
}
}
@media (max-width:480px) {
margin-top: 32px;
padding: 232px 40px 40px;
&::after {
height: 192px;
}
}
span {
display: block;
width: 348px;
margin-left: calc(100% - 352px);
color: var(--color-white);
font-size: 18px;
@media (max-width:960px) {
width: 320px;
margin-left: calc(100% - 328px);
}
@media (max-width:768px) {
width: 100%;
margin-left: 0;
}
}
&::before {
position: absolute;
content: "";
width: 120px;
height: 120px;
top: -16px;
left: -16px;
clip-path: polygon(0 0, 100% 0, 0 100%);
background-color: var(--color-sub);
z-index: 1;
}
}
}
section.reasonWrapper {
margin-top: 128px;
@media (max-width:960px) {
margin-top: 72px;
}
@media (max-width:480px) {
margin-top: 40px;
}
h3 {
&::before {
width: 288px;
}
@media (max-width:480px) {
&::before {
width: 100%;
}
}
}
ul.reasonList {
margin-top: 72px;
display: flex;
@media (max-width:960px) {
margin-top: 56px;
flex-wrap: wrap;
}
@media (max-width:480px) {
margin-top: 32px;
}
li {
width: 32%;
margin-left: 32px;
padding: 40px;
box-sizing: border-box;
border-radius: 16px;
background-color: var(--color-white);
@media (max-width:960px) {
width: 100%;
margin: 40px 0 0 0;
padding: 24px 40px 40px;
&:nth-child(1) {
margin-top: 0;
}
}
@media (max-width:480px) {
margin: 24px 0 0 0;
}
&:nth-child(1) {
margin-left: 0;
}
hgroup {
display: flex;
flex-direction: column-reverse;
h4 {
margin-top: 40px;
font-size: 24px;
@media (max-width:960px) {
margin-top: 8px;
}
}
p {
font-size: 48px;
font-weight: bold;
color: var(--color-primary);
text-align: center;
@media (max-width:480px) {
font-size: 32px;
}
}
}
p.copy {
margin-top: 40px;
line-height: 1.5;
@media (max-width:960px) {
margin-top: 24px;
}
}
}
}
}
/*============================
#detail
============================*/
section#detail.detailWrapper {
margin-top: 128px;
@media (max-width:960px) {
margin-top: 72px;
}
h3 {
}
div.table {
border-top: solid 1px #b8b8b8;
border-bottom: solid 1px #b8b8b8;
margin: 72px 0px 40px;
@media (max-width:960px) {
margin: 56px 0px 0px;
}
dl {
border-bottom: solid 1px #e5e5e5;
display: flex;
background-color: #fefefe;
@media (max-width:960px) {
display: block;
}
dt {
box-sizing: border-box;
padding: 12px;
font-size: 1.25rem;
line-height: 2.5rem;
font-weight: bold;
min-width: 256px;
background-color: #e1dbd4;
}
dd {
box-sizing: border-box;
padding: 12px;
ul {
li {
list-style: inside;
ul {
margin-left: 24px;
}
}
}
p {
p {
}
}
}
}
}
}
section.questionWrapper {
margin-top: 128px;
@media (max-width:960px) {
margin-top: 72px;
}
@media (max-width:480px) {
margin-top: 40px;
}
ul.questionList {
margin-top: 72px;
@media (max-width:960px) {
margin-top: 56px;
}
@media (max-width:480px) {
margin-top: 32px;
}
li {
padding: 40px 112px 56px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid var(--color-primary);
@media (max-width:960px) {
padding: 24px 40px 40px;
}
@media (max-width:768px) {
padding: 24px 16px 40px;
}
@media (max-width:768px) {
flex-direction: column;
}
&:nth-child(1) {
border-top: 1px solid var(--color-primary);
}
p {
&:nth-child(1) {
width: 64px;
height: 64px;
padding: 0 16px;
box-sizing: border-box;
font-size: 40px;
font-family: "M PLUS 1p", serif;
font-weight: bold;
color: var(--color-white);
border-radius: 50%;
background-color: var(--color-primary);
@media (max-width:768px) {
width: 48px;
height: 48px;
padding: 0 10px;
font-size: 32px;
margin: 0 auto;
}
}
&:nth-child(2) {
margin: 16px 0 0 32px;
font-size: 24px;
font-family: "M PLUS 1p", serif;
font-weight: bold;
@media (max-width:768px) {
margin: 16px 0 0 0;
}
}
&:nth-child(3) {
margin: 16px 0 0 96px;
line-height: 1.5;
@media (max-width:768px) {
margin: 16px 0 0 0;
}
}
}
}
}
}
section.contactWrapper {
max-width: 1200px;
margin-top: 128px;
padding: 56px 96px;
box-sizing: border-box;
background-color: var(--color-primary);
border-radius: 16px;
color: var(--color-white);
@media (max-width:960px) {
margin-top: 72px;
padding: 56px 40px;
}
@media (max-width:480px) {
margin-top: 40px;
padding: 40px 16px;
}
h3 {
&::before {
width: 96%;
top: 56px;
}
@media (max-width:480px) {
&::before {
top: 40px;
}
}
}
p {
margin-top: 40px;
text-align: center;
@media (max-width:480px) {
margin-top: 24px;
span {
display: inline-block;
}
}
}
dl {
margin-top: 40px;
text-align: center;
@media (max-width:480px) {
margin-top: 16px;
}
dt {
font-size: 24px;
font-family: "M PLUS 1p", serif;
font-weight: bold;
@media (max-width:480px) {
font-size: 16px;
}
&:nth-child(3) {
position: relative;
margin-top: 72px;
@media (max-width:960px) {
margin-top: 48px;
}
@media (max-width:480px) {
margin-top: 32px;
}
&::before {
position: absolute;
content: "";
width: 72%;
height: 1px;
inset: 0;
top: -36px;
margin: 0 auto;
background-color: var(--color-white);
}
@media (max-width:960px) {
&::before {
top: -24px;
}
}
@media (max-width:480px) {
&::before {
top: -20px;
}
}
}
}
dd {
&:nth-child(2) {
display: inline-block;
position: relative;
width: 392px;
margin-top: 16px;
font-size: 40px;
font-weight: bold;
text-align: end;
@media (max-width:960px) {
width: 312px;
font-size: 32px;
}
@media (max-width:480px) {
width: 100%;
margin-top: 40px;
font-size: 24px;
text-align: center;
}
&::before {
position: absolute;
content: "";
width: 48px;
height: 48px;
inset: 0;
margin: auto 0;
background-color: var(--color-white);
background: url(images/anshante-ad/phone.svg)0 0 no-repeat;
background-size: 68%;
background-position: center;
z-index: 1;
}
@media (max-width:960px) {
&::before {
width: 32px;
height: 32px;
}
}
@media (max-width:480px) {
&::before {
width: 24px;
height: 24px;
top: -32px;
margin: 0 auto;
}
}
&::after {
position: absolute;
content: "";
width: 48px;
height: 48px;
inset: 0;
margin: auto 0;
background-color: var(--color-white);
border-radius: 50%;
}
@media (max-width:960px) {
&::after {
width: 32px;
height: 32px;
}
}
@media (max-width:480px) {
&::after {
width: 24px;
height: 24px;
top: -32px;
margin: 0 auto;
}
}
}
&:nth-child(4) {
margin-top: 16px;
@media (max-width:640px) {
display: none;
}
}
&:nth-child(5) {
min-width: fit-content;
max-width: 264px;
height: 56px;
margin: 16px auto 0;
padding: 16px 0;
box-sizing: border-box;
background-color: #07b53b;
border: 1px solid var(--color-white);
display: none;
font-family: "M PLUS 1p", serif;
@media (max-width:640px) {
display: block;
}
a {
display: block;
width: 100%;
min-width: fit-content;
height: 100%;
text-decoration: none;
color: var(--color-white);
text-align: center;
}
}
}
}
}
footer {
margin-top: 128px;
background-color: var(--color-black);
color: var(--color-white);
@media (max-width:960px) {
margin-top: 72px;
}
@media (max-width:480px) {
margin-top: 40px;
}
div.footerWrapper {
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
padding: 48px 80px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@media (max-width:960px) {
padding: 48px 40px;
}
@media (max-width:768px) {
padding: 24px 40px;
justify-content: center;
}
h2.footerTitle {
width: 232px;
height: 96px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url(images/anshante-ad/logo.svg)0 0 no-repeat;
background-size: contain;
background-position: center;
@media (max-width:768px) {
margin: 0 auto;
}
}
div.footerContent {
nav {
ul.menu {
margin-top: 16px;
flex-wrap: wrap;
@media (max-width:768px) {
flex-direction: column;
}
li {
margin-bottom: 16px;
@media (max-width:768px) {
margin-right: 0;
}
a {
@media (max-width:768px) {
display: block;
text-align: center;
}
}
}
}
}
p {
margin-top: 16px;
font-size: 14px;
@media (max-width:768px) {
text-align: center;
}
}
}
}
}
}