@charset "UTF-8";

 html {
overflow-y: scroll;
}
fieldset, img {
border: none;
vertical-align: top;
}
ul, ol {
list-style-type: none;
}
address, caption, cite, code, dfn, em, var {
font-style: normal;
}
caption, th {
text-align: left;
}
a {
outline: none;
} h1, h2, h3, h4, h5, h6,
html, body, div,
p, ul, ol, li, dl, dt, dd,
pre, blockquote,
form, fieldset, input, textarea,
table, th, td, figure {
margin: 0;
padding: 0;
} q:before, q:after {
content: '';
}
table {
border-collapse: collapse;
border-spacing: 0;
}
:root {
color: #000000;
}
@media (max-width: 899px) {
:root {
text-size-adjust: 100%;
}
}
body {
color: #000000;
line-height: 1.5;
font-family: "Noto Sans JP", source-han-sans-japanese, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-size: 13px;
font-weight: 400;
}
@media (max-width: 899px) {
body {
text-size-adjust: 100%;
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
body {
font-size: 14px;
}
}
@media (max-width: 899px) {
#colorbox, #colorbox * {
max-height: none;
}
#gnavi, #gnavi * {
max-height: none;
}
img {
max-height: none;
max-width: 100%;
}
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
button, fieldset, form, input, label, legend, select, textarea {
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
}
a {
text-decoration: none;
transition: opacity 0.8s;
color: #000000;
}
@media (min-width: 900px) {
a:hover {
color: #000000;
opacity: 0.5;
}
a:visited {
color: #000000;
}
a:active {
text-decoration: none;
}
}
[type=text], [type=email], [type=password], [type=number], [type=tel], textarea, select {
padding: 5px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 0px;
}
select {
max-width: 100%;
height: 2.5em;
padding-right: 8%;
appearance: none;
border-radius: 0px;
border: 1px solid #ddd;
background: #fff url(/site/img/common/arrow.svg) 96% center no-repeat;
background-size: 12px;
}
select::-ms-expand {
display: none;
}
[type=text], [type=email], [type=password], [type=number], textarea {
appearance: none;
}
[type=text]:focus, [type=email]:focus, [type=password]:focus, [type=number]:focus, textarea:focus {
background: #fff;
border: 1px solid #aaa;
}
input[type=checkbox] {
display: none;
}
[type=checkbox] + label:before {
content: "";
display: inline-block;
margin-right: 5px;
height: 14px;
width: 14px;
background: #f9f9f9;
border: 1px solid #3589B7;
vertical-align: middle;
}
[type=checkbox]:checked + label:before {
content: "\2713";
font-size: 18px;
font-weight: bold;
line-height: 14px;
text-indent: -3px;
color: #000;
}
input[type=radio] {
vertical-align: middle;
}
input[type=radio] + label {
margin-left: 5px;
}
:placeholder-shown {
color: #BABABA;
} ::-webkit-input-placeholder {
color: #BABABA;
} :-moz-placeholder {
color: #BABABA;
opacity: 1;
} ::-moz-placeholder {
color: #BABABA;
opacity: 1;
} :-ms-input-placeholder {
color: #BABABA;
} #kinensyu img.fit100 {
max-width: 100%;
}
#kinensyu #pageTitle {
height: 85px;
background: #7f7f7f;
}
@media (max-width: 899px) {
#kinensyu #pageTitle {
height: 60px;
}
}
@media (max-width: 899px) {
#kinensyu .kinen_base {
padding-left: 2%;
padding-right: 7%;
}
}
#kinensyu #kinen01 {
position: relative;
margin-top: 2.0em;
text-align: center;
font-family: serif;
font-size: 2.0em;
line-height: 2.0em;
margin-bottom: 2.0em;
}
#kinensyu #kinen01 .kinen_catch {
position: relative;
z-index: 3;
}
#kinensyu #kinen01 .kinen_bg {
position: absolute;
top: 300px;
z-index: 2;
width: 1200px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#kinensyu #kinen01 .kinen_img {
position: relative;
margin-top: -370px;
}
@media (max-width: 899px) {
#kinensyu #kinen01 {
margin-top: 30px;
}
#kinensyu #kinen01 .kinen_bg {
display: none;
}
#kinensyu #kinen01 .kinen_img {
margin-top: -180px;
}
}
#kinensyu h1.tit, #kinensyu h2.tit, #kinensyu h3.tit, #kinensyu h4.tit, #kinensyu h5.tit, #kinensyu h6.tit {
font-family: ten-mincho-text, serif;
font-weight: 400;
line-height: 1.8em;
}
#kinensyu h1.tit {
font-size: 2.0em;
margin-bottom: 100px;
}
#kinensyu h2.tit {
font-size: 1.5em;
margin-bottom: 30px;
}
#kinensyu .mincho02 {
font-family: serif;
font-weight: 600;
}
@media (max-width: 899px) {
#kinensyu h1.tit {
font-size: 40px;
margin-bottom: 10px;
}
#kinensyu h2.tit {
font-size: 24px;
margin-bottom: 5px;
}
#kinensyu h3, #kinensyu h4, #kinensyu h5, #kinensyu h6 {
font-size: 18px;
}
}
@media (max-width: 899px) {
#kinensyu #kinen02 {
margin-bottom: 0;
}
}
#kinensyu #kinen02, #kinensyu #kinen05 {
width: 680px;
max-width: 100%;
margin: 0 auto 3.0em auto;
}
#kinensyu #kinen02 .kinen_box01, #kinensyu #kinen05 .kinen_box01 {
background-color: #103771;
color: #FFF;
font-family: serif;
font-weight: 400;
line-height: 2.0em;
padding: 20px 30px 15px 30px;
margin-bottom: 3.0em;
}
@media (max-width: 899px) {
#kinensyu #kinen02 .kinen_box01, #kinensyu #kinen05 .kinen_box01 {
padding-left: 3%;
padding-right: 3%;
}
}
#kinensyu #kinen02 h4, #kinensyu #kinen05 h4 {
font-family: serif;
font-weight: 600;
font-size: 1.5em;
text-align: center;
margin-bottom: 0.9em;
}
#kinensyu #kinen02 .kinen_setoh, #kinensyu #kinen05 .kinen_setoh {
text-align: center;
width: 180px;
max-width: 60%;
margin: 1.5em auto 2.0em auto;
}
#kinensyu #kinen02 p, #kinensyu #kinen05 p {
font-size: 1.15em;
font-weight: 400;
line-height: 2.1em;
margin-bottom: 1.0em;
}
#kinensyu #kinen02 .span01, #kinensyu #kinen05 .span01 {
font-family: serif;
font-weight: 600;
}
#kinensyu #kinen02 .name, #kinensyu #kinen05 .name {
text-align: right;
font-size: 1.3em;
font-family: serif;
font-weight: 600;
}
#kinensyu .sec_about {
padding-bottom: 0;
}
@media (max-width: 899px) {
#kinensyu .sec_about {
padding-top: 0;
}
}
@media (max-width: 899px) {
#kinensyu #products .detail {
padding-top: 20px;
}
}
#kinensyu .kinen_history01 {
margin: 0 auto 3.0em auto;
width: 700px;
max-width: 100%;
text-align: center;
} * {
box-sizing: border-box;
}
img {
vertical-align: bottom;
} .sp {
display: none;
}
@media (max-width: 899px) {
.sp {
display: inherit;
}
}
.-t_sp {
display: none;
}
@media (max-width: 767px) {
.-t_sp {
display: inherit;
}
}
@media (max-width: 899px) {
.pc {
display: none;
}
} .inner {
position: relative;
margin: 0px auto;
}
.grid_2cell {
display: table;
}
.grid_2cell .cell {
display: table-cell;
vertical-align: middle;
}
ul.ul_table > li > dl {
display: table;
}
ul.ul_table > li > dl > dt,
ul.ul_table > li > dl > dd {
display: table-cell;
vertical-align: middle;
}
ul.ul_table > li > dl > dt {
width: 120px;
padding-right: 4px;
}
a.std_icn1 {
position: relative;
}
a.std_icn1:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 8px;
height: 8px;
margin-right: 0.4em;
background: url(/site/img/common/arr.svg) 0 0 no-repeat;
background-size: contain;
} .list_qaa [type=checkbox] + label:before {
display: none;
} .clearfix:after {
content: "";
display: block;
clear: both;
height: 0px;
visibility: hidden;
}
* html .clearfix {
zoom: 1;
}
*:first-child + html .clearfix {
zoom: 1;
} body {
background: #fff;
overflow-x: hidden;
}
body.lock {
height: 100vh;
overflow: hidden;
padding: 0px !important;
}
@media (max-width: 899px) {
.nosp {
display: none !important;
}
}
@media (min-width: 900px) {
.nopc {
display: none !important;
}
} .wrap {
position: relative;
width: 1000px;
margin: 0px auto;
}
@media (max-width: 899px) {
.wrap {
width: auto;
margin: 0px 40px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.wrap {
margin: 0px 20px;
}
}
.linkbox {
cursor: pointer;
}
@media (min-width: 900px) {
.linkbox {
transition: opacity 0.8s;
}
.linkbox:hover {
opacity: 0.7;
}
}
.sp {
display: none;
}
@media (max-width: 899px) {
.sp {
display: inherit;
}
}
@media (max-width: 899px) {
.pc {
display: none;
}
} header {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
z-index: 1000;
background: transparent;
border-top: 3px solid #103771;
}
@media (min-width: 900px) {
header {
transition: all 0.3s;
}
header.scroll {
background: rgba(0, 0, 0, 0.5);
}
header:before {
content: "";
display: block;
width: 100%;
height: 1px;
background: #fff;
position: absolute;
left: 0;
bottom: 0;
opacity: 0;
transition: all 0.3s;
}
header.scroll:before {
opacity: 1;
}
}
@media (max-width: 899px) {
header {
transition: all 0.3s;
}
header.scroll {
background: rgba(0, 0, 0, 0.5);
}
}
header .logo {
padding: 16px 0px 16px 20px;
}
@media (max-width: 899px) {
header .logo .sitename img {
height: 64px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
header .logo .sitename img {
height: 40px;
}
}
header .logo a {
display: inline-block;
opacity: 0.7;
transition: opacity 0.8s;
}
header .logo a:hover {
opacity: 1;
}
@media (max-width: 899px) {
header .logo {
height: 102px;
display: block;
max-width: none;
padding: 20px 30px;
display: table-cell;
vertical-align: middle;
z-index: 3000;
}
}
@media (max-width: 899px) and (max-width: 420px) {
header .logo {
height: 50px;
padding: 10px 15px;
}
}
header a.btn_shop {
padding: 14px 16px 14px;
display: block;
background: #103771;
color: #fff;
border-radius: 0 0 0 8px;
transition: 0.3s;
}
@media (max-width: 899px) {
header a.btn_shop {
font-size: 18px;
padding: 18px 16px 18px;
border-radius: 0 0 8px 8px;
}
}
header a.btn_shop:hover {
opacity: 1;
background: #1a6497;
}
header a.btn_shop:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 22px;
height: 15px;
background: url(/site/img/common/btn_shop_icn1.svg) center center no-repeat;
background-size: contain;
margin-right: 8px;
margin-top: -6px;
}
header a.btn_shop:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 6px;
height: 10px;
background: url(/site/img/common/btn_shop_icn_arr.svg) center center no-repeat;
background-size: contain;
margin-left: 8px;
margin-top: -6px;
}
@media (max-width: 899px) {
header a.btn_shop:after {
width: 12px;
height: 16px;
margin-left: 12px;
}
}
header .sbtn {
position: absolute;
right: 0px;
top: 180px;
}
@media (max-width: 420px) {
header .sbtn {
width: 40px;
}
}
header a.btn_shop02 {
padding: 10px 18px 14px 15px;
display: block;
background: #103771;
color: #fff;
border-radius: 8px 0 0 8px;
transition: 0.3s;
margin-right: -8px;
}
@media (max-width: 420px) {
header a.btn_shop02 {
padding: 10px 8px 14px 8px;
}
}
header a.btn_shop02:hover {
opacity: 1;
background: #1a6497;
margin-right: 0;
}
header a.btn_shop02:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 46px;
height: 293px;
background: url(/site/img/common/btn_ec.png) center center no-repeat;
background-size: contain;
}
@media (max-width: 420px) {
header a.btn_shop02:before {
width: 26px;
height: 147px;
}
}
header .language {
position: absolute;
right: 200px;
top: 15px;
display: none;
}
@media (max-width: 899px) {
header .language {
right: 420px;
top: 15px;
}
}
header .language:after {
content: "▼";
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 4px;
right: 8px;
z-index: 2;
color: #406f95;
font-size: 16px;
text-align: center;
}
header .language select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
margin: 0;
padding: 0 45px 0 32px;
background: #fff;
border: 2px solid #406f95;
border-radius: 8px;
vertical-align: middle;
font-size: 12px;
color: inherit;
box-sizing: content-box;
position: relative;
opacity: 0.8;
transition: opacity .4s;
}
header .language select:hover {
opacity: 1;
}
header .language select::-ms-expand {
display: none;
}
header #gnavi {
position: absolute;
left: 100px;
top: 20px;
}
@media (max-width: 899px) {
header #gnavi {
display: none;
transform: none;
position: fixed;
left: 0px;
right: 0px;
top: 0px;
height: 100vh;
z-index: 2000;
padding-top: 102px;
background: #fff;
overflow: auto;
padding-bottom: 56px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
header #gnavi {
padding-top: 75px;
}
}
header #gnavi:before {
content: "";
display: block;
width: 100%;
height: 1px;
background: #fff;
position: absolute;
left: 0;
bottom: -25px;
}
@media (max-width: 899px) {
header #gnavi:before {
display: none;
}
}
header #gnavi > ul li {
position: relative;
display: table;
float: left;
}
@media (max-width: 899px) {
header #gnavi > ul li {
max-width: 100%;
display: block;
float: none;
text-align: left;
border-bottom: 1px solid #103771;
}
}
header #gnavi > ul li a {
width: auto;
max-width: 12.5%;
display: table-cell;
padding: 0 16px;
box-sizing: border-box;
vertical-align: middle;
font-family: serif;
font-weight: 400;
font-size: 15px;
text-align: center;
color: #fff;
letter-spacing: 0.1em;
position: relative;
}
@media (max-width: 899px) {
header #gnavi > ul li a {
width: auto;
max-width: 100%;
display: block;
text-align: left;
border-bottom: 1px solid #103771;
}
}
header #gnavi > ul li a:before {
content: "";
display: block;
width: 0;
height: 5px;
background: #fff;
position: absolute;
left: 0;
right: 0;
bottom: -25px;
margin: auto;
transition: width .4s;
}
@media (max-width: 899px) {
header #gnavi > ul li a:before {
bottom: 0px;
background: #103771;
display: none;
}
}
header #gnavi > ul li a:hover:before, header #gnavi > ul li a.current:before {
width: 100%;
}
header #gnavi > ul li a span {
display: block;
font-family: filson-soft, sans-serif;
font-weight: 400;
font-size: 10px;
opacity: 0.7;
letter-spacing: 0.025em;
}
@media (max-width: 899px) {
header #gnavi > ul li a span {
font-size: 16px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
header #gnavi > ul li a span {
font-size: 10px;
}
}
@media (max-width: 899px) {
header #gnavi > ul li a {
letter-spacing: .18em;
padding: 0.8em 1em;
font-size: 32px;
color: #103771;
position: relative;
}
}
@media (max-width: 899px) and (max-width: 420px) {
header #gnavi > ul li a {
font-size: 16px;
}
}
@media (max-width: 899px) {
header #gnavi > ul li a:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 34px;
height: 34px;
background: url(/site/img_sp/common/arr_menu.svg) center center no-repeat;
background-size: contain;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%); transform: translateY(-50%);
z-index: 1;
}
header #gnavi > ul li a.sub_arrow:after {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
margin-top: -17px;
}
}
header #gnavi > ul li .sub_menu {
opacity: 0;
overflow: hidden;
transition: all .25s ease-in;
position: absolute;
top: 32px;
left: 0;
width: 145px;
max-height: 0;
padding-top: 30px;
z-index: 999;
}
header #gnavi > ul li .sub_menu ul {
transition: all .25s ease-in;
}
header #gnavi > ul li .sub_menu ul li {
float: none;
margin-bottom: 10px;
}
header #gnavi > ul li .sub_menu ul li a {
font-size: 14px;
}
header #gnavi > ul li .sub_menu ul li a:before {
display: none;
}
header #gnavi > ul li .sub_menu05 {
width: 190px;
}
header #gnavi > ul li .sub_menu07 {
width: 190px;
}
header #gnavi > ul li.main_li:hover .sub_menu {
max-height: 9999px;
opacity: 1;
padding-top: 30px;
transition: all .25s ease-in;
}
header #gnavi > ul li.main_li:hover .sub_menu ul {
padding: 17px 3px 10px 3px;
background-color: rgba(16, 55, 113, 0.95);
transition: all .25s ease-in;
}
header .menu {
display: none;
position: absolute;
right: 40px;
top: 30px;
width: 45px;
height: 32px;
z-index: 3000;
cursor: pointer;
transition: all .4s;
box-sizing: border-box;
}
@media (max-width: 899px) {
header .menu {
display: block;
}
}
@media (max-width: 420px) {
header .menu {
right: 20px;
top: 17px;
width: 22px;
height: 16px;
}
}
header .menu span {
display: inline-block;
position: absolute;
left: 0px;
width: 45px;
height: 4px;
background-color: #c29f5d;
transition: all .4s;
box-sizing: border-box;
}
@media (max-width: 420px) {
header .menu span {
width: 22px;
height: 2px;
}
}
header .menu span:nth-of-type(1) {
top: 0px;
animation: menu-bar01 .75s forwards;
}
header .menu span:nth-of-type(2) {
top: 14px;
transition: all .25s .25s;
opacity: 1;
}
@media (max-width: 420px) {
header .menu span:nth-of-type(2) {
top: 7px;
}
}
header .menu span:nth-of-type(3) {
bottom: 0px;
animation: menu-bar02 .75s forwards;
}
header .menu.active span:nth-of-type(1) {
animation: active-menu-bar01 .75s forwards;
}
header .menu.active span:nth-of-type(2) {
opacity: 0;
}
header .menu.active span:nth-of-type(3) {
animation: active-menu-bar03 .75s forwards;
}
@media (max-width: 899px) {
@keyframes menu-bar01 {
0% {
transform: translateY(14px) rotate(45deg);
}
50% {
transform: translateY(14px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes menu-bar02 {
0% {
transform: translateY(-14px) rotate(-45deg);
}
50% {
transform: translateY(-14px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes active-menu-bar01 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(14px) rotate(0);
}
100% {
transform: translateY(14px) rotate(45deg);
}
}
@keyframes active-menu-bar03 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-14px) rotate(0);
}
100% {
transform: translateY(-14px) rotate(-45deg);
}
}
}
@media (max-width: 899px) and (max-width: 420px) {
@keyframes menu-bar01 {
0% {
transform: translateY(7px) rotate(45deg);
}
50% {
transform: translateY(7px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes menu-bar02 {
0% {
transform: translateY(-7px) rotate(-45deg);
}
50% {
transform: translateY(-7px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes active-menu-bar01 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(7px) rotate(0);
}
100% {
transform: translateY(7px) rotate(45deg);
}
}
@keyframes active-menu-bar03 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-7px) rotate(0);
}
100% {
transform: translateY(-7px) rotate(-45deg);
}
}
}
@media (max-width: 899px) {
.menuHead {
width: 100%;
border-top: 3px solid #103771;
background: #103771;
height: 102px;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
z-index: 3000;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.menuHead {
height: 75px;
}
}
@media (max-width: 899px) and (max-width: 899px) {
.menuHead .logo .sitename img {
height: 64px;
}
}
@media (max-width: 899px) {
.menuFooter {
padding: 72px 0;
background: #00387d;
}
.menuFooter .ft_logo {
margin: 0 0 8px;
text-align: center;
}
.menuFooter .ft_logo .mark {
margin-bottom: 16px;
}
}
@media (max-width: 899px) and (max-width: 899px) {
.menuFooter .ft_logo .mark {
margin-bottom: 24px;
}
.menuFooter .ft_logo .mark img {
height: 92px;
}
}
@media (max-width: 899px) and (max-width: 899px) {
.menuFooter .ft_logo .type img {
height: 92px;
}
}
@media (max-width: 899px) {
.menuFooter .ul_sns {
margin: 24px auto;
text-align: right;
letter-spacing: -.4em;
}
}
@media (max-width: 899px) and (max-width: 899px) {
.menuFooter .ul_sns {
text-align: center;
margin: 32px auto;
}
}
@media (max-width: 899px) {
.menuFooter .ul_sns > li {
letter-spacing: normal;
display: inline-block;
vertical-align: middle;
margin: 0 7px;
}
}
@media (max-width: 899px) and (max-width: 899px) {
.menuFooter .ul_sns > li {
margin: 0 8px;
}
}
@media (max-width: 899px) {
.menuFooter .ul_sns > li a {
width: 52px;
height: 52px;
text-align: center;
box-sizing: border-box;
display: block;
line-height: 1;
padding: 7px 6px;
border-radius: 14px;
background: #000000;
position: relative;
transition: all 0.5s;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.menuFooter .ul_sns > li a {
width: 38px;
height: 38px;
border-radius: 7px;
}
}
@media (max-width: 899px) {
.menuFooter .ul_sns > li a img {
transition: all 0.5s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
@media (max-width: 899px) and (max-width: 420px) {
.menuFooter .ul_sns > li a img {
max-width: 26px;
max-height: 26px;
}
}
@media (max-width: 899px) {
.menuFooter .ul_sns > li a:hover {
background: #1a6497;
opacity: 1;
}
.menuFooter .ul_sns > li a:hover img {
opacity: 0.7;
}
.menuFooter .ul_info {
text-align: center;
letter-spacing: -.4em;
margin: 12px auto 20px;
color: #fff;
}
.menuFooter .ul_info > li {
list-style: none;
display: inline-block;
letter-spacing: normal;
font-size: 14px;
line-height: 1;
}
}
@media (max-width: 899px) and (max-width: 899px) {
.menuFooter .ul_info > li {
font-size: 22px;
}
.menuFooter .ul_info > li.info_tel {
display: block;
}
.menuFooter .ul_info > li a {
color: #fff;
}
}
@media (max-width: 899px) and (max-width: 899px) and (max-width: 420px) {
.menuFooter .ul_info > li {
font-size: 12px;
}
}
@media (max-width: 899px) {
.menuFooter .ul_info > li:first-child {
margin-left: 0;
}
} .wp-pagenavi {
clear: both;
padding: 20px 0px 40px;
text-align: center;
line-height: 2;
font-weight: bold;
font-size: 16px;
}
@media (max-width: 899px) {
.wp-pagenavi {
font-size: 22px;
}
}
.wp-pagenavi a, .wp-pagenavi .current, .wp-pagenavi span {
display: inline-block;
width: 2.4em;
height: 3.2em;
margin: 0px 0.32em;
color: #fff;
background: #2881A7;
border: 1px solid #2881A7;
vertical-align: middle;
text-align: center;
line-height: 3.2;
}
.wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink, .wp-pagenavi a.extend, .wp-pagenavi .current.nextpostslink, .wp-pagenavi .current.previouspostslink, .wp-pagenavi .current.extend, .wp-pagenavi span.nextpostslink, .wp-pagenavi span.previouspostslink, .wp-pagenavi span.extend {
background: none;
border: none;
}
.wp-pagenavi .current {
color: #2881A7;
background: #fff;
}
.pager {
clear: both;
padding: 1em;
text-align: center;
line-height: 1;
font-size: 16px;
}
@media (max-width: 899px) {
.pager {
font-size: 20px;
}
}
.pager a {
display: inline-block;
margin: 0 1em;
}
@media (max-width: 899px) {
.pager a {
margin: 0px 0.5em;
}
}
.noitem {
padding: 100px 0px 250px;
font-size: 16px;
text-align: center;
}
@media (max-width: 899px) {
.noitem {
font-size: 24px;
}
} #instgram {
padding: 75px 0px 110px;
display: none;
}
#instgram > .wrap {
width: 1200px;
}
@media (max-width: 899px) {
#instgram > .wrap {
width: auto;
}
}
#instgram .item {
float: left;
width: 300px;
margin: 0px 0 0 0px;
box-sizing: border-box;
overflow: hidden;
}
#instgram .item:nth-child(5n) {
margin-right: 0px;
}
#instgram .item img {
width: 100%;
transition: all 0.5s;
}
#instgram .item a:hover {
opacity: 1;
}
#instgram .item a:hover img {
transform: scale(1.2);
}
#instgram .btn {
position: absolute;
right: 15px;
bottom: -60px;
z-index: 10;
}
#instgram .btn a {
display: block;
width: 40px;
height: 40px;
padding: 9px;
border-radius: 20px;
background: #103771;
box-sizing: border-box;
transition: all 0.5s;
}
#instgram .btn a:hover {
background: #c21d69;
opacity: 1;
}
#instgram .btn a img {
width: 22px;
}
.shop {
padding-bottom: 120px;
text-align: center;
}
.shop p {
width: 740px;
margin: 0px auto;
}
.shop p a {
display: block;
position: relative;
}
.shop p a:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
display: block;
border: 2px solid #aed6c1;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shop p a:hover {
opacity: 1;
}
.shop p a:hover:after {
left: 15px;
right: 15px;
bottom: 15px;
top: 15px;
}
footer .foot {
padding: 30px 0px;
background: #274d68;
color: #fff;
}
footer .foot a {
color: #fff;
}
footer .foot .logo {
float: left;
}
footer .foot ul {
float: right;
width: 900px;
margin-right: -50px;
padding-top: 25px;
text-align: left;
}
footer .foot ul > li {
float: left;
width: 150px;
margin-right: 30px;
margin-bottom: 1em;
}
footer .foot ul > li ul {
float: none;
width: auto;
padding-top: 0.5em;
}
footer .foot ul > li ul li {
margin-right: 0px;
padding-left: 0.5em;
margin-bottom: 0.3em;
}
footer .foot ul > li ul li a {
color: #9fe0e2;
}
footer .end {
padding: 50px 0px;
background: #333;
color: #fff;
}
footer .end address .name {
display: block;
margin-bottom: 0.5em;
font-size: 24px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}
footer .end .sns {
position: absolute;
right: 0px;
top: 0px;
}
footer .end .sns li {
float: left;
margin-left: 14px;
}
footer .end .sns li a {
display: block;
padding: 7px 6px;
border-radius: 14px;
background: #000000;
transition: all 0.5s;
}
footer .end .sns li a img {
transition: all 0.5s;
}
footer .end .sns li a:hover {
background: #1a6497;
opacity: 1;
}
footer .end .copy {
position: absolute;
right: 0px;
bottom: 0px;
}
.pan_area {
background: #F2F2F2;
}
.pan {
max-width: 1000px;
width: 88%;
margin: 0 auto;
font-size: 14px;
color: #888;
}
.pan a {
color: #006885;
display: inline-block;
padding: 8px;
}
.pan a:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 6px;
height: 10px;
background: url(/site/img/common/icn_pan.svg) center center no-repeat;
background-size: contain;
margin-left: 8px;
margin-bottom: 4px;
}
@media (max-width: 899px) {
.pan {
font-size: 20px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.pan {
font-size: 12px;
}
}  footer .pagetop {
position: absolute;
bottom: -24px;
left: 50%;
-webkit-transform: translateX(-50%); transform: translateX(-50%);
z-index: 100;
opacity: 0;
}
@media (max-width: 899px) {
footer .pagetop {
position: absolute;
left: 50%;
top: 0px;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
opacity: 1;
width: 90px;
}
footer .pagetop img {
width: 100%;
}
}
footer .fixd {
position: fixed;
right: 0px;
top: 200px;
z-index: 100;
font-size: 0px;
line-height: 0px;
}
@media (max-width: 899px) {
footer .fixd {
display: none;
}
}
@media (max-width: 899px) {
footer {
position: relative;
}
}
footer > .primary {
min-height: 240px;
color: #fff;
background: #00387d;
padding: 16px 0 32px;
box-sizing: border-box;
text-align: center;
position: relative;
}
@media (max-width: 899px) {
footer > .primary {
padding: 32px 0;
}
}
footer > .primary .ft_logo {
margin: 0 0 8px;
position: absolute;
left: 0;
top: 40%;
transform: translateY(-50%);
}
@media (max-width: 899px) {
footer > .primary .ft_logo {
position: static;
text-align: center;
transform: translateY(0%);
margin-bottom: 32px;
}
}
footer > .primary .ft_logo a {
display: inline-block;
}
footer > .primary .ft_logo a:hover {
opacity: 1;
}
@media (max-width: 899px) {
footer > .primary .ft_logo .type img {
height: 140px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
footer > .primary .ft_logo .type img {
height: 110px;
}
}
footer > .primary .two {
margin-left: 140px;
position: relative;
}
@media (max-width: 899px) {
footer > .primary .two {
margin-left: 0;
}
}
footer > .primary .ul_info {
position: absolute;
left: 16px;
bottom: 0;
margin: 12px auto 20px;
}
@media (max-width: 899px) {
footer > .primary .ul_info {
position: static;
}
}
footer > .primary .ul_info > li {
text-align: left;
margin: 12px 0;
font-size: 14px;
line-height: 1;
}
@media (max-width: 899px) {
footer > .primary .ul_info > li {
font-size: 22px;
text-align: center;
}
footer > .primary .ul_info > li a {
color: #fff;
}
}
@media (max-width: 899px) and (max-width: 420px) {
footer > .primary .ul_info > li {
font-size: 12px;
}
}
footer > .primary .ul_sns {
margin: 8px auto 8px;
text-align: right;
letter-spacing: -.4em;
}
@media (max-width: 899px) {
footer > .primary .ul_sns {
text-align: center;
margin: 32px auto;
}
}
footer > .primary .ul_sns > li {
letter-spacing: normal;
display: inline-block;
vertical-align: middle;
margin: 0 7px;
}
@media (max-width: 899px) {
footer > .primary .ul_sns > li {
margin: 0 8px;
}
}
footer > .primary .ul_sns > li a {
width: 52px;
height: 52px;
text-align: center;
box-sizing: border-box;
display: block;
line-height: 1;
padding: 7px 6px;
border-radius: 14px;
background: #000000;
position: relative;
transition: all 0.5s;
}
@media (max-width: 420px) {
footer > .primary .ul_sns > li a {
width: 38px;
height: 38px;
border-radius: 7px;
}
}
footer > .primary .ul_sns > li a img {
transition: all 0.5s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 420px) {
footer > .primary .ul_sns > li a img {
max-width: 26px;
max-height: 26px;
}
}
footer > .primary .ul_sns > li a:hover {
background: #1a6497;
opacity: 1;
}
footer > .primary .ul_sns > li a:hover img {
opacity: 0.7;
}
@media (max-width: 899px) {
footer > .primary .fnavi {
display: none;
}
}
footer > .primary .fnavi .ul_ftnav {
margin: 18px auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: left;
align-items: flex-start;
}
@media (max-width: 899px) {
footer > .primary .fnavi .ul_ftnav {
margin: 18px auto 0;
}
}
footer > .primary .fnavi .ul_ftnav > li {
width: 20%;
text-align: left;
}
footer > .primary .fnavi .ul_ftnav > li a {
color: #fff;
display: inline-block;
padding: 12px 16px;
}
@media (max-width: 899px) {
footer > .primary .ft_unav {
letter-spacing: -.4em;
text-align: center;
margin-bottom: 16px;
}
}
footer > .primary .ft_unav > li {
display: inline-block;
vertical-align: middle;
letter-spacing: normal;
margin-left: 1em;
}
@media (max-width: 899px) {
footer > .primary .ft_unav > li a {
display: inline-block;
padding: 8px 16px;
font-size: 22px;
line-height: 1;
}
}
footer > .primary .ft_unav > li:first-child {
margin-left: 0;
}
footer > .primary .copyright {
text-align: right;
margin-top: 16px;
}
@media (max-width: 899px) {
footer > .primary .copyright {
text-align: center;
margin: 0 auto;
font-size: 20px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
footer > .primary .copyright {
font-size: 10px;
}
}
.pagetop {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 300;
width: 56px;
height: 56px;
transition: all 0.4s;
}
@media (max-width: 899px) {
.pagetop {
width: 80px;
height: 80px;
}
}
@media (max-width: 420px) {
.pagetop {
width: 60px;
height: 60px;
}
}
.pagetop.active {
bottom: 60px;
}
.pagetop a {
display: block;
height: 56px;
padding-top: 30px;
border: 3px solid #103771;
background: #fff url(/site/img/common/top.svg) center 9px no-repeat;
background-size: 26px 14px;
box-sizing: border-box;
line-height: 1;
text-align: center;
color: #103771;
letter-spacing: -0.1em;
font-size: 10px;
font-weight: bold;
text-decoration: none;
opacity: 0.6;
transition: all 0.4s;
}
.pagetop a:hover {
opacity: 1;
}
@media (max-width: 899px) {
.pagetop a {
display: block;
height: 80px;
font-size: 14px;
padding-top: 48px;
background-size: 40px 28px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.pagetop a {
height: 60px;
font-size: 10px;
padding-top: 38px;
background-size: 30px 18px;
}
} .clearfix:after {
content: "";
display: block;
clear: both;
height: 0px;
visibility: hidden;
}
* html .clearfix {
zoom: 1;
}
*:first-child + html .clearfix {
zoom: 1;
}
#soon {
height: 100vh;
position: relative;
background: url(/site/img/index/main01.jpg) center no-repeat;
background-size: cover;
}
#soon p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: serif;
font-weight: 400;
font-size: 60px;
color: #fff;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
} .none {
display: none;
opacity: 0;
}
#top {
position: relative;
}
#top:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 2200px;
height: 64px;
background: url(/site/img/index/bg01.png) center bottom no-repeat;
position: absolute;
bottom: -64px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
#top .loading {
position: absolute;
left: 50%;
top: 50%;
z-index: 10;
}
#top .slide {
height: 100vh;
}
#top .slide .item {
display: none;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#top .slide .item:first-child {
display: block;
}
#top .marker {
position: absolute;
right: 0;
bottom: 180px;
z-index: 10;
width: 100%;
transform: translateY(-50%);
text-align: center;
font-size: 0px;
line-height: 0px;
}
#top .marker li {
display: inline-block;
width: 12px;
height: 12px;
margin: 0px 5px;
box-sizing: border-box;
border: 1px solid #fff;
border-radius: 6px;
}
#top .marker li.current {
background: #fff;
}
#top .title {
position: absolute;
left: 50%;
top: 50%;
z-index: 10;
transform: translate(-50%, -50%);
}
@media screen and (max-height: 800px) {
#top .title {
top: 40%;
}
}
@media screen and (max-height: 850px) {
#top .title img {
height: 240px;
}
}
@media screen and (max-height: 620px) {
#top .title img {
height: 140px;
}
}
@media (max-width: 420px) {
#top .title img {
height: 100px;
}
}
#top .scroll {
position: absolute;
left: 50%;
bottom: 80px;
z-index: 10;
margin-left: -52px;
}
@media (max-width: 420px) {
#top .scroll {
margin-left: -30px;
}
#top .scroll img {
width: 60px;
}
}
#top .scroll.move {
animation: moveItem 1.2s infinite;
opacity: 0;
}
@keyframes moveItem {
0% {
transform: translateY(0px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateY(10px);
opacity: 0;
}
}
#concept {
text-align: center;
}
#concept .wrap {
padding: 240px 0px 180px;
background: url(/site/img/index/cbg.svg) center 210px no-repeat;
}
@media (max-width: 420px) {
#concept .wrap {
padding: 110px 0px 70px;
background-position: center 85px;
background-size: 90px auto;
}
}
#concept h2 {
margin-bottom: 0.5em;
font-family: serif;
font-weight: 400;
font-size: 33px;
letter-spacing: 0.1em;
}
@media (max-width: 420px) {
#concept h2 {
font-size: 20px;
}
}
#concept h2 span {
font-size: 38px;
color: #0494ac;
}
@media (max-width: 420px) {
#concept h2 span {
font-size: 26px;
}
}
#concept p {
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
font-size: 19px;
line-height: 3.1;
}
@media (max-width: 899px) {
#concept p {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#concept p {
font-size: 12px;
}
}
#lineup {
padding-bottom: 160px; }
@media (max-width: 420px) {
#lineup {
padding-bottom: 50px;
}
}
#lineup h2 {
position: relative;
margin-bottom: 1em;
font-family: serif;
font-weight: 400;
font-size: 33px;
text-align: center;
}
@media (max-width: 420px) {
#lineup h2 {
font-size: 24px;
}
}
#lineup h2:before {
content: "";
position: absolute;
left: 50%;
top: -20px;
width: 310px;
height: 256px;
margin-left: -155px;
background: url(/site/img/index/lineup_bg1.png) no-repeat;
}
@media (max-width: 420px) {
#lineup h2:before {
width: 210px;
height: 146px;
margin-left: -105px;
background-size: cover;
}
}
#lineup h2 span {
display: block;
font-family: filson-soft, sans-serif;
font-weight: 400;
font-size: 22px;
color: #939393;
}
@media (max-width: 420px) {
#lineup h2 span {
font-size: 12px;
}
}
#lineup ul {
position: relative;
z-index: 10;
text-align: center;
font-size: 0px;
line-height: 1;
}
#lineup ul li {
display: inline-block;
width: 14.2%;
}
@media (max-width: 899px) {
#lineup ul li {
width: 25%;
margin-bottom: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#lineup ul li img {
width: 60%;
}
}
#lineup ul li span {
display: block;
padding-top: 0.75em;
font-size: 16px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
line-height: 1.5;
}
@media (max-width: 420px) {
#lineup ul li span {
font-size: 12px;
}
}
#lineup .more {
padding-top: 40px;
text-align: center;
}
#lineup .more a {
display: inline-block;
width: 244px;
padding: 0.9em 30px 1em 0px;
border-radius: 4px;
border: 1px solid #103771;
text-align: center;
font-size: 19px;
color: #103771;
line-height: 1;
background: #fff url(/site/img/index/ar.svg) 205px center no-repeat;
box-sizing: border-box;
transition: .3s;
}
@media (max-width: 899px) {
#lineup .more a {
width: 320px;
padding: 1.2em 30px 1.3em 0px;
font-size: 24px;
background: #fff url(/site/img/index/ar.svg) 95% center no-repeat;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#lineup .more a {
width: 60%;
font-size: 14px;
}
}
#lineup .more a:hover {
opacity: 1;
background: #103771 url(/site/img/index/ar_w.svg) 205px center no-repeat;
color: #fff;
}
@keyframes bg-slider {
from {
background-position: 0 bottom;
}
to {
background-position: -1867px bottom;
}
}
.about .key {
position: relative;
height: 540px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
@media (max-width: 420px) {
.about .key {
height: 280px;
}
}
.about .key .copy {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%);
margin-left: -420px;
}
@media (max-width: 899px) {
.about .key .copy {
margin-left: -240px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.about .key .copy {
margin-left: -45%;
}
}
.about .key .tit {
font-size: 42px;
font-family: ten-mincho, serif;
font-weight: 400;
letter-spacing: 0.15em;
}
@media (max-width: 420px) {
.about .key .tit {
font-size: 30px;
}
}
.about .key .tit span {
writing-mode: vertical-rl;
}
.about .key .tit span.t-shadow{
text-shadow: 0 0 6px #222;
}
.about .wrap {
padding: 40px 0px 100px;
}
.about .wrap:before {
position: absolute;
top: -40px;
right: -130px;
z-index: -1;
content: "";
width: 570px;
height: 470px;
background: url(/site/img/index/pickup_bg1.svg) no-repeat;
background-size: 100%;
}
.about .wrap h2 {
margin-bottom: 0.5em;
font-family: serif;
font-weight: 400;
font-size: 32px;
}
@media (max-width: 420px) {
.about .wrap h2 {
font-size: 20px;
}
}
.about .wrap .text {
margin-bottom: 2em;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
font-size: 16px;
line-height: 2;
}
@media (max-width: 899px) {
.about .wrap .text {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.about .wrap .text {
font-size: 13px;
}
}
@media (max-width: 899px) {
.about .wrap .more {
text-align: center;
}
}
.about .wrap .more a {
display: inline-block;
width: 244px;
padding: 0.9em 30px 1em 0px;
border-radius: 4px;
border: 1px solid #103771;
text-align: center;
font-size: 19px;
color: #103771;
line-height: 1;
background: #fff url(/site/img/index/ar.svg) 205px center no-repeat;
box-sizing: border-box;
transition: .3s;
}
@media (max-width: 899px) {
.about .wrap .more a {
width: 244px;
padding: 1.2em 30px 1.3em 0px;
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.about .wrap .more a {
width: 60%;
font-size: 14px;
background-position: 95% center;
}
}
.about .wrap .more a:hover {
opacity: 1;
background: #103771 url(/site/img/index/ar_w.svg) 205px center no-repeat;
color: #fff;
}
.about .make .key {
background-image: url(/site/img/index/about01.jpg);
}
.about .buy .key {
background-image: url(/site/img/store/20240426-02_ds_intro_bg1.jpg);
}
.about .buy .key .tit {
color: #fff;
}
.newsbox {
padding: 50px 0px 60px;
background: url(/site/img/index/bg05.jpg) center no-repeat;
background-size: cover;
}
.newsbox h2 {
position: relative;
margin-bottom: 1em;
font-family: serif;
font-weight: 400;
font-size: 33px;
text-align: center;
}
@media (max-width: 420px) {
.newsbox h2 {
font-size: 24px;
}
}
.newsbox h2 span {
display: block;
font-family: filson-soft, sans-serif;
font-weight: 400;
font-size: 22px;
color: #939393;
}
@media (max-width: 420px) {
.newsbox h2 span {
font-size: 12px;
}
}
.newsbox .catnav {
position: relative;
z-index: 10;
margin-bottom: 30px;
text-align: center;
font-size: 0px;
line-height: 0px;
}
.newsbox .catnav li {
display: inline-block;
margin: 12px 20px;
}
@media (max-width: 899px) {
.newsbox .catnav li {
width: 40%;
}
}
.newsbox .catnav li a {
display: inline-block;
padding: 0.85em 2em;
border-radius: 1.5em;
background: #fff;
font-size: 15px;
line-height: 1;
border: 1px solid #d1d3d4;
box-sizing: border-box;
transition: all 0.5s;
}
@media (max-width: 899px) {
.newsbox .catnav li a {
width: 100%;
font-size: 19px;
padding: 0.9em 2em;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.newsbox .catnav li a {
font-size: 12px;
}
}
.newsbox .catnav li a:hover, .newsbox .catnav li a.current {
background: #424242;
color: #fff;
opacity: 1;
}
.newsbox .items {
padding: 1.8em 4em;
background: #fff;
}
@media (max-width: 899px) {
.newsbox .items {
padding: 24px 30px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.newsbox .items {
padding: 15px;
}
}
.newsbox .items li {
padding: 0.7em 0px;
font-size: 14px;
}
@media (max-width: 899px) {
.newsbox .items li {
font-size: 22px;
padding: 8px 0;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.newsbox .items li {
font-size: 12px;
}
}
.newsbox .items li span {
width: auto;
display: inline-block;
padding-right: 1em;
}
@media (max-width: 899px) {
.newsbox .items li span {
width: auto;
font-size: 22px;
display: block;
padding-right: 0;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.newsbox .items li span {
font-size: 12px;
}
}
.newsbox .items li .date {
color: #949494;
}
@media (max-width: 899px) {
.newsbox .items li .date {
position: absolute;
left: 0;
top: 0;
}
}
.newsbox .items li .cat {
color: #61809e;
}
.newsbox .items li .cat.red {
color: #e09141;
}
@media (max-width: 899px) {
.newsbox .items li .cat {
width: auto;
padding-left: 140px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.newsbox .items li .cat {
padding-left: 7em;
}
}
@media (max-width: 899px) {
.newsbox .items li .arti {
padding-left: 140px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.newsbox .items li .arti {
padding-left: 7em;
}
}
.newsbox .items li a {
color: #103771;
position: relative;
}
@media (max-width: 899px) {
.newsbox .items li a {
display: block;
}
}
.newsbox .more {
padding-top: 50px;
text-align: center;
display: none;
}
.newsbox .more a {
display: inline-block;
width: 244px;
padding: 0.9em 30px 1em 0px;
border-radius: 4px;
border: 1px solid #103771;
text-align: center;
font-size: 19px;
color: #103771;
line-height: 1;
background: #fff url(/site/img/index/ar.svg) 205px center no-repeat;
box-sizing: border-box;
transition: .3s;
} #blog {
padding: 30px 0px 100px;
background: url(/site/img/index/blogbg.png) center top no-repeat;
}
#blog h2 {
text-align: center;
}
@media (max-width: 899px) {
#blog h2 img {
height: 70px;
}
}
#blog h2 span {
display: block;
margin-bottom: 1em;
font-size: 16px;
letter-spacing: 0.1em;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
font-weight: normal;
line-height: 1;
}
@media (max-width: 899px) {
#blog h2 span {
font-size: 28px;
line-height: 1.5;
}
}
#blog .nav {
padding: 50px 0px;
line-height: 1;
font-size: 0px;
text-align: center;
}
#blog .nav li {
display: inline-block;
border-left: 1px solid #625f5f;
padding: 0px 10px;
}
@media (max-width: 899px) {
#blog .nav li {
padding: 0px 20px;
}
}
#blog .nav li:last-child {
border-right: 1px solid #625f5f;
}
#blog .nav li a {
display: block;
font-size: 16px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}
@media (max-width: 899px) {
#blog .nav li a {
font-size: 24px;
}
}
#blog .items .item {
float: left;
width: 323px;
margin: 0px 30px 30px 0px;
padding: 10px;
background: #fff;
box-sizing: border-box;
box-shadow: 0px 0px 30px rgba(169, 171, 143, 0.2);
}
@media (max-width: 899px) {
#blog .items .item {
float: none;
width: auto;
margin: 0px 0px 40px;
padding: 20px;
}
}
#blog .items .item:nth-child(3n) {
margin-right: 0px;
}
#blog .items .item figure {
margin-bottom: 25px;
}
#blog .items .item figure img {
width: 100%;
}
#blog .items .item p {
padding: 0px 15px 1em;
}
#blog .items .item .cat span {
display: inline-block;
position: relative;
padding-bottom: 12px;
line-height: 1;
}
#blog .items .item .cat span:after {
content: "";
position: absolute;
left: 0px;
bottom: 0px;
width: 120px;
height: 2px;
background: #e60012;
}
#blog .items .item .title {
font-size: 14px;
}
@media (max-width: 899px) {
#blog .items .item .title {
font-size: 26px;
}
}
#blog .detail .eyecatch {
position: relative;
height: 550px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@media (max-width: 899px) {
#blog .detail .eyecatch {
height: 260px;
}
}
#blog .detail .eyecatch .head {
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
color: #fff;
font-size: 24px;
}
#blog .detail .eyecatch .head h1 {
padding-top: 0.2em;
font-size: 34px;
}
#blog .detail h1.title {
padding: 80px 0px 20px;
font-size: 27px;
text-align: center;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}
@media (max-width: 899px) {
#blog .detail h1.title {
font-size: 32px;
}
}
#blog .detail .entry {
margin-bottom: 80px;
}
#blog .detail .box {
margin-bottom: 60px;
}
#blog .detail .box h2.title {
position: relative;
margin-bottom: 60px;
text-align: center;
font-size: 27px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}
@media (max-width: 899px) {
#blog .detail .box h2.title {
font-size: 32px;
}
}
#blog .detail .box h2.title:after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: -20px;
width: 88px;
height: 2px;
margin-left: -44px;
background: #e60012;
}
#blog .detail .box h3 {
margin-bottom: 1em;
text-align: center;
font-size: 27px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}
@media (max-width: 899px) {
#blog .detail .box h3 {
font-size: 30px;
}
}
#blog .detail .box h4 {
margin-bottom: 0.3em;
font-size: 20px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}
@media (max-width: 899px) {
#blog .detail .box h4 {
font-size: 26px;
}
}
#blog .detail .box .read {
margin-bottom: 1em;
font-size: 15px;
line-height: 2;
text-align: center;
}
@media (max-width: 899px) {
#blog .detail .box .read {
font-size: 24px;
}
}
#blog .detail .box figure {
margin-bottom: 1.5em;
}
#blog .detail .box img {
max-width: 100%;
}
#blog .detail .box .text {
margin-bottom: 1.5em;
font-size: 15px;
line-height: 2;
}
@media (max-width: 899px) {
#blog .detail .box .text {
font-size: 24px;
}
}
#blog .detail .centerbox figure {
text-align: center;
}
@media (min-width: 900px) {
#blog .detail .centerbox figure.left {
float: left;
max-width: 350px;
margin-right: 30px;
}
#blog .detail .centerbox figure.right {
float: right;
max-width: 350px;
margin-left: 30px;
}
}
@media (max-width: 899px) {
#blog .detail .centerbox figure {
text-align: center;
}
}
#blog .detail .templatebox .textbox {
padding-bottom: 1em;
}
#blog .detail .templatebox .text {
margin-bottom: 1em;
}
#blog .detail .templatebox figure {
text-align: center;
}
@media (min-width: 900px) {
#blog .detail .templatebox figure.left {
float: left;
max-width: 350px;
margin-right: 30px;
}
#blog .detail .templatebox figure.right {
float: right;
max-width: 350px;
margin-left: 30px;
}
}
@media (max-width: 899px) {
#blog .detail .templatebox figure {
text-align: center;
}
}
#blog .detail .tablebox table {
width: 100%;
font-size: 15px;
border-top: 1px solid #dce0e3;
}
@media (max-width: 899px) {
#blog .detail .tablebox table {
font-size: 24px;
}
}
#blog .detail .tablebox table th, #blog .detail .tablebox table td {
padding: 1.5em 0px;
font-weight: normal;
border-bottom: 1px solid #dce0e3;
}
@media (max-width: 899px) {
#blog .detail .tablebox table th, #blog .detail .tablebox table td {
display: block;
}
}
#blog .detail .tablebox table th {
width: 12em;
vertical-align: top;
}
@media (max-width: 899px) {
#blog .detail .tablebox table th {
width: auto;
padding-bottom: 0.5em;
border: none !important;
}
}
@media (max-width: 899px) {
#blog .detail .tablebox table td {
padding-top: 0px;
}
} #tinymce {
padding: 20px;
}
.entry, #tinymce {
word-wrap: break-word;
line-height: 2;
font-size: 14px;
}
@media (max-width: 899px) {
.entry, #tinymce {
font-size: 24px;
}
}
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6, #tinymce h1, #tinymce h2, #tinymce h3, #tinymce h4, #tinymce h5, #tinymce h6 {
position: static;
clear: both;
float: none;
height: auto;
min-height: 1px;
margin: 0 0 0.25em;
padding: 0px;
background: none;
border: none;
color: #103771;
text-shadow: 1px 1px 0 #fff;
}
.entry h1, #tinymce h1 {
font-size: 145.5%;
}
.entry h2, #tinymce h2 {
font-size: 136.4%;
}
.entry h3, #tinymce h3 {
font-size: 127.3%;
}
.entry h4, #tinymce h4 {
font-size: 127.3%;
}
.entry h5, #tinymce h5 {
font-size: 118.2%;
}
.entry h6, #tinymce h6 {
font-size: 100%;
}
.entry strong, .entry b, #tinymce strong, #tinymce b {
font-weight: bold;
}
.entry p, #tinymce p {
margin: 0em 0em 2em 0em;
}
.entry em, #tinymce em {
font-style: italic;
}
.entry ol, #tinymce ol {
margin: 1em 2em 1em;
}
.entry ul, #tinymce ul {
margin: 1em 0 1em;
}
.entry ul li, #tinymce ul li {
margin: 0em 0em 0.5em 1em;
}
.entry ol li, #tinymce ol li {
margin: 0em 0em 0.5em 0em;
}
.entry ul, #tinymce ul {
list-style: disc;
}
.entry ol, #tinymce ol {
list-style: decimal;
}
.entry dl, #tinymce dl {
margin: 1em 0;
}
.entry dd, #tinymce dd {
margin-left: 2em;
}
.entry table.wp-oembed,
.entry table.wp-oembed td, #tinymce table.wp-oembed,
#tinymce table.wp-oembed td {
border: none;
}
.entry table caption, #tinymce table caption {
font-size: 14px;
font-weight: bold;
text-align: left;
}
.entry table, #tinymce table {
clear: both;
width: 99%;
border-collapse: collapse;
border-spacing: 0;
margin: 1em 0 2em;
}
.entry table th, #tinymce table th {
padding: 0.5em;
background: #f5f5f5;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
.entry table td, #tinymce table td {
padding: .5em;
}
.entry img, #tinymce img {
max-width: 100%;
height: auto;
margin-bottom: 2em;
}
.entry img.aligncenter, #tinymce img.aligncenter {
clear: both;
display: block;
margin: auto;
}
.entry a, #tinymce a {
text-decoration: underline;
}
.entry iframe, #tinymce iframe {
max-width: 100%;
}
@media (min-width: 900px) {
.entry img.alignleft, #tinymce img.alignleft {
float: left;
margin-right: 2em;
}
.entry img.alignright, #tinymce img.alignright {
float: right;
margin-left: 2em;
}
} #sitemaps .detail {
padding: 30px 0px 60px;
}
#sitemaps .detail .list > li > a {
display: block;
padding: 1em 1em;
font-size: 16px;
}
@media (max-width: 899px) {
#sitemaps .detail .list > li > a {
font-size: 28px;
}
}
#sitemaps .detail .list ul.children li {
display: inline-block;
}
@media (max-width: 899px) {
#sitemaps .detail .list ul.children li {
display: block;
margin: 1.5em;
}
}
#sitemaps .detail .list ul.children li a {
display: block;
padding: 1.5em 1em;
margin-right: 1em;
}
@media (max-width: 899px) {
#sitemaps .detail .list ul.children li a {
padding: 0px;
margin: 0px;
}
} #privacy #pageTitle {
height: 464px;
background: url(/site/img/privacy/key_bg.jpg) center top no-repeat;
background-size: cover;
}
@media (max-width: 420px) {
#privacy #pageTitle {
height: 200px;
}
}
#privacy #pageTitle .obj {
height: 464px;
}
@media (max-width: 420px) {
#privacy #pageTitle .obj {
height: 200px;
}
}
#privacy .sec_privacy1 {
margin-bottom: 80px;
}
#privacy .blk_pri {
margin-bottom: 48px;
}
#privacy .blk_pri .tit {
font-family: dnp-shuei-mincho-pr6n, sans-serif;
font-weight: normal;
font-size: 20px;
line-height: 1.4;
color: #2D2D2D;
padding: 6px 0 12px;
position: relative;
margin-bottom: 16px;
}
@media (max-width: 899px) {
#privacy .blk_pri .tit {
font-size: 26px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#privacy .blk_pri .tit {
font-size: 16px;
}
}
#privacy .blk_pri .tit:after {
content: "";
width: 100%;
height: 8px;
display: block;
position: absolute;
left: 0;
bottom: 0px;
background-color: #ECECEC;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #F9F9F9), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #F9F9F9), color-stop(0.75, #F9F9F9), color-stop(0.75, transparent), to(transparent));
-webkit-background-size: 8px 8px;
}
#privacy .blk_pri ol.ini1 {
margin: 0 40px;
font-size: 16px;
}
@media (max-width: 899px) {
#privacy .blk_pri ol.ini1 {
font-size: 26px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#privacy .blk_pri ol.ini1 {
font-size: 16px;
}
}
#privacy .blk_pri ol.ini1 > li {
list-style-type: decimal;
margin-bottom: 12px;
}
#privacy .blk_pri ol.ini1 > li > dl > dt {
padding: 8px 0;
border-bottom: 2px solid #B2B3B3;
}
#privacy .blk_pri ol.ini1 > li > dl > dd {
padding: 8px 0;
}
#privacy .blk_pri ol.ol_pri {
font-size: 14px;
margin-top: 8px;
margin-bottom: 32px;
}
@media (max-width: 899px) {
#privacy .blk_pri ol.ol_pri {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#privacy .blk_pri ol.ol_pri {
font-size: 14px;
}
}
#privacy .blk_pri ol.ol_pri > li {
line-height: 1.8;
list-style-type: decimal;
list-style-position: inside;
padding: 2px 0 4px;
}
#privacy .blk_pri .txt_gr {
margin-bottom: 24px;
}
#privacy .blk_pri .txt_gr p {
font-size: 14px;
line-height: 2;
}
@media (max-width: 899px) {
#privacy .blk_pri .txt_gr p {
font-size: 26px;
letter-spacing: 1px;
line-height: 1.6;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#privacy .blk_pri .txt_gr p {
font-size: 14px;
}
} #contact .blank, #confirm .blank, #error .blank, #complete .blank, #reservation .blank, #rconfirm .blank, #rerror .blank, #rcomplete .blank {
padding-top: 85px;
background-color: #7f7f7f;
}
#contact #pageTitle, #confirm #pageTitle, #error #pageTitle, #complete #pageTitle, #reservation #pageTitle, #rconfirm #pageTitle, #rerror #pageTitle, #rcomplete #pageTitle {
height: 460px;
background: url(/site/img/contact/key_bg.jpg) center top no-repeat;
background-size: cover;
}
@media (max-width: 420px) {
#contact #pageTitle, #confirm #pageTitle, #error #pageTitle, #complete #pageTitle, #reservation #pageTitle, #rconfirm #pageTitle, #rerror #pageTitle, #rcomplete #pageTitle {
height: 200px;
}
}
#contact #pageTitle .obj, #confirm #pageTitle .obj, #error #pageTitle .obj, #complete #pageTitle .obj, #reservation #pageTitle .obj, #rconfirm #pageTitle .obj, #rerror #pageTitle .obj, #rcomplete #pageTitle .obj {
height: 460px;
}
@media (max-width: 420px) {
#contact #pageTitle .obj, #confirm #pageTitle .obj, #error #pageTitle .obj, #complete #pageTitle .obj, #reservation #pageTitle .obj, #rconfirm #pageTitle .obj, #rerror #pageTitle .obj, #rcomplete #pageTitle .obj {
height: 200px;
}
}
#contact #sec_intro .intro, #confirm #sec_intro .intro, #error #sec_intro .intro, #complete #sec_intro .intro, #reservation #sec_intro .intro, #rconfirm #sec_intro .intro, #rerror #sec_intro .intro, #rcomplete #sec_intro .intro {
text-align: center;
font-size: 15px;
line-height: 2;
}
@media (max-width: 899px) {
#contact #sec_intro .intro, #confirm #sec_intro .intro, #error #sec_intro .intro, #complete #sec_intro .intro, #reservation #sec_intro .intro, #rconfirm #sec_intro .intro, #rerror #sec_intro .intro, #rcomplete #sec_intro .intro {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#contact #sec_intro .intro, #confirm #sec_intro .intro, #error #sec_intro .intro, #complete #sec_intro .intro, #reservation #sec_intro .intro, #rconfirm #sec_intro .intro, #rerror #sec_intro .intro, #rcomplete #sec_intro .intro {
font-size: 14px;
}
}
#contact_box {
width: 1000px;
margin: 40px auto 0;
border: 2px solid #D7DFE2;
box-sizing: border-box;
padding: 40px;
}
@media (max-width: 899px) {
#contact_box {
width: auto;
margin: 40px 15px 0;
padding: 15px;
}
}
#contact_box input[type='text'].item,
#contact_box input[type='email'].item {
height: 46px;
line-height: 54px;
border: 2px solid #cccccc;
border-radius: 10px;
margin-top: 15px;
padding: 0 15px;
width: 100%;
box-sizing: border-box;
background: #FFFEF0;
}
#contact_box textarea.item {
background: #FFFEF0;
border: 2px solid #cccccc;
border-radius: 10px;
margin-top: 15px;
padding: 0 15px;
width: 100%;
box-sizing: border-box;
line-height: 50px;
}
#contact_box .item_short {
width: initial !important;
}
#contact_box label {
font-size: 16px;
font-weight: bold;
}
@media (max-width: 899px) {
#contact_box label {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#contact_box label {
font-size: 14px;
}
}
#contact_box label span {
font-weight: normal;
}
#contact_box label span.emphasis {
background: #00C4C4;
margin-left: 10px;
padding: 4px 12px;
color: white;
font-weight: bold;
font-size: 14px;
line-height: 28px;
}
#contact_box .mwform-radio-field {
margin-top: 15px;
}
#contact_box .mwform-radio-field input {
display: none;
}
#contact_box .mwform-radio-field input:checked ~ .mwform-radio-field-text:before {
background-color: #ccc;
}
#contact_box .mwform-radio-field .mwform-radio-field-text {
position: relative;
padding-left: 20px;
}
#contact_box .mwform-radio-field .mwform-radio-field-text:before {
content: ' ';
width: 12px;
height: 12px;
border: 2px solid #ccc;
position: absolute;
top: calc(50% - 5px);
left: 0;
border-radius: 50%;
}
#contact_box .form-group {
margin-bottom: 30px;
}
#contact_box .form-group.tel input[type='text'], #contact_box .form-group.zip input[type='text'] {
max-width: 160px;
}
@media (max-width: 420px) {
#contact_box .form-group.tel input[type='text'], #contact_box .form-group.zip input[type='text'] {
width: 6em;
}
}
#contact_box .contact_bottom {
text-align: center;
}
#contact_box .contact_bottom a {
color: #5d9fdb;
text-decoration: none;
}
#contact_box .contact_bottom input[type='submit'] {
font-size: 26px;
font-weight: bold;
color: white;
background-color: #444444;
border: 0;
line-height: 58px;
width: 380px;
min-height: 3.0em;
margin-bottom: 30px;
border-radius: 40px;
transition: .3s;
}
#contact_box .contact_bottom input[type='submit']:hover {
background-color: #ee6875;
}
@media (max-width: 420px) {
#contact_box .contact_bottom input[type='submit'] {
width: 100%;
font-size: 16px;
}
}
#contact_box .contact_bottom li {
margin: 50px 0 30px;
}
#confirm #contact_box .form-group, #rconfirm #contact_box .form-group {
line-height: 2.2em;
font-size: 1.3em;
}
#contact_box div#mw-wp-form-captcha,
#contact_box div#mw-wp-form-captcha,
#contact_box div#mw-wp-form-captcha,
#contact_box div#mw-wp-form-captcha {
text-align: center;
line-height: 2.2em;
padding: 0 3% 2.0em 3%;
}
#contact_box div#mw-wp-form-captcha img,
#contact_box div#mw-wp-form-captcha img,
#contact_box div#mw-wp-form-captcha img,
#contact_box div#mw-wp-form-captcha img {
margin-bottom: 0.8em;
}
#contact_box div#mw-wp-form-captcha input[type='text'],
#contact_box div#mw-wp-form-captcha input[type='text'],
#contact_box div#mw-wp-form-captcha input[type='text'],
#contact_box div#mw-wp-form-captcha input[type='text'] {
margin-top: 0.8em;
}
#contact_box .mwform-radio-field,
#contact_box .mwform-radio-field,
#contact_box .mwform-radio-field,
#contact_box .mwform-radio-field {
margin-top: 15px;
}
.mw_wp_form .vertical-item {
display: block;
} header {
display: block !important;
opacity: 1 !important;
}
.m-button-01 {
display: block;
padding: 17px 50px;
border: 1px solid #103771;
border-radius: 6px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
color: #103771;
font-size: 19px;
line-height: 1;
text-align: center;
}
.m-button-01:hover {
color: #103771;
}
.m-button-01 span {
display: inline-block;
padding-right: 32px;
background: url(/site/img/common/icn_button_01.png) no-repeat top 6px right;
}
#p-sake-brewing * {
box-sizing: border-box;
}
#p-sake-brewing .none {
display: none;
opacity: 0;
}
#p-sake-brewing .flL {
float: left;
}
#p-sake-brewing .flR {
float: right;
}
#p-sake-brewing .mv-box {
height: 70vh;
background: url(/site/img/sake-brewing/img_mv.jpg) no-repeat center center/cover;
}
#p-sake-brewing .link-box {
padding: 55px 0;
}
#p-sake-brewing .link-box dl {
text-align: center;
}
#p-sake-brewing .link-box dl dd {
display: inline-block;
margin: 0 18px;
}
#p-sake-brewing .column-box {
background: #000;
}
#p-sake-brewing .column-box .box .img {
width: 50%;
}
#p-sake-brewing .column-box .box .img img {
width: 100%;
}
#p-sake-brewing .column-box .box .text {
position: relative;
width: 50%;
padding: 60px 60px 30px 60px;
background: #103771;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
color: #fff;
overflow: hidden;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#p-sake-brewing .column-box .box .text:after {
display: block;
content: "";
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -1px;
z-index: 3;
border: 1px solid #fff;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#p-sake-brewing .column-box .box .text .bg {
width: 100%;
height: 100%;
background: #000;
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 2;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#p-sake-brewing .column-box .box .text:hover:after {
left: 19px;
right: 19px;
top: 19px;
bottom: 19px;
}
#p-sake-brewing .column-box .box .text:hover .bg {
opacity: 0.3;
}
#p-sake-brewing .column-box .box .text h2,
#p-sake-brewing .column-box .box .text p,
#p-sake-brewing .column-box .box .text strong {
margin-bottom: 25px;
position: relative;
top: 0;
left: 0;
z-index: 3;
}
#p-sake-brewing .column-box .box .text h2 {
margin-bottom: 0.8em;
font-size: 32px;
}
#p-sake-brewing .column-box .box .text h2 a {
color: #fff;
}
#p-sake-brewing .column-box .box .text p {
font-size: 16px;
line-height: 2.2;
}
#p-sake-brewing .column-box .box:nth-child(1) .text {
padding-left: 18%;
}
#p-sake-brewing .column-box .box:nth-child(1) .img {
background: url(/site/img/sake-brewing/img_column2_01.png) no-repeat center center/cover;
}
#p-sake-brewing .column-box .box:nth-child(2) .img {
width: 27.5%;
}
#p-sake-brewing .column-box .box:nth-child(2) .img:nth-child(1) {
width: 45%;
}
#p-sake-brewing .column-box .box:nth-child(2) .img:nth-child(2) {
background: url(/site/img/sake-brewing/img_column2_03.png) no-repeat center center/cover;
}
#p-sake-brewing .column-box .box:nth-child(2) .img:nth-child(3) {
background: url(/site/img/sake-brewing/img_column2_04.png) no-repeat center center/cover;
}
#p-sake-brewing .column-box .box:nth-child(3) .text {
padding-left: 45px;
padding-right: 20px;
background: url(/site/img/sake-brewing/bg_column2.png) no-repeat center center/cover;
}
#p-sake-brewing .column-box .box:nth-child(3) .text h2,
#p-sake-brewing .column-box .box:nth-child(3) .text p {
color: #3a2121;
}
#p-sake-brewing .column-box .box:nth-child(3) .text strong {
display: block;
padding: 15px;
margin-bottom: 20px;
background: #927676;
color: #fff;
font-size: 21px;
line-height: 1.75;
}
#p-sake-brewing .column-box .box:nth-child(3) .img {
background: url(/site/img/sake-brewing/img_column2_05.png) no-repeat center center/cover;
}
#p-sake-brewing .kodawari-box {
margin-top: 90px;
}
#p-sake-brewing .kodawari-box .box {
position: relative;
}
#p-sake-brewing .kodawari-box .box .img {
position: relative;
z-index: 2;
}
#p-sake-brewing .kodawari-box .box .img img {
width: 100%;
}
#p-sake-brewing .kodawari-box .box .text {
position: relative;
z-index: 1;
padding-top: 50px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
color: #111;
text-align: center;
}
#p-sake-brewing .kodawari-box .box .text:before {
content: "";
display: block;
height: 100%;
background: #e3e3e3;
position: absolute;
top: 0;
z-index: 1;
}
#p-sake-brewing .kodawari-box .box .text:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
margin: auto;
}
#p-sake-brewing .kodawari-box .box .text h2,
#p-sake-brewing .kodawari-box .box .text h3 {
margin-bottom: 25px;
position: relative;
top: 0;
left: 0;
z-index: 3;
}
#p-sake-brewing .kodawari-box .box .text h2 {
color: #103771;
font-size: 73px;
line-height: 1;
}
#p-sake-brewing .kodawari-box .box .text h3 {
font-size: 33px;
line-height: 1.5;
}
#p-sake-brewing .kodawari-box .box .text .bg-box {
width: 100%;
position: relative;
top: 0;
z-index: 3;
}
#p-sake-brewing .kodawari-box .box .text .bg-box .bg {
padding: 40px 40px 10px 40px;
background: rgba(255, 255, 255, 0.5);
}
#p-sake-brewing .kodawari-box .box .text .bg-box .bg p {
margin-bottom: 30px;
font-size: 16px;
line-height: 2.2;
}
#p-sake-brewing .kodawari-box .box:nth-child(1) {
padding-left: 18%;
}
#p-sake-brewing .kodawari-box .box:nth-child(1) .text {
width: calc(100% - 655px);
}
#p-sake-brewing .kodawari-box .box:nth-child(1) .text:before {
width: calc(100vw - 670px);
left: -18vw;
}
#p-sake-brewing .kodawari-box .box:nth-child(1) .text:after {
background: url(/site/img/sake-brewing/bg_kodawari_01.png) no-repeat center center;
}
#p-sake-brewing .kodawari-box .box:nth-child(1) .text .bg-box {
right: 0;
}
#p-sake-brewing .kodawari-box .box:nth-child(1) .img {
width: 655px;
height: 630px;
background: url(/site/img/sake-brewing/img_kodawari_01.jpg) no-repeat center center/cover;
top: 50px;
}
#p-sake-brewing .kodawari-box .box:nth-child(2), #p-sake-brewing .kodawari-box .box:nth-child(3) {
padding-right: 18%;
}
#p-sake-brewing .kodawari-box .box:nth-child(2) .text .bg-box, #p-sake-brewing .kodawari-box .box:nth-child(3) .text .bg-box {
left: 0;
}
#p-sake-brewing .kodawari-box .box:nth-child(2) {
margin-top: 50px;
}
#p-sake-brewing .kodawari-box .box:nth-child(2) .text {
width: calc(100% - 665px);
top: 55px;
}
#p-sake-brewing .kodawari-box .box:nth-child(2) .text:before {
width: calc(100vw - 680px);
right: -18vw;
}
#p-sake-brewing .kodawari-box .box:nth-child(2) .text:after {
background: url(/site/img/sake-brewing/bg_kodawari_02.png) no-repeat center center;
}
#p-sake-brewing .kodawari-box .box:nth-child(2) .img {
width: 665px;
height: 630px;
background: url(/site/img/sake-brewing/img_kodawari_02.jpg) no-repeat center center/cover;
}
#p-sake-brewing .kodawari-box .box:nth-child(3) {
margin-top: 115px;
}
#p-sake-brewing .kodawari-box .box:nth-child(3) .text {
width: calc(100% - 810px);
}
#p-sake-brewing .kodawari-box .box:nth-child(3) .text:before {
width: calc(100vw - 825px);
right: -18vw;
}
#p-sake-brewing .kodawari-box .box:nth-child(3) .text:after {
background: url(/site/img/sake-brewing/bg_kodawari_03.png) no-repeat top 95px center;
}
#p-sake-brewing .kodawari-box .box:nth-child(3) .img {
width: 810px;
height: 675px;
background: url(/site/img/sake-brewing/img_kodawari_03.jpg) no-repeat center center/cover;
top: 55px;
}
#p-sake-brewing .greet-box {
margin-top: 110px;
height: 600px;
background: url(/site/img/common/bg02.png) left bottom;
animation: bg-slider 60s linear infinite;
}
#p-sake-brewing .greet-box .container {
max-width: 1040px;
padding: 0 20px;
margin: 0 auto;
}
#p-sake-brewing .greet-box .img,
#p-sake-brewing .greet-box .text {
width: 50%;
position: relative;
left: 0;
}
#p-sake-brewing .greet-box .img {
text-align: right;
position: relative;
top: -50px;
}
#p-sake-brewing .greet-box .text {
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
color: #111;
line-height: 1.75;
top: -35px;
}
#p-sake-brewing .greet-box .text h2 {
margin-bottom: 20px;
font-size: 33px;
letter-spacing: 0.1em;
}
#p-sake-brewing .greet-box .text h3 {
font-size: 20px;
}
#p-sake-brewing .greet-box .text strong {
display: block;
margin-bottom: 30px;
font-size: 18px;
}
#p-sake-brewing .greet-box .text p {
margin-bottom: 30px;
font-size: 16px;
}
@keyframes bg-slider {
from {
background-position: 0 bottom;
}
to {
background-position: -1867px bottom;
}
} #news #pageTitle {
height: 464px;
background: url(/site/img/news/key_bg.jpg) center top no-repeat;
background-size: cover;
}
@media (max-width: 899px) {
#news #pageTitle {
height: 320px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #pageTitle {
height: 200px;
}
}
#news #pageTitle .obj {
height: 464px;
}
@media (max-width: 899px) {
#news #pageTitle .obj {
width: auto;
height: 320px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #pageTitle .obj {
height: 200px;
}
}
#news #newlist .heading {
margin: 24px 0;
letter-spacing: 0.4em;
}
@media (max-width: 899px) {
#news #newlist .heading {
text-align: center;
margin: 40px auto;
}
}
#news #newlist .heading .tit, #news #newlist .heading .tit_sitename {
letter-spacing: normal;
display: inline-block;
vertical-align: middle;
}
@media (max-width: 899px) {
#news #newlist .heading .tit, #news #newlist .heading .tit_sitename {
display: block;
}
}
#news #newlist .heading .tit_sitename .mark, #news #newlist .heading .tit_sitename .type {
display: inline-block;
vertical-align: middle;
}
@media (max-width: 899px) {
#news #newlist .heading .tit_sitename .mark, #news #newlist .heading .tit_sitename .type {
display: block;
}
}
@media (max-width: 899px) {
#news #newlist .heading .tit_sitename .mark img {
height: 70px;
}
}
@media (max-width: 899px) {
#news #newlist .heading .tit_sitename .type img {
height: 22px;
}
}
#news #newlist .heading .tit {
margin-left: 12px;
padding-top: 12px;
line-height: 1;
}
#news #newlist .li_sort {
letter-spacing: -.4em;
margin: 32px -16px 16px 0;
text-align: center;
display: none;
}
@media (max-width: 899px) {
#news #newlist .li_sort {
margin: 24px -8px 16px 0;
text-align: left;
}
}
#news #newlist .li_sort > li {
margin-right: 16px;
letter-spacing: normal;
display: inline-block;
vertical-align: top;
}
@media (max-width: 899px) {
#news #newlist .li_sort > li {
margin-right: 8px;
margin-bottom: 8px;
}
}
#news #newlist .li_sort > li a {
width: 158px;
text-align: center;
font-size: 16px;
display: block;
color: #fff;
background: #103771;
line-height: 1;
border-radius: 24px;
padding: 12px 16px;
}
#news #newlist .li_sort > li a.clr_new {
background: #103771;
}
#news #newlist .li_sort > li a.clr_rec {
background: #2F7EBA;
}
#news #newlist .li_sort > li a.clr_ir {
background: #FA9126;
}
#news #newlist .li_sort > li a.clr_srvc {
background: #34BE90;
}
#news #newlist .ul_news {
margin: 24px auto 56px;
border: 3px solid #D7DFE2;
padding: 40px;
box-sizing: border-box;
}
@media (max-width: 420px) {
#news #newlist .ul_news {
padding: 20px;
}
}
#news #newlist .ul_news > li a {
display: block;
position: relative;
}
#news .catnav li:last-child{
display: none;
}
#news #newlist .ul_news > li a:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 17px;
height: 17px;
background: url(/site/img/index/news_icn1.svg) center center no-repeat;
background-size: contain;
margin-right: 8px;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%); transform: translateY(-50%);
}
@media (max-width: 899px) {
#news #newlist .ul_news > li a:after {
width: 26px;
height: 26px;
}
}
#news #newlist .ul_news > li .gr {
width: 100%;
display: table;
position: relative;
padding: 8px 3em 8px 0;
}
@media (max-width: 899px) {
#news #newlist .ul_news > li .gr {
padding: 24px 40px 24px 0;
}
}
#news #newlist .ul_news > li .gr p {
display: table-cell;
vertical-align: top;
font-size: 14px;
}
@media (max-width: 899px) {
#news #newlist .ul_news > li .gr p {
display: block;
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #newlist .ul_news > li .gr p {
font-size: 14px;
}
}
#news #newlist .ul_news > li .tag_cat {
width: 10em;
}
#news #newlist .ul_news > li .tag_cat span {
text-align: left;
display: block;
padding: 0;
}
@media (max-width: 899px) {
#news #newlist .ul_news > li .tag_cat span {
position: absolute;
left: 0;
top: 24px;
font-size: 20px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #newlist .ul_news > li .tag_cat span {
font-size: 14px;
}
}
#news #newlist .ul_news > li .tag_cat span.clr_new {
color: #61808F;
}
#news #newlist .ul_news > li .tag_cat span.clr_event {
color: #D18241;
}
#news #newlist .ul_news > li .tag_cat span.clr_blog {
color: #D17F7F;
}
#news #newlist .ul_news > li .arti {
font-size: 14px;
padding-left: 16px;
}
@media (max-width: 899px) {
#news #newlist .ul_news > li .arti {
padding-left: 140px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #newlist .ul_news > li .arti {
padding-left: 7em;
}
}
#news #newlist .ul_news > li .data {
width: 8em;
}
@media (max-width: 899px) {
#news #newlist .ul_news > li .data {
width: auto;
padding-left: 140px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #newlist .ul_news > li .data {
padding-left: 7em;
}
}
#news #newdetail .post {
border: 3px solid #D7DFE2;
padding: 48px;
box-sizing: border-box;
}
@media (max-width: 420px) {
#news #newdetail .post {
padding: 20px;
}
}
#news #newdetail .post > .heading > .gr {
font-size: 15px;
line-height: 1;
padding: 8px 0 32px;
position: relative;
}
@media (max-width: 899px) {
#news #newdetail .post > .heading > .gr {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #newdetail .post > .heading > .gr {
font-size: 14px;
}
}
#news #newdetail .post > .heading > .gr .cat {
display: inline-block;
display: none;
}
#news #newdetail .post > .heading > .gr .cat span {
width: 158px;
text-align: center;
font-size: 14px;
display: block;
color: #fff;
background: #103771;
line-height: 1;
border-radius: 16px;
padding: 8px 16px;
}
@media (max-width: 899px) {
#news #newdetail .post > .heading > .gr .cat span {
font-size: 20px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #newdetail .post > .heading > .gr .cat span {
font-size: 16px;
}
}
#news #newdetail .post > .heading > .gr .cat span.clr_new {
background: #103771;
}
#news #newdetail .post > .heading > .gr .cat span.clr_rec {
background: #2F7EBA;
}
#news #newdetail .post > .heading > .gr .cat span.clr_ir {
background: #FA9126;
}
#news #newdetail .post > .heading > .gr .cat span.clr_srvc {
background: #34BE90;
}
#news #newdetail .post > .heading > .gr .postdate {
color: #858585;
text-align: right;
padding: 0;
}
@media (max-width: 899px) {
#news #newdetail .post > .heading > .gr .postdate {
position: static;
display: inline-block;
margin-left: 8px;
}
}
#news #newdetail .post > .heading .title {
font-weight: normal;
font-size: 33px;
letter-spacing: .15em;
line-height: 1.4;
margin: 16px auto;
}
@media (max-width: 899px) {
#news #newdetail .post > .heading .title {
font-size: 34px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #newdetail .post > .heading .title {
font-size: 22px;
}
}
#news #newdetail .post > .heading .title:after {
content: "";
display: block;
vertical-align: middle;
margin-top: 24px;
width: 100%;
height: 8px;
background: url(/site/img/common/h_bg_hr1.svg) center center repeat-x;
}
#news #newdetail .post .entry {
font-size: 16px;
line-height: 2;
}
@media (max-width: 899px) {
#news #newdetail .post .entry {
font-size: 26px;
line-height: 1.6;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #newdetail .post .entry {
font-size: 14px;
}
}
#news #newdetail .post .entry .addtoany_content {
clear: both;
margin: 100px 0 16px;
}
#news #newdetail .post .entry p {
font-family: "Noto Sans JP", source-han-sans-japanese, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
margin-bottom: 2.4em;
}
#news #newdetail .post .entry p:last-child {
margin-bottom: 0;
}
#news #newdetail .post .entry img {
display: block;
margin: 40px auto 0;
}
#news #newdetail .nav_page {
width: 100%;
margin: 40px auto;
letter-spacing: -.4em;
display: table;
}
@media (max-width: 899px) {
#news #newdetail .nav_page {
margin: 64px auto;
}
}
#news #newdetail .nav_page .np {
letter-spacing: normal;
display: table-cell;
vertical-align: top;
font-size: 14px;
}
@media (max-width: 899px) {
#news #newdetail .nav_page .np {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news #newdetail .nav_page .np {
font-size: 14px;
}
}
#news #newdetail .nav_page .np a {
color: #103771;
}
#news #newdetail .nav_page .prev,
#news #newdetail .nav_page .next {
width: 38%;
position: relative;
box-sizing: border-box;
}
#news #newdetail .nav_page .back {
width: 24%;
text-align: center;
}
#news #newdetail .nav_page .prev {
padding-left: 16px;
}
#news #newdetail .nav_page .prev:before {
content: "←";
display: inline-block;
margin-right: 8px;
}
#news #newdetail .nav_page .next {
text-align: right;
padding-right: 16px;
}
#news #newdetail .nav_page .next:after {
content: "→";
display: inline-block;
margin-left: 8px;
}
#news .catnav {
position: relative;
z-index: 10;
text-align: center;
font-size: 0px;
line-height: 0px;
}
#news .catnav li {
display: inline-block;
margin: 12px 20px;
}
@media (max-width: 899px) {
#news .catnav li {
width: 40%;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news .catnav li {
margin: 10px 4%;
}
}
#news .catnav li a {
display: inline-block;
padding: 0.85em 2em;
border-radius: 1.5em;
background: #fff;
font-size: 15px;
line-height: 1;
border: 1px solid #d1d3d4;
box-sizing: border-box;
transition: all 0.5s;
}
@media (max-width: 899px) {
#news .catnav li a {
width: 100%;
font-size: 19px;
padding: 0.9em 2em;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#news .catnav li a {
font-size: 14px;
}
}
#news .catnav li a:hover, #news .catnav li a.current {
background: #424242;
color: #fff;
opacity: 1;
} .entry {
word-wrap: break-word;
line-height: 2;
font-size: 16px;
}
@media (max-width: 899px) {
.entry {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
.entry {
font-size: 14px;
}
}
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
position: static;
clear: both;
float: none;
height: auto;
min-height: 1px;
margin: 0 0 0.25em;
padding: 0px;
background: none;
border: none;
color: #103771;
text-shadow: 1px 1px 0 #fff;
}
.entry h1 {
font-size: 145.5%;
}
.entry h2 {
font-size: 136.4%;
}
.entry h3 {
font-size: 127.3%;
}
.entry h4 {
font-size: 127.3%;
}
.entry h5 {
font-size: 118.2%;
}
.entry h6 {
font-size: 100%;
}
.entry strong, .entry b {
font-weight: bold;
}
.entry p {
margin: 0em 0em 2em 0em;
}
.entry em {
font-style: italic;
}
.entry ol {
margin: 1em 2em 1em;
}
.entry ul {
margin: 1em 0 1em;
}
.entry ul li {
margin: 0em 0em 0.5em 1em;
}
.entry ol li {
margin: 0em 0em 0.5em 0em;
}
.entry ul {
list-style: disc;
}
.entry ol {
list-style: decimal;
}
.entry dl {
margin: 1em 0;
}
.entry dd {
margin-left: 2em;
}
.entry table.wp-oembed,
.entry table.wp-oembed td {
border: none;
}
.entry table caption {
font-size: 14px;
font-weight: bold;
text-align: left;
}
.entry table {
clear: both;
width: 99%;
border-collapse: collapse;
border-spacing: 0;
margin: 1em 0 2em;
}
.entry table th {
padding: 0.5em;
background: #f5f5f5;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
.entry table td {
padding: .5em;
}
.entry img {
max-width: 100%;
height: auto;
margin-bottom: 2em;
}
.entry img.aligncenter {
clear: both;
display: block;
margin: auto;
}
.entry a {
text-decoration: underline;
transition: .3s;
color: #103771;
}
.entry a:hover {
opacity: 1;
color: #006885;
}
.entry iframe {
max-width: 100%;
}
@media (min-width: 900px) {
.entry img.alignleft {
float: left;
margin-right: 2em;
}
.entry img.alignright {
float: right;
margin-left: 2em;
}
} .sec {
font-family: dnp-shuei-mincho-pr6n, sans-serif;
font-weight: 400;
font-style: normal;
padding: 62px 0;
}
@media (max-width: 767px) {
.sec {
padding: 30px 0px;
}
}
.sec .hd_std1 {
text-align: center;
position: relative;
padding: 24px 0;
}
.sec .hd_std1:after {
content: "";
display: inline-block;
vertical-align: middle;
margin-top: 24px;
width: 170px;
height: 8px;
background: url(/site/img/common/h_bg_hr1.svg) center center repeat-x;
}
@media (max-width: 420px) {
.sec .hd_std1:after {
margin-top: 0px;
height: 4px;
width: 180px;
background-size: auto 100%;
}
}
.sec .hd_std1 .tit_sec {
font-family: ten-mincho, serif;
font-weight: 400;
font-style: normal;
font-size: 33px;
letter-spacing: .15px;
line-height: 1.5;
margin-bottom: 0;
}
@media (max-width: 420px) {
.sec .hd_std1 .tit_sec {
font-size: 24px;
}
}
.sec .hd_std1 .eng {
font-weight: 400;
font-size: 21px;
letter-spacing: .05;
line-height: 1;
color: #838383;
font-family: filson-soft, sans-serif;
padding: 16px 0;
}
@media (max-width: 420px) {
.sec .hd_std1 .eng {
font-size: 12px;
}
}
.sec ol.ol_std1 > li {
position: relative;
padding-left: 28px;
}
@media (max-width: 899px) {
.sec ol.ol_std1 > li {
padding-left: 40px;
}
}
.sec ol.ol_std1 > li:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 16px;
margin-top: -4px;
position: absolute;
left: 0;
top: 10px;
}
.sec ol.ol_std1 > li:nth-child(1):before {
width: 16px;
height: 15px;
background: url(/site/img/common/ol_no01.svg) center center no-repeat;
background-size: contain;
}
@media (max-width: 899px) {
.sec ol.ol_std1 > li:nth-child(1):before {
width: 24px;
height: 22px;
}
}
.sec ol.ol_std1 > li:nth-child(2):before {
width: 16px;
height: 15px;
background: url(/site/img/common/ol_no02.svg) center center no-repeat;
background-size: contain;
}
@media (max-width: 899px) {
.sec ol.ol_std1 > li:nth-child(2):before {
width: 24px;
height: 22px;
}
}
.sec ol.ol_std1 > li:nth-child(3):before {
width: 16px;
height: 15px;
background: url(/site/img/common/ol_no03.svg) center center no-repeat;
background-size: contain;
}
@media (max-width: 899px) {
.sec ol.ol_std1 > li:nth-child(3):before {
width: 24px;
height: 22px;
}
}
.sec ol.ol_std1 > li:nth-child(4):before {
width: 16px;
height: 15px;
background: url(/site/img/common/ol_no04.svg) center center no-repeat;
background-size: contain;
}
@media (max-width: 899px) {
.sec ol.ol_std1 > li:nth-child(4):before {
width: 24px;
height: 22px;
}
}
.sec ol.ol_std1 > li:nth-child(5):before {
width: 16px;
height: 15px;
background: url(/site/img/common/ol_no05.svg) center center no-repeat;
background-size: contain;
}
@media (max-width: 899px) {
.sec ol.ol_std1 > li:nth-child(5):before {
width: 24px;
height: 22px;
}
}
.sec .under {
height: 534px;
border: 1px solid #C9C9C9;
font-size: 17px;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.sec .under P {
text-align: center;
}
.area_shop {
text-align: center;
margin: 72px auto;
padding: 0 40px;
}
@media (max-width: 420px) {
.area_shop {
margin: 36px auto;
padding: 0px 20px;
}
}
a.btn_onlineshop {
width: 510px;
height: 150px;
display: inline-block;
background: url(/site/img/common/btn_bg1.jpg) center center no-repeat;
color: #fff;
position: relative;
}
@media (max-width: 899px) {
a.btn_onlineshop {
width: 100%;
}
}
@media (max-width: 420px) {
a.btn_onlineshop {
width: 100%;
max-width: 510px;
height: 100px;
}
}
a.btn_onlineshop:before {
content: "";
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
display: block;
border: 1px solid #fff;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
a.btn_onlineshop:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 18px;
height: 36px;
background: url(/site/img/common/btn_icn2.svg) center center no-repeat;
background-size: contain;
position: absolute;
right: 56px;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 420px) {
a.btn_onlineshop:after {
right: 20px;
}
}
a.btn_onlineshop:hover {
opacity: 1;
}
a.btn_onlineshop:hover:before {
left: 15px;
right: 15px;
bottom: 15px;
top: 15px;
}
a.btn_onlineshop .gr_onlineshop {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 420px) {
a.btn_onlineshop .gr_onlineshop {
width: 100%;
}
}
a.btn_onlineshop .gr_onlineshop:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 45px;
height: 32px;
background: url(/site/img/common/btn_icn1.svg) center center no-repeat;
background-size: contain;
position: absolute;
left: -80px;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 420px) {
a.btn_onlineshop .gr_onlineshop:before {
left: 20px;
}
}
a.btn_onlineshop .gr_onlineshop .heading {
text-align: center;
margin-bottom: 8px;
}
@media (max-width: 420px) {
a.btn_onlineshop .gr_onlineshop .heading {
margin-bottom: 2px;
}
}
a.btn_onlineshop .gr_onlineshop .heading > .tit {
font-size: 22px;
line-height: 1;
letter-spacing: .1em;
margin-bottom: 8px;
font-family: ten-mincho, serif;
font-style: normal;
color: #fff;
}
@media (max-width: 420px) {
a.btn_onlineshop .gr_onlineshop .heading > .tit {
margin-bottom: 2px;
font-size: 16px;
}
}
a.btn_onlineshop .gr_onlineshop .heading > .eng {
color: #90BBB7;
font-size: 15px;
}
@media (max-width: 420px) {
a.btn_onlineshop .gr_onlineshop .heading > .eng {
font-size: 12px;
}
}
a.btn_onlineshop .gr_onlineshop p {
font-size: 10px;
text-align: center;
}
#pageTitle {
background: #103771;
box-sizing: border-box;
}
#pageTitle .obj {
width: 1000px;
height: 640px;
margin: 0 auto;
position: relative;
}
@media (max-width: 899px) {
#pageTitle .obj {
width: auto;
height: 320px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#pageTitle .obj {
height: 200px;
}
}
#pageTitle .obj > .heading {
color: #fff;
position: absolute;
left: 0;
bottom: 40px;
}
@media (max-width: 899px) {
#pageTitle .obj > .heading {
left: 30px;
}
}
#pageTitle .obj > .heading .tit {
font-size: 42px;
line-height: 1;
font-family: ten-mincho, a-otf-ud-reimin-pr6n, dnp-shuei-mincho-pr6n,sans-serif;
font-weight: 400;
color: #fff;
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
@media (max-width: 420px) {
#pageTitle .obj > .heading .tit {
font-size: 22px;
}
} #about #pageTitle {
background: url(/site/img/about/key_bg.jpg) center center no-repeat;
background-size: cover;
}
#about #sec_greeting .gr_greeting1 {
background: url(/site/img/about/gree_bg1.svg) 30% 240px no-repeat;
}
#about #sec_greeting .gr_greeting1 .tit {
text-align: center;
font-size: 42px;
font-weight: 400;
font-family: ten-mincho-text, serif;
margin-bottom: 36px;
padding: 16px 0;
line-height: 1.4;
letter-spacing: .15em;
}
@media (max-width: 420px) {
#about #sec_greeting .gr_greeting1 .tit {
font-size: 20px;
}
}
#about #sec_greeting .gr_greeting1 .name {
font-size: 18px;
line-height: 1;
text-align: center;
font-family: ten-mincho-text, serif;
margin-bottom: 48px;
}
@media (max-width: 899px) {
#about #sec_greeting .gr_greeting1 .name {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#about #sec_greeting .gr_greeting1 .name {
font-size: 14px;
}
}
#about #sec_greeting .gr_greeting1 .lo1 {
position: relative;
display: -webkit-flex;
display: flex;
align-content: flex-start;
flex-wrap: nowrap;
justify-content: space-between;
}
@media (max-width: 899px) {
#about #sec_greeting .gr_greeting1 .lo1 {
max-width: inherit;
flex-direction: column;
}
}
#about #sec_greeting .gr_greeting1 .lo1 .txt_blk {
max-width: 570px;
order: 1;
}
@media (max-width: 899px) {
#about #sec_greeting .gr_greeting1 .lo1 .txt_blk {
max-width: inherit;
}
}
#about #sec_greeting .gr_greeting1 .lo1 .txt_blk p {
font-size: 15px;
line-height: 2;
margin-bottom: 1.6em;
}
#about #sec_greeting .gr_greeting1 .lo1 .txt_blk p:last-child {
margin-bottom: 0;
}
@media (max-width: 899px) {
#about #sec_greeting .gr_greeting1 .lo1 .txt_blk p {
font-size: 24px;
line-height: 1.6;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#about #sec_greeting .gr_greeting1 .lo1 .txt_blk p {
font-size: 14px;
}
}
#about #sec_greeting .gr_greeting1 .lo1 .tmb_blk {
order: 2;
justify-content: flex-end;
}
@media (max-width: 899px) {
#about #sec_greeting .gr_greeting1 .lo1 .tmb_blk {
margin: 32px auto;
}
}
#about #sec_mission .gr_mission1 > .tit {
text-align: center;
font-size: 33px;
font-weight: 400;
font-family: ten-mincho, serif;
margin: 16px auto 82px;
}
@media (max-width: 420px) {
#about #sec_mission .gr_mission1 > .tit {
font-size: 20px;
}
}
#about #sec_mission .gr_mission1 > .tit span {
font-size: 38px;
color: #0494AC;
}
@media (max-width: 420px) {
#about #sec_mission .gr_mission1 > .tit span {
font-size: 26px;
}
}
#about #sec_mission .gr_mission1 .box {
padding: 40px;
background: #F7F7F7;
}
@media (max-width: 899px) {
#about #sec_mission .gr_mission1 .box {
padding: 20px;
}
}
#about #sec_mission .gr_mission1 .box > .tit {
font-weight: normal;
font-family: ten-mincho, serif;
font-size: 24px;
text-align: center;
position: relative;
padding: 20px 0;
line-height: 1;
}
#about #sec_mission .gr_mission1 .box > .tit:after {
content: "";
display: block;
width: 270px;
height: 2px;
background: #0494AC;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
#about #sec_mission .gr_mission1 .box1 {
margin-bottom: 72px;
}
#about #sec_mission .gr_mission1 .box1 > .tit {
margin-bottom: 72px;
}
#about #sec_mission .gr_mission1 .box1 > .tit:after {
width: 270px;
}
@media (max-width: 899px) {
#about #sec_mission .gr_mission1 .box1 > .tit {
font-size: 28px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#about #sec_mission .gr_mission1 .box1 > .tit {
margin-bottom: 2em;
font-size: 22px;
}
}
@media (max-width: 899px) {
#about #sec_mission .gr_mission1 .box1 > .tit:after {
width: 320px;
}
}
#about #sec_mission .gr_mission1 .box1 .ul_def {
letter-spacing: -.4em;
text-align: center;
margin-bottom: 24px;
}
#about #sec_mission .gr_mission1 .box1 .ul_def > li {
width: 40%;
display: inline-block;
vertical-align: top;
letter-spacing: normal;
text-align: left;
}
@media (max-width: 899px) {
#about #sec_mission .gr_mission1 .box1 .ul_def > li {
width: 90%;
min-width: 80%;
display: block;
margin: 0 auto 56px;
}
#about #sec_mission .gr_mission1 .box1 .ul_def > li:last-child {
margin-bottom: 0;
}
}
#about #sec_mission .gr_mission1 .box1 .ul_def > li > dl > dt, #about #sec_mission .gr_mission1 .box1 .ul_def > li > dl > dd {
font-family: ten-mincho, serif;
}
#about #sec_mission .gr_mission1 .box1 .ul_def > li > dl > dt {
font-size: 34px;
color: #0494AC;
text-align: center;
line-height: 1;
margin-bottom: 56px;
letter-spacing: .15em;
}
@media (max-width: 420px) {
#about #sec_mission .gr_mission1 .box1 .ul_def > li > dl > dt {
font-size: 20px;
margin-bottom: 1.5em;
}
}
#about #sec_mission .gr_mission1 .box1 .ul_def > li > dl > dd {
font-size: 18px;
}
@media (max-width: 899px) {
#about #sec_mission .gr_mission1 .box1 .ul_def > li > dl > dd {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#about #sec_mission .gr_mission1 .box1 .ul_def > li > dl > dd {
font-size: 14px;
}
}
#about #sec_mission .gr_mission1 .box1 .ul_def > li > dl > dd > ol > li {
margin: 16px 0;
}
#about #sec_mission .gr_mission1 .box2 {
margin-bottom: 56px;
}
#about #sec_mission .gr_mission1 .box2 > .tit {
margin-bottom: 40px;
}
#about #sec_mission .gr_mission1 .box2 > .tit:after {
width: 196px;
}
@media (max-width: 899px) {
#about #sec_mission .gr_mission1 .box2 > .tit {
font-size: 28px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#about #sec_mission .gr_mission1 .box2 > .tit {
margin-bottom: 1em;
font-size: 22px;
}
}
@media (max-width: 899px) {
#about #sec_mission .gr_mission1 .box2 > .tit:after {
width: 240px;
}
}
#about #sec_mission .gr_mission1 .box2 p {
font-size: 18px;
line-height: 3.2;
text-align: center;
font-family: ten-mincho, serif;
}
@media (max-width: 899px) {
#about #sec_mission .gr_mission1 .box2 p {
font-size: 24px;
line-height: 1.8;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#about #sec_mission .gr_mission1 .box2 p {
font-size: 14px;
}
}
#about #sec_outline .heading {
margin-bottom: 24px;
}
#about #sec_outline .ul_outline {
width: 1000px;
margin: 0 auto 40px;
}
@media (max-width: 899px) {
#about #sec_outline .ul_outline {
width: auto;
}
}
#about #sec_outline .ul_outline > li {
width: 100%;
}
#about #sec_outline .ul_outline > li > dl {
width: 100%;
display: table;
}
#about #sec_outline .ul_outline > li > dl > dt, #about #sec_outline .ul_outline > li > dl > dd {
font-size: 16px;
line-height: 1.4;
padding: 16px 8px 18px 16px;
vertical-align: top;
display: table-cell;
border-top: 1px solid #8DABC6;
}
@media (max-width: 899px) {
#about #sec_outline .ul_outline > li > dl > dt, #about #sec_outline .ul_outline > li > dl > dd {
font-size: 24px;
padding: 24px 8px 24px 16px;
box-sizing: border-box;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#about #sec_outline .ul_outline > li > dl > dt, #about #sec_outline .ul_outline > li > dl > dd {
font-size: 14px;
}
}
#about #sec_outline .ul_outline > li > dl > dt {
width: 14em;
letter-spacing: .16em;
}
@media (max-width: 899px) {
#about #sec_outline .ul_outline > li > dl > dt {
width: 8em;
padding-bottom: 8px;
letter-spacing: normal;
}
}
#about #sec_outline .ul_outline > li > dl > dd a {
color: #000;
}
#about #sec_outline .ul_outline > li > dl > dd ul.ul_li01 > li {
margin-bottom: 8px;
}
#about #sec_outline .ul_outline > li > dl > dd ul.ul_li01 > li:last-child {
margin-bottom: 0;
}
#about #sec_outline .ul_outline > li > dl > dd ul.ul_works > li {
margin-bottom: 24px;
}
#about #sec_outline .ul_outline > li > dl > dd ul.ul_works > li:last-child {
margin-bottom: 0;
}
#about #sec_outline .ul_outline > li > dl > dd ul.ul_works > li > dl > dt, #about #sec_outline .ul_outline > li > dl > dd ul.ul_works > li > dl > dd {
line-height: 1.6;
}
#about #sec_outline .ul_outline > li > dl > dd ul.ul_works > li > dl > dt {
margin-bottom: 6px;
}
#about #sec_outline .ul_outline > li > dl > dd ul.ul_works > li > dl > dd {
margin-bottom: 12px;
}
#about #sec_outline .ul_outline > li > dl > dd ul.ul_works > li > dl > dd:last-child {
margin-bottom: 0;
}
#about #sec_outline .ul_outline > li:last-child > dl > dt {
border-bottom: 1px solid #8DABC6;
}
#about #sec_outline .ul_outline > li:last-child > dl > dd {
border-bottom: 1px solid #8DABC6;
}
@media (max-width: 899px) {
#about #sec_history > .wrap {
width: auto;
}
}
#about #sec_history .heading {
margin-bottom: 24px;
}
#about #sec_history .ul_history {
width: 1000px;
margin: 0 auto 40px;
}
@media (max-width: 899px) {
#about #sec_history .ul_history {
width: auto;
}
}
#about #sec_history .ul_history > li {
border-bottom: 1px solid #8DABC6;
}
@media (max-width: 899px) {
#about #sec_history .ul_history > li {
padding: 0.8em 0.4em;
}
}
#about #sec_history .ul_history > li:first-child {
border-top: 1px solid #8DABC6;
}
@media (max-width: 899px) {
#about #sec_history .ul_history > li > dl {
display: block;
}
}
#about #sec_history .ul_history > li > dl > dt, #about #sec_history .ul_history > li > dl > dd {
font-size: 16px;
line-height: 2;
padding: 8px 0;
vertical-align: top;
}
@media (max-width: 899px) {
#about #sec_history .ul_history > li > dl > dt, #about #sec_history .ul_history > li > dl > dd {
display: block;
font-size: 24px;
padding: 0px;
line-height: 1.8;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#about #sec_history .ul_history > li > dl > dt, #about #sec_history .ul_history > li > dl > dd {
font-size: 14px;
}
}
#about #sec_history .ul_history > li > dl > dt {
font-weight: normal;
width: 14em;
padding-left: 12px;
}
@media (max-width: 899px) {
#about #sec_history .ul_history > li > dl > dt {
width: auto;
padding-left: 0;
font-weight: bold;
}
}
@media (max-width: 899px) {
#about #sec_history .ul_history > li > dl > dd {
margin-bottom: 0.5em;
}
} #history #pageTitle {
height: 460px;
background: url(/site/img/history/key_bg.jpg) center bottom no-repeat;
background-size: cover;
}
@media (max-width: 899px) {
#history #pageTitle {
height: 320px;
}
}
#history #pageTitle .obj {
height: 464px;
}
@media (max-width: 899px) {
#history #pageTitle .obj {
width: auto;
height: 320px;
}
} #story2 #pageTitle,
#story #pageTitle {
background: url(/site/img/story/key_bg.jpg) center top no-repeat;
background-size: cover;
}
#story2 #pageTitle .heading,
#story #pageTitle .heading {
font-family: dnp-shuei-mincho-pr6n, sans-serif;
position: relative;
}
@media (max-width: 899px) {
#story2 #pageTitle .heading,
#story #pageTitle .heading {
position: absolute;
left: 30px;
bottom: 40px;
}
}
#story2 #pageTitle .tit,
#story #pageTitle .tit {
position: absolute;
left: 220px;
top: 140px;
color: #000;
text-shadow: none;
}
#story2 #pageTitle .tit span,
#story #pageTitle .tit span {
font-family: ten-mincho-text, sans-serif;
writing-mode: vertical-rl;
}
@media (max-width: 899px) {
#story2 #pageTitle .tit,
#story #pageTitle .tit {
position: static;
margin-bottom: 12px;
}
#story2 #pageTitle .tit span,
#story #pageTitle .tit span {
writing-mode: horizontal-tb;
}
}
#story2 #pageTitle .desc,
#story #pageTitle .desc {
font-size: 20px;
color: #000;
position: absolute;
left: 160px;
top: 200px;
}
#story2 #pageTitle .desc span,
#story #pageTitle .desc span {
writing-mode: vertical-rl;
}
@media (max-width: 899px) {
#story2 #pageTitle .desc,
#story #pageTitle .desc {
position: static;
}
#story2 #pageTitle .desc span,
#story #pageTitle .desc span {
writing-mode: horizontal-tb;
}
}
#story2 .ul_anker,
#story .ul_anker {
text-align: center;
letter-spacing: -.4em;
margin: 32px auto;
}
#story2 .ul_anker > li,
#story .ul_anker > li {
display: inline-block;
vertical-align: top;
letter-spacing: normal;
margin: 0 16px;
font-size: 19px;
}
@media (max-width: 899px) {
#story2 .ul_anker > li,
#story .ul_anker > li {
width: 40%;
margin: 8px 8px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#story2 .ul_anker > li,
#story .ul_anker > li {
font-size: 13px;
}
}
#story2 .ul_anker > li a,
#story .ul_anker > li a {
width: 200px;
text-align: center;
display: inline-block;
color: #406F91;
border: 1px solid #406F91;
line-height: 1;
padding: 12px 24px;
}
@media (max-width: 899px) {
#story2 .ul_anker > li a,
#story .ul_anker > li a {
width: 100%;
}
}
#story2 .ul_anker > li a:after,
#story .ul_anker > li a:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 16px;
height: 10px;
background: url(/site/img/story/anker_arr.svg) center center no-repeat;
background-size: contain;
margin-left: 8px;
}
#story2 .intro,
#story .intro {
min-height: 580px;
background: url(/site/img/story/story1_bg1.jpg) center center no-repeat;
background-size: cover;
display: flex;
padding: 32px 0;
box-sizing: border-box;
margin-bottom: 120px;
}
#story2 .intro .txt_box,
#story .intro .txt_box {
flex: 0 1 46%;
background: rgba(255, 255, 255, 0.9);
display: flex;
justify-content: flex-end;
}
@media (max-width: 899px) {
#story2 .intro .txt_box,
#story .intro .txt_box {
flex: 0 1 60%;
}
}
#story2 .intro .txt_box .gr,
#story .intro .txt_box .gr {
width: 560px;
padding: 40px;
box-sizing: border-box;
}
@media (max-width: 899px) {
#story2 .intro .txt_box .gr,
#story .intro .txt_box .gr {
width: auto;
padding: 30px;
}
}
#story2 .intro .txt_box .heading > .tit,
#story .intro .txt_box .heading > .tit {
font-size: 32px;
font-weight: normal;
line-height: 1.4;
margin-bottom: 12px;
}
@media (max-width: 420px) {
#story2 .intro .txt_box .heading > .tit,
#story .intro .txt_box .heading > .tit {
font-size: 22px;
}
}
#story2 .intro .txt_box .txt_gr p,
#story .intro .txt_box .txt_gr p {
font-size: 16px;
line-height: 2;
}
@media (max-width: 899px) {
#story2 .intro .txt_box .txt_gr p,
#story .intro .txt_box .txt_gr p {
font-size: 24px;
line-height: 1.6;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#story2 .intro .txt_box .txt_gr p,
#story .intro .txt_box .txt_gr p {
font-size: 14px;
}
}
#story2 .select .cont_select,
#story .select .cont_select {
background: #eee;
margin: 64px 0 132px;
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
@media (max-width: 899px) {
#story2 .select .cont_select,
#story .select .cont_select {
padding-bottom: 40px;
}
}
#story2 .select .cont_select .txt_blk,
#story .select .cont_select .txt_blk {
margin: 0 auto;
box-sizing: border-box;
}
@media (max-width: 899px) {
#story2 .select .cont_select .txt_blk,
#story .select .cont_select .txt_blk {
padding: 30px;
}
}
#story2 .select .cont_select .heading,
#story .select .cont_select .heading {
text-align: center;
margin-bottom: 40px;
}
#story2 .select .cont_select .heading > .tit,
#story .select .cont_select .heading > .tit {
font-weight: normal;
font-size: 104px;
line-height: 1;
color: #103771;
}
@media (max-width: 420px) {
#story2 .select .cont_select .heading > .tit,
#story .select .cont_select .heading > .tit {
font-size: 50px;
}
}
#story2 .select .cont_select .heading > .tit:after,
#story .select .cont_select .heading > .tit:after {
content: "";
display: block;
vertical-align: middle;
margin: 24px auto 24px;
width: 170px;
height: 8px;
background: url(/site/img/common/h_bg_hr1.svg) center center repeat-x;
}
#story2 .select .cont_select .heading > .subtit,
#story .select .cont_select .heading > .subtit {
font-weight: normal;
font-size: 32px;
line-height: 1.4;
}
@media (max-width: 420px) {
#story2 .select .cont_select .heading > .subtit,
#story .select .cont_select .heading > .subtit {
font-size: 22px;
}
}
#story2 .select .cont_select .txt_gr,
#story .select .cont_select .txt_gr {
text-align: center;
}
#story2 .select .cont_select .txt_gr p,
#story .select .cont_select .txt_gr p {
font-size: 16px;
line-height: 2;
margin-bottom: 1em;
}
@media (max-width: 899px) {
#story2 .select .cont_select .txt_gr p,
#story .select .cont_select .txt_gr p {
font-size: 24px;
line-height: 1.6;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#story2 .select .cont_select .txt_gr p,
#story .select .cont_select .txt_gr p {
font-size: 14px;
}
}
#story2 .select .cont_select .txt_gr p:last-child,
#story .select .cont_select .txt_gr p:last-child {
margin-bottom: 0;
}
#story2 .select .cont_select .dl_area,
#story .select .cont_select .dl_area {
margin: 32px auto;
text-align: center;
}
#story2 .select .cont_select .dl_area > dt, #story2 .select .cont_select .dl_area > dd,
#story .select .cont_select .dl_area > dt,
#story .select .cont_select .dl_area > dd {
font-size: 16px;
line-height: 1.6;
margin: 12px auto;
}
@media (max-width: 899px) {
#story2 .select .cont_select .dl_area > dt, #story2 .select .cont_select .dl_area > dd,
#story .select .cont_select .dl_area > dt,
#story .select .cont_select .dl_area > dd {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#story2 .select .cont_select .dl_area > dt, #story2 .select .cont_select .dl_area > dd,
#story .select .cont_select .dl_area > dt,
#story .select .cont_select .dl_area > dd {
font-size: 14px;
}
}
#story2 .select .cont_select .dl_area > dt:before,
#story .select .cont_select .dl_area > dt:before {
content: "----";
display: inline-block;
vertical-align: middle;
margin-right: 1em;
}
#story2 .select .cont_select .dl_area > dt:after,
#story .select .cont_select .dl_area > dt:after {
content: "----";
display: inline-block;
vertical-align: middle;
margin-left: 1em;
}
#story2 .select .cont_select1,
#story .select .cont_select1 {
min-height: 620px;
}
#story2 .select .cont_select1 .obj_tmb,
#story .select .cont_select1 .obj_tmb {
order: 1;
}
@media (max-width: 899px) {
#story2 .select .cont_select1 .obj_tmb,
#story .select .cont_select1 .obj_tmb {
width: 100%;
}
#story2 .select .cont_select1 .obj_tmb img,
#story .select .cont_select1 .obj_tmb img {
width: 100%;
}
}
#story2 .select .cont_select1 .txt_blk,
#story .select .cont_select1 .txt_blk {
order: 2;
}
#story2 .select .cont_select2,
#story .select .cont_select2 {
min-height: 780px;
flex-direction: row-reverse;
}
#story2 .select .cont_select2 .obj_tmb,
#story .select .cont_select2 .obj_tmb {
order: 1;
}
@media (max-width: 899px) {
#story2 .select .cont_select2 .obj_tmb,
#story .select .cont_select2 .obj_tmb {
width: 100%;
}
#story2 .select .cont_select2 .obj_tmb img,
#story .select .cont_select2 .obj_tmb img {
width: 100%;
}
}
#story2 .select .cont_select2 .txt_blk,
#story .select .cont_select2 .txt_blk {
order: 2;
}
#story2 .select .cont_select3,
#story .select .cont_select3 {
min-height: 780px;
}
#story2 .select .cont_select3 .obj_tmb,
#story .select .cont_select3 .obj_tmb {
order: 1;
}
@media (max-width: 899px) {
#story2 .select .cont_select3 .obj_tmb,
#story .select .cont_select3 .obj_tmb {
width: 100%;
}
#story2 .select .cont_select3 .obj_tmb img,
#story .select .cont_select3 .obj_tmb img {
width: 100%;
}
}
#story2 .select .cont_select3 .txt_blk,
#story .select .cont_select3 .txt_blk {
order: 2;
}
#story2 .select .cont_select5,
#story .select .cont_select5 {
min-height: 780px;
flex-direction: row-reverse;
margin-bottom: 56px;
}
#story2 .select .cont_select5 .obj_tmb,
#story .select .cont_select5 .obj_tmb {
order: 1;
}
@media (max-width: 899px) {
#story2 .select .cont_select5 .obj_tmb,
#story .select .cont_select5 .obj_tmb {
width: 100%;
}
#story2 .select .cont_select5 .obj_tmb img,
#story .select .cont_select5 .obj_tmb img {
width: 100%;
}
}
#story2 .select .cont_select5 .txt_blk,
#story .select .cont_select5 .txt_blk {
order: 2;
}
#story2 .ul_appe,
#story .ul_appe {
text-align: center;
letter-spacing: -.4em;
margin: 140px auto;
}
#story2 .ul_appe > li,
#story .ul_appe > li {
margin: 8px 8px;
display: inline-block;
vertical-align: top;
letter-spacing: normal;
}
#story2 .toji > .wrap,
#story .toji > .wrap {
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
@media (max-width: 899px) {
#story2 .toji > .wrap,
#story .toji > .wrap {
width: auto;
flex-direction: column;
}
}
#story2 .toji > .wrap > .tmb,
#story .toji > .wrap > .tmb {
order: 2;
}
@media (max-width: 899px) {
#story2 .toji > .wrap > .tmb,
#story .toji > .wrap > .tmb {
margin: 0 auto;
}
}
#story2 .toji > .wrap > .box,
#story .toji > .wrap > .box {
width: 720px;
border: 1px solid #C9C9C9;
order: 1;
padding: 40px;
box-sizing: border-box;
}
@media (max-width: 899px) {
#story2 .toji > .wrap > .box,
#story .toji > .wrap > .box {
width: auto;
margin: 0 30px 40px;
padding: 30px;
}
}
#story2 .toji > .wrap > .box .tit,
#story .toji > .wrap > .box .tit {
font-size: 22px;
padding: 6px 0 12px;
position: relative;
margin-bottom: 16px;
font-weight: normal;
}
#story2 .toji > .wrap > .box .tit:after,
#story .toji > .wrap > .box .tit:after {
content: "";
width: 100%;
height: 8px;
display: block;
position: absolute;
left: 0;
bottom: 0px;
background-color: #ECECEC;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #F9F9F9), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #F9F9F9), color-stop(0.75, #F9F9F9), color-stop(0.75, transparent), to(transparent));
-webkit-background-size: 8px 8px;
}
#story2 .toji > .wrap > .box p.name,
#story .toji > .wrap > .box p.name {
font-size: 28px;
}
@media (max-width: 420px) {
#story2 .toji > .wrap > .box p.name,
#story .toji > .wrap > .box p.name {
font-size: 18px;
}
}
#story2 .toji > .wrap > .box p.name b,
#story .toji > .wrap > .box p.name b {
font-size: 37px;
font-weight: normal;
margin-left: 1em;
}
@media (max-width: 420px) {
#story2 .toji > .wrap > .box p.name b,
#story .toji > .wrap > .box p.name b {
font-size: 22px;
}
}
#story2 .toji > .wrap > .box p.copy,
#story .toji > .wrap > .box p.copy {
color: #666;
font-size: 20px;
line-height: 1.4;
margin-bottom: 40px;
}
@media (max-width: 420px) {
#story2 .toji > .wrap > .box p.copy,
#story .toji > .wrap > .box p.copy {
font-size: 12px;
}
}
#story2 .toji > .wrap > .box p.desc,
#story .toji > .wrap > .box p.desc {
font-size: 16px;
line-height: 1.8;
}
@media (max-width: 899px) {
#story2 .toji > .wrap > .box p.desc,
#story .toji > .wrap > .box p.desc {
font-size: 24px;
line-height: 1.6;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#story2 .toji > .wrap > .box p.desc,
#story .toji > .wrap > .box p.desc {
font-size: 14px;
}
}
#story2 #story03 .lo1 .tmb_blk,
#story #story03 .lo1 .tmb_blk {
width: 310px;
min-height: 300px;
position: relative;
float: left;
}
@media (max-width: 899px) {
#story2 #story03 .lo1 .tmb_blk,
#story #story03 .lo1 .tmb_blk {
width: auto;
min-height: inherit;
float: none;
text-align: center;
}
}
#story2 #story03 .lo1 .tmb_blk .obj1,
#story #story03 .lo1 .tmb_blk .obj1 {
display: inline-block;
vertical-align: middle;
margin: 32px 0 0 48px;
}
@media (max-width: 899px) {
#story2 #story03 .lo1 .tmb_blk .obj1,
#story #story03 .lo1 .tmb_blk .obj1 {
margin: 0 auto 32px;
}
}
#story2 #story03 .lo1 .tmb_blk .barge,
#story #story03 .lo1 .tmb_blk .barge {
position: absolute;
right: 56px;
top: 50%;
-webkit-transform: translateY(-50%); transform: translateY(-50%);
}
#story2 #story03 .lo1 .txt_blk,
#story #story03 .lo1 .txt_blk {
padding-left: 310px;
}
@media (max-width: 899px) {
#story2 #story03 .lo1 .txt_blk,
#story #story03 .lo1 .txt_blk {
padding-left: 0px;
}
}
#story2 #story03 .lo1 .txt_blk .tit,
#story #story03 .lo1 .txt_blk .tit {
color: #103771;
font-family: ten-mincho, serif;
font-weight: 400;
font-size: 24px;
margin-bottom: 0.5em;
font-family: serif;
font-weight: 400;
}
@media (max-width: 899px) {
#story2 #story03 .lo1 .txt_blk .tit,
#story #story03 .lo1 .txt_blk .tit {
font-size: 32px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#story2 #story03 .lo1 .txt_blk .tit,
#story #story03 .lo1 .txt_blk .tit {
font-size: 22px;
}
}
#story2 #story03 .lo1 .txt_blk p,
#story #story03 .lo1 .txt_blk p {
margin-bottom: 2em;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
font-size: 16px;
line-height: 2;
}
@media (max-width: 899px) {
#story2 #story03 .lo1 .txt_blk p,
#story #story03 .lo1 .txt_blk p {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#story2 #story03 .lo1 .txt_blk p,
#story #story03 .lo1 .txt_blk p {
font-size: 14px;
}
}
@media (max-width: 899px) {
#story2 #story03 .lo1 .txt_blk .btn_area,
#story #story03 .lo1 .txt_blk .btn_area {
text-align: center;
}
}
#story2 #story03 .lo1 .txt_blk .btn_area a,
#story #story03 .lo1 .txt_blk .btn_area a {
display: inline-block;
width: 244px;
padding: 0.9em 30px 1em 0px;
border-radius: 4px;
border: 1px solid #103771;
text-align: center;
font-size: 19px;
color: #103771;
line-height: 1;
background: #fff url(/site/img/index/ar.svg) 205px center no-repeat;
box-sizing: border-box;
transition: .3s;
}
@media (max-width: 899px) {
#story2 #story03 .lo1 .txt_blk .btn_area a,
#story #story03 .lo1 .txt_blk .btn_area a {
width: 244px;
padding: 1.2em 30px 1.3em 0px;
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#story2 #story03 .lo1 .txt_blk .btn_area a,
#story #story03 .lo1 .txt_blk .btn_area a {
width: 80%;
font-size: 16px;
}
}
#story2 #story03 .lo1 .txt_blk .btn_area a:hover,
#story #story03 .lo1 .txt_blk .btn_area a:hover {
opacity: 1;
background: #103771 url(/site/img/index/ar_w.svg) 205px center no-repeat;
color: #fff;
}   #products .blank {
padding-top: 85px;
background: #7f7f7f;
}
#products #pageTitle {
background: url(/site/img/products/key_bg.jpg) center bottom no-repeat;
background-size: cover;
}
#products #pageTitle .obj {
height: 470px;
}
@media (max-width: 420px) {
#products #pageTitle .obj {
height: 200px;
}
}
#products #category, #products #pickup, #products .list {
margin-top: 70px;
}
#products #category h2, #products #pickup h2, #products .list h2 {
margin-bottom: 2em;
padding: 0px 0px 1.2em;
background: url(/site/img/products/line.png) left bottom repeat-x;
font-size: 24px;
color: #103771;
line-height: 1;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}
@media (max-width: 899px) {
#products #category h2, #products #pickup h2, #products .list h2 {
font-size: 32px;
margin-bottom: 1.5em;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#products #category h2, #products #pickup h2, #products .list h2 {
font-size: 20px;
}
}
#products #category ul {
font-size: 0px;
line-height: 1;
}
#products #category ul li {
display: inline-block;
width: 176px;
margin: 0px 30px 30px 0px;
vertical-align: top;
}
@media (max-width: 899px) {
#products #category ul li {
width: 48%;
margin-right: 4%;
margin-bottom: 30px;
}
#products #category ul li:nth-child(2n) {
margin-right: 0px;
}
}
@media (min-width: 900px) {
#products #category ul li:nth-child(5n) {
margin-right: 0px;
}
}
#products #category ul li img {
width: 100%;
padding: 8px;
border: 1px solid #CECECE;
box-sizing: border-box;
}
#products #category ul li span {
display: block;
padding-top: 0.75em;
font-size: 18px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
line-height: 1.5;
text-align: center;
}
@media (max-width: 899px) {
#products #category ul li span {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#products #category ul li span {
font-size: 16px;
}
}
#products #category.child .line {
margin: 0px -40px;
padding: 40px;
border: 1px solid #aac0d4;
}
@media (max-width: 899px) {
#products #category.child .line {
margin: 0px;
padding: 40px;
}
}
#products #pickup {
padding-bottom: 70px;
}
#products #pickup ul {
text-align: center;
font-size: 0px;
line-height: 1;
}
#products #pickup ul li {
display: inline-block;
width: 14.2%;
}
@media (max-width: 899px) {
#products #pickup ul li {
width: 25%;
margin-bottom: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#products #pickup ul li img {
width: 60%;
}
}
#products #pickup ul li span {
display: block;
padding-top: 0.75em;
font-size: 16px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
line-height: 1.5;
}
@media (max-width: 899px) {
#products #pickup ul li span {
font-size: 22px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#products #pickup ul li span {
font-size: 12px;
}
}
#products .list .items .item {
float: left;
width: 178px;
margin: 0px 20px 20px 0px;
}
@media (max-width: 899px) {
#products .list .items .item {
width: 48%;
margin-right: 4%;
margin-bottom: 30px;
}
#products .list .items .item:nth-child(2n) {
margin-right: 0px;
}
#products .list .items .item:nth-child(2n) + .item {
clear: both;
}
}
@media (min-width: 900px) {
#products .list .items .item:nth-child(5n) {
margin-right: 0px;
}
#products .list .items .item:nth-child(5n) + .item {
clear: both;
}
}
#products .list .items .item figure {
text-align: center;
height: 178px;
}
@media (max-width: 899px) {
#products .list .items .item figure {
height: auto;
}
}
#products .list .items .item figure img {
max-width: 100%;
max-height: 178px;
}
@media (max-width: 899px) {
#products .list .items .item figure img {
max-height: none;
}
}
#products .list .items .item .name {
padding-top: 0.75em;
font-size: 16px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
line-height: 1.5;
text-align: center;
}
@media (max-width: 899px) {
#products .list .items .item .name {
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#products .list .items .item .name {
font-size: 12px;
}
}
#products .detail {
padding-top: 70px;
}
#products .detail .titles {
padding-bottom: 50px;
}
#products .detail h1 {
text-align: center;
font-size: 42px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
color: #103771;
}
@media (max-width: 899px) {
#products .detail h1 {
font-size: 50px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#products .detail h1 {
font-size: 30px;
}
}
#products .detail .catch {
margin-top: 0.25em;
text-align: center;
font-size: 24px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
color: #103771;
}
@media (max-width: 899px) {
#products .detail .catch {
font-size: 30px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#products .detail .catch {
font-size: 18px;
}
}
#products .detail .clearbox {
clear: both;
}
#products .detail .mainimg, #products .detail .entry, #products .detail .data, #products .detail .other {
margin-bottom: 50px;
}
#products .detail .mainimg {
float: left;
width: 370px;
padding-top: 1em;
}
@media (max-width: 899px) {
#products .detail .mainimg {
float: none;
width: auto;
text-align: center;
}
}
#products .detail .mainimg img {
max-width: 100%;
}
@media (min-width: 900px) {
#products .detail .mainimg + .entry {
float: right;
width: 590px;
}
}
#products .detail .entry {
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}
#products .detail .data {
float: left;
width: 500px;
}
@media (max-width: 899px) {
#products .detail .data {
float: none;
width: auto;
}
}
#products .detail .data.long {
width: auto;
float: none;
}
@media (min-width: 900px) {
#products .detail .data + .other {
float: right;
width: 455px;
}
}
#products .detail .data table {
width: 100%;
border-top: 1px solid #aac0d4;
}
#products .detail .data table th, #products .detail .data table td {
font-size: 16px;
border-bottom: 1px solid #aac0d4;
box-sizing: border-box;
}
@media (max-width: 899px) {
#products .detail .data table th, #products .detail .data table td {
display: block;
font-size: 24px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#products .detail .data table th, #products .detail .data table td {
font-size: 14px;
}
}
#products .detail .data table td {
padding: 0.5em 0px;
color: #103771;
}
@media (max-width: 899px) {
#products .detail .data table td {
padding: 0.5em 0.5em 1em;
}
}
#products .detail .data table th {
width: 12em;
padding: 0.5em 1em;
color: #6693BF;
}
@media (max-width: 899px) {
#products .detail .data table th {
width: auto;
padding: 1em 0.5em 0px;
border-bottom: none;
}
}
#products .detail .other .subimg, #products .detail .other .text {
margin-bottom: 30px;
}
#products .detail .other .subimg {
text-align: center;
}
#products .detail .other .subimg img {
max-width: 100%;
}
#products .detail .other .text {
text-align: center;
font-size: 14px;
color: #555555;
line-height: 2;
}
@media (max-width: 899px) {
#products .detail .other .text {
font-size: 22px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#products .detail .other .text {
font-size: 14px;
}
}
#products .detail .other .btn a {
display: block;
width: 220px;
margin: 0px auto;
padding: 0.8em 22px 0.8em 0px;
background: url(/site/img/products/ar.svg) 180px center no-repeat;
background-size: 14px auto;
border-radius: 5px;
border: 1px solid #103771;
color: #103771;
font-size: 19px;
text-align: center;
line-height: 1;
box-sizing: border-box;
transition: all 0.5s;
}
@media (max-width: 899px) {
#products .detail .other .btn a {
width: 270px;
font-size: 26px;
background-position: 230px center;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#products .detail .other .btn a {
width: 60%;
font-size: 16px;
background-position: 95% center;
}
}
#products .detail .other .btn a:hover {
opacity: 1;
background: #103771;
color: #fff;
background: #103771 url(/site/img/products/ar_w.svg) 180px center no-repeat;
background-size: 14px auto;
}
#products .detail .pagelink {
clear: both;
width: 100%;
border-top: 1px solid #aac0d4;
}
#products .detail .pagelink a {
display: block;
width: 50%;
padding: 2em 0px;
color: #2F7A9B;
font-size: 17px;
font-family: dnp-shuei-mincho-pr6n, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
line-height: 2;
}
@media (max-width: 420px) {
#products .detail .pagelink a {
font-size: 13px;
}
}
#products .detail .pagelink a[rel=next] {
float: left;
padding-left: 40px;
background: url(/site/img/products/al.svg) left center no-repeat;
}
#products .detail .pagelink a[rel=prev] {
float: right;
padding-right: 40px;
background: url(/site/img/products/ar.svg) right center no-repeat;
text-align: right;
}  #store #pageTitle {
background: url(/site/img/store/20240523_key_bg_pc.jpg) right top no-repeat;
background-size: cover;
}
@media (max-width:899px) {
#store #pageTitle{ background: none;
}
}
#store .ul_anker {
text-align: center;
letter-spacing: -.4em;
margin: 32px auto;
}
#store .ul_anker > li {
display: inline-block;
vertical-align: top;
letter-spacing: normal;
margin: 0 16px;
font-size: 19px;
width: 360px;
max-width: 100%;
}
@media (max-width:1175px) {
#store .ul_anker > li {
padding-bottom: 1em;
}
}
@media (max-width: 899px) {
#store .ul_anker > li {
margin: 8px 16px;
padding-bottom: 0;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#store .ul_anker > li {
font-size: 13px;
width: 340px;
}
}
#store .ul_anker > li a {
text-align: center;
display: inline-block;
color: #406F91;
border: 1px solid #406F91;
line-height: 1;
padding: 12px 24px;
transition: .3s;
width: 100%;
}
#store .ul_anker > li a:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 16px;
height: 10px;
background: url(/site/img/story/anker_arr.svg) center center no-repeat;
background-size: contain;
margin-left: 8px;
}
#store .ul_anker > li a:hover {
opacity: 1;
background: #103771;
color: #fff;
}
#store .ul_anker > li a:hover:after {
background: url(/site/img/story/anker_arr_w.svg) center center no-repeat;
background-size: contain;
}
#store .intro {
min-height: 580px;
background: url(/site/img/store/20240426-02_ds_intro_bg1.jpg) center center no-repeat;
background-size: cover;
display: flex;
padding: 32px 0;
box-sizing: border-box;
margin-bottom: 120px;
}
#store .intro.-yahachi{
min-height: 490px;
}
#store .intro .txt_box {
flex: 0 1 60%;
background: rgba(255, 255, 255, 0.9);
display: flex;
justify-content: flex-end;
}
#store .intro .txt_box .gr {
width: 630px;
padding: 40px 40px 40px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 899px) {
#store .intro .txt_box .gr {
width: auto;
padding: 0 3%;
}
#store .intro {
flex-direction: column;
margin-bottom: 0;
background: #fff;
min-height: 100%;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#store .intro .txt_box .gr {
padding: 15px;
}
}
#store .intro .txt_box .heading > .tit {
font-size: 32px;
font-weight: normal;
line-height: 1.4;
margin-bottom: 12px;
letter-spacing: .15em;
}
@media (max-width: 767px) {
#store .intro .txt_box .heading > .tit {
letter-spacing: 1.5px;
font-size: 30px;
}
}
@media (max-width: 420px) {
#store .intro .txt_box .heading > .tit {
font-size: 25px;
}
}
#store .intro .txt_box .heading > .desc {
font-size: 22px;
color: #0494AC;
margin-bottom: 16px;
line-height: 1.8;
}
@media (max-width: 420px) {
#store .intro .txt_box .heading > .desc {
font-size: 20px;
}
}
#store .intro .txt_box .txt_gr p {
font-size: 16px;
line-height: 2;
margin-bottom: 1em;
}
@media (max-width: 899px) {
#store .intro .txt_box .txt_gr p {
line-height: 1.8;
font-size: 18px;
}
} #store .ol_point {
width: 1200px;
margin: 0 auto;
}
@media (max-width: 899px) {
#store .ol_point {
width: auto;
margin: 0 3%;
}
}
#store .ol_point > li {
margin-bottom: 64px;
}
#store .ol_point > li .tit {
font-weight: normal;
font-size: 28px;
line-height: 1;
letter-spacing: .15em;
margin: 0 0 24px;
}
@media (max-width: 899px) {
#store .ol_point > li .tit {
line-height: 1.4;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#store .ol_point > li .tit {
font-size: 25px;
}
}
#store .ol_point > li .tit:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 16px;
margin-top: -24px;
}
@media (max-width: 899px) {
#store .ol_point > li .tit:before {
margin-top: -18px;
}
}
#store .ol_point > li p {
font-size: 16px;
line-height: 1.8;
}
@media (max-width: 899px) {
#store .ol_point > li p {
line-height: 1.6;
font-size: 20px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#store .ol_point > li p {
font-size: 18px;
}
}
#store .ol_point > li .ul_tmb {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 40px auto;
}
@media (max-width: 899px) {
#store .ol_point > li .ul_tmb {
flex-direction: row;
justify-content: center;
}
}
#store .ol_point > li .ul_tmb > li {
margin: 8px 0;
}
#store .ol_point > li:nth-child(1) .tit:before {
width: 33px;
height: 38px;
background: url(/site/img/common/ol_no01.svg) center center no-repeat;
background-size: contain;
}
@media (max-width: 899px) {
#store .ol_point > li:nth-child(1) .tit:before {
width: 28px;
height: 32px;
}
}
#store .ol_point > li:nth-child(2) .tit:before {
width: 45px;
height: 40px;
background: url(/site/img/common/ol_no02.svg) center center no-repeat;
background-size: contain;
}
@media (max-width: 899px) {
#store .ol_point > li:nth-child(2) .tit:before {
width: 37px;
height: 32px;
}
}
#store .box_read {
width: 1200px;
margin: 0 auto;
background: #F6F7F5;
padding: 40px 90px 40px;
position: relative;
}
@media (max-width: 899px) {
#store .box_read {
width: auto;
margin: 0 3%;
padding: 30px 3%;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#store .box_read {
padding: 20px;
}
}
#store .box_read > .tit {
font-weight: normal;
font-size: 28px;
margin-bottom: 30px;
letter-spacing: .15em;
}
@media (max-width: 767px) {
#store .box_read > .tit {
font-size: 24px;
}
}
@media (max-width: 420px) {
#store .box_read > .tit {
font-size: 20px;
}
}
#store .box_read .box_hr1 {
background: #fff;
border: 2px solid #DFEDE6;
padding: 44px;
box-sizing: border-box;
margin-bottom: 56px;
}
@media (max-width: 767px) {
#store .box_read .box_hr1 {
padding: 30px 3%;
margin-bottom: 30px;
}
}
@media (max-width: 420px) {
#store .box_read .box_hr1 {
padding: 20px;
margin-bottom: 30px;
}
}
#store .box_read .box_hr1 > .tit {
font-size: 19px;
margin-bottom: 8px;
}
@media (max-width: 899px) {
#store .box_read .box_hr1 > .tit {
font-size: 20px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#store .box_read .box_hr1 > .tit {
font-size: 14px;
}
}
#store .box_read .box_hr1 ol.ol_std1 > li {
font-size: 17px;
margin: 16px 0;
}
@media (max-width: 899px) {
#store .box_read .box_hr1 ol.ol_std1 > li {
font-size: 20px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#store .box_read .box_hr1 ol.ol_std1 > li {
font-size: 18px;
}
}
#store .box_read .box_hr1 ol.ol_std1 > li .att {
margin-top: 8px;
font-size: 14px;
}
@media (max-width: 899px) {
#store .box_read .box_hr1 ol.ol_std1 > li .att {
font-size: 18px;
}
} #store .box_read .box_hr1 ol.ol_std1 > li:before {
top: 10px;
}
#store .box_read .box_hr1 ol.ol_std1 > li:nth-child(1):before {
width: 15px;
height: 17px;
}
@media (max-width: 899px) {
#store .box_read .box_hr1 ol.ol_std1 > li:nth-child(1):before {
width: 24px;
height: 22px;
}
}
#store .box_read .box_hr1 ol.ol_std1 > li:nth-child(2):before {
width: 20px;
height: 18px;
}
@media (max-width: 899px) {
#store .box_read .box_hr1 ol.ol_std1 > li:nth-child(2):before {
width: 24px;
height: 22px;
}
}
#store .box_read .box_hr1 ol.ol_std1 > li:nth-child(3):before {
width: 21px;
height: 22px;
}
@media (max-width: 899px) {
#store .box_read .box_hr1 ol.ol_std1 > li:nth-child(3):before {
width: 24px;
height: 22px;
}
}
#store .box_read .box_hr1 ol.ol_std1 > li:nth-child(4):before {
width: 18px;
height: 17px;
}
@media (max-width: 899px) {
#store .box_read .box_hr1 ol.ol_std1 > li:nth-child(4):before {
width: 24px;
height: 22px;
}
}
#store .box_read .box_hr1 ol.ol_std1 > li:nth-child(5):before {
width: 16px;
height: 15px;
}
@media (max-width: 899px) {
#store .box_read .box_hr1 ol.ol_std1 > li:nth-child(5):before {
width: 24px;
height: 22px;
}
}
#store .box_read .ul_read_date {
margin-bottom: 56px;
}
@media (max-width:767px) {
#store .box_read .ul_read_date{
margin-bottom: 0;
}
}
#store .box_read .ul_read_date > li {
margin-bottom: 24px;
}
#store .box_read .ul_read_date > li > dl > dt, #store .box_read .ul_read_date > li > dl > dd {
font-size: 17px;
margin: 8px 0;
}
@media (max-width: 899px) {
#store .box_read .ul_read_date > li > dl > dt, #store .box_read .ul_read_date > li > dl > dd {
font-size: 20px;
}
}
@media (max-width: 899px) and (max-width: 420px) {
#store .box_read .ul_read_date > li > dl > dt, #store .box_read .ul_read_date > li > dl > dd {
font-size: 18px;
}
}
#store .box_read .ul_read_date > li > dl > dt:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
background: url(/site/img/store/icn_square.svg) center center no-repeat;
background-size: contain;
margin-right: 8px;
}
@media (max-width: 899px) {
#store .box_read .ul_read_date > li > dl > dt:before {
width: 20px;
height: 20px;
}
}
#store .box_read .ul_read_date > li > dl > dd > ul.ul_std1 > li {
margin: 8px 0;
}
#store .box_read .ul_read_date > li > dl > dd ul.ul_access > li {
margin: 16px 0 24px;
}
#store .box_read .ul_read_date > li > dl > dd ul.ul_access > li > dl > dt {
border: 2px solid #000;
padding: 8px;
display: inline-block;
margin-bottom: 12px;
}
#store .box_read .ul_read_date > li > dl > dd ul.ul_access > li > dl > dd > ul > li {
margin: 8px 0;
}
#store .box_read .btn_area {
text-align: center;
margin: 40px auto;
}
#store .box_read .btn_area a.btn_form {
color: #fff;
width: 560px;
display: inline-block;
font-size: 24px;
background: #ACB8BC;
text-align: center;
line-height: 110px;
position: relative;
transition: background-color 0.3s;
}
@media (max-width: 899px) {
#store .box_read .btn_area a.btn_form {
width: 100%;
}
}
@media (max-width: 420px) {
#store .box_read .btn_area a.btn_form {
line-height: 60px;
font-size: 14px;
}
}
#store .box_read .btn_area a.btn_form:hover {
background: #103771;
opacity: 1;
}
#store .box_read .btn_area a.btn_form:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 40px;
background: url(/site/img/store/icn_arr1.svg) center center no-repeat;
background-size: contain;
margin-right: 8px;
position: absolute;
right: 32px;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 420px) {
#store .box_read .btn_area a.btn_form:after {
right: 15px;
width: 10px;
height: 20px;
}
}
#store .ssec_bar .intro {
background: url(/site/img/store/bar_intro_bg1.jpg) center center no-repeat;
background-size: cover;
}
@media (max-width: 899px) {
#store .ssec_bar .intro {
background-size: cover;
background: #fff;
min-height: 100%;
}
}
#store .yahachi_bar .intro {
background: url(/site/img/store/bar_intro_bg2.jpg) center center no-repeat;
background-size: cover;
}
@media (max-width: 899px) {
#store .yahachi_bar .intro {
background-size: cover;
background: #fff;
min-height: 100%;
}
}
#store .ssec_bar .box_read .obj_tmb ,
#store .intro .box_read .obj_tmb ,
#store .yahachi_bar .box_read .obj_tmb {
position: absolute;
right: -300px;
top: 40px;
}
@media (max-width: 899px) {
#store .ssec_bar .box_read .obj_tmb,
#store .intro .box_read .obj_tmb ,
#store .yahachi_bar .box_read .obj_tmb {
position: static;
margin-bottom: 40px;
}
#store .ssec_bar .box_read .obj_tmb img,
#store .intro .box_read .obj_tmb img ,
#store .yahachi_bar .box_read .obj_tmb img {
width: 100%;
}
}
#store .ssec_bar .box_read .googlemaps iframe ,
#store .ssec .box_read .googlemaps iframe ,
#store .yahachi_bar .box_read .googlemaps iframe {
width: 100%;
height: 320px;
}
#store .ssec_bar .box_read .ul_read_date > li > dl > dt:before {
width: 13px;
height: 13px;
background: url(/site/img/store/icn_square2.svg) center center no-repeat;
background-size: contain;
}
@media (max-width: 899px) {
#store .ssec_bar .box_read .ul_read_date > li > dl > dt:before {
width: 26px;
height: 26px;
}
}
#store .ssec_bar .box_read .ul_read_date > li > dl > dd .att {
margin: 6px 0;
}
#store .sns_inner {
clear: both;
margin-top: 20px;
}
#store .sns_inner .sns_icon {
float: left;
width: 76px;
height: 76px;
}
#store .sns_inner .sns_icon img {
width: 76px;
height: 76px;
}
#store .sns_inner .sns_icon:first-child {
margin-bottom: 24px;
}
#store .sns_inner .balloon1 {
position: relative;
display: inline-block;
margin: 14px 0 14px 24px;
padding: 7px 12px 7px 12px;
min-width: 120px;
max-width: 100%;
color: #103771;
font-size: 14px;
background: #FFF;
border: solid 2px #b3c9c6;
box-sizing: border-box;
border-radius: 12px;
}
#store .sns_inner .balloon1:before {
content: "";
position: absolute;
top: 50%;
left: -15px;
margin-top: -8px;
border: 8px solid transparent;
border-right: 8px solid #FFF;
z-index: 2;
}
#store .sns_inner .balloon1:after {
content: "";
position: absolute;
top: 50%;
left: -20px;
margin-top: -10px;
border: 10px solid transparent;
border-right: 10px solid #b3c9c6;
z-index: 1;
}
#store .sns_inner .balloon1 p {
margin: 0;
padding: 0;
}
#store .store-img{
display: none;
}
@media (max-width:899px) {
#store .store-img{
display: block;
}
}
@media (max-width: 899px) {
#store #pageTitle .obj {
width: auto;
height: 100%;
}
}.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
} @-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.swing {
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
@keyframes tada {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
} @-webkit-keyframes wobble {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes wobble {
0% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
-ms-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
-ms-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
-ms-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
-ms-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
-ms-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0.3);
-ms-transform: scale(0.3);
transform: scale(0.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
}
@keyframes bounceOut {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.3);
-ms-transform: scale(0.3);
transform: scale(0.3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
-ms-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
-ms-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
@keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
-ms-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
-ms-transform: translateX(-20%) skewX(30deg);
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
-ms-transform: translateX(0%) skewX(-15deg);
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
-ms-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
-ms-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
-ms-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
-ms-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
-ms-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
transform: rotate(60deg) translateY(0);
opacity: 1;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translateY(700px);
transform: translateY(700px);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
-ms-transform: rotate(60deg) translateY(0);
transform: rotate(60deg) translateY(0);
opacity: 1;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translateY(700px);
-ms-transform: translateY(700px);
transform: translateY(700px);
opacity: 0;
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge;
} @-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
-ms-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
} @-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
transform: translateX(100%) rotate(120deg);
}
}
@keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
-ms-transform: translateX(100%) rotate(120deg);
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}