@charset "UTF-8";
@charset "UTF-8";
div.wpcf7 {
margin: 0;
padding: 0;
}
div.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
margin: 0;
padding: 0;
border: 0;
}
div.wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #ff0000;
}
div.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
}
div.wpcf7-mail-sent-ng,
div.wpcf7-aborted {
border: 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
border: 2px solid #ffa500;
}
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
border: 2px solid #f7e700;
}
.wpcf7-form-control-wrap {
position: relative;
}
span.wpcf7-not-valid-tip {
color: #f00;
font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip span.wpcf7-not-valid-tip {
position: absolute;
top: 20%;
left: 20%;
z-index: 100;
border: 1px solid #ff0000;
background: #fff;
padding: .2em .8em;
}
span.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
span.wpcf7-list-item-label::before,
span.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-display-none {
display: none;
}
div.wpcf7 .ajax-loader {
visibility: hidden;
display: inline-block;
background-image: url(//yotsubain.com/wp/wp-content/plugins/contact-form-7/images/ajax-loader.gif);
width: 16px;
height: 16px;
border: none;
padding: 0;
margin: 0 0 0 4px;
vertical-align: middle;
}
div.wpcf7 .ajax-loader.is-active {
visibility: visible;
}
div.wpcf7 div.ajax-error {
display: none;
}
div.wpcf7 .placeheld {
color: #888;
}
div.wpcf7 input[type="file"] {
cursor: pointer;
}
div.wpcf7 input[type="file"]:disabled {
cursor: default;
}
div.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; } input[type="submit"], input[type="button"] {
border-radius: 0;
-webkit-box-sizing: content-box;
-webkit-appearance: button;
appearance: button;
border: none;
box-sizing: border-box; }
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration {
display: none; }
input[type="submit"]::focus, input[type="button"]::focus {
outline-offset: -2px; }
.mt-u1 {
margin-top: 8px !important; }
.mt-u2 {
margin-top: 16px !important; }
.mt-u3 {
margin-top: 24px !important; }
.mt-u4 {
margin-top: 32px !important; }
.mt-u5 {
margin-top: 40px !important; }
.mt-u6 {
margin-top: 48px !important; }
.mt-u7 {
margin-top: 56px !important; }
.mt-u8 {
margin-top: 64px !important; }
.mt-u9 {
margin-top: 72px !important; }
.mt-u10 {
margin-top: 80px !important; }
.mr-u1 {
margin-right: 8px !important; }
.mr-u2 {
margin-right: 16px !important; }
.mr-u3 {
margin-right: 24px !important; }
.mr-u4 {
margin-right: 32px !important; }
.mr-u5 {
margin-right: 40px !important; }
.mr-u6 {
margin-right: 48px !important; }
.mr-u7 {
margin-right: 56px !important; }
.mr-u8 {
margin-right: 64px !important; }
.mr-u9 {
margin-right: 72px !important; }
.mr-u10 {
margin-right: 80px !important; }
.mb-u1 {
margin-bottom: 8px !important; }
.mb-u2 {
margin-bottom: 16px !important; }
.mb-u3 {
margin-bottom: 24px !important; }
.mb-u4 {
margin-bottom: 32px !important; }
.mb-u5 {
margin-bottom: 40px !important; }
.mb-u6 {
margin-bottom: 48px !important; }
.mb-u7 {
margin-bottom: 56px !important; }
.mb-u8 {
margin-bottom: 64px !important; }
.mb-u9 {
margin-bottom: 72px !important; }
.mb-u10 {
margin-bottom: 80px !important; }
.ml-u1 {
margin-left: 8px !important; }
.ml-u2 {
margin-left: 16px !important; }
.ml-u3 {
margin-left: 24px !important; }
.ml-u4 {
margin-left: 32px !important; }
.ml-u5 {
margin-left: 40px !important; }
.ml-u6 {
margin-left: 48px !important; }
.ml-u7 {
margin-left: 56px !important; }
.ml-u8 {
margin-left: 64px !important; }
.ml-u9 {
margin-left: 72px !important; }
.ml-u10 {
margin-left: 80px !important; }
.pt-u1 {
padding-top: 8px !important; }
.pt-u2 {
padding-top: 16px !important; }
.pt-u3 {
padding-top: 24px !important; }
.pt-u4 {
padding-top: 32px !important; }
.pt-u5 {
padding-top: 40px !important; }
.pt-u6 {
padding-top: 48px !important; }
.pt-u7 {
padding-top: 56px !important; }
.pt-u8 {
padding-top: 64px !important; }
.pt-u9 {
padding-top: 72px !important; }
.pt-u10 {
padding-top: 80px !important; }
.pr-u1 {
padding-right: 8px !important; }
.pr-u2 {
padding-right: 16px !important; }
.pr-u3 {
padding-right: 24px !important; }
.pr-u4 {
padding-right: 32px !important; }
.pr-u5 {
padding-right: 40px !important; }
.pr-u6 {
padding-right: 48px !important; }
.pr-u7 {
padding-right: 56px !important; }
.pr-u8 {
padding-right: 64px !important; }
.pr-u9 {
padding-right: 72px !important; }
.pr-u10 {
padding-right: 80px !important; }
.pb-u1 {
padding-bottom: 8px !important; }
.pb-u2 {
padding-bottom: 16px !important; }
.pb-u3 {
padding-bottom: 24px !important; }
.pb-u4 {
padding-bottom: 32px !important; }
.pb-u5 {
padding-bottom: 40px !important; }
.pb-u6 {
padding-bottom: 48px !important; }
.pb-u7 {
padding-bottom: 56px !important; }
.pb-u8 {
padding-bottom: 64px !important; }
.pb-u9 {
padding-bottom: 72px !important; }
.pb-u10 {
padding-bottom: 80px !important; }
.pl-u1 {
padding-left: 8px !important; }
.pl-u2 {
padding-left: 16px !important; }
.pl-u3 {
padding-left: 24px !important; }
.pl-u4 {
padding-left: 32px !important; }
.pl-u5 {
padding-left: 40px !important; }
.pl-u6 {
padding-left: 48px !important; }
.pl-u7 {
padding-left: 56px !important; }
.pl-u8 {
padding-left: 64px !important; }
.pl-u9 {
padding-left: 72px !important; }
.pl-u10 {
padding-left: 80px !important; }
.pc-disnone {
display: none; }
@media screen and (max-width: 768px) {
.pc-disnone {
display: block; } }
.sp-disnone {
display: block; }
@media screen and (max-width: 768px) {
.sp-disnone {
display: none; } }
.fR {
float: right; }
.fL {
float: left; }
.ff-gothic {
font-family: Century Gothic, "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif; }
.ff-mincho {
font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif; }
.ff-sans-serif {
font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif; }
.ff-serif {
font-family: "Monaco", "Andale Mono", monospace, "Times New Roman", Times, serif; }
.fwN {
font-weight: normal; }
.fwB {
font-weight: bold; }
.ta-r {
text-align: right; }
.ta-c {
text-align: center; }
.ta-l {
text-align: left; } .animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s; }
.animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s; }
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0); }
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); }
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0); } }
@keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0); }
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); }
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0); } }
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom; }
@-webkit-keyframes flash {
from, 50%, to {
opacity: 1; }
25%, 75% {
opacity: 0; } }
@keyframes flash {
from, 50%, to {
opacity: 1; }
25%, 75% {
opacity: 0; } }
.flash {
-webkit-animation-name: flash;
animation-name: flash; } @-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse; }
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1); }
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1); }
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1); }
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1); }
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1); }
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1); }
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1); }
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1); }
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand; }
@-webkit-keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); } }
@keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); } }
.shake {
-webkit-animation-name: shake;
animation-name: shake; }
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0); }
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg); }
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg); }
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg); }
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg); }
50% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0); }
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg); }
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg); }
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg); }
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg); }
50% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake; }
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg); }
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg); }
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg); }
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg); }
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg); }
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg); }
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg); }
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg); }
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); } }
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing; }
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
10%, 20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
10%, 20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.tada {
-webkit-animation-name: tada;
animation-name: tada; } @-webkit-keyframes wobble {
from {
-webkit-transform: none;
transform: none; }
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
to {
-webkit-transform: none;
transform: none; } }
@keyframes wobble {
from {
-webkit-transform: none;
transform: none; }
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
to {
-webkit-transform: none;
transform: none; } }
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble; }
@-webkit-keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none; }
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg); }
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg); }
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg); }
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg); }
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg); }
77.7% {
-webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
transform: skewX(0.39063deg) skewY(0.39063deg); }
88.8% {
-webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
transform: skewX(-0.19531deg) skewY(-0.19531deg); } }
@keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none; }
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg); }
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg); }
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg); }
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg); }
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg); }
77.7% {
-webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
transform: skewX(0.39063deg) skewY(0.39063deg); }
88.8% {
-webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
transform: skewX(-0.19531deg) skewY(-0.19531deg); } }
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center; }
@-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03); }
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97); }
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03); }
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97); }
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn; }
@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0); }
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0); }
to {
-webkit-transform: none;
transform: none; } }
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0); }
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0); }
to {
-webkit-transform: none;
transform: none; } }
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown; }
@-webkit-keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0); }
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); }
to {
-webkit-transform: none;
transform: none; } }
@keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0); }
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); }
to {
-webkit-transform: none;
transform: none; } }
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft; }
@-webkit-keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0); }
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); }
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0); }
to {
-webkit-transform: none;
transform: none; } }
@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0); }
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); }
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0); }
to {
-webkit-transform: none;
transform: none; } }
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight; }
@-webkit-keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0); }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0); }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp; }
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); } }
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); } }
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut; }
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown; }
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft; }
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight; }
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0); }
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp; }
@-webkit-keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
@keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn; }
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown; }
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig; }
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft; }
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig; }
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight; }
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig; }
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp; }
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig; }
@-webkit-keyframes fadeOut {
from {
opacity: 1; }
to {
opacity: 0; } }
@keyframes fadeOut {
from {
opacity: 1; }
to {
opacity: 0; } }
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut; }
@-webkit-keyframes fadeOutDown {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@keyframes fadeOutDown {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown; }
@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
@keyframes fadeOutDownBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig; }
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } }
@keyframes fadeOutLeft {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } }
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft; }
@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
@keyframes fadeOutLeftBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig; }
@-webkit-keyframes fadeOutRight {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } }
@keyframes fadeOutRight {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } }
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight; }
@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
@keyframes fadeOutRightBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig; }
@-webkit-keyframes fadeOutUp {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); } }
@keyframes fadeOutUp {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); } }
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp; }
@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
@keyframes fadeOutUpBig {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig; }
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; } }
@keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-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 {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX; }
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
to {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY; }
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1; }
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0; } }
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1; }
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0; } }
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important; }
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1; }
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0; } }
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1; }
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0; } }
.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY; }
@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0; }
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1; }
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1; }
to {
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0; }
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1; }
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1; }
to {
-webkit-transform: none;
transform: none;
opacity: 1; } }
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
@-webkit-keyframes lightSpeedOut {
from {
opacity: 1; }
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0; } }
@keyframes lightSpeedOut {
from {
opacity: 1; }
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) 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 {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0; }
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0; }
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn; }
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft; }
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight; }
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft; }
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight; }
@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1; }
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0; } }
@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1; }
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0; } }
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut; }
@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; } }
@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; } }
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft; }
@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight; }
@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft; }
@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0; } }
@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0; } }
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight; }
@-webkit-keyframes hinge {
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: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1; }
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0; } }
@keyframes hinge {
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: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1; }
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0; } }
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge; } @-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
to {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn; } @-webkit-keyframes rollOut {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
@keyframes rollOut {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut; }
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
50% {
opacity: 1; } }
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
50% {
opacity: 1; } }
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn; }
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown; }
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft; }
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight; }
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp; }
@-webkit-keyframes zoomOut {
from {
opacity: 1; }
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
to {
opacity: 0; } }
@keyframes zoomOut {
from {
opacity: 1; }
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
to {
opacity: 0; } }
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut; }
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown; }
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center; } }
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center; } }
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft; }
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center; } }
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center; } }
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight; }
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp; }
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown; }
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft; }
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight; }
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible; }
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp; }
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown; }
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } }
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } }
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft; }
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } }
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } }
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight; }
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); } }
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); } }
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp; }
.btnAnimation {
margin: 1em 0.8em;
position: relative;
padding: .65em 1.5em;
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
font-size: 12px;
font-size: 1.2rem; }
@media screen and (max-width: 768px) {
.btnAnimation {
margin: 1em 0;
font-size: 12px;
font-size: 1.2rem; } }
.btnAnimation._cross {
padding: .85em 1.5em;
color: #1d3994; }
.btnAnimation._cross._cross::after, .btnAnimation._cross._cross::before {
content: '';
display: block;
position: absolute;
width: 20%;
height: 40%;
border: 1px solid;
transition: all 0.6s ease;
border-radius: 1px; }
.btnAnimation._cross._cross::after {
bottom: 0;
right: 0;
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: #1d3994;
border-right-color: #1d3994; }
.btnAnimation._cross._cross::before {
top: 0;
left: 0;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: #1d3994;
border-left-color: #1d3994; }
.btnAnimation._cross._cross:hover:after, .btnAnimation._cross._cross:hover:before {
width: 105%;
height: 110%; }
.btnAnimation._topBtm {
color: #1d3994; }
.btnAnimation._topBtm._topBtm:after, .btnAnimation._topBtm._topBtm:before {
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background-color: #1d3994;
transition: all 0.3s ease;
transform: scale(0.85); }
.btnAnimation._topBtm._topBtm:hover:before {
top: 0;
transform: scale(1); }
.btnAnimation._topBtm._topBtm:hover:after {
transform: scale(1); }
.btnAnimation._crossOver {
padding: .5em 1.5em;
color: #1d3994; }
.btnAnimation._crossOver._crossOver::after, .btnAnimation._crossOver._crossOver::before {
content: '';
display: block;
position: absolute;
width: 20%;
height: 20%;
border: 1px solid;
transition: all 0.6s ease;
border-radius: 1px; }
.btnAnimation._crossOver._crossOver::after {
bottom: 0;
right: 0;
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: #1d3994;
border-right-color: #1d3994; }
.btnAnimation._crossOver._crossOver::before {
top: 0;
left: 0;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: #1d3994;
border-left-color: #1d3994; }
.btnAnimation._crossOver._crossOver:hover:after, .btnAnimation._crossOver._crossOver:hover:before {
border-bottom-color: #1d3994;
border-right-color: #1d3994;
border-top-color: #1d3994;
border-left-color: #1d3994;
width: 101%;
height: 104%; }  .bg-gradient1 span, .bg-gradient1:before {
background: #52A0FD;
background: linear-gradient(to right, #52A0FD 0%, #00e2fa 80%, #00e2fa 100%); }
.bg-gradient2 span, .bg-gradient2:before {
background: #44ea76;
background: linear-gradient(to right, #44ea76 0%, #39fad7 80%, #39fad7 100%); }
.bg-gradient3 span, .bg-gradient3:before {
background: #fa6c9f;
background: linear-gradient(to right, #fa6c9f 0%, #ffe140 80%, #ffe140 100%); } .wrapper {
margin: 5% auto;
text-align: center;
-webkit-transform-style: perserve-3d;
transform-style: perserve-3d;
perspecive: 800px; }
a {
text-decoration: none; }
a:hover, a:focus, a:active {
text-decoration: none; } .fancy-button {
display: inline-block;
margin: 30px;
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
font-size: 17px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #ffffff;
position: relative; }
.fancy-button:before {
content: '';
display: inline-block;
height: 40px;
position: absolute;
bottom: -5px;
left: 30px;
right: 30px;
z-index: -1;
border-radius: 30em;
-webkit-filter: blur(20px) brightness(0.95);
filter: blur(20px) brightness(0.95);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all 0.3s ease-out; }
.fancy-button i {
margin-top: -1px;
margin-right: 20px;
font-size: 1.265em;
vertical-align: middle; }
.fancy-button span {
display: inline-block;
padding: 18px 60px;
border-radius: 50em;
position: relative;
z-index: 2;
will-change: transform, filter;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all 0.3s ease-out; }
.fancy-button:focus, .fancy-button:active {
color: #ffffff; }
.fancy-button:hover {
color: #ffffff; }
.fancy-button:hover span {
-webkit-filter: brightness(1.05) contrast(1.05);
filter: brightness(1.05) contrast(1.05);
-webkit-transform: scale(0.95);
transform: scale(0.95); }
.fancy-button:hover:before {
bottom: 0;
-webkit-filter: blur(10px) brightness(0.95);
filter: blur(10px) brightness(0.95); }
.fancy-button.pop-onhover:before {
opacity: 0;
bottom: 10px; }
.fancy-button.pop-onhover:hover:before {
bottom: -7px;
opacity: 1;
-webkit-filter: blur(20px);
filter: blur(20px); }
.fancy-button.pop-onhover:hover span {
-webkit-transform: scale(1.04);
transform: scale(1.04); }
.fancy-button.pop-onhover:hover:active span {
-webkit-filter: brightness(1) contrast(1);
filter: brightness(1) contrast(1);
-webkit-transform: scale(1);
transform: scale(1);
transition: all 0.15s ease-out; }
.fancy-button.pop-onhover:hover:active:before {
bottom: 0;
-webkit-filter: blur(10px) brightness(0.95);
filter: blur(10px) brightness(0.95);
transition: all 0.2s ease-out; }
html {
font-size: 62.5%; }
body {
padding-top: 60px;
box-sizing: border-box;
line-height: 1.4;
color: #333;
font-family: Century Gothic, "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
font-size: 10px;
font-size: 1.0rem;
background: #fff;
-webkit-text-size-adjust: 100%; }
@media screen and (max-width: 768px) {
body {
padding-top: 0; }
body.frontPage {
padding-top: 0; } }
body.frontPage {
padding-top: 0; }
h1 {
font-size: 18px;
font-size: 1.8rem; }
p {
font-size: 16px;
font-size: 1.6rem; }
img {
width: 100%;
height: auto; }
small.supplement {
padding-top: 0.5em;
line-height: 1.4;
font-size: 14px;
font-size: 1.4rem; }
small.supplement.indent {
padding-left: 1em;
display: block;
text-indent: -1em; }
a {
border: none;
color: #1d3994;
text-decoration: none; }
a:hover, a:active {
color: #1d3994;
text-decoration: none; }
a.hover__underline {
border: none;
text-decoration: none; }
a.hover__underline:hover, a.hover__underline:active {
border-bottom: 1px solid;
text-decoration: none; }
a:visited {
color: #1d3994; }
a.hover__opacity img {
opacity: 1; }
a.hover__opacity.opacity-5:hover img, a.hover__opacity.opacity-5:active img {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5; }
a.hover__opacity.opacity-6:hover img, a.hover__opacity.opacity-6:active img {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6; }
a.hover__opacity.opacity-7:hover img, a.hover__opacity.opacity-7:active img {
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7; }
a.hover__opacity.opacity-8:hover img, a.hover__opacity.opacity-8:active img {
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8; }
a.hover__opacity.opacity-9:hover img, a.hover__opacity.opacity-9:active img {
filter: alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9; }
._postMore {
margin-top: 10px;
padding: 0;
box-sizing: border-box;
line-height: 1.8;
font-size: 14px;
font-size: 1.4rem;
text-align: center; }
@media screen and (max-width: 768px) {
._postMore {
margin-top: 5px; } }
._postMore a {
float: right; }
h1.hDescription {
margin: 5px 0 15px;
font-size: 14px;
font-size: 1.4rem;
text-align: center; }
h2.hCommonSty {
margin: 0 0 1.4em;
padding: 1.4em 0 0.7em;
line-height: 1.4;
font-size: 36px;
font-size: 3.6rem;
font-weight: 700;
text-align: center; }
h2.hCommonSty strong.fs-6xl {
line-height: 1;
font-size: 48px;
font-size: 4.8rem; }
h2.hCommonSty strong.fs-7xl {
line-height: 1;
font-size: 72px;
font-size: 7.2rem; }
h2.hCommonSty strong.fc-grn {
color: #009b63; }
h2.hCommonSty strong.fc-blu {
color: #37619C; }
h2.hCommonSty strong.fc-ora {
color: #E74B00; }
h2.hCommonSty.hCommonSty-color-red {
background-image: url(//yotsubain.com/wordpress/wp-content/themes/xxx/images/line_ttl_red.png); }
h2.hCommonSty.hCommonSty-color-grn {
background-image: url(//yotsubain.com/wordpress/wp-content/themes/xxx/images/line_ttl_green.png); }
h2.hCommonSty.hCommonSty-color-blu {
background-image: url(//yotsubain.com/wordpress/wp-content/themes/xxx/images/line_ttl_blue.png); }
h2.hCommonSty.hCommonSty-color-pur {
background-image: url(//yotsubain.com/wordpress/wp-content/themes/xxx/images/line_ttl_purple.png); }
h2.hCommonSty.hCommonSty-color-yel {
background-image: url(//yotsubain.com/wordpress/wp-content/themes/xxx/images/line_ttl_yellow.png); }
h2.hCommonSty.hCommonSty-color-ora {
background-image: url(//yotsubain.com/wordpress/wp-content/themes/xxx/images/line_ttl_orange.png); }
h2.hCommonSty.hCommonSty-color-red, h2.hCommonSty.hCommonSty-color-grn, h2.hCommonSty.hCommonSty-color-blu, h2.hCommonSty.hCommonSty-color-pur, h2.hCommonSty.hCommonSty-color-yel, h2.hCommonSty.hCommonSty-color-ora {
background-repeat: no-repeat;
background-size: 168px 5px;
background-position: center bottom; }
h3.hCommonSty {
margin-bottom: 1em;
border-bottom: 1px dashed #333;
line-height: 1.8;
font-size: 24px;
font-size: 2.4rem; }
h3.hCommonSty::before {
padding-right: 5px;
content: '◆'; }
a.hover--underLine-center {
position: relative;
display: inline-block;
text-decoration: none; }
a.hover--underLine-center::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #1d3994;
transform: scale(0, 1);
transform-origin: center top;
transition: transform .3s; }
a.hover--underLine-center:hover::after {
transform: scale(1, 1); }
.hover--flashing {
border: none;
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden; }
.hover--flashing:hover {
border: none; }
.hover--flashing:hover img {
border: none;
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s; }
@-webkit-keyframes flash {
0% {
opacity: .4; }
100% {
opacity: 1; } }
@keyframes flash {
0% {
opacity: .4; }
100% {
opacity: 1; } }
.sectionInner {
margin: 0 auto;
width: 768px; }
.txtBox {
margin: 0 auto;
width: 96%; }
.txtBox p {
line-height: 1.8;
font-size: 16px;
font-size: 1.6rem; }
.leadTxt p {
padding-bottom: 1em;
line-height: 1.4;
font-size: 14px;
font-size: 1.4rem; }
.anchorTop {
position: fixed;
bottom: 30px;
right: 5%;
width: 48px;
height: 99px; }
.anchorTop .anchorTop__link img {
opacity: 0.7; }
.anchorTop .anchorTop__link:hover img, .anchorTop .anchorTop__link:active img {
opacity: 0.9; }
header.globalHeader {
margin: 0 auto;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: transparent;
z-index: 100; }
@media screen and (max-width: 768px) {
header.globalHeader {
box-shadow: 0px 0px 4px #ddd;
background: #fff; } }
body.frontPage header.globalHeader {
display: none; }
header.globalHeader ._wire._pc {
box-sizing: border-box;
display: block; }
@media screen and (max-width: 768px) {
header.globalHeader ._wire._pc {
display: none; } }
header.globalHeader ._wire._pc ._logoInfo {
margin: 0 auto;
width: 100%;
background: #fff; }
header.globalHeader ._wire._pc ._logoInfo ._inner {
margin: 0 auto;
width: 1040px;
background: #fff; }
header.globalHeader ._wire._pc ._logoInfo ._inner::after {
content: "";
clear: both;
display: block; }
@media screen and (max-width: 1040px) {
header.globalHeader ._wire._pc ._logoInfo ._inner {
width: 90%; } }
header.globalHeader ._wire._pc ._logoInfo ._logo {
margin-top: 4px;
float: left;
width: 220px; }
header.globalHeader ._wire._pc ._logoInfo ._logo img {
width: 100%;
height: auto; }
header.globalHeader ._wire._pc ._logoInfo ._info {
margin-bottom: 8px;
padding: 8px 24px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
float: right;
width: 240px;
background: #4f4c4a;
box-shadow: 2px 2px 4px #ccc; }
header.globalHeader ._wire._pc ._logoInfo ._info ._tel {
padding-bottom: 4px;
display: block; }
header.globalHeader ._wire._pc ._logoInfo ._info ._time::after {
content: "";
clear: both;
display: block; }
header.globalHeader ._wire._pc ._logoInfo ._info ._time dt, header.globalHeader ._wire._pc ._logoInfo ._info ._time dd {
line-height: 1.2;
color: #fff;
font-size: 12px;
font-size: 1.2rem;
letter-spacing: 1px; }
header.globalHeader ._wire._pc ._logoInfo ._info ._time dt {
padding: 0 2% 0 0;
border-right: 1px solid #fff;
box-sizing: border-box;
float: left;
width: 15%; }
header.globalHeader ._wire._pc ._logoInfo ._info ._time dd {
padding: 0 0 0 2%;
float: right;
width: 80%; }
header.globalHeader ._wire._pc ._globalNavi {
margin: 0;
padding: 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
box-sizing: border-box;
width: 100%;
background: #fcfcfc; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu {
margin: 0 auto;
padding: 0;
position: relative;
width: 1040px;
list-style: none;
font-size: 0; }
@media screen and (max-width: 1040px) {
header.globalHeader ._wire._pc ._globalNavi ._ddMenu {
width: 90%; } }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu::after {
content: '';
display: block;
clear: both; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu li {
margin: 0;
padding: 0;
box-sizing: border-box;
float: none;
display: inline-block;
position: relative;
width: calc(100% / 7); }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu li:not(:first-child) {
border-left: none; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu li:last-child {
border-right: none; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu li:hover > ul {
visibility: visible;
opacity: 1;
transform: translateY(0); }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu li a {
padding: 13px 0;
display: block;
width: 100%;
color: #333;
font-size: 14px;
font-size: 1.4rem;
text-align: center; }
@media screen and (max-width: 1000px) {
header.globalHeader ._wire._pc ._globalNavi ._ddMenu li a {
font-size: 12px;
font-size: 1.2rem; } }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu li a:hover, header.globalHeader ._wire._pc ._globalNavi ._ddMenu li a:active {
background: #f7f7f7; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu li ._parent {
padding: 13px 0;
display: block;
width: 100%;
color: #333;
font-size: 14px;
font-size: 1.4rem;
text-align: center; }
@media screen and (max-width: 1000px) {
header.globalHeader ._wire._pc ._globalNavi ._ddMenu li ._parent {
font-size: 12px;
font-size: 1.2rem; } }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu ul {
visibility: hidden;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20px); }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu ._layer2nd {
position: absolute;
top: calc(100% + 1px);
left: 0;
width: 100%; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu ._layer2nd li {
margin: 0;
padding: 0;
border: 1px solid #eee;
border-top: none;
border-bottom: none;
display: block;
width: 100%; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu ._layer2nd li:last-child {
border-bottom: 1px solid #eee; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu ._layer2nd li a {
position: relative;
background: #fcfcfc; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu ._layer2nd li a:hover, header.globalHeader ._wire._pc ._globalNavi ._ddMenu ._layer2nd li a:active {
background: #f7f7f7; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu ._layer2nd ._layer3rd {
position: absolute;
top: 0;
left: 100%;
width: 100%; }
header.globalHeader ._wire._pc ._globalNavi ._ddMenu ._layer2nd ._layer3rd li {
border: none;
display: block; }
header.globalHeader ._wire._sp {
display: none; }
@media screen and (max-width: 768px) {
header.globalHeader ._wire._sp {
display: block;
background: #fff; } }
header.globalHeader ._wire._sp ._inwrap {
width: 100%;
background: #fff; }
header.globalHeader ._wire._sp ._logo {
display: none; }
@media screen and (max-width: 768px) {
header.globalHeader ._wire._sp ._logo {
margin: 6px 0 -2px 2.5%;
display: block;
float: left;
width: 70%;
max-width: 280px; } }
@media screen and (max-width: 768px) {
header.globalHeader ._wire._sp ._globalNavi {
display: none;
position: absolute;
top: 0;
background: white;
width: 100%;
height: 100vh;
overflow-y: scroll; }
header.globalHeader ._wire._sp ._globalNavi ._logo {
margin: 6px 0 2px 2.5%;
display: block;
float: left;
width: 70%;
max-width: 280px;
min-height: 42px; }
header.globalHeader ._wire._sp ._globalNavi ._infoArea {
clear: both;
width: 100%;
box-sizing: border-box; }
header.globalHeader ._wire._sp ._globalNavi ._info {
margin: 0 auto;
padding: 8px calc((100% - 240px) / 2);
border-top: 1px solid #eee;
float: none;
width: 240px;
background: #f7f7f7;
box-shadow: 2px 2px 4px #eee; }
header.globalHeader ._wire._sp ._globalNavi ._info ._address {
margin-bottom: 5px;
line-height: 1.4;
color: #333;
font-size: 12px;
font-size: 1.2rem;
text-align: center;
letter-spacing: 2px; }
header.globalHeader ._wire._sp ._globalNavi ._info ._message {
margin-bottom: 2px;
line-height: 1.2;
color: #009b63;
font-size: 12px;
font-size: 1.2rem;
text-align: center;
letter-spacing: 4px; }
header.globalHeader ._wire._sp ._globalNavi ._info ._tel {
margin-bottom: 5px;
padding: 10px 10px 7px;
border: 2px solid #ffd700;
box-sizing: border-box;
border-radius: 40px;
display: block;
background: #fff; }
header.globalHeader ._wire._sp ._globalNavi ._info ._time::after {
content: "";
clear: both;
display: block; }
header.globalHeader ._wire._sp ._globalNavi ._info ._time dt, header.globalHeader ._wire._sp ._globalNavi ._info ._time dd {
line-height: 1.2;
color: #333;
font-size: 12px;
font-size: 1.2rem; }
header.globalHeader ._wire._sp ._globalNavi ._info ._time dt {
padding: 0 2% 0 0;
border-right: 1px solid #333;
box-sizing: border-box;
float: left;
width: 15%; }
header.globalHeader ._wire._sp ._globalNavi ._info ._time dd {
padding: 0 0 0 2%;
float: right;
width: 80%; }
header.globalHeader ._wire._sp ._globalNavi ._home {
margin: 0 auto 20px;
padding-bottom: 20px;
border-bottom: 1px solid #999;
width: 50%;
display: block; }
header.globalHeader ._wire._sp ._globalNavi ._home a {
margin: 0 auto;
display: block;
width: 70%; }
header.globalHeader ._wire._sp ._globalNavi ._home a img {
width: 100%;
height: auto; }
header.globalHeader ._wire._sp ._globalNavi ._bnrArea {
width: 100%;
font-size: 0; }
header.globalHeader ._wire._sp ._globalNavi ._bnrArea li {
margin: 0;
padding: 0;
display: inline-block;
line-height: 0;
width: 50%;
font-size: 0; }
header.globalHeader ._wire._sp ._globalNavi ._bnrArea li a {
display: block; }
header.globalHeader ._wire._sp ._globalNavi ._bnrArea li a:hover, header.globalHeader ._wire._sp ._globalNavi ._bnrArea li a:active {
opacity: .9; }
header.globalHeader ._wire._sp ._globalNavi ._nav {
margin: 0 auto;
padding: 0;
border-top: 1px solid #eee;
display: block;
clear: both;
width: 100%;
background: rgba(255, 255, 255, 0.15); }
header.globalHeader ._wire._sp ._globalNavi ._nav li {
margin: 0;
border-bottom: 1px solid #eee;
box-sizing: border-box;
display: block;
float: none;
width: 100%; }
header.globalHeader ._wire._sp ._globalNavi ._nav li:last-child {
margin-bottom: 0; }
header.globalHeader ._wire._sp ._globalNavi ._nav li:last-child a {
margin-bottom: 0; }
header.globalHeader ._wire._sp ._globalNavi ._nav li a, header.globalHeader ._wire._sp ._globalNavi ._nav li span {
padding: 1.6em 5%;
display: block;
position: relative;
width: 90%;
color: #333;
font-size: 14px;
font-size: 1.4rem;
text-align: left; }
header.globalHeader ._wire._sp ._globalNavi ._nav li a ._en, header.globalHeader ._wire._sp ._globalNavi ._nav li span ._en {
margin: 8px auto;
padding-top: 5px;
border-top: 1px solid #fff;
display: block;
width: 55%;
font-size: 12px;
font-size: 1.2rem;
letter-spacing: 0; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._trigger::after {
content: '';
margin-top: -10px;
position: absolute;
right: 5%;
top: 50%;
width: 20px;
height: 20px;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/icn_arrow_d.png);
background-repeat: no-repeat;
background-size: 20px 20px; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._trigger._open::after {
content: '';
margin-top: -10px;
position: absolute;
right: 5%;
top: 50%;
width: 20px;
height: 20px;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/icn_arrow_u.png);
background-repeat: no-repeat;
background-size: 20px 20px; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._accordion {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-top: 1px solid #eee;
display: none;
background: #fafafa;
font-size: 0; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._accordion li {
display: inline-block;
width: 50%; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._accordion li a {
padding: 1.6em 10%;
display: block;
width: 80%;
font-size: 14px;
font-size: 1.4rem; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._accordion li:nth-of-type(odd) {
border-right: 1px solid #eee;
box-sizing: border-box; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._accordion li:nth-last-child(2), header.globalHeader ._wire._sp ._globalNavi ._nav li ._accordion li:last-of-type {
border-bottom: none; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._accordion li._col {
width: 100%; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._accordion li._col a {
padding: 1.6em 5%;
width: 90%; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._accordion._irre li:nth-of-type(even) {
border-right: 1px solid #eee;
box-sizing: border-box; }
header.globalHeader ._wire._sp ._globalNavi ._nav li ._accordion._irre li:nth-of-type(odd) {
border-right: none;
box-sizing: border-box; } }
header.globalHeader ._wire._sp .menuTrigger {
display: none; }
@media screen and (max-width: 768px) {
header.globalHeader ._wire._sp .menuTrigger {
margin-right: 0;
display: block;
display: inline-block;
transition: all .4s;
border: 1px solid #8dd1b9;
box-sizing: border-box;
cursor: pointer;
position: relative;
float: right;
width: 50px;
height: 50px;
background: #fff;
z-index: 2; }
header.globalHeader ._wire._sp .menuTrigger span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
background: #8dd1b9;
width: 30px;
height: 2px;
left: 0;
right: 0;
margin: auto; }
header.globalHeader ._wire._sp .menuTrigger span:nth-of-type(1) {
top: 10px; }
header.globalHeader ._wire._sp .menuTrigger span:nth-of-type(2) {
top: -10px;
bottom: 0; }
header.globalHeader ._wire._sp .menuTrigger span:nth-of-type(3) {
bottom: 20px; }
header.globalHeader ._wire._sp .menuTrigger.active span:nth-of-type(1) {
-webkit-transform: translateY(9px) rotate(-45deg);
transform: translateY(8px) rotate(-45deg); }
header.globalHeader ._wire._sp .menuTrigger.active span:nth-of-type(2) {
opacity: 0; }
header.globalHeader ._wire._sp .menuTrigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-9px) rotate(45deg);
transform: translateY(-8px) rotate(45deg); }
header.globalHeader ._wire._sp .menuTrigger ._menu {
position: absolute;
bottom: 2px;
left: 0;
line-height: 1.2;
color: #34AB81;
width: 100%;
font-size: 10px;
font-size: 10px;
text-align: center; } }
section.inclineBlock {
margin: 10% 0;
padding: 80px 0;
position: relative;
overflow: hidden; }
section.inclineBlock._plusDeg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 125%;
height: 70%;
margin: .5% -12% 0;
background: #011931;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
z-index: -1; }
@media screen and (max-width: 1440px) {
section.inclineBlock._plusDeg::before {
margin: 3% -12% 0; } }
@media screen and (max-width: 1040px) {
section.inclineBlock._plusDeg::before {
margin: 4.5% -12% 0; } }
@media screen and (max-width: 768px) {
section.inclineBlock._plusDeg::before {
width: 140%;
height: 90%;
margin: 7.5% -20% 0; } }
section.inclineBlock._plusDeg._bdrTB::before {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: none; }
section.inclineBlock._plusDeg._gradationY::before {
background: -webkit-linear-gradient(0, #ffd700, #fff100);
background: -moz-linear-gradient(0, #ffd700, #fff100);
background: -o-linear-gradient(0, #ffd700, #fff100);
background: linear-gradient(0, #ffd700, #fff100); }
section.inclineBlock._plusDeg._gradationY_ref::before {
background: -webkit-linear-gradient(0, #fff100, #ffd700);
background: -moz-linear-gradient(0, #fff100, #ffd700);
background: -o-linear-gradient(0, #fff100, #ffd700);
background: linear-gradient(0, #fff100, #ffd700); }
section.inclineBlock._plusDeg._gradationYG::before {
background: -webkit-linear-gradient(0, #ffd700 0, #9bba18 7.5%, #00643d 100%);
background: -moz-linear-gradient(0, #ffd700 0, #9bba18 7.5%, #00643d 100%);
background: -o-linear-gradient(0, #ffd700 0, #9bba18 7.5%, #00643d 100%);
background: linear-gradient(0, #ffd700 0, #9bba18 7.5%, #00643d 100%); }
section.inclineBlock._plusDeg._gradationG::before {
background: -webkit-linear-gradient(0, #34AB81 0, #009b63 15%, #00643d 100%);
background: -moz-linear-gradient(0, #34AB81 0, #009b63 15%, #00643d 100%);
background: -o-linear-gradient(0, #34AB81 0, #009b63 15%, #00643d 100%);
background: linear-gradient(0, #34AB81 0, #009b63 15%, #00643d 100%); }
section.inclineBlock._plusDeg._gradationFancyB::before {
background: #52A0FD;
background: -webkit-linear-gradient(to right, #52A0FD 0%, #00e2fa 80%, #00e2fa 100%);
background: -moz-linear-gradient(to right, #52A0FD 0%, #00e2fa 80%, #00e2fa 100%);
background: -o-linear-gradient(to right, #52A0FD 0%, #00e2fa 80%, #00e2fa 100%);
background: linear-gradient(to right, #52A0FD 0%, #00e2fa 80%, #00e2fa 100%); }
section.inclineBlock._plusDeg._gradationFancyG::before {
background: #44ea76;
background: -webkit-linear-gradient(to right, #44ea76 0%, #39fad7 80%, #39fad7 100%);
background: -moz-linear-gradient(to right, #44ea76 0%, #39fad7 80%, #39fad7 100%);
background: -o-linear-gradient(to right, #44ea76 0%, #39fad7 80%, #39fad7 100%);
background: linear-gradient(to right, #44ea76 0%, #39fad7 80%, #39fad7 100%); }
section.inclineBlock._plusDeg._bgG::before {
background: #009b63; }
section.inclineBlock._plusDeg._bgGlgt::before {
background: rgba(52, 171, 129, 0.8); }
section.inclineBlock._plusDeg._bgGdrk::before {
background: #00643d; }
section.inclineBlock._minusDeg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 125%;
height: 70%;
margin: .5% -12% 0;
background: #011931;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
z-index: -1; }
@media screen and (max-width: 1440px) {
section.inclineBlock._minusDeg::before {
margin: 3% -12% 0; } }
@media screen and (max-width: 1040px) {
section.inclineBlock._minusDeg::before {
margin: 4.5% -12% 0; } }
@media screen and (max-width: 768px) {
section.inclineBlock._minusDeg::before {
width: 140%;
height: 90%;
margin: 7.5% -20% 0; } }
section.inclineBlock._minusDeg._gradationY::before {
background: -webkit-linear-gradient(0, #ffd700, #fff100);
background: -moz-linear-gradient(0, #ffd700, #fff100);
background: -o-linear-gradient(0, #ffd700, #fff100);
background: linear-gradient(0, #ffd700, #fff100); }
section.inclineBlock._minusDeg._gradationYG::before {
background: -webkit-linear-gradient(0, #ffd700, #00643d);
background: -moz-linear-gradient(0, #ffd700, #00643d);
background: -o-linear-gradient(0, #ffd700, #00643d);
background: linear-gradient(0, #ffd700, #00643d); }
section.inclineBlock._cross::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 80%;
margin: 3% -10% 0;
background: #011931;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
z-index: -1; }
@media screen and (max-width: 1440px) {
section.inclineBlock._cross::before {
margin: 3% -12% 0; } }
@media screen and (max-width: 1040px) {
section.inclineBlock._cross::before {
margin: 4.5% -12% 0; } }
@media screen and (max-width: 768px) {
section.inclineBlock._cross::before {
width: 140%;
height: 90%;
margin: 7.5% -20% 0; } }
section.inclineBlock._cross::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 80%;
margin: 3% -10% 0;
background: #df6209;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
z-index: -2; }
@media screen and (max-width: 1440px) {
section.inclineBlock._cross::after {
margin: 3% -12% 0; } }
@media screen and (max-width: 1040px) {
section.inclineBlock._cross::after {
margin: 4.5% -12% 0; } }
@media screen and (max-width: 768px) {
section.inclineBlock._cross::after {
width: 130%;
height: 90%;
margin: 7.5% -15% 0; } }
section.inclineBlock ._inwrap {
margin: 0 auto;
padding: 12% 0 18%;
box-sizing: border-box;
width: 1040px;
height: 100%;
color: #fff;
text-align: center; }
@media screen and (max-width: 1040px) {
section.inclineBlock ._inwrap {
width: 90%; } }
.animation {
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 100%;
background: #fff;
overflow: hidden; }
.animation._bdrOpacity img {
border: 0 solid #fff;
box-sizing: border-box;
-webkit-transition: .1s all ease-in-out;
transition: .1s all ease-in-out; }
.animation._bdrOpacity:hover img, .animation._bdrOpacity:active img {
border: 4px solid #fff;
box-sizing: border-box;
-webkit-transition: .1s all ease-in-out;
transition: .1s all ease-in-out; }
@media screen and (max-width: 768px) {
.animation._bdrOpacity:hover img, .animation._bdrOpacity:active img {
border: 2px solid #fff; } }
.animation._blur img {
-webkit-filter: blur(0);
filter: blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out; }
.animation._blur:hover img, .animation._blur:active img {
box-sizing: border-box;
-webkit-filter: blur(1px);
filter: blur(1px); }
.animation._opacity img {
opacity: 1; }
.animation._opacity:hover, .animation._opacity:active {
opacity: .5; }
.marker._yellow {
background: linear-gradient(transparent 70%, #fff100 70%); }
.wlineWire {
margin: 0 auto;
padding: 20px 5%;
position: relative;
width: 90%;
height: 90%; }
.wlineWire::before {
content: '';
margin-top: -5px;
margin-right: -5px;
border: 1px dashed rgba(51, 51, 51, 0.5);
box-sizing: border-box;
display: block;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%; }
.wlineWire::after {
content: '';
margin-bottom: -5px;
margin-left: -5px;
border: 1px dashed rgba(51, 51, 51, 0.5);
box-sizing: border-box;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%; }
footer.globalFooter {
margin-top: 80px;
border-top: 1px solid #eee;
box-sizing: border-box;
width: 100%;
background: #fff; }
@media screen and (max-width: 768px) {
footer.globalFooter {
margin-top: 0; } }
.frontPage footer.globalFooter {
margin-top: 0; }
footer.globalFooter ._inwrap {
margin: 24px auto;
width: 1040px; }
footer.globalFooter ._inwrap::after {
content: "";
clear: both;
display: block; }
@media screen and (max-width: 1040px) {
footer.globalFooter ._inwrap {
width: 90%; } }
@media screen and (max-width: 768px) {
footer.globalFooter ._inwrap {
margin: 24px auto;
width: 80%; } }
footer.globalFooter ._infoArea {
float: left;
width: 30%; }
@media screen and (max-width: 1040px) {
footer.globalFooter ._infoArea {
width: 35%; } }
@media screen and (max-width: 768px) {
footer.globalFooter ._infoArea {
float: none;
width: 100%; } }
footer.globalFooter ._logo {
margin: 0;
padding: 0 0 8px;
width: 100%; }
footer.globalFooter ._address {
margin: 0 0 8px;
line-height: 1.4;
font-size: 12px;
font-size: 1.2rem;
text-align: center;
letter-spacing: 10px; }
footer.globalFooter ._items {
margin-bottom: 8px;
width: 100%; }
footer.globalFooter ._items::after {
content: "";
clear: both;
display: block; }
footer.globalFooter ._items ._traffic, footer.globalFooter ._items ._insurance {
padding: 3px 0;
color: #fff;
width: 48.5%;
font-size: 18px;
font-size: 1.8rem;
font-weight: 800;
text-align: center;
letter-spacing: 2px; }
footer.globalFooter ._items ._traffic {
border: 1px solid #ffd700;
box-sizing: border-box;
float: left;
background: #ffd700; }
footer.globalFooter ._items ._insurance {
border: 1px solid #8dd1b9;
box-sizing: border-box;
float: right;
background: #8dd1b9; }
footer.globalFooter ._table {
margin: 0 0 4px;
padding: 0;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
box-sizing: border-box; }
footer.globalFooter ._table th, footer.globalFooter ._table td {
padding: 4px 0;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
line-height: 1.2;
color: #333;
width: 10%;
font-size: 14px;
font-size: 14px;
text-align: center;
vertical-align: middle; }
footer.globalFooter ._table th {
background: #f7f7f7; }
footer.globalFooter ._table th:first-child {
width: calc(100% / 3); }
footer.globalFooter ._table th:last-child {
width: calc(100% / 2); }
footer.globalFooter ._table td {
background: #fff; }
footer.globalFooter ._caution {
margin: 0 0 24px;
padding: 0;
width: 100%;
font-size: 0; }
footer.globalFooter ._caution::after {
content: "";
clear: both;
display: block; }
footer.globalFooter ._caution dt, footer.globalFooter ._caution dd {
float: left;
line-height: 1.4;
font-size: 12px;
font-size: 1.2rem; }
footer.globalFooter ._caution dt {
margin-right: .5em;
padding: 0 2px;
color: #fff;
background: #34AB81; }
footer.globalFooter ._tel {
width: 100%; }
footer.globalFooter ._menuArea {
margin-top: -48px;
padding: 5%;
border: 1px solid #eee;
float: right;
width: 50%;
background: #fdfdfd;
box-shadow: 4px 4px 8px #f3f3f3; }
footer.globalFooter ._menuArea::after {
content: "";
clear: both;
display: block; }
@media screen and (max-width: 768px) {
footer.globalFooter ._menuArea {
display: none; } }
footer.globalFooter ._menuArea ._menu {
margin: 0;
float: left;
width: 45%; }
footer.globalFooter ._menuArea ._symptom {
margin: 0;
float: right;
width: 45%; }
footer.globalFooter ._menuArea ._ttl {
margin-bottom: 10px;
padding-bottom: 4px;
border-bottom: 1px dashed #aaa;
box-sizing: border-box;
line-height: 1.8;
text-align: left; }
footer.globalFooter ._menuArea ._ttl a {
color: #333;
font-size: 18px;
font-size: 1.8rem;
font-weight: 800;
text-align: left; }
footer.globalFooter ._menuArea ._ttl a::hover, footer.globalFooter ._menuArea ._ttl a:active {
color: #333;
text-decoration: underline; }
footer.globalFooter ._menuArea ._list li {
margin-bottom: .75em;
padding-left: 1em;
text-align: left; }
footer.globalFooter ._menuArea ._list li a {
line-height: 1.4;
color: #333;
font-size: 16px;
font-size: 1.6rem; }
footer.globalFooter ._menuArea ._list li a:hover, footer.globalFooter ._menuArea ._list li a:active {
text-decoration: underline; }
footer.globalFooter ._menuArea ._list li::before {
content: '∟';
padding-right: .5em;
line-height: 1.4;
color: #999;
font-size: 16px;
font-size: 1.6rem; }
footer.globalFooter ._copyright {
margin: 0 auto;
padding: 20px 0;
display: block;
width: 100%;
color: #333;
background: #f7f7f7;
font-size: 10px;
font-size: 1rem;
text-align: center; }
footer.globalFooter ._convBar {
display: none; }
@media screen and (max-width: 768px) {
footer.globalFooter ._convBar {
display: block; } }
main.mainCont {
width: 100%; }
main.mainCont.underlayCont .pageTtl {
margin: 0;
position: relative;
border: none;
width: 100%;
height: 360px;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/contact/fv_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont .pageTtl {
height: 200px; } }
main.mainCont.underlayCont .pageTtl::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.25); }
main.mainCont.underlayCont .pageTtl ._ttl {
margin-top: -8px;
position: absolute;
top: 55%;
left: 0;
color: #fff;
width: 100%;
font-size: 36px;
font-size: 3.6rem;
text-align: center; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont .pageTtl ._ttl {
margin-top: -12px;
top: 60%;
line-height: 1.4;
font-size: 24px;
font-size: 2.4rem; } }
main.mainCont.underlayCont .pageTtl ._ttl ._en {
display: block;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont .pageTtl ._ttl ._en {
font-size: 12px;
font-size: 1.2rem; } }
main.mainCont.underlayCont .pageTtl._menu {
background-image: url(//yotsubain.com/wp/wp-content/themes/images/menu/fv_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover; }
main.mainCont.underlayCont .pageTtl._staff {
background-image: url(//yotsubain.com/wp/wp-content/themes/images/staff/fv_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover; }
main.mainCont.underlayCont .pageTtl._price {
background-image: url(//yotsubain.com/wp/wp-content/themes/images/price/fv_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover; }
main.mainCont.underlayCont .pageTtl._access {
background-image: url(//yotsubain.com/wp/wp-content/themes/images/access/fv_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover; }
main.mainCont.underlayCont .pageTtl._post {
background-image: url(//yotsubain.com/wp/wp-content/themes/images/post/fv_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover; }
main.mainCont.underlayCont .pageTtl._contact {
background-image: url(//yotsubain.com/wp/wp-content/themes/images/contact/fv_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover; }
main.mainCont.underlayCont .pageTtl._symptom {
background-image: url(//yotsubain.com/wp/wp-content/themes/images/symptom/fv_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover; }
main.mainCont.underlayCont .pageTtl._treatment {
background-image: url(//yotsubain.com/wp/wp-content/themes/images/treatment/fv_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover; }
main.mainCont.underlayCont .pageTtl._privacy {
background-image: url(//yotsubain.com/wp/wp-content/themes/images/privacy/fv_bg.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover; }
main.mainCont.underlayCont .pageTtl._notfound {
background-image: url(//yotsubain.com/wp/wp-content/themes/images/404/fv_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover; }
main.mainCont.underlayCont .pageTtl ._ttl ._en {
display: block;
text-transform: uppercase; }
main.mainCont.underlayCont .breadcrumbs {
margin: 0 auto 80px;
padding: 5px 0;
border-bottom: 1px solid #eee;
box-sizing: border-box;
line-height: 1.4;
width: 100%;
background: #fff;
font-size: 12px;
font-size: 1.2rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont .breadcrumbs {
margin: 0 0 40px;
padding: 0;
position: relative;
width: 100%; } }
main.mainCont.underlayCont .breadcrumbs ._frame {
margin: 0 auto;
width: 1040px; }
@media screen and (max-width: 1040px) {
main.mainCont.underlayCont .breadcrumbs ._frame {
padding: 5px 1%;
width: 98%; } }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont .breadcrumbs ._frame {
margin: 0 auto;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
overflow-x: scroll; } }
main.mainCont.underlayCont .breadcrumbs ._frame::-webkit-scrollbar {
display: none; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont .breadcrumbs ._frame::after {
display: block;
content: "";
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/bread_right.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%; } }
main.mainCont.underlayCont .breadcrumbs ._inner {
padding: 5px 0; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont .breadcrumbs ._inner {
padding: 8px 5% 8px 3.5%;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content; } }
main.mainCont.underlayCont .breadcrumbs ._inner li {
margin: 0;
padding: 0;
display: inline;
list-style: none;
font-size: 12px;
font-size: 1.2rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont .breadcrumbs ._inner li {
line-height: 1.4;
font-size: 11px;
font-size: 1.1rem; } }
main.mainCont.underlayCont .breadcrumbs ._inner li::after {
content: '>';
padding: 0 0 0 0.5em;
font-size: 12px;
font-size: 1.2rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont .breadcrumbs ._inner li::after {
font-size: 11px;
font-size: 1.1rem; } }
main.mainCont.underlayCont .breadcrumbs ._inner li:last-child {
padding-right: 1em; }
main.mainCont.underlayCont .breadcrumbs ._inner li:last-child::after {
display: none; }
main.mainCont.underlayCont .breadcrumbs ._inner li a, main.mainCont.underlayCont .breadcrumbs ._inner li span {
line-height: 1.4;
font-size: 12px;
font-size: 1.2rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont .breadcrumbs ._inner li a, main.mainCont.underlayCont .breadcrumbs ._inner li span {
line-height: 1.4;
font-size: 11px;
font-size: 1.1rem; } }
main.mainCont.underlayCont .breadcrumbs a:hover, main.mainCont.underlayCont .breadcrumbs a:active {
border-bottom: 1px solid; }
main.mainCont.underlayCont ._wrap {
margin: 0 auto 120px;
width: 1040px; }
main.mainCont.underlayCont ._wrap::after {
content: "";
clear: both;
display: block; }
@media screen and (max-width: 1040px) {
main.mainCont.underlayCont ._wrap {
width: 90%; } }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._wrap {
margin: 0 auto 60px; } }
main.mainCont.underlayCont ._content {
position: relative;
float: left;
width: 64%; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content {
margin: 0 auto 60px;
float: none;
width: 100%; } }
main.mainCont.underlayCont ._content._page {
float: none;
width: 100%; }
main.mainCont.underlayCont ._content._page ._404Ttl {
margin: 0 0 40px;
padding: 25px;
border-left: 1px solid #d3b77a;
box-sizing: border-box;
line-height: 1.4;
background: #f7f7f7;
font-size: 18px;
font-size: 1.8rem;
text-align: left; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._page ._404Ttl {
padding: 15px;
font-size: 16px;
font-size: 1.6rem; } }
main.mainCont.underlayCont ._content._page ._lead {
margin: 0 auto 60px;
line-height: 1.8;
width: 95%;
font-size: 16px;
font-size: 16px; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._page ._lead {
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._content._post {
font-size: 0; }
main.mainCont.underlayCont ._content._post ._detaTtl {
margin: 0 0 40px;
padding: 25px;
border-left: 1px solid #d3b77a;
box-sizing: border-box;
line-height: 1.4;
background: #f7f7f7;
font-size: 18px;
font-size: 1.8rem;
text-align: left; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._detaTtl {
padding: 15px;
font-size: 16px;
font-size: 1.6rem; } }
.symArcPage main.mainCont.underlayCont ._content._post ._detaTtl {
margin-bottom: 20px;
border-left: 1px solid #8dd1b9; }
.treArcPage main.mainCont.underlayCont ._content._post ._detaTtl {
margin-bottom: 20px;
border-left: 1px solid #4765C7; }
main.mainCont.underlayCont ._content._post ._lead {
margin: 0 auto 60px;
line-height: 1.6;
width: 95%;
font-size: 14px;
font-size: 14px; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._lead {
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._content._post ._ttl {
margin-bottom: 26px;
padding: 25px 40px;
border: 2px solid #4f4c4a;
border-right: 2px solid #fff100;
border-left: 2px solid #fff100;
border-radius: 50px;
line-height: 1.2;
color: #4f4c4a;
font-size: 20px;
font-size: 2.0rem;
text-align: left;
box-shadow: 2px 2px 4px #eee; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._ttl {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #4f4c4a;
border-right: 1px solid #fff100;
border-left: 1px solid #fff100;
border-radius: 48px;
font-size: 14px;
font-size: 1.4rem; } }
.symArcPage main.mainCont.underlayCont ._content._post ._ttl {
border: 2px solid #8dd1b9;
border-right: 2px solid #fff100;
border-left: 2px solid #fff100; }
.treArcPage main.mainCont.underlayCont ._content._post ._ttl {
border: 2px solid #4765C7;
border-right: 2px solid #fff100;
border-left: 2px solid #fff100; }
main.mainCont.underlayCont ._content._post ._ttl a {
color: #4f4c4a; }
main.mainCont.underlayCont ._content._post ._ttl a:hover, main.mainCont.underlayCont ._content._post ._ttl a:active {
text-decoration: none; }
main.mainCont.underlayCont ._content._post ._date {
position: absolute;
top: -26px;
right: 42px;
font-size: 0; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._date {
top: -20px;
right: 28px; } }
main.mainCont.underlayCont ._content._post ._date ._time {
margin-right: 0;
padding: .5em 1.5em;
line-height: 1.2;
display: inline-block;
color: #4f4c4a;
background: #d3b77a;
font-size: 12px;
font-size: 1.2rem;
text-align: center; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._date ._time {
padding: .5em 1em .3em;
font-size: 10px;
font-size: 1rem; } }
main.mainCont.underlayCont ._content._post ._date ._category {
padding: .5em 1.5em;
line-height: 1.2;
display: inline-block;
color: #d3b77a;
min-width: 4.5em;
background: #4f4c4a;
font-size: 12px;
font-size: 1.2rem;
text-align: center; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._date ._category {
padding: .5em 1em .3em;
font-size: 10px;
font-size: 1rem; } }
.symArcPage main.mainCont.underlayCont ._content._post ._date ._category {
color: #fff;
background: #8dd1b9; }
.treArcPage main.mainCont.underlayCont ._content._post ._date ._category {
color: #fff;
background: #4765C7; }
main.mainCont.underlayCont ._content._post ._frame {
padding: 40px;
border: 1px solid #4f4c4a;
border-radius: 40px;
box-shadow: 2px 2px 4px #ccc;
position: relative; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._frame {
padding: 2.5em;
border: 1px solid #4f4c4a;
border-radius: 8px; } }
main.mainCont.underlayCont ._content._post ._frame img {
width: auto;
height: auto; }
main.mainCont.underlayCont ._content._post ._frame::before {
content: '';
border-left: 1px solid #4f4c4a;
box-sizing: border-box;
position: absolute;
left: 20%;
top: -27px;
width: 2px;
height: 27px; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._frame::before {
border-left: 1px solid #4f4c4a;
top: -22px;
height: 22px; } }
main.mainCont.underlayCont ._content._post ._frame::after {
content: '';
border-right: 1px solid #4f4c4a;
box-sizing: border-box;
position: absolute;
right: 20%;
top: -27px;
width: 2px;
height: 27px; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._frame::after {
border-right: 1px solid #4f4c4a;
top: -22px;
height: 22px; } }
main.mainCont.underlayCont ._content._post ._frame p {
line-height: 2.4;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._frame p {
padding: 20px;
line-height: 2;
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._content._post ._frame p img {
width: auto;
height: auto; }
main.mainCont.underlayCont ._content._post ._postList {
margin-bottom: 20px;
position: relative;
vertical-align: top; }
.symArcPage main.mainCont.underlayCont ._content._post ._postList, .treArcPage main.mainCont.underlayCont ._content._post ._postList {
margin: 0 1% 20px;
display: inline-block;
width: 48%; }
main.mainCont.underlayCont ._content._post ._postList ._ttl {
background-color: rgba(255, 255, 255, 0.3);
background-size: 50%;
background-repeat: no-repeat;
background-position: right center;
background-background-blend-mode: overlay; }
main.mainCont.underlayCont ._content._post ._previousNextLink {
padding-top: 40px;
clear: both; }
main.mainCont.underlayCont ._content._post ._previousNextLink::after {
content: "";
clear: both;
display: block; }
main.mainCont.underlayCont ._content._post ._previousNextLink ._previous a, main.mainCont.underlayCont ._content._post ._previousNextLink ._next a {
padding: 10px 20px;
border: 1px solid #d3b77a;
box-sizing: border-box;
border-radius: 5px;
display: inline;
color: #d3b77a;
font-size: 14px;
font-size: 1.4rem;
background: #fff; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._post ._previousNextLink ._previous a, main.mainCont.underlayCont ._content._post ._previousNextLink ._next a {
font-size: 12px;
font-size: 1.2rem; } }
main.mainCont.underlayCont ._content._post ._previousNextLink ._previous a:hover, main.mainCont.underlayCont ._content._post ._previousNextLink ._previous a:active, main.mainCont.underlayCont ._content._post ._previousNextLink ._next a:hover, main.mainCont.underlayCont ._content._post ._previousNextLink ._next a:active {
color: #fff;
background: #d3b77a; }
main.mainCont.underlayCont ._content._post ._previousNextLink ._previous {
float: right;
width: 47.5%; }
main.mainCont.underlayCont ._content._post ._previousNextLink ._previous a {
float: left; }
main.mainCont.underlayCont ._content._post ._previousNextLink ._next {
float: left;
width: 47.5%; }
main.mainCont.underlayCont ._content._post ._previousNextLink ._next a {
float: right; }
main.mainCont.underlayCont ._content._post .pagination {
margin-top: 40px; }
main.mainCont.underlayCont ._content._post .pagination ul {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: stretch;
align-items: stretch; }
main.mainCont.underlayCont ._content._post .pagination ul li {
margin: 0; }
main.mainCont.underlayCont ._content._post .pagination ul li span {
border: 1px solid #d3b77a;
box-sizing: border-box;
display: none;
line-height: 40px;
font-size: 14px;
font-size: 1.4rem;
text-align: center; }
body.symArcPage main.mainCont.underlayCont ._content._post .pagination ul li span {
border: 1px solid #8dd1b9; }
body.treArcPage main.mainCont.underlayCont ._content._post .pagination ul li span {
border: 1px solid #4765C7; }
main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers {
border-top: 1px solid #d3b77a;
border-bottom: 1px solid #d3b77a;
border-left: 1px solid #d3b77a;
box-sizing: border-box;
display: block;
line-height: 40px;
width: 40px;
height: 40px;
color: #4f4c4a;
font-size: 14px;
font-size: 1.4rem;
text-align: center;
transition: none; }
main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers:hover, main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers:active {
color: #fff;
background: #d3b77a;
transition: none; }
main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers.current {
color: #fff;
background: #d3b77a; }
body.symArcPage main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers {
border-top: 1px solid #8dd1b9;
border-bottom: 1px solid #8dd1b9;
border-left: 1px solid #8dd1b9; }
body.symArcPage main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers:hover, body.symArcPage main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers:active {
color: #fff;
background: #8dd1b9; }
body.symArcPage main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers.current {
color: #fff;
background: #8dd1b9; }
body.treArcPage main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers {
border-top: 1px solid #4765C7;
border-bottom: 1px solid #4765C7;
border-left: 1px solid #4765C7; }
body.treArcPage main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers:hover, body.treArcPage main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers:active {
color: #fff;
background: #4765c7; }
body.treArcPage main.mainCont.underlayCont ._content._post .pagination ul li .page-numbers.current {
color: #fff;
background: #4765C7; }
main.mainCont.underlayCont ._content._post .pagination ul li:last-of-type span, main.mainCont.underlayCont ._content._post .pagination ul li:last-of-type a {
border-right: 1px solid #d3b77a; }
body.symArcPage main.mainCont.underlayCont ._content._post .pagination ul li:last-of-type span, body.symArcPage main.mainCont.underlayCont ._content._post .pagination ul li:last-of-type a {
border-right: 1px solid #8dd1b9; }
body.treArcPage main.mainCont.underlayCont ._content._post .pagination ul li:last-of-type span, body.treArcPage main.mainCont.underlayCont ._content._post .pagination ul li:last-of-type a {
border-right: 1px solid #4765C7; }
main.mainCont.underlayCont ._content._symptomCont {
float: left;
width: 64%;
font-size: 0; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont {
margin-bottom: 60px;
float: none;
width: 100%; } }
main.mainCont.underlayCont ._content._symptomCont ._article {
padding: 40px;
border: 2px solid #8dd1b9;
box-sizing: border-box;
border-radius: 30px;
width: 100%;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/bg_pat_dia_grn.png);
background-repeat: repeat;
background-position: left top;
background-size: 200px 200px; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article {
padding: 25px 20px;
border: 1px solid #009b63;
border-radius: 20px; } }
main.mainCont.underlayCont ._content._symptomCont ._article ._time {
line-height: 1.6;
font-size: 14px;
font-size: 1.4rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article ._time {
font-size: 12px;
font-size: 1.2rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article ._category {
margin-left: .75em;
padding: 2px;
border: 1px solid #009b63;
box-sizing: border-box;
color: #009b63;
font-size: 14px;
font-size: 1.4rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article ._category {
margin-left: .5em;
padding: 2px;
font-size: 10px;
font-size: 1rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article ._ttl {
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
border-left: 8px solid #eee;
box-sizing: border-box;
line-height: 1.4;
color: #009b63;
background: #f7f7f7;
font-size: 24px;
font-size: 2.4rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article ._ttl {
margin-top: 0;
line-height: 1.2;
font-size: 22px;
font-size: 2.2rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article ._txtArea {
line-height: 1.8;
font-size: 16px;
font-size: 1.6rem; }
main.mainCont.underlayCont ._content._symptomCont ._article ._txtArea p {
line-height: 1.8;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article ._txtArea p {
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article ._txtArea img {
padding: 8px 0;
display: block;
width: 100%;
height: auto; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom ._ttl {
margin-bottom: 20px;
padding: 15px 20px;
border-left: 8px solid #8dd1b9;
box-sizing: border-box;
background: none;
line-height: 1.2;
color: #333;
font-size: 30px;
font-size: 3.0rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom ._ttl {
padding: 8px 15px;
border-left: 4px solid #8dd1b9;
line-height: 1.4;
font-size: 20px;
font-size: 2.0rem;
text-align: left; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom ._ttl ._kana {
font-size: 22px;
font-size: 2.2rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom ._ttl ._kana {
display: block;
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section {
margin: 0 0 60px;
padding: 0; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section:last-child {
margin-bottom: 0; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check {
margin-top: 20px; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._example {
margin: 0 0 20px;
padding: 0;
line-height: 1.4;
font-size: 14px;
font-size: 1.4rem;
text-align: left; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._subTtl {
margin: 0 auto 20px;
padding: 20px;
border-radius: 10px;
box-sizing: border-box;
display: inline-block;
position: relative;
line-height: 1.2;
color: #fff;
background: #8dd1b9;
font-size: 16px;
font-size: 1.6rem;
text-align: center;
box-shadow: 2px 2px 4px #eee; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._subTtl {
margin: 0 auto 20px;
display: block; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._subTtl::before {
content: '';
border-left: 1px solid #8dd1b9;
position: absolute;
left: 20%;
bottom: -20px;
width: 1px;
height: 20px; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._subTtl::after {
content: '';
border-left: 1px solid #8dd1b9;
position: absolute;
right: 20%;
bottom: -20px;
width: 1px;
height: 20px; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._checkList {
padding: 10px;
border: 4px solid #8dd1b9;
border-radius: 10px;
box-sizing: border-box;
position: relative;
box-shadow: 2px 2px 4px #eee;
background: #fff; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._checkList {
padding: 10px 20px; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._checkList::before {
content: '＼以下の症状が出ている方は一度ご相談ください／';
position: absolute;
right: 0;
top: -22px;
line-height: 1.4;
width: 100%;
color: #999;
font-size: 14px;
font-size: 1.4rem;
text-align: right; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._checkList::before {
display: none; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._checkList li {
margin: 20px auto;
padding-left: 40px;
position: relative;
line-height: 1.8;
width: calc(90% - 40px);
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._checkList li {
padding-left: 30px;
line-height: 1.6;
width: calc(100% - 30px);
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._checkList li::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 39px;
height: 27px;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/symptom/icn_checkbox.png);
background-repeat: no-repeat;
background-size: 39px 27px; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._check ._checkList li::before {
top: 1px;
width: 28px;
height: 19px;
background-size: 28px 19px; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._about ._subTtl {
margin-bottom: 20px;
padding: 12px 20px;
line-height: 1.2;
color: #fff;
background: #34AB81;
font-size: 26px;
font-size: 2.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._about ._subTtl {
padding: 10px 15px;
margin-bottom: 10px;
padding-bottom: 10px;
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._about ._description {
margin: 0 auto 20px;
line-height: 1.8;
width: 95%;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._about ._description {
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._about ._img {
width: 100%;
height: auto; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._trouble {
padding: 2%;
border-radius: 10px;
width: 96%;
background: #eee; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._trouble {
padding: 2% 5%;
width: 90%; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._trouble ._subTtl {
margin: 20px 0;
padding-bottom: 12px;
padding-left: 10px;
line-height: 1.2;
color: #009b63;
font-size: 24px;
font-size: 2.4rem;
text-align: center; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._trouble ._subTtl {
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._trouble ._list {
margin: 0;
padding: 0;
width: 100%; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._trouble ._list li {
margin-bottom: 10px;
padding: 15px 20px 15px 70px;
border-radius: 7px;
line-height: 1.5;
background-color: #fff;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/symptom/icn_waterdrop.png);
background-repeat: no-repeat;
background-position: 2.5% center;
background-size: 40px 40px;
font-size: 18px;
font-size: 1.8rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._trouble ._list li {
padding: 2.5% 2% 2.5% 35px;
font-size: 14px;
font-size: 1.4rem;
background-color: #fff;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/symptom/icn_waterdrop.png);
background-repeat: no-repeat;
background-position: 2.5% center;
background-size: 25px 25px; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._reason ._subTtl {
margin-bottom: 20px;
padding: 12px 20px;
line-height: 1.2;
color: #fff;
background: #34AB81;
font-size: 26px;
font-size: 2.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._reason ._subTtl {
padding: 10px 15px;
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._reason ._img {
float: left;
width: 66.42%; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._reason ._img {
margin: 0 auto;
float: none;
width: 80%; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._reason ._img img {
width: 100%;
height: auto; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._reason ._description {
margin: 0 auto;
clear: both;
line-height: 1.8;
width: 95%;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._reason ._description {
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._subTtl {
margin-bottom: 40px;
padding: 20px 0;
border-radius: 7px;
position: relative;
line-height: 1.2;
color: #ffffbf;
background: #009b63;
font-size: 26px;
font-size: 2.6rem;
text-align: center; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._subTtl {
margin-bottom: 25px;
font-size: 20px;
font-size: 2.0rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._img {
float: left;
width: 45%; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._img {
margin: 0 auto 20px;
float: none;
width: 75%; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._img img {
width: 100%;
height: auto; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._txt {
float: right;
line-height: 1.8;
width: 50%;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._txt {
margin: 0 auto;
float: none;
width: 100%;
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._pointList {
margin: 0 auto 30px;
padding-top: 35px;
clear: both;
width: 92.85%; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._pointList {
width: 100%; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._pointList li {
margin-bottom: 10px;
padding: 15px 20px 15px 70px;
border: 2px solid #009b63;
border-radius: 7px;
box-sizing: border-box;
line-height: 1.5;
color: #009b63;
background-color: #fff;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/icn_power_g.png);
background-repeat: no-repeat;
background-position: 2.5% center;
background-size: 40px 40px;
font-size: 18px;
font-size: 1.8rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._pointList li {
padding: 20px 2% 20px 45px;
font-size: 14px;
font-size: 1.4rem;
background-color: #fff;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/icn_power_g.png);
background-repeat: no-repeat;
background-position: 3% center;
background-size: 30px 30px; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._description {
margin: 0 auto;
line-height: 1.8;
width: 95%;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._clinic ._description {
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention {
margin-bottom: 0; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._subTtl {
margin-bottom: 20px;
padding: 12px 20px;
line-height: 1.2;
color: #fff;
background: #34AB81;
font-size: 26px;
font-size: 2.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._subTtl {
padding: 10px 15px;
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._preventionList {
margin: 0 auto;
width: 95%; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._preventionList li {
margin: 0 0 1em;
padding-left: 3em;
line-height: 1.6;
color: #333;
font-size: 16px;
font-size: 1.6rem;
text-indent: -3em; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._preventionList li {
padding-left: 2.65em;
font-size: 14px;
font-size: 1.4rem;
text-indent: -2.65em; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._preventionList li::before {
color: #009b63;
font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-size: 24px;
font-size: 2.4rem;
font-weight: 800;
font-style: italic; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._preventionList li::before {
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._preventionList li:first-child::before {
content: '１．'; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._preventionList li:nth-of-type(2)::before {
content: '２．'; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._preventionList li:nth-of-type(3)::before {
content: '３．'; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._preventionList li:nth-of-type(4)::before {
content: '４．'; }
main.mainCont.underlayCont ._content._symptomCont ._article._symptom section._prevention ._preventionList li:nth-of-type(5)::before {
content: '５．'; }
main.mainCont.underlayCont ._content._symptomCont ._articleList {
margin: 0 0 20px;
padding: 20px;
border: 2px solid #009b63;
box-sizing: border-box;
border-radius: 15px;
display: inline-block;
width: 48.38%;
vertical-align: top; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._articleList {
margin: 0 auto 20px;
border: 1px solid #009b63;
border-radius: 7px;
display: block;
width: 90%; } }
main.mainCont.underlayCont ._content._symptomCont ._articleList:nth-child(odd) {
margin-right: 1.62%; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._articleList:nth-child(odd) {
margin-right: auto; } }
main.mainCont.underlayCont ._content._symptomCont ._articleList:nth-child(even) {
margin-left: 1.62%; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._articleList:nth-child(even) {
margin-left: auto; } }
main.mainCont.underlayCont ._content._symptomCont ._articleList ._time {
float: left;
line-height: 1.4;
font-size: 14px;
font-size: 1.4rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._articleList ._time {
padding-top: 2px;
font-size: 12px;
font-size: 1.2rem; } }
main.mainCont.underlayCont ._content._symptomCont ._articleList ._category {
padding: 2px 4px;
border: 1px solid #009b63;
box-sizing: border-box;
float: right;
color: #009b63;
line-height: 1.4;
font-size: 13px;
font-size: 1.3rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._articleList ._category {
font-size: 12px;
font-size: 1.2rem; } }
main.mainCont.underlayCont ._content._symptomCont ._articleList ._thumbnail {
padding-top: 10px;
clear: both; }
main.mainCont.underlayCont ._content._symptomCont ._articleList ._ttl {
padding-top: 15px;
line-height: 1.2;
min-height: 2.4em;
color: #009b63;
font-size: 20px;
font-size: 2.0rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._articleList ._ttl {
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._content._symptomCont ._articleList ._ttl a {
color: #009b63; }
main.mainCont.underlayCont ._content._symptomCont ._articleList ._moreRead {
margin: 2.4em auto 0;
width: 77%; }
main.mainCont.underlayCont ._content._symptomCont ._articleList ._moreRead a {
padding: 10px;
border: 1px solid #eee;
box-sizing: border-box;
display: block;
color: #009b63;
background-color: #eee;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/icn_arrow_r_b.png);
background-repeat: no-repeat;
background-position: 5% center;
background-size: 11px 18px;
font-size: 14px;
font-size: 1.4rem;
text-align: right; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._articleList ._moreRead a {
font-size: 12px;
font-size: 1.2rem; } }
main.mainCont.underlayCont ._content._symptomCont ._articleList ._moreRead a:hover, main.mainCont.underlayCont ._content._symptomCont ._articleList ._moreRead a:active {
border: 1px solid #009b63;
background-color: #fff;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/icn_arrow_r_b.png);
background-repeat: no-repeat;
background-position: 6% center;
background-size: 11px 18px; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._articleList ._moreRead a:hover, main.mainCont.underlayCont ._content._symptomCont ._articleList ._moreRead a:active {
background-size: 8px 13px; } }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink {
padding-top: 40px;
clear: both;
width: calc(100% - 80px); }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink::after {
content: "";
clear: both;
display: block; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink {
width: 100%; } }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._previous, main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._next {
width: 48.5%; }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._previous a, main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._next a {
display: inline;
color: #fff;
font-size: 14px;
font-size: 1.4rem;
background: #fee469; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._previous a, main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._next a {
font-size: 12px;
font-size: 1.2rem; } }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._previous a:hover, main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._previous a:active, main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._next a:hover, main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._next a:active {
color: #fee469;
background: #fff; }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._previous {
float: left; }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._previous a {
padding: 8px 2em 8px 4em;
border: 1px solid #eee;
box-sizing: border-box;
border-radius: 3px;
float: right;
color: #009b63;
background: #eee; }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._previous a:hover, main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._previous a:active {
background: #fff; }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._next {
float: right; }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._next a {
padding: 8px 4em 8px 2em;
border: 1px solid #009b63;
box-sizing: border-box;
border-radius: 3px;
float: left;
color: #ffffbf;
background: #009b63; }
main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._next a:hover, main.mainCont.underlayCont ._content._symptomCont ._previousNextLink ._next a:active {
border: 1px solid #009b63;
background: #fff; }
main.mainCont.underlayCont ._content._treatmentCont {
float: left;
width: 64%;
font-size: 0; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont {
margin-bottom: 60px;
float: none;
width: 100%; } }
main.mainCont.underlayCont ._content._treatmentCont ._article {
padding: 40px;
border: 1px solid #4765C7;
box-sizing: border-box;
border-radius: 30px;
width: 100%;
background: #fafafa;
background-color: #fafafa;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/bg_pat_dia_blu.png);
background-repeat: repeat;
background-position: left top;
background-size: 200px 200px; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont ._article {
padding: 25px 20px;
border: 1px solid #4765C7;
border-radius: 20px; } }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment ._ttl {
margin-bottom: 40px;
padding: 15px 20px;
border-left: 8px solid #4765C7;
box-sizing: border-box;
background: none;
line-height: 1.2;
color: #333;
font-size: 30px;
font-size: 3.0rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment ._ttl {
margin-bottom: 20px;
padding: 8px 15px;
border-left: 4px solid #4765C7;
line-height: 1.4;
font-size: 20px;
font-size: 2.0rem;
text-align: left; } }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment ._img {
width: 100%; }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment ._img img {
width: 100%;
height: auto; }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._about {
margin-top: 0; }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._about ._subTtl {
margin-bottom: 20px;
padding: 12px 20px;
line-height: 1.2;
color: #fff;
background-color: #4765C7;
font-size: 24px;
font-size: 2.4rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._about ._subTtl {
margin-bottom: 20px;
padding: 10px 15px;
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._about ._description {
margin: 0 auto 20px;
line-height: 1.8;
width: 95%;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._about ._description {
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._about ._img {
width: 100%;
height: auto; }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._check ._subTtl {
margin-bottom: 20px;
padding: 12px 20px;
line-height: 1.2;
color: #fff;
background: #4765C7;
font-size: 24px;
font-size: 2.4rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._check ._subTtl {
margin-bottom: 20px;
padding: 15px;
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._check ._checkList {
margin: 0 auto 30px;
clear: both;
width: 92.85%; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._check ._checkList {
width: 100%; } }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._check ._checkList li {
margin-bottom: 10px;
padding: 15px 20px 15px 70px;
border: 2px solid #4765C7;
border-radius: 7px;
box-sizing: border-box;
line-height: 1.5;
color: #37619C;
background-color: #fff;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/icn_power_b.png);
background-repeat: no-repeat;
background-position: 3% center;
background-size: 40px 40px;
font-size: 18px;
font-size: 1.8rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._check ._checkList li {
padding: 20px 2% 20px 45px;
font-size: 14px;
font-size: 1.4rem;
background-color: #fff;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/icn_power_b.png);
background-repeat: no-repeat;
background-position: 2.5% center;
background-size: 30px 30px; } }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend {
margin-bottom: 0; }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._subTtl {
margin-bottom: 20px;
padding: 12px 20px;
line-height: 1.2;
color: #fff;
background: #4765C7;
font-size: 24px;
font-size: 2.4rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._subTtl {
margin-bottom: 20px;
padding: 15px;
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._recommendList {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0; }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._recommendList li {
margin: 0 1% 10px;
display: inline-block;
border: 1px solid #eee;
box-sizing: border-box;
border-radius: 10px;
width: 31.333%;
background: #fff; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._recommendList li {
width: 48%; }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._recommendList li:nth-last-child(2), main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._recommendList li:last-of-type {
margin-bottom: 0; } }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._recommendList li a {
padding: 20px 10px;
display: block;
line-height: 1.4;
color: #333;
font-size: 16px;
font-size: 1.6rem;
text-align: center; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._recommendList li a {
font-size: 12px;
font-size: 1.2rem; } }
main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._recommendList li a:hover, main.mainCont.underlayCont ._content._treatmentCont ._article._treatment section._recommend ._recommendList li a:active {
background: #eee; }
main.mainCont.underlayCont ._sideNav {
width: 27.55%; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._sideNav {
margin: 0 auto;
float: none;
width: 85%; } }
main.mainCont.underlayCont ._sideNav._left {
float: left; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._sideNav._left {
float: none; } }
main.mainCont.underlayCont ._sideNav._right {
float: right; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._sideNav._right {
float: none; } }
main.mainCont.underlayCont ._sideNav ._ttl {
margin-bottom: 30px;
padding: 25px;
border-top: 1px solid #d3b77a;
border-bottom: 1px solid #d3b77a;
box-sizing: border-box;
line-height: 1.5;
color: #d3b77a;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/bg_pat_dia_bei.png);
background-repeat: repeat;
background-position: center;
background-size: 200px 200px;
font-size: 22px;
font-size: 2.2rem;
text-align: center; }
main.mainCont.underlayCont ._sideNav ._ttl a {
font-size: 20px;
font-size: 2.0rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._sideNav ._ttl a {
font-size: 18px;
font-size: 1.8rem; } }
main.mainCont.underlayCont ._sideNav ._ttl._sym {
padding: 0;
border-top: 1px solid #34AB81;
border-bottom: 1px solid #34AB81; }
main.mainCont.underlayCont ._sideNav ._ttl._sym a {
padding: 25px;
display: block;
color: #34AB81;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/bg_pat_dia_grn.png);
background-repeat: repeat;
background-position: center;
background-size: 200px 200px; }
main.mainCont.underlayCont ._sideNav ._ttl._tre {
padding: 0;
border-top: 1px solid #4765C7;
border-bottom: 1px solid #4765C7; }
main.mainCont.underlayCont ._sideNav ._ttl._tre a {
padding: 25px;
display: block;
color: #4765C7;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/bg_pat_dia_blu.png);
background-repeat: repeat;
background-position: center;
background-size: 200px 200px; }
main.mainCont.underlayCont ._sideNav ._ttl._joint {
margin-top: 60px; }
main.mainCont.underlayCont ._sideNav ._inwrap {
margin: 0 auto;
border: 1px solid #eee;
border-top: 1px solid #d3b77a;
border-bottom: 1px solid #d3b77a;
box-sizing: border-box;
position: relative;
width: 100%; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._sideNav ._inwrap {
width: 100%; } }
main.mainCont.underlayCont ._sideNav ._inwrap::before {
content: '';
position: absolute;
left: 20%;
top: -31px;
border-left: 1px solid #ddd;
box-sizing: border-box;
width: 1px;
height: 30px; }
main.mainCont.underlayCont ._sideNav ._inwrap::after {
content: '';
position: absolute;
right: 20%;
top: -31px;
border-right: 1px solid #ddd;
box-sizing: border-box;
width: 1px;
height: 30px; }
main.mainCont.underlayCont ._sideNav ._inwrap._sym {
border-top: 1px solid #34AB81;
border-bottom: 1px solid #34AB81; }
main.mainCont.underlayCont ._sideNav ._inwrap._tre {
border-top: 1px solid #4765C7;
border-bottom: 1px solid #4765C7; }
main.mainCont.underlayCont ._sideNav ._catTtl {
margin-bottom: 0; }
main.mainCont.underlayCont ._sideNav ._catTtl a {
padding: 25px 20px;
display: block;
line-height: 1.2;
color: #333;
background: rgba(211, 183, 122, 0.1);
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._sideNav ._catTtl a {
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._sideNav ._catTtl a:hover, main.mainCont.underlayCont ._sideNav ._catTtl a:active {
background: rgba(211, 183, 122, 0.15); }
main.mainCont.underlayCont ._sideNav ._postTtl {
box-sizing: border-box; }
main.mainCont.underlayCont ._sideNav ._postTtl li {
width: 100%;
font-size: 0; }
main.mainCont.underlayCont ._sideNav ._postTtl li:last-of-type {
margin-bottom: 0; }
main.mainCont.underlayCont ._sideNav ._postTtl li a {
padding: 20px 20px 20px calc(20px + 1.8em);
border-bottom: 1px solid #eee;
box-sizing: border-box;
display: block;
line-height: 1.2;
width: 100%;
color: #333;
font-size: 14px;
font-size: 1.4rem;
text-indent: -1.8em;
vertical-align: top; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._sideNav ._postTtl li a {
padding-left: calc(20px + 1.8em);
font-size: 14px;
font-size: 1.4rem;
text-indent: -1.8em; } }
main.mainCont.underlayCont ._sideNav ._postTtl li a::before {
content: 'ー';
padding-left: 0;
padding-right: .5em;
display: inline-block;
width: 1em;
color: #4f4c4a;
font-size: 14px;
font-size: 1.4rem;
text-indent: 0;
vertical-align: top; }
main.mainCont.underlayCont ._sideNav ._postTtl li a:hover, main.mainCont.underlayCont ._sideNav ._postTtl li a:active {
background: #f7f7f7; }
main.mainCont.underlayCont ._sideNav ._postTtl li:last-of-type a {
border-bottom: none; }
main.mainCont.underlayCont ._sideNav ._postTtl:last-child {
margin-bottom: 0;
padding-bottom: 0;
border: none; }
main.mainCont.underlayCont ._sideNav ._postArchive li {
padding: 0;
border-bottom: 1px solid #eee;
box-sizing: border-box; }
main.mainCont.underlayCont ._sideNav ._postArchive li a {
padding: 20px 20px 20px calc(20px + 1.6em);
border-bottom: 1px solid #eee;
box-sizing: border-box;
display: block;
line-height: 1.2;
width: 100%;
color: #333;
font-size: 16px;
font-size: 1.6rem;
text-indent: -1.6em;
vertical-align: top; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._sideNav ._postArchive li a {
font-size: 14px;
font-size: 1.4rem; } }
main.mainCont.underlayCont ._sideNav ._postArchive li a::before {
content: 'ー';
padding-left: 0;
padding-right: .5em;
display: inline-block;
width: 1em;
color: #4f4c4a;
font-size: 14px;
font-size: 1.4rem;
text-indent: 0;
vertical-align: top; }
main.mainCont.underlayCont ._sideNav ._postArchive li a:last-of-type {
border-bottom: none; }
main.mainCont.underlayCont ._sideNav ._postArchive li a:hover, main.mainCont.underlayCont ._sideNav ._postArchive li a:active {
background: #f7f7f7; }
main.mainCont.underlayCont ._sideNavi {
float: left;
width: 27%; }
@media screen and (max-width: 768px) {
main.mainCont.underlayCont ._sideNavi {
margin: 0 auto;
float: none;
width: 100%; } }
section {
margin: 60px 0 80px; }
@media screen and (max-width: 768px) {
section {
margin: 40px 0 80px; } }
section section {
margin: 0; }
section ._inwrap {
margin: 0 auto;
width: 1040px; }
@media screen and (max-width: 1040px) {
section ._inwrap {
width: 100%; } }
section ._ttl {
margin-bottom: 40px;
line-height: 1.6;
color: #000;
font-size: 30px;
font-size: 3rem;
text-align: center;
letter-spacing: 1px; }
@media screen and (max-width: 768px) {
section ._ttl {
font-size: 24px;
font-size: 2.4rem; } }
section ._ttl ._enTtl {
margin-top: 10px;
padding-top: 18px;
display: block;
position: relative;
color: #999;
font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-size: 14px;
font-size: 1.4rem;
font-weight: normal;
text-align: center; }
@media screen and (max-width: 768px) {
section ._ttl ._enTtl {
margin-top: 5px;
padding-top: 12px;
font-size: 12px;
font-size: 1.2rem; } }
section ._ttl ._enTtl::before {
content: '';
margin-left: -40px;
border-top: 1px solid #999;
position: absolute;
left: 50%;
top: 0;
width: 80px;
height: 1px; }
@media screen and (max-width: 768px) {
section ._ttl ._enTtl::before {
margin-left: -20px;
width: 40px; } }
section.firstView {
margin: 0;
position: relative; }
section.firstView::after {
content: "";
clear: both;
display: block; }
@media screen and (max-width: 768px) {
section.firstView {
height: 100vh;
background: #fff; } }
@media screen and (max-width: 768px) and (max-width: 768px) {
section.firstView {
padding-bottom: 20%;
height: auto; } }
.frontPage section.firstView::after {
content: '';
padding-top: 66.666%;
position: absolute;
top: 0;
right: 0;
width: 75%;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/front/fv_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover; }
@media screen and (max-width: 1280px) {
.frontPage section.firstView::after {
padding-top: 85%;
width: 70%; } }
@media screen and (max-width: 768px) {
.frontPage section.firstView::after {
display: none;
width: 100%; } }
section.firstView ._description {
display: none; }
@media screen and (max-width: 768px) {
section.firstView ._description {
margin: 25px auto 0;
display: block;
line-height: 1.6;
width: 95%;
font-size: 14px;
font-size: 1.4rem;
text-align: center; } }
section.firstView ._inwrap {
margin-top: 80px;
float: left;
width: 25%;
max-width: 540px; }
@media screen and (max-width: 1280px) {
section.firstView ._inwrap {
width: 30%; } }
@media screen and (max-width: 1040px) {
section.firstView ._inwrap {
margin-top: 60px; } }
@media screen and (max-width: 768px) {
section.firstView ._inwrap {
margin: 0 auto;
float: none;
width: 100%;
min-width: auto; } }
section.firstView ._logo {
margin: 0 auto 40px;
width: 60%; }
@media screen and (max-width: 1040px) {
section.firstView ._logo {
width: 75%; } }
@media screen and (max-width: 768px) {
section.firstView ._logo {
margin-top: 30px;
margin-bottom: 15px;
width: 60%; } }
section.firstView ._clinicInfo {
display: none; }
@media screen and (max-width: 768px) {
section.firstView ._clinicInfo {
margin: 0 auto 15px;
display: block;
line-height: 1.6;
color: #333;
font-size: 16px;
font-size: 1.6rem;
text-align: center; } }
section.firstView ._clinicInfo ._tel {
display: inline-block;
width: 50px;
height: 50px;
-webkit-border-radius: 25px; -moz-border-radius: 25px;
border-radius: 25px;
background: #52A0FD;
background: linear-gradient(to right, #52A0FD 0%, #00e2fa 80%, #00e2fa 100%);
vertical-align: middle; }
section.firstView ._clinicInfo ._tel img {
margin: 20% auto;
width: 60%; }
section.firstView ._clinicInfo ._address {
display: inline-block;
vertical-align: middle; }
section.firstView ._clinicInfo ._map {
margin-left: 2px;
padding: 4px;
border: 1px solid #1d3994;
box-sizing: border-box;
display: inline-block;
color: #1d3994;
font-size: 14px;
font-size: 1.4rem;
vertical-align: middle; }
section.firstView ._icnList {
margin: 0 auto;
width: 60%;
font-size: 0; }
@media screen and (max-width: 1040px) {
section.firstView ._icnList {
width: 75%; } }
@media screen and (max-width: 768px) {
section.firstView ._icnList {
width: 90%; } }
section.firstView ._icnList li {
margin: 0 0 10px;
padding: 0;
display: inline-block;
width: 48%; }
@media screen and (max-width: 768px) {
section.firstView ._icnList li {
width: 24%; } }
section.firstView ._icnList li:nth-child(odd) {
margin-right: 2%; }
@media screen and (max-width: 768px) {
section.firstView ._icnList li:nth-child(odd) {
margin-right: 1%; } }
section.firstView ._icnList li:nth-child(even) {
margin-left: 2%; }
@media screen and (max-width: 768px) {
section.firstView ._icnList li:nth-child(even) {
margin-left: 0;
margin-right: 1%; } }
section.firstView ._icnList li:nth-child(3), section.firstView ._icnList li:nth-child(4) {
margin-bottom: 0; }
section.firstView ._icnList li:last-child {
margin-right: 0; }
section.latestNews {
clear: both;
z-index: 10; }
@media screen and (max-width: 768px) {
section.latestNews {
margin-top: -20%; } }
section.latestNews ._inwrap {
font-size: 0; }
section.latestNews ._separate {
margin: 0;
padding: 0;
display: inline-block;
width: 50%; }
@media screen and (max-width: 768px) {
section.latestNews ._separate {
display: block;
width: 100%; } }
section.latestNews ._separate ._moduleCont {
margin: 0;
padding: 0;
display: inline-block;
width: 33.78%;
vertical-align: top; }
@media screen and (max-width: 768px) {
section.latestNews ._separate ._moduleCont {
width: 100%; } }
@media screen and (max-width: 768px) {
section.latestNews ._separate._news {
margin-bottom: 40px; } }
section.latestNews ._separate._news ._moduleCont:first-child {
margin: 0;
margin-right: 16.215%; }
@media screen and (max-width: 768px) {
section.latestNews ._separate._news ._moduleCont:first-child {
margin: 0;
margin-bottom: 30px; } }
section.latestNews ._separate._news ._moduleCont:nth-child(2) {
margin: 0;
margin-right: 16.215%; }
@media screen and (max-width: 768px) {
section.latestNews ._separate._news ._moduleCont:nth-child(2) {
margin: 0; } }
@media screen and (max-width: 768px) {
section.latestNews ._separate._blog {
margin-top: 80px; } }
section.latestNews ._separate._blog ._moduleCont:first-child {
margin: 0;
margin-right: 16.215%; }
@media screen and (max-width: 768px) {
section.latestNews ._separate._blog ._moduleCont:first-child {
margin: 0;
margin-bottom: 30px; } }
section.latestNews ._separate._blog ._moduleCont:nth-child(2) {
margin: 0;
margin-right: 16.215%; }
@media screen and (max-width: 768px) {
section.latestNews ._separate._blog ._moduleCont:nth-child(2) {
margin: 0; } }
section.latestNews ._ttl {
margin-bottom: 40px;
padding: 8px 20px;
border-left: 4px solid #fff;
box-sizing: border-box;
float: left;
line-height: 1.6;
color: #4f4c4a;
width: calc(100% - 30px);
font-size: 24px;
font-size: 2.4rem;
text-align: left; }
@media screen and (max-width: 768px) {
section.latestNews ._ttl {
margin: 0 auto 40px;
padding: 20px 15px;
border: none;
border-top: 1px solid #4f4c4a;
border-bottom: 1px solid #4f4c4a;
float: none;
color: #4f4c4a;
width: 70%;
font-size: 18px;
font-size: 1.8rem;
text-align: center; } }
section.latestNews ._listLink {
margin-top: -80px;
float: right; }
@media screen and (max-width: 768px) {
section.latestNews ._listLink {
margin-top: -24px; } }
section.latestNews ._moduleWrap {
margin: 0;
clear: both;
width: 100%;
font-size: 0; }
section.latestNews ._moduleWrap::after {
content: "";
clear: both;
display: block; }
section.latestNews ._moduleCont {
display: inline-block;
width: 23.333%;
vertical-align: top; }
@media screen and (max-width: 768px) {
section.latestNews ._moduleCont {
margin-top: 30px;
margin-bottom: 20px;
display: block;
width: 100%; }
section.latestNews ._moduleCont::after {
content: "";
clear: both;
display: block; } }
section.latestNews ._moduleCont:nth-child(3n+1) {
margin-right: 15%; }
@media screen and (max-width: 768px) {
section.latestNews ._moduleCont:nth-child(3n+1) {
margin-right: 0; } }
section.latestNews ._moduleCont:nth-child(3n) {
margin-left: 15%; }
@media screen and (max-width: 768px) {
section.latestNews ._moduleCont:nth-child(3n) {
margin-right: 0;
margin-left: 0; } }
section.latestNews ._moduleCont ._postTime {
margin-right: .5em;
margin-bottom: 10px;
display: inline-block;
float: left;
line-height: 1.4;
color: #333;
font-size: 12px;
font-size: 1.2rem;
text-align: left; }
section.latestNews ._moduleCont ._postCat {
margin: 0 0 10px;
padding: 0 0.5em;
border: 1px solid #666;
box-sizing: border-box;
display: inline-block;
float: left;
line-height: 1.2;
color: #666;
background: none;
font-size: 12px;
font-size: 1.2rem;
text-align: left; }
section.latestNews ._moduleCont ._postThumb {
padding-top: 100%;
position: relative;
clear: both;
width: 100%;
height: 100%; }
@media screen and (max-width: 768px) {
section.latestNews ._moduleCont ._postThumb {
padding-top: 45%;
float: left;
width: 45%;
height: 45%; } }
section.latestNews ._moduleCont ._postThumb::after {
content: '';
border: 4px solid #fff;
border-radius: 16px;
box-sizing: border-box;
position: absolute;
bottom: -20px;
right: -20px;
width: 100%;
height: 100%;
z-index: 1; }
@media screen and (max-width: 768px) {
section.latestNews ._moduleCont ._postThumb::after {
border: 2px solid #fff;
bottom: -12px;
right: -12px; } }
section.latestNews ._moduleCont ._postThumb img {
border-radius: 16px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10; }
@media screen and (max-width: 768px) {
section.latestNews ._moduleCont ._postDetail {
float: right;
width: 48%; } }
section.latestNews ._moduleCont ._postTtl {
margin-top: 30px;
margin-bottom: 10px;
line-height: 1.4;
color: #000;
font-size: 16px;
font-size: 1.6rem;
text-align: left;
min-height: 2.5em; }
@media screen and (max-width: 768px) {
section.latestNews ._moduleCont ._postTtl {
margin-top: 0;
margin-bottom: 5px;
line-height: 1.4;
min-height: auto;
font-size: 16px;
font-size: 1.6rem; } }
section.latestNews ._moduleCont ._postTtl a:hover, section.latestNews ._moduleCont ._postTtl a:active {
text-decoration: underline; }
section.latestNews ._moduleCont ._postTxt {
line-height: 1.8;
color: #000;
font-size: 14px;
font-size: 1.4rem;
text-align: left; }
@media screen and (max-width: 768px) {
section.latestNews ._moduleCont ._postTxt {
font-size: 14px;
font-size: 1.4rem; } }
section.forFirst {
margin: -30% auto 80px;
position: relative;
width: 100%;
z-index: 20; }
@media screen and (max-width: 1040px) {
section.forFirst {
margin-top: -35%; } }
@media screen and (max-width: 768px) {
section.forFirst {
margin-top: -35%;
margin-bottom: 60px;
padding-bottom: 0;
width: 90%; } }
section.forFirst ._img {
margin-left: 4%;
display: inline-block;
width: 54.16%;
max-width: 960px;
vertical-align: middle; }
@media screen and (max-width: 1280px) {
section.forFirst ._img {
margin-left: 2%;
width: 65%; } }
@media screen and (max-width: 768px) {
section.forFirst ._img {
margin-left: 2%;
width: 75%; } }
@media screen and (max-width: 768px) {
section.forFirst ._img {
margin: 0;
display: block;
width: 100%; } }
section.forFirst ._img img {
box-sizing: border-box; }
@media screen and (max-width: 768px) {
section.forFirst ._img img {
border: 1px solid #fff100;
box-sizing: border-box; } }
section.forFirst ._ttl {
margin-left: -7.5%;
padding: 10px 1%;
position: relative;
display: inline-block;
line-height: 2.4;
width: 26.66%;
text-align: center;
background-color: rgba(255, 215, 0, 0.9);
background-blend-mode: multiply;
vertical-align: middle;
font-size: 24px;
font-size: 2.4rem;
letter-spacing: 2px; }
@media screen and (max-width: 1040px) {
section.forFirst ._ttl {
margin-left: -25%;
width: 40%; } }
@media screen and (max-width: 768px) {
section.forFirst ._ttl {
margin: -5% auto -15%;
padding: 5px 1%;
display: block;
width: 78%;
font-size: 1.8rem; } }
section.forFirst ._ttl::after {
content: '';
position: absolute;
top: -32px;
right: 20px;
width: 64px;
height: 64px;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/front/icn_wakaba.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: left top; }
@media screen and (max-width: 768px) {
section.forFirst ._ttl::after {
top: -24px;
right: 10px;
width: 48px;
height: 48px; } }
section.forFirst ._txtBox {
margin: -150px auto 0;
padding: 60px;
border: 10px solid #f7f7f7;
position: relative;
box-sizing: border-box;
z-index: 20;
width: 920px;
background: rgba(255, 255, 255, 0.9); }
section.forFirst ._txtBox::after {
content: "";
clear: both;
display: block; }
@media screen and (max-width: 1040px) {
section.forFirst ._txtBox {
padding: 40px;
width: 90%; } }
@media screen and (max-width: 768px) {
section.forFirst ._txtBox {
margin: 0;
padding: 20% 5% 7.5%;
border-right: 1px solid #fff100;
border-bottom: none;
border-left: 1px solid #fff100;
position: static;
top: 0;
left: 0;
width: 100%; } }
section.forFirst ._txtBox ._subTtl {
margin-bottom: 30px;
line-height: 1.8;
color: #E74B00;
font-size: 24px;
font-size: 2.4rem;
font-weight: 800;
text-align: left;
text-decoration: underline; }
@media screen and (max-width: 768px) {
section.forFirst ._txtBox ._subTtl {
line-height: 1.6;
font-size: 18px;
font-size: 1.8rem; } }
section.forFirst ._txtBox ._txt p {
margin-bottom: 1em;
line-height: 2.4;
font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
font-size: 18px;
font-size: 1.8rem;
text-align: left; }
@media screen and (max-width: 1040px) {
section.forFirst ._txtBox ._txt p {
line-height: 2.4;
font-size: 16px;
font-size: 1.6rem; } }
@media screen and (max-width: 768px) {
section.forFirst ._txtBox ._txt p {
line-height: 2;
font-size: 14px;
font-size: 1.4rem; } }
section.forFirst ._txtBox ._txt p:last-child {
margin-bottom: 0; }
section.forFirst ._txtBox ._link {
margin-top: 20px;
float: right; }
section.strongPoint {
position: relative;
background: #f7f7f7; }
@media screen and (max-width: 768px) {
section.strongPoint {
margin: 0 auto 60px;
width: 100%; } }
@media screen and (max-width: 768px) {
section.strongPoint::before {
margin: 7.5% -50% 0 -50% !important;
width: 200% !important;
height: 90% !important; } }
section.strongPoint ._inwrap {
margin: 0 auto;
padding: 80px 0;
width: 1520px; }
@media screen and (max-width: 1520px) {
section.strongPoint ._inwrap {
width: 95%; } }
@media screen and (max-width: 768px) {
section.strongPoint ._inwrap {
padding: 40px 0;
width: 90%; } }
section.strongPoint ._ttl {
margin: 0;
padding: 40px 8px;
line-height: 1.8;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
color: #fff;
background: #34AB81;
letter-spacing: 5px;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: skewY(6deg);
-ms-transform: skewY(6deg);
transform: skewY(6deg);
position: absolute;
top: -5%;
left: 20%; }
@media screen and (max-width: 768px) {
section.strongPoint ._ttl {
padding: 16px 2px;
top: -1.5%;
left: 7.5%; } }
section.strongPoint ._ttl span {
display: block;
-webkit-transform: skewY(-6deg);
-ms-transform: skewY(-6deg);
transform: skewY(-6deg);
white-space: nowrap;
font-size: 24px;
font-size: 2.4rem; }
@media screen and (max-width: 768px) {
section.strongPoint ._ttl span {
font-size: 14px;
font-size: 1.4rem; } }
section.strongPoint ._subTtl {
margin-bottom: 40px;
padding-top: 30px;
padding-bottom: 10px;
box-sizing: border-box;
line-height: 1.2;
color: #4f4c4a;
font-size: 36px;
font-size: 3.6rem;
font-weight: 800;
background-color: #ffd700;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/bg_pat02.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-blend-mode: luminosity;
text-align: center;
letter-spacing: 2px; }
@media screen and (max-width: 1040px) {
section.strongPoint ._subTtl {
font-size: 24px;
font-size: 2.4rem; } }
@media screen and (max-width: 768px) {
section.strongPoint ._subTtl {
margin-top: -10px;
margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 0;
margin-left: -5.555%;
line-height: 1;
width: calc(100% / 0.9);
font-size: 20px;
font-size: 2.0rem;
letter-spacing: 1px; } }
section.strongPoint ._emphasis {
padding-bottom: 10px;
display: block;
line-height: 1.2;
color: #4f4c4a;
font-family: "Monaco", "Andale Mono", monospace, "Times New Roman", Times, serif;
font-size: 72px;
font-size: 7.2rem;
font-weight: 800;
letter-spacing: 4px; }
@media screen and (max-width: 768px) {
section.strongPoint ._emphasis {
padding-bottom: .1em;
padding-left: .3em;
line-height: 1.4;
font-size: 40px;
font-size: 4.0rem;
letter-spacing: 1px; } }
section.strongPoint ._emphasis::before {
content: '＼';
padding-right: .35em;
line-height: 1.4;
font-size: 24px;
font-size: 2.4rem;
vertical-align: baseline; }
@media screen and (max-width: 768px) {
section.strongPoint ._emphasis::before {
font-size: 14px;
font-size: 1.4rem; } }
section.strongPoint ._emphasis::after {
content: '／';
padding-left: .35em;
line-height: 1.4;
font-size: 24px;
font-size: 2.4rem;
vertical-align: baseline; }
@media screen and (max-width: 768px) {
section.strongPoint ._emphasis::after {
font-size: 14px;
font-size: 1.4rem; } }
section.strongPoint ._emphasis ._notEmphasis {
padding-left: 4px;
font-size: 48px;
font-size: 4.8rem;
vertical-align: baseline; }
@media screen and (max-width: 768px) {
section.strongPoint ._emphasis ._notEmphasis {
font-size: 32px;
font-size: 3.2rem; } }
section.strongPoint ._lead {
margin: 0 auto 120px;
padding: 30px 5%;
border-top: 4px solid #ffd700;
box-sizing: border-box;
position: relative;
width: 65%;
background: #fff; }
@media screen and (max-width: 1280px) {
section.strongPoint ._lead {
width: 90%; } }
@media screen and (max-width: 768px) {
section.strongPoint ._lead {
margin-bottom: 100px;
padding: 20px;
border-top: 2px solid #ffd700;
width: 100%; } }
section.strongPoint ._lead::before {
content: '';
border-left: 2px solid #ffd700;
position: absolute;
width: 2px;
height: 50px;
left: 25%;
top: -50px; }
@media screen and (max-width: 768px) {
section.strongPoint ._lead::before {
border-left: 1px solid #ffd700;
top: -25px;
height: 25px; } }
section.strongPoint ._lead::after {
content: '';
border-right: 2px solid #ffd700;
position: absolute;
width: 2px;
height: 50px;
right: 25%;
top: -50px; }
@media screen and (max-width: 768px) {
section.strongPoint ._lead::after {
border-right: 1px solid #ffd700;
top: -25px;
height: 25px; } }
section.strongPoint ._lead ._inner::after {
content: "";
clear: both;
display: block; }
section.strongPoint ._lead ._img {
float: right;
width: 35%; }
@media screen and (max-width: 768px) {
section.strongPoint ._lead ._img {
margin: 0 auto;
float: none;
width: 80%; } }
section.strongPoint ._lead ._txt {
padding-top: 1.5em;
float: left;
width: 55%;
line-height: 2;
color: #333;
font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
font-size: 16px;
font-size: 1.6rem;
text-align: left; }
@media screen and (max-width: 768px) {
section.strongPoint ._lead ._txt {
padding-top: 1em;
float: none;
line-height: 1.8;
width: 100%;
font-size: 14px;
font-size: 1.4rem;
text-align: left; } }
section.strongPoint ._boxList {
margin: 0 auto;
width: 95%;
font-size: 0; }
@media screen and (max-width: 768px) {
section.strongPoint ._boxList {
margin: 0 auto;
width: 90%; } }
section.strongPoint ._boxList ._content {
margin: 0 6.666% 0 0;
display: inline-block;
position: relative;
width: 20%;
vertical-align: top; }
@media screen and (max-width: 768px) {
section.strongPoint ._boxList ._content {
margin: 0 0 100px;
width: 100%; } }
@media screen and (max-width: 768px) {
section.strongPoint ._boxList ._content:nth-child(2) {
margin-top: 0; } }
@media screen and (max-width: 768px) {
section.strongPoint ._boxList ._content:nth-child(3) {
margin-top: 0; } }
section.strongPoint ._boxList ._content:nth-child(4) {
margin-right: 0; }
@media screen and (max-width: 768px) {
section.strongPoint ._boxList ._content:nth-child(4) {
margin-top: 0;
margin-bottom: 0; } }
section.strongPoint ._boxList ._content ._icn {
margin: 0 auto 15px;
margin-left: -60px;
padding: 0;
position: absolute;
left: 50%;
top: -60px;
width: 120px;
z-index: 10; }
@media screen and (max-width: 768px) {
section.strongPoint ._boxList ._content ._icn {
margin-bottom: 10px;
display: block;
font-size: 18px;
font-size: 1.8rem; } }
section.strongPoint ._boxList ._content ._num {
margin: 0 0 30px;
padding: 0;
line-height: 60px;
background: #fff100;
color: #000;
width: 60px;
height: 60px;
text-align: center;
font-size: 24px;
font-size: 2.4rem; }
@media screen and (max-width: 768px) {
section.strongPoint ._boxList ._content ._num {
display: inline-block;
float: left;
line-height: 40px;
width: 40px;
height: 40px;
font-size: 18px;
font-size: 1.8rem; } }
section.strongPoint ._boxList ._content ._mark {
margin: 0 auto 30px;
border: 1px solid #eee;
border-radius: 100px;
position: relative;
width: 200px;
height: 200px;
background: #fff;
box-shadow: 3px 3px 6px #eee; }
@media screen and (max-width: 768px) {
section.strongPoint ._boxList ._content ._mark {
margin: 0 auto 25px;
border-radius: 100px;
width: 200px;
height: 200px; }
section.strongPoint ._boxList ._content ._mark::after {
content: "";
clear: both;
display: block; } }
section.strongPoint ._boxList ._content ._mark::after {
content: '';
margin-left: -1px;
border-left: 1px solid #d3b77a;
position: absolute;
bottom: -15px;
left: 50%;
width: 2px;
height: 30px; }
section.strongPoint ._boxList ._content ._mark img {
margin: 0 auto;
padding: 10%;
display: block;
width: 80%;
height: auto; }
section.strongPoint ._boxList ._content ._point {
margin-bottom: 25px;
border-top: 1px solid #d3b77a;
line-height: 1.4;
color: #333;
font-size: 24px;
font-size: 2.4rem;
font-weight: bold;
text-align: center; }
@media screen and (max-width: 768px) {
section.strongPoint ._boxList ._content ._point {
margin: 0 auto 25px;
display: block;
font-size: 18px;
font-size: 1.8rem;
text-align: center; } }
section.strongPoint ._boxList ._content ._point::before {
content: 'point';
padding-top: 4px;
padding-bottom: 4px;
display: block;
line-height: 1.4;
color: #d3b77a;
width: 100%;
font-size: 12px;
font-size: 12px;
font-weight: normal;
font-style: italic;
text-align: center; }
section.strongPoint ._boxList ._content ._txt {
line-height: 1.8;
color: #333;
font-size: 16px;
font-size: 1.6rem;
text-align: left; }
@media screen and (max-width: 768px) {
section.strongPoint ._boxList ._content ._txt {
font-size: 14px;
font-size: 1.4rem; } }
section.flow ._ttl {
margin-bottom: 100px;
font-size: 36px;
font-size: 3.6rem; }
@media screen and (max-width: 768px) {
section.flow ._ttl {
margin-bottom: 20px;
font-size: 24px;
font-size: 2.4rem; } }
section.flow ._flowBox {
margin-bottom: 120px; }
@media screen and (max-width: 768px) {
section.flow ._flowBox {
margin: 0 auto 60px;
width: 90%; } }
section.flow ._flowBox ._ttlArea {
margin: 0 0 120px;
padding: 30px 0 20px;
position: relative;
border-bottom: 2px solid #333;
box-sizing: border-box;
width: 100%; }
section.flow ._flowBox ._ttlArea::after {
content: "";
clear: both;
display: block; }
@media screen and (max-width: 768px) {
section.flow ._flowBox ._ttlArea {
margin-bottom: 20px;
border-bottom: none; } }
section.flow ._flowBox ._ttlArea ._flowNum {
padding-left: 1em;
float: left;
line-height: 1.4;
width: calc(50% - 100px - 1em);
font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-size: 24px;
font-size: 2.4rem; }
@media screen and (max-width: 768px) {
section.flow ._flowBox ._ttlArea ._flowNum {
padding: 0;
width: 25%;
font-size: 16px;
font-size: 1.6rem; } }
section.flow ._flowBox ._ttlArea ._flowNum strong {
color: #E78900;
font-weight: bold;
font-size: 36px;
font-size: 3.6rem;
font-style: italic; }
@media screen and (max-width: 768px) {
section.flow ._flowBox ._ttlArea ._flowNum strong {
float: none;
font-size: 24px;
font-size: 2.4rem; } }
section.flow ._flowBox ._ttlArea ._flowImg {
margin-left: -100px;
position: absolute;
left: 50%;
top: 0;
width: 200px;
height: 200px; }
@media screen and (max-width: 768px) {
section.flow ._flowBox ._ttlArea ._flowImg {
margin: 0 auto;
position: static;
clear: both; } }
section.flow ._flowBox ._ttlArea ._flowImg img {
border-radius: 100px;
width: 100%;
height: auto; }
section.flow ._flowBox ._ttlArea ._flowTtl {
padding-right: 1em;
float: right;
line-height: 1.8;
clear: none;
width: calc(50% - 100px - 1em);
font-size: 30px;
font-size: 3.0rem;
text-align: right; }
@media screen and (max-width: 768px) {
section.flow ._flowBox ._ttlArea ._flowTtl {
margin-bottom: 20px;
padding: 0 0 4px;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
line-height: 1.4;
width: 70%;
font-size: 20px;
font-size: 2.0rem;
text-align: left; } }
section.flow ._flowBox ._flowCont {
margin: 0 auto;
width: 80%;
background: #f7f7f7; }
@media screen and (max-width: 768px) {
section.flow ._flowBox ._flowCont {
width: 100%; } }
section.flow ._flowBox ._flowCont ul {
padding: 5%; }
section.flow ._flowBox ._flowCont ul li {
padding-bottom: .5em;
padding-left: 1.3em;
line-height: 1.8;
font-size: 16px;
font-size: 1.6rem;
text-align: left;
text-indent: -1.3em; }
@media screen and (max-width: 768px) {
section.flow ._flowBox ._flowCont ul li {
font-size: 14px;
font-size: 1.4rem; } }
section.flow ._flowBox ._flowCont ul li::before {
content: '◇'; }
section.flow ._flowBox ._flowCont ul li:last-child {
padding-bottom: 0; }
section.flow ._flowBox ._flowCont ul li._caution {
line-height: 1.8;
font-size: 14px;
font-size: 1.4rem; }
section.flow ._flowBox ._flowCont ul li._caution::before {
content: ''; }
section.menu {
margin-bottom: 60px; }
@media screen and (max-width: 768px) {
section.menu {
margin-bottom: 80px; } }
.frontPage section.menu {
margin-bottom: 120px; }
@media screen and (max-width: 768px) {
.frontPage section.menu {
margin: 0 auto 60px;
width: 90%; } }
@media screen and (max-width: 768px) {
section.menu ._ttl {
margin-bottom: 25px; } }
section.menu ._treatmentCont ._suffer {
margin: 0;
padding: 0;
width: 75%; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._suffer {
width: 100%; } }
section.menu ._treatmentCont ._concept {
margin-top: -115px;
margin-bottom: 80px;
padding: 80px 40px 40px;
border: 10px solid #4f4c4a;
box-sizing: border-box;
width: 100%; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._concept {
margin-top: -50px;
margin-bottom: 60px;
padding: 55px 5% 5%;
border: 4px solid #4f4c4a;
width: 100%; } }
section.menu ._treatmentCont ._concept ._subTtl {
margin: 0 0 30px;
line-height: 1.6;
font-size: 28px;
font-size: 2.8rem;
text-align: right; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._concept ._subTtl {
font-size: 16px;
font-size: 1.6rem;
text-align: center; } }
section.menu ._treatmentCont ._concept ._subTtl ._emphasis {
line-height: 1.2;
font-size: 54px;
font-size: 5.4rem;
font-weight: 800; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._concept ._subTtl ._emphasis {
font-size: 28px;
font-size: 2.8rem; } }
section.menu ._treatmentCont ._concept ._policy {
margin-top: -55px; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._concept ._policy {
margin-top: 0;
margin-bottom: 10px; } }
section.menu ._treatmentCont ._concept ._policy dt {
margin-bottom: 20px;
padding: 10px 20px;
display: block;
background: #fff100;
color: #4f4c4a;
line-height: 1.8;
font-size: 20px;
font-size: 2.0rem; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._concept ._policy dt {
padding: 8px 20px;
font-size: 16px;
font-size: 1.6rem; } }
section.menu ._treatmentCont ._concept ._policy dd {
margin: 0 auto;
line-height: 1.8;
width: calc(100% - 40px);
font-size: 16px;
font-size: 1.6rem;
text-align: left; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._concept ._policy dd {
width: 90%;
font-size: 14px;
font-size: 1.4rem; } }
section.menu ._treatmentCont ._frequently ._subTtl {
margin-bottom: 30px;
padding: 20px;
line-height: 1.4;
background: #f7f7f7;
font-size: 24px;
font-size: 2.4rem;
text-align: left; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._frequently ._subTtl {
font-size: 18px;
font-size: 1.8rem;
text-align: center; } }
section.menu ._treatmentCont ._frequently ._listCont {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto;
width: calc(100% - 40px);
font-size: 0; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._frequently ._listCont {
width: 100%; } }
section.menu ._treatmentCont ._frequently ._listCont li {
border: 1px solid #eee;
box-sizing: border-box;
border-radius: 10px;
vertical-align: top; }
section.menu ._treatmentCont ._frequently ._listCont li:nth-of-type(odd) {
margin: 0 1% 20px 0;
width: 49%; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._frequently ._listCont li:nth-of-type(odd) {
margin: 0 0 20px;
width: 100%; } }
section.menu ._treatmentCont ._frequently ._listCont li:nth-of-type(even) {
margin: 0 0 20px 1%;
width: 49%; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._frequently ._listCont li:nth-of-type(even) {
margin: 0 0 20px;
width: 100%; } }
section.menu ._treatmentCont ._frequently ._listCont li ._frame {
padding: 25px 20px 10px; }
section.menu ._treatmentCont ._frequently ._listCont li ._frame dt {
margin: 0 0 10px;
padding-bottom: 10px;
box-sizing: border-box;
line-height: 1.4;
font-size: 18px;
font-size: 1.8rem;
font-weight: 800; }
@media screen and (max-width: 768px) {
section.menu ._treatmentCont ._frequently ._listCont li ._frame dt {
font-size: 16px;
font-size: 1.6rem; } }
section.menu ._treatmentCont ._frequently ._listCont li ._frame dt a {
color: #4f4c4a; }
section.menu ._treatmentCont ._frequently ._listCont li ._frame dt a:hover, section.menu ._treatmentCont ._frequently ._listCont li ._frame dt a:active {
text-decoration: underline; }
section.menu ._treatmentCont ._frequently ._listCont li ._frame dd {
line-height: 1.6;
font-size: 14px;
font-size: 1.4rem; }
@media screen and (max-width: 768px) {
.frontPage section.price {
margin: 60px auto 80px;
width: 90%; } }
section.staff ._inner {
margin-bottom: 120px; }
section.staff ._inner::after {
content: "";
clear: both;
display: block; }
section.staff ._portrait {
float: right;
line-height: 0;
width: 38%;
font-size: 0;
vertical-align: top; }
@media screen and (max-width: 768px) {
section.staff ._portrait {
margin: 0 auto 40px;
float: none;
width: 85%; } }
section.staff ._name {
margin-top: 25px;
padding: 20px;
line-height: 1.8;
background: #d3b77a;
font-size: 0; }
@media screen and (max-width: 768px) {
section.staff ._name {
padding: 10px; } }
section.staff ._name ._kanji, section.staff ._name ._kana {
display: inline;
color: #fff;
font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
text-align: center;
vertical-align: middle; }
section.staff ._name ._kanji {
font-size: 24px;
font-size: 2.4rem; }
@media screen and (max-width: 768px) {
section.staff ._name ._kanji {
font-size: 18px;
font-size: 1.8rem; } }
section.staff ._name ._kana {
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
section.staff ._name ._kana {
font-size: 14px;
font-size: 1.4rem; } }
section.staff ._position {
margin: 0;
padding: 20px;
line-height: 1.8;
color: #fff;
background: #d3b77a;
font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
font-size: 16px;
font-size: 1.6rem;
text-align: right; }
@media screen and (max-width: 768px) {
section.staff ._position {
padding: 10px;
font-size: 14px;
font-size: 1.4rem; } }
section.staff ._personalData {
margin: 0;
padding: 0;
float: left;
width: 55%; }
@media screen and (max-width: 768px) {
section.staff ._personalData {
margin: 0 auto;
width: 100%; } }
section.staff ._personalData ._detail {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
font-size: 0; }
section.staff ._personalData ._detail dt, section.staff ._personalData ._detail dd {
padding: 20px 5px;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
display: inline-block;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
section.staff ._personalData ._detail dt, section.staff ._personalData ._detail dd {
font-size: 14px;
font-size: 1.4rem; } }
section.staff ._personalData ._detail dt {
margin: 0 10px 0 0;
line-height: 1.6;
width: calc(30% - 10px);
font-weight: 800;
text-align: right; }
@media screen and (max-width: 768px) {
section.staff ._personalData ._detail dt {
width: calc(35% - 10px); } }
section.staff ._personalData ._detail dd {
margin: 0;
line-height: 1.6;
width: 70%;
text-align: left; }
@media screen and (max-width: 768px) {
section.staff ._personalData ._detail dd {
width: 65%; } }
section.staff ._personalData ._appeal {
margin-top: 40px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
font-size: 0; }
section.staff ._personalData ._appeal dt, section.staff ._personalData ._appeal dd {
display: block;
width: 100%;
line-height: 1.4;
font-size: 16px;
font-size: 1.6rem; }
section.staff ._personalData ._appeal dt {
margin-bottom: 20px;
padding: 20px;
border: 2px solid #d3b77a;
box-sizing: border-box; }
@media screen and (max-width: 768px) {
section.staff ._personalData ._appeal dt {
padding: 20px 10px;
border: 1px solid #d3b77a; } }
section.staff ._personalData ._appeal dd {
margin-bottom: 40px;
padding: 0 20px;
line-height: 1.6;
font-size: 14px;
font-size: 1.4rem; }
@media screen and (max-width: 768px) {
section.staff ._personalData ._appeal dd {
padding: 0 10px; } }
section.staff ._personalData ._appeal dd:last-child {
margin-bottom: 0; }
section.symptom {
margin: 0;
padding: 60px 0 80px; }
section.symptom ._inwrap {
margin: 0 auto;
width: 1040px; }
@media screen and (max-width: 1040px) {
section.symptom ._inwrap {
width: 90%; } }
section.symptom ._inwrap ._ttl {
margin-bottom: 40px;
line-height: 1.6;
color: #000;
font-size: 30px;
font-size: 3rem;
text-align: center;
letter-spacing: 1px; }
@media screen and (max-width: 768px) {
section.symptom ._inwrap ._ttl {
font-size: 24px;
font-size: 2.4rem; } }
section.access {
margin: 0;
padding: 0 0 80px; }
.frontPage section.access {
padding: 60px 0 80px;
background: #f7f7f7; }
section.access ._inwrap {
margin: 0 auto;
width: 1040px; }
@media screen and (max-width: 1040px) {
section.access ._inwrap {
width: 90%; } }
@media screen and (max-width: 768px) {
section.access ._inwrap {
width: 100%; } }
@media screen and (max-width: 768px) {
.frontPage section.access ._inwrap {
width: 90%; } }
section.access ._inwrap ._ttl {
margin-bottom: 40px;
line-height: 1.6;
color: #000;
font-size: 30px;
font-size: 3rem;
text-align: center;
letter-spacing: 1px; }
@media screen and (max-width: 768px) {
section.access ._inwrap ._ttl {
font-size: 24px;
font-size: 2.4rem; } }
section.access ._inwrap ._address {
margin: 0 0 30px;
padding: 20px 40px;
box-sizing: border-box;
line-height: 1.8;
background: #f7f7f7;
font-size: 16px;
font-size: 1.6rem;
text-align: left; }
@media screen and (max-width: 768px) {
section.access ._inwrap ._address {
padding: 10px 20px;
font-size: 14px;
font-size: 1.4rem; } }
.frontPage section.access ._inwrap ._address {
background: #fff; }
section.access ._inwrap ._address ._station {
padding: 0 10px;
display: inline-block;
background: #EDD634;
color: #333; }
section.access ._inwrap ._gmap {
margin: 0 auto; }
section.access ._inwrap ._subTtl {
margin: 120px auto 80px;
padding: 40px;
border-top: 2px solid #d3b77a;
border-bottom: 2px solid #d3b77a;
box-sizing: border-box;
line-height: 1.8;
width: 80%;
font-size: 24px;
font-size: 2.4rem;
text-align: center; }
@media screen and (max-width: 768px) {
section.access ._inwrap ._subTtl {
margin: 120px auto 40px;
border-top: 1px solid #d3b77a;
border-bottom: 1px solid #d3b77a;
width: 80%;
font-size: 18px;
font-size: 1.8rem; } }
section.access ._inwrap ._directions {
margin: 0 auto;
width: 80%; }
@media screen and (max-width: 768px) {
section.access ._inwrap ._directions {
width: 90%; } }
section.access ._inwrap ._directions li {
margin: 0 0 80px;
padding: 0;
position: relative;
width: 100%; }
@media screen and (max-width: 768px) {
section.access ._inwrap ._directions li {
margin-bottom: 40px; } }
section.access ._inwrap ._directions li::before {
content: '';
border-bottom: 1px solid #333;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px; }
@media screen and (max-width: 768px) {
section.access ._inwrap ._directions li::before {
display: none; } }
section.access ._inwrap ._directions li dl {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
width: 100%;
font-size: 0; }
section.access ._inwrap ._directions li dl::after {
content: "";
clear: both;
display: block; }
section.access ._inwrap ._directions li dl::before {
content: '';
margin-top: .5em;
padding-left: 1em;
display: inline-block;
line-height: 1.4;
width: calc(50% - 100px - 1em);
color: #d3b77a;
font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-size: 48px;
font-size: 4.8rem;
font-weight: 800;
font-style: italic;
vertical-align: middle; }
@media screen and (max-width: 768px) {
section.access ._inwrap ._directions li dl::before {
margin: 0 auto;
padding: 0;
display: block;
width: 100%;
text-align: center; } }
section.access ._inwrap ._directions li dl dt {
margin: 0;
display: inline-block;
width: 200px;
height: 200px;
vertical-align: middle; }
@media screen and (max-width: 768px) {
section.access ._inwrap ._directions li dl dt {
margin: 0 auto;
display: block; } }
section.access ._inwrap ._directions li dl dt img {
border-radius: 100px;
width: 100%;
height: auto; }
section.access ._inwrap ._directions li dl dd {
margin: 0;
margin-top: 2em;
width: calc(50% - 100px - 1em);
display: inline-block;
line-height: 1.6;
font-size: 16px;
font-size: 1.6rem;
text-align: right;
vertical-align: middle; }
@media screen and (max-width: 768px) {
section.access ._inwrap ._directions li dl dd {
display: block;
width: 100%;
font-size: 14px;
font-size: 1.4rem;
text-align: center; } }
section.access ._inwrap ._directions li:first-child dl::before {
content: '1'; }
section.access ._inwrap ._directions li:nth-of-type(2) dl::before {
content: '2'; }
section.access ._inwrap ._directions li:nth-of-type(3) dl::before {
content: '3'; }
section.access ._inwrap ._directions li:nth-of-type(4) dl::before {
content: '4'; }
section.access ._inwrap ._directions li:last-child {
margin-bottom: 0; }
section .contactForm dl {
padding: 30px 0;
border-bottom: 1px solid #eee;
box-sizing: border-box; }
section .contactForm dl::after {
content: "";
clear: both;
display: block; }
section .contactForm dl dt, section .contactForm dl dd {
padding: 10px 0;
color: #666;
font-size: 16px;
font-size: 1.6rem;
font-weight: normal; }
section .contactForm dl dt {
margin-right: 2%;
display: block;
position: relative;
float: left;
text-align: right;
width: calc(25% - 2%);
vertical-align: middle; }
@media screen and (max-width: 768px) {
section .contactForm dl dt {
margin: 0 auto 10px;
padding: 0;
float: none;
width: calc(100% - 4%);
font-size: 14px;
font-size: 1.4rem;
text-align: left; } }
section .contactForm dl dt span._essential::after {
content: '*';
color: #ff0000;
position: absolute;
right: -11px;
top: 11px;
font-size: 16px;
font-size: 1.6rem;
font-weight: normal; }
@media screen and (max-width: 768px) {
section .contactForm dl dt span._essential::after {
left: -11px;
top: 0; } }
section .contactForm dl dt span.en {
color: #999;
font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-size: 12px;
font-size: 1.2rem; }
section .contactForm dl dd {
padding: 10px 2%;
float: right;
width: calc(70% - 4%);
vertical-align: middle; }
@media screen and (max-width: 768px) {
section .contactForm dl dd {
margin: 0 auto;
padding: 0;
float: none;
width: calc(100% - 4%); } }
section .contactForm dl dd textarea {
width: 90%; }
section .contactForm dl dd span label {
font-weight: normal; }
section .contactForm dl dd span input, section .contactForm dl dd span textarea {
padding: 1%;
box-sizing: border-box;
line-height: 1.4;
width: 100%;
height: auto; }
section .contactForm p._caution {
margin-bottom: 10px;
text-align: left;
font-size: 12px;
font-size: 1.2rem; }
section .contactForm p._caution span {
color: #ff0000; }
section .contactForm p._confirm {
margin: 40px 0;
line-height: 1.6;
font-size: 14px;
font-size: 1.4rem;
text-align: center; }
section .contactForm p._confirm span {
display: inline; }
section .contactForm p input[type=submit] {
margin: 20px auto 0;
padding: 30px 0;
border: 1px solid #8dd1b9;
border-radius: 10px;
display: block;
width: 40%;
color: #fff;
background: #8dd1b9;
font-size: 16px;
font-size: 1.6rem;
cursor: pointer; }
@media screen and (max-width: 768px) {
section .contactForm p input[type=submit] {
padding: 20px;
width: 70%; } }
section .contactForm p input[type=submit]:hover, section .contactForm p input[type=submit]:focus {
color: #8dd1b9;
background: #fff; }
section.privacy ._privacyPolicy {
margin: 0;
padding: 40px;
border: 1px solid #eee;
box-sizing: border-box;
background: #f7f7f7; }
@media screen and (max-width: 768px) {
section.privacy ._privacyPolicy {
padding: 10% 5%; } }
section.privacy ._privacyPolicy ._lead {
margin: 0 auto 40px;
line-height: 1.4;
font-size: 14px;
font-size: 1.4rem; }
section.privacy ._privacyPolicy ._ppWrap {
margin: 0 auto 60px; }
@media screen and (max-width: 768px) {
section.privacy ._privacyPolicy ._ppWrap {
margin-bottom: 40px; } }
section.privacy ._privacyPolicy ._ppWrap:last-child {
margin-bottom: 0; }
section.privacy ._privacyPolicy ._ppWrap ._ttl {
margin-bottom: 20px;
padding: 20px;
line-height: 1.6;
color: #333;
background: #fff;
font-size: 24px;
font-size: 2.4rem;
text-align: left; }
@media screen and (max-width: 768px) {
section.privacy ._privacyPolicy ._ppWrap ._ttl {
padding: 10px 15px;
font-size: 16px;
font-size: 1.6rem;
font-weight: 800; } }
section.privacy ._privacyPolicy ._ppWrap ._ppCont {
margin: 0 auto;
width: 95%; }
@media screen and (max-width: 768px) {
section.privacy ._privacyPolicy ._ppWrap ._ppCont {
width: 90%; } }
section.privacy ._privacyPolicy ._ppWrap ._ppCont ul li {
margin-bottom: 1em;
padding-left: 1em;
line-height: 1.6;
font-size: 16px;
font-size: 16px;
text-indent: -1em; }
@media screen and (max-width: 768px) {
section.privacy ._privacyPolicy ._ppWrap ._ppCont ul li {
font-size: 14px;
font-size: 1.4rem; } }
section.privacy ._privacyPolicy ._ppWrap ._ppCont ul li:last-child {
margin-bottom: 0; }
section.privacy ._privacyPolicy ._ppWrap ._ppCont ul li::before {
content: '◇'; }
section.privacy ._privacyPolicy ._ppWrap ._ppCont dl dt, section.privacy ._privacyPolicy ._ppWrap ._ppCont dl dd {
line-height: 1.6;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
section.privacy ._privacyPolicy ._ppWrap ._ppCont dl dt, section.privacy ._privacyPolicy ._ppWrap ._ppCont dl dd {
font-size: 14px;
font-size: 1.4rem; } }
section.privacy ._privacyPolicy ._ppWrap ._ppCont dl dt {
margin-bottom: 1em; }
.bnrArea {
margin: 0;
padding: 0;
width: 100%; }
@media screen and (max-width: 768px) {
.bnrArea {
margin-left: -5.555%;
padding: 40px 0;
width: 111.111%;
background: #f7f7f7; } }
.frontPage .bnrArea {
padding: 80px 0;
background: #f7f7f7; }
@media screen and (max-width: 768px) {
.frontPage .bnrArea {
margin-left: 0;
padding: 40px 0;
width: 100%; } }
.bnrArea ._inwrap {
margin: 0 auto;
width: 95%;
background-image: url(//yotsubain.com/wp/wp-content/themes/images/common/bg_pat_dia_yel.png);
background-repeat: repeat;
background-position: center;
background-size: 200px 200px; }
.bnrArea ._inwrap::after {
content: "";
clear: both;
display: block; }
@media screen and (max-width: 1040px) {
.bnrArea ._inwrap {
width: 90%; } }
.frontPage .bnrArea ._inwrap {
width: 1040px; }
@media screen and (max-width: 1040px) {
.frontPage .bnrArea ._inwrap {
width: 90%; } }
.bnrArea ._separate {
margin: 40px 0;
width: calc(50% - 20px); }
@media screen and (max-width: 768px) {
.bnrArea ._separate {
margin: 0;
padding: 40px;
width: calc(100% - 80px); } }
.frontPage .bnrArea ._separate {
margin: 40px;
width: calc(50% - 60px); }
@media screen and (max-width: 768px) {
.frontPage .bnrArea ._separate {
margin: 0;
padding: 40px;
width: calc(100% - 80px); } }
.bnrArea ._separate:first-of-type {
margin: 40px 20px 40px 0;
float: left; }
@media screen and (max-width: 768px) {
.bnrArea ._separate:first-of-type {
margin: 0;
float: none; } }
.frontPage .bnrArea ._separate:first-of-type {
margin: 40px 20px 40px 40px;
float: left; }
@media screen and (max-width: 768px) {
.frontPage .bnrArea ._separate:first-of-type {
margin: 0;
float: none; } }
.bnrArea ._separate:nth-of-type(2) {
margin: 40px 0 40px 20px;
float: right; }
@media screen and (max-width: 768px) {
.bnrArea ._separate:nth-of-type(2) {
margin: 0;
padding-top: 0;
float: none; } }
.frontPage .bnrArea ._separate:nth-of-type(2) {
margin: 40px 40px 40px 20px;
float: right; }
@media screen and (max-width: 768px) {
.frontPage .bnrArea ._separate:nth-of-type(2) {
margin: 0;
padding-top: 0;
float: none; } }
.bnrArea ._sepTtl {
margin-bottom: 10px;
line-height: 1.4;
font-size: 24px;
font-size: 2.4rem;
text-align: left; }
@media screen and (max-width: 768px) {
.bnrArea ._sepTtl {
margin-bottom: 20px;
margin-left: -40px;
padding: 20px;
width: calc(100% + 40px);
background: #f7f7f7;
font-size: 18px;
font-size: 1.8rem; } }
.bnrArea ._treSymLead {
margin-bottom: 20px;
line-height: 1.6;
font-size: 14px;
font-size: 1.4rem;
text-align: left; }
.bnrArea ._bnr {
margin: 0 auto;
width: 100%; }
.bnrArea ._bnr a {
display: block;
box-sizing: border-box; }
.bnrArea ._bnr a img {
width: 100%;
height: auto; }
.bnrArea ._bnr a:hover img, .bnrArea ._bnr a:active img {
opacity: .9; }
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
padding: 20px;
line-height: 1.4;
font-size: 14px;
font-size: 1.4rem; }
.priceCont::after {
content: "";
clear: both;
display: block; }
@media screen and (max-width: 768px) {
.priceCont {
margin: 0 auto;
width: 100%; } }
.priceCont ._ttl {
margin-bottom: 30px;
padding: 10px 20px;
line-height: 1.4;
background: #f7f7f7;
font-size: 24px;
font-size: 2.4rem;
font-weight: normal;
text-align: left; }
@media screen and (max-width: 768px) {
.priceCont ._ttl {
margin-bottom: 20px;
font-size: 18px;
font-size: 1.8rem;
text-align: center; } }
.priceCont ._ttl._joint {
margin-top: 80px; }
@media screen and (max-width: 768px) {
.priceCont ._ttl._joint {
margin-top: 40px; } }
.priceCont ._paragraph {
margin: 0 auto 20px;
line-height: 1.6;
width: 90%;
font-size: 16px;
font-size: 1.6rem; }
@media screen and (max-width: 768px) {
.priceCont ._paragraph {
width: 100%;
font-size: 14px;
font-size: 1.4rem; } }
.priceCont ._paragraph._caution {
margin-top: 20px;
line-height: 1.4;
font-size: 14px;
font-size: 1.4rem; }
@media screen and (max-width: 768px) {
.priceCont ._paragraph._caution {
font-size: 12px;
font-size: 1.2rem; } }
.priceCont ._tbl {
margin: 0 auto 10px;
width: 90%; }
@media screen and (max-width: 768px) {
.priceCont ._tbl {
width: 100%; } }
.priceCont ._tbl tr th, .priceCont ._tbl tr td {
padding: 1.5% 0;
border: 1px solid #eee;
font-size: 16px;
font-size: 1.6rem;
vertical-align: middle; }
@media screen and (max-width: 768px) {
.priceCont ._tbl tr th, .priceCont ._tbl tr td {
padding: 20px 0;
font-size: 12px;
font-size: 1.2rem; } }
.priceCont ._tbl tr th sup, .priceCont ._tbl tr td sup {
font-size: 85px;
font-size: 0.85rem;
vertical-align: baseline; }
.priceCont ._tbl tr th {
background: #d3b77a; }
.priceCont ._tbl tr td {
text-align: center; }
.priceCont ._tbl tr._tblTtl th, .priceCont ._tbl tr._tblTtl td {
width: 20%; }
.priceCont ._tbl tr._tblTtl th {
color: #fff;
background: #4f4c4a;
text-align: center; }
.priceCont ._phtArea {
margin: 0 2% 4% 4%;
float: right;
width: 30%; }
.priceCont ._detailArea {
margin: 0 2%; }
.priceCont ._detailArea dl dt, .priceCont ._detailArea dl dd {
line-height: 1.6; }
.priceCont ._detailArea dl dt {
margin-bottom: 15px;
padding-bottom: 0;
padding-right: 0.5em;
padding-left: 0.5em;
border-left: 7px solid #40444d;
font-weight: bold;
font-size: 14px;
font-size: 1.4rem;
vertical-align: middle; }
.priceCont ._detailArea dl.about {
padding-bottom: 2em; }
.priceCont ._detailArea dl.about dt::before {
padding-right: 7px;
font-family: FontAwesome;
font-size: 16px;
font-size: 1.6rem;
font-weight: normal;
vertical-align: middle; }
.priceCont ._detailArea dl.recommend dt::before {
padding-right: 7px;
font-size: 16px;
font-size: 1.6rem;
font-weight: normal;
vertical-align: middle; }
.priceCont ._detailArea dl ul {
margin: 0; }
.priceCont ._detailArea dl ul li {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
list-style: none; }
.priceCont ._detailArea dl.related-post {
padding-top: 4em; }
.priceCont ._detailArea dl.related-post::after {
content: "";
clear: both;
display: block; }
.priceCont ._detailArea dl.related-post dt {
display: block;
vertical-align: middle;
border: none;
float: left;
width: 7em; }
.priceCont ._detailArea dl.related-post dt:after {
padding-left: 0.5em;
content: '\f101'; }
.priceCont ._detailArea dl.related-post dd {
display: block;
vertical-align: middle;
float: left; }
.priceCont ._detailArea dl.related-post dd a:hover, .priceCont ._detailArea dl.related-post dd a:active {
text-decoration: underline; }

.ahm-content-end-marker {
all: initial;
display: block;
height: 0;
width: 100%;
}
.ahm-heatmap-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
font-family: Arial, sans-serif;
font-size: 30px;
font-weight: bold;
text-shadow: 1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff, -1px 1px 1px #fff;
color: #000;
background-color: rgba(0, 0, 0, 0.2);
overflow: hidden;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-user-select: none;
cursor: default;
pointer-events: none;
}
.ahm-heatmap-flow {
position: relative;
}
.ahm-heatmap-container .height-40px {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 100%;
}
.ahm-heatmap-container .count-bar {
font-size: 12px;
position: absolute;
right: 0;
min-width: 48px;
height: 40px;
text-align: center;
line-height: 40px;
background: #ef96;
}
.ahm-nav .nav-tab-disabled {
opacity: 0.64;
pointer-events: none;
}
.ahm-nav .nav-tab {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.ahm-nav .nav-tab .dashicons {
position: relative;
top: 1px;
}
.ahm-nav .nav-tab-active,
.ahm-nav .nav-tab-active:hover,
.ahm-nav .nav-tab-active:focus {
background: #fff;
}
.ahm-footer {
font-weight: bold;
font-size: larger;
text-align: right;
color: #aaa;
text-shadow: 1px 1px 1px #fff;
}
#ahm-description {
border: 1px solid #ccc;
border-radius: 0.5em;
padding: 0.5em 1em 0;
margin: 0.5em 0;
width: 100%;
box-sizing: border-box;
}
#ahm-description legend {
font-weight: bold;
}
#ahm-description img {
max-width: 100%;
}
#ahm-description .outer {
width: 100%;
overflow: hidden;
}
#ahm-description .inner {
display: flex;
width: 300%;
flex-flow: row nowrap;
position: relative;
}
#ahm-description .description {
width: 100%;
}
#ahm-description.click-heatmap .inner {
left: 0;
}
#ahm-description.breakaway-heatmap .inner {
left: -100%;
}
#ahm-description.attention-heatmap .inner {
left: -200%;
}
#ahm-view-form .wp-list-table thead a .dashicons,
#ahm-view-form .wp-list-table tfoot a .dashicons {
position: relative;
top: 1px;
}
#ahm-view-form .wp-list-table .sorting-indicator {
display: inline-block;
}
#ahm-view-form .wp-list-table thead,
#ahm-view-form .wp-list-table tfoot {
white-space: nowrap;
}
#ahm-view-form .wp-list-table th.sortable:not(.column-page) a span,
#ahm-view-form .wp-list-table th.sorted:not(.column-page) a span {
float: unset;
}
#ahm-view-form .wp-list-table .column-page {
word-break: break-all;
}
#ahm-view-form .wp-list-table .click_pc,
#ahm-view-form .wp-list-table .breakaway_pc,
#ahm-view-form .wp-list-table .attention_pc,
#ahm-view-form .wp-list-table .click_mobile,
#ahm-view-form .wp-list-table .breakaway_mobile,
#ahm-view-form .wp-list-table .attention_mobile {
white-space: nowrap;
text-align: right;
}
#ahm-view-form .wp-list-table .ahm-cell {
display: inline-block;
width: 100%;
text-align: right;
font-variant-numeric: tabular-nums;
cursor: pointer;
white-space: nowrap;
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#ahm-view-form .wp-list-table .ahm-cell-blank,
#ahm-unread-form .wp-list-table .ahm-cell-blank {
color: #ccc;
cursor: default;
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
display: inline-block;
text-align: center;
min-width: 57px;
}
#ahm-view-form .wp-list-table .ahm-cell:not(:hover):not(:active):not(:focus) {
color: #555;
}
#ahm-view-form .wp-list-table .ahm-cell .dashicons {
vertical-align: text-bottom;
position: relative;
top: 2px;
}
#ahm-view-form .wp-list-table .ahm-cell:not(:hover):not(:active):not(:focus) .dashicons {
visibility: hidden;
}
@media screen and (max-width: 782px) {
#ahm-view-form .ahm-footer {
visibility: hidden;
}
#ahm-view-form .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column) {
padding-left: 50%;
}
#ahm-view-form .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before {
width: 50%;
line-height: 2;
}
#ahm-view-form .ahm-cell,
#ahm-view-form .ahm-cell-blank {
line-height: 2;
}
#ahm-description ~ .subsubsub {
display: none;
}
}
#ahm-unread-form .wp-list-table .pc,
#ahm-unread-form .wp-list-table .mobile {
white-space: nowrap;
min-width: calc(200px + 4.5em);
}
#ahm-unread-form .ahm-ratio {
line-height: 60px;
font-size: 150%;
width: 3em;
display: inline-block;
text-align: right;
}
#ahm-unread-form .ahm-ratio::after {
content: "%";
}
#ahm-unread-form .ahm-ratio.warning {
color: #f00;
}
#ahm-unread-form .ahm-ratio.normal,
#ahm-unread-form .ahm-ratio.na {
color: #ccc;
}
#ahm-unread-form .ahm-ratio.na::after {
visibility: hidden;
}
#ahm-unread-form .ahm-heatmap-databox {
display: none;
width: 192px;
padding-right: 6px;
margin-left: 2px;
text-align: right;
position: relative;
}
#ahm-unread-form tr.ahm-show-databox .ahm-heatmap-databox {
display: block;
}
#ahm-unread-form .ahm-heatmap-databox-column {
display: inline-block;
min-width: 64px;
}
#ahm-unread-form .ahm-heatmap-databox-column .dashicons-external {
visibility: hidden;
}
#ahm-unread-form .ahm-heatmap-databox-column:hover .dashicons-external {
visibility: visible;
}
.ahm-unread-legend {
display: inline-block;
width: 1.5em;
height: 1em;
border: 1px solid rgba(0, 0, 0, 40%);
}
#ahm-options-form .ahm-inline-block {
display: inline-block;
}
#ahm-options-form input[type="range"] {
float: left;
margin-right: 0.5em;
}
#ahm-options-form input[type="range"]:not(:disabled) {
cursor: pointer;
}
#ahm-options-form input[type="range"] + span {
display: inline-block;
}
#ahm-options-form .premium-options {
font-size: smaller;
font-weight: bold;
background: #800080;
color: #fff;
padding: 0.1em 0.3em;
border-radius: 0.2em;
}
#ahm-options-form th .dashicons-editor-help {
cursor: pointer;
opacity: 0.4;
}
#ahm-options-form th .ahm-tooltip:focus .dashicons-editor-help,
#ahm-options-form th .ahm-tooltip:hover .dashicons-editor-help {
opacity: 1;
}
#ahm-options-form th .ahm-tooltip > div {
display: none;
position: absolute;
z-index: 9999;
border-radius: 0.25em;
border: 2px solid rgba(0, 0, 0, 0.4);
background: rgba(255, 255, 255, 0.9375);
padding: 0.25em 1.5em;
font-weight: normal;
}
div.ahm-unread-list-page {
width: 100%;
border-radius: 0.3em;
}
div.ahm-unread-list-page-inner {
min-height: 60px;
}
div.ahm-pt {
display: flex;
flex-flow: row wrap;
text-align: center;
}
div.ahm-c2 {
width: 50%;
}
div.ahm-c6 {
width: 16.6666%;
}
div.ahm-unread-list-page-hover {
display: none;
position: absolute;
z-index: 9999;
border-radius: 0.25em;
border: 2px solid rgba(0, 0, 0, 0.4);
background: rgba(255, 255, 255, 0.9375);
padding: 0.25em 1.5em;
font-weight: normal;
cursor: auto;
}
@media not screen and (max-width: 782px) {
div.ahm-unread-list-page {
cursor: pointer;
}
div.ahm-unread-list-page:focus,
div.ahm-unread-list-page:hover {
background-color: rgba(127, 127, 127, 0.125);
box-shadow: 0 0 0 0.35em rgba(127, 127, 127, 0.125);
}
div.ahm-unread-list-page:focus {
outline: solid 0.1em rgba(127, 127, 127, 0.5);
outline-offset: 0.25em;
}
div.ahm-unread-list-page:focus div.ahm-unread-list-page-hover,
div.ahm-unread-list-page:hover div.ahm-unread-list-page-hover {
display: block;
}
div.ahm-c2,
div.ahm-c6 {
margin: 0.1em 0;
}
div.ahm-c2::after {
display: block;
content: "";
width: 95%;
height: 0.125em;
margin: 0 auto;
border-radius: 0.1em;
background: #ccc;
}
}
@media screen and (max-width: 782px) {
div.ahm-unread-list-page-inner {
min-height: unset;
}
.is-expanded div.ahm-unread-list-page-hover {
position: static;
display: block;
}
.is-expanded div.ahm-pt {
flex-flow: column wrap;
height: 9em;
}
.is-expanded div.ahm-c2 {
width: unset;
height: 4.5em;
line-height: 4.5;
}
.is-expanded div.ahm-c2::after {
content: "";
display: inline-block;
float: right;
width: 0.15em;
height: 3.7em;
margin: 0.4em 0;
border-radius: 0.1em;
background: #ccc;
}
.is-expanded div.ahm-c6 {
width: unset;
height: 1.5em;
}
}
#ahm-options-form input[type="radio"] + label > div {
padding-left: 20px;
}
#ahm-options-form th .ahm-tooltip:focus > div,
#ahm-options-form th .ahm-tooltip:hover > div {
display: block;
}
#ahm-options-form input[type="radio"]:checked + span,
#ahm-options-form input[type="radio"]:checked + label > span:first-child {
font-weight: bold;
}
#ahm-options-form input[type="text"] {
display: block;
width: 100%;
}
#ahm-vs {
border-collapse: collapse;
table-layout: fixed;
}
#ahm-vs td {
text-align: center;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
}
#ahm-vs th {
text-align: center;
font-weight: bold;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
}
#ahm-vs tbody th {
text-align: left;
}
#ahm-vs th:first-child {
width: 18em;
}
#ahm-vs td:first-child,
#ahm-vs th:first-child {
border-left: none;
}
#ahm-vs td:last-child,
#ahm-vs th:last-child {
border-right: none;
}
#ahm-vs .dashicons-no-alt {
color: #aaa;
}
#ahm-vs .current .dashicons-yes-alt {
color: #36f;
}
#ahm-vs .current .dashicons-no-alt {
color: #f00;
}
#ahm-vs .ib {
display: inline-block;
}.addtoany_content{clear:both;margin:16px 0}.addtoany_header{margin:0 0 16px}.addtoany_list{display:inline;line-height:16px}.addtoany_list a,.widget .addtoany_list a{border:0;box-shadow:none;display:inline-block;font-size:16px;padding:0 4px;vertical-align:middle}.addtoany_list a img{border:0;display:inline-block;opacity:1;overflow:hidden;vertical-align:baseline}.addtoany_list a span{display:inline-block;float:none}.addtoany_list.a2a_kit_size_32 a{font-size:32px}.addtoany_list.a2a_kit_size_32 a:not(.addtoany_special_service)>span{height:32px;line-height:32px;width:32px}.addtoany_list a:not(.addtoany_special_service)>span{border-radius:4px;display:inline-block;opacity:1}.addtoany_list a .a2a_count{position:relative;vertical-align:top}.addtoany_list a:hover,.widget .addtoany_list a:hover{border:0;box-shadow:none}.addtoany_list a:hover img,.addtoany_list a:hover span{opacity:.7}.addtoany_list a.addtoany_special_service:hover img,.addtoany_list a.addtoany_special_service:hover span{opacity:1}.addtoany_special_service{display:inline-block;vertical-align:middle}.addtoany_special_service a,.addtoany_special_service div,.addtoany_special_service div.fb_iframe_widget,.addtoany_special_service iframe,.addtoany_special_service span{margin:0;vertical-align:baseline!important}.addtoany_special_service iframe{display:inline;max-width:none}a.addtoany_share.addtoany_no_icon span.a2a_img_text{display:none}a.addtoany_share img{border:0;width:auto;height:auto}