@charset "utf-8";
  body {
margin:0;
padding:0;
font-size:13px;
color: #222;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
background-repeat:repeat;
background-color:#FFF;
line-height:1.6em;
}
body.stop-transitions * {
transition: none !important;
}
ul , li , h1 , h2 , h3 ,h4 , h5 , h6 , table , tr , td , img , p , a , div , form , dl , dt , dd {
margin:0;
padding:0;
}
#wrap {
margin-left:100px;
box-sizing: border-box; background-image:repeating-linear-gradient(to right,#f5f5f5, #f5f5f5 1px, transparent 0, transparent 25%);
}
@media screen and (max-width: 800px) {
#wrap {
margin-left:0px; }
}
a {
color: #191a7c;
border:none;
text-decoration:underline;
background-repeat:no-repeat;
outline:none;
}
a:link{
color: #191a7c;
border:none;
text-decoration:underline;
background-repeat:no-repeat;
}
a:visited {
color: #191a7c;
text-decoration: underline;
}
a:hover {
color: #191a7c;
text-decoration:none;
}
ul , li {
list-style-type:none;
}
img {
border:0;
max-width:100%;
}
a:hover img { }
table {
border-collapse:collapse;
}
h1 , h2 {
letter-spacing: 0.1em;
}
h1 , h2 , h3 , h4 , h5 , h6 {
font-weight:normal;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif !important;
}
p {
color:#666;
}
@media screen and (max-width: 640px) {
iframe {
max-width: 100%;
}
}
::selection {
background-color: #191a7c;
color:#FFF;
}
::-moz-selection {
background-color: #191a7c;
color:#FFF;
}
.font_min {
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif !important;
}
.font_normal {
font-family: "游ゴシック", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif !important;
} .clearfix { }
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
} br.clear {
clear:both;
}
img.border {
padding:2px;
border:solid 1px #333;
}
a.noborder {
text-decoration:none;
}
span.ajust {
text-indent:-9999px;
}
span.bold {
font-weight:bold;
}
span.bold2 {
font-weight:bold;
font-size:14px;
}
span.red_bold {
font-weight:bold;
color:#e21212;
}
span.red_bold2 {
font-weight:bold;
color:e21212;
font-size:14px;
}
span.bg {
background-color:#000;
color:#FFF;
margin-left:3px;
margin-right:3px;
}
span.bg2 {
background-color:#e21212;
color:#FFF;
margin-left:3px;
margin-right:3px;
}
.sp_only {
display: none;
}
@media screen and (max-width: 640px) {
.sp_only {
display: block;
}
}
.pc_only {
display: block;
}
@media screen and (max-width: 800px) {
.pc_only {
display: none;
}
}
#loader {
width: 115px;
height: 360px;
display: none;
position: absolute;
_position: absolute; top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 10000;
}
@media screen and (max-width: 640px) {
#loader {
width:80px;
height:250px;
}
}
@media screen and (max-width: 640px) {
#loader img{
width:100%;
height:auto;
}
}
#fade {
width: 100%;
height: 100%;
display: none;
background-color: #FFFFFF;
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
} .scroll_fadein {
opacity: 0;
transform: translate(0,60px); 
-webkit-transform: translate(0,60px);
-webkit-transition: 0.8s 0s ease-in-out;
-moz-transition: 0.8s 0s ease-in-out;
-o-transition: 0.8s 0s ease-in-out;
transition: 0.8s 0s ease-in-out;
}
.scroll_fadein2 {
opacity: 0;
transform: translateX(-40px); 
-webkit-transform: translateX(-40px);
-webkit-transition: 1.5s 1s ease-in-out;
-moz-transition: 1.5s 1s ease-in-out;
-o-transition: 1.5s 1s ease-in-out;
transition: 1.5s 1s ease-in-out;
}
@media screen and (max-width: 800px) {
.scroll_fadein2 {
transform: translateX(0px); 
-webkit-transform: translateX(0px);
transform: translateY(40px); 
-webkit-transform: translateY(40px);
}
}
.scroll_fadein3 {
opacity: 0;
transform: translate(0,0px); 
-webkit-transform: translate(0,0px);
-webkit-transition: 0.8s 0s ease-in-out;
-moz-transition: 0.8s 0s ease-in-out;
-o-transition: 0.8s 0s ease-in-out;
transition: 0.8s 0s ease-in-out;
}
.scroll_fadein4 {
opacity: 0;
transform: translateX(40px); 
-webkit-transform: translateX(40px);
-webkit-transition: 1.5s 1s ease-in-out;
-moz-transition: 1.5s 1s ease-in-out;
-o-transition: 1.5s 1s ease-in-out;
transition: 1.5s 1s ease-in-out;
}
@media screen and (max-width: 800px) {
.scroll_fadein4 {
transform: translateX(0px); 
-webkit-transform: translateX(0px);
transform: translateY(40px); 
-webkit-transform: translateY(40px);
}
}
.scroll_fadein5 {
opacity: 0;
transform: translate(0,0px); 
-webkit-transform: translate(0,0px);
-webkit-transition: 1.5s 1s ease-in-out;
-moz-transition: 1.5s 1s ease-in-out;
-o-transition: 1.5s 1s ease-in-out;
transition: 1.5s 1s ease-in-out;
}
.fadein_mv{
opacity: 1.0;
transform: translate(0,0); 
-webkit-transform: translate(0,0);
} header {
width:100px;
height: 100vh;
position:fixed;
top:0px;
left: 0;
margin: auto;
z-index: 9999;
background-color: #FFF; }
@media screen and (max-width: 800px) {
header {
width:100%;
height:50px;
}
}
@media screen and (max-width: 640px) {
header {
}
}
.fadeout {
opacity: 0;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.fadein {
opacity: 1;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
header nav {
width:100px;
height: 100vh;
position: relative;
}
@media screen and (max-width: 800px) {
header nav {
width:100%;
height:50px;
}
}
@media screen and (max-width: 640px) {
header nav {
}
}
div#logo {
width:120px;
height:30px;
text-indent: -9999px;
position: absolute;
top:70px;
left:-10px;
transform:rotate(90deg);
}
@media screen and (max-width: 800px) {
div#logo {
transform:none;
top:6px;
left:0;
right:0;
bottom:0;
margin:auto;
}
}
@media screen and (max-width: 640px) {
div#logo {
}
}
div#logo a {
display:block;
width:120px;
height:30px;
text-indent:-9999px;
overflow:hidden;
background-image:url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/logo.png);
background-size:120px auto;
background-position: 0px 0px;
}
@media screen and (max-width: 800px) {
div#logo a {
width:100px;
height:30px;
background-size:100px auto;
}
}
@media screen and (max-width: 640px) {
div#logo a {
}
}
#header_menu {
width:60px;
height:60px;
margin:0px 0px 0px 0px;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
@media screen and (max-width: 800px) {
#header_menu {
display: block;
position: absolute;
top:0px;
left:0px;
right:auto;
bottom:auto;
}
}
#header_menu a {
width:60px;
height:60px;
position: relative;
}
@media screen and (max-width: 800px) {
#header_menu a {
width:50px;
height:50px;
}
} #header_menu a span{
display: inline-block;
transition: all .4s; position: absolute;
left: 20%;
width: 60%;
height: 2px;
background: #191a7c;
}
#header_menu a span:nth-of-type(1) {
top:20px; 
}
@media screen and (max-width: 800px) {
#header_menu a span:nth-of-type(1) {
top:16px; 
}
}
#header_menu a span:nth-of-type(2) {
top:30px;
width: 50%;
}
@media screen and (max-width: 800px) {
#header_menu a span:nth-of-type(2) {
top:24px; 
}
}
#header_menu a span:nth-of-type(3) {
top:40px;
width: 40%;
}
@media screen and (max-width: 800px) {
#header_menu a span:nth-of-type(3) {
top:32px; 
}
}
#header_menu .btn-close span:nth-of-type(1) {
top: 24px;
left: 25%;
transform: translateY(6px) rotate(-135deg);
width: 50%;
}
#header_menu .btn-close span:nth-of-type(2) {
opacity: 0;
}
#header_menu .btn-close span:nth-of-type(3){
top: 36px;
left: 25%;
transform: translateY(-6px) rotate(135deg);
width: 50%;
} .menu-btn {
z-index: 1000000;
}
.menu-btn a {
display: inline-block;
text-decoration: none; } .overlay {
position: fixed;
top: 0;
z-index: 100000;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
background-position: center center;
background-size: cover;
}
.overlay .close {
width: 50px;
height: 50px;
display: none;
position: relative;
}
@media screen and (max-width: 800px) {
.overlay .close {
display: block;
}
}
@media screen and (max-width: 640px) {
.overlay .close {
}
}
.overlay .close span{
display: inline-block;
position: absolute;
left: 20%;
width: 60%;
height: 2px;
background: #191a7c;
}
.overlay .close span:nth-of-type(1) {
top: 18px;
left: 20%;
transform: translateY(6px) rotate(-135deg);
width: 50%;
}
.overlay .close span:nth-of-type(2){
top: 30px;
left: 20%;
transform: translateY(-6px) rotate(135deg);
width: 50%;
}
.overlay .menu {
margin: 0px auto 0% 0;
width: 300px;
height:100%;
background: #fff;
transition: .4s linear;
transform: translateX(-100%);
opacity: 0;
position: relative;
}
@media screen and (max-width: 800px) {
.overlay .menu {
width:100%;
transform: translateY(0%);
transition: .5s linear;
}
}
.is-open .menu {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: .3s linear;
}
.overlay .menu .box {
position: absolute; height:400px;
padding-top:15px;
top:0;
bottom:0;
left:10%;
margin:auto;
}
@media screen and (max-width: 800px) {
.overlay .menu .box {
width:70%;
position: static;
box-sizing: border-box;
padding:20px 0px 20px 0px;
margin:0 auto;
height:auto;
}
}
.overlay .menu ul {
}
@media screen and (min-width: 800px) {
.overlay .menu ul {
}
}
.overlay .menu ul li {
list-style: none;
text-transform: uppercase;
letter-spacing: 2px;
font-weight:normal;
text-align: left;
margin-bottom:10px;
}
@media screen and (min-width: 640px) {
.overlay .menu ul li {
margin-bottom:5px;
}
}
.overlay .menu ul li a {
padding: 15px 0;
font-size: 15px;
color:#191a7c;
text-decoration: none;
font-weight:bold;
display: block;
position: relative;
}
@media screen and (min-width: 800px) {
.overlay .menu ul li a {
font-size: 15px;
display: block;
padding: 15px 0;
}
}
@media screen and (max-width: 800px) {
.overlay .menu ul li a {
display: block;
padding: 15px 0;
}
}
.overlay .menu ul li a:after {
position: absolute;
background: #191a7c;
content: "";
display: block;
width: 0%;
height: 2px;
left: 0%;
bottom: 4px;
transition: all 0.4s;
}
.overlay .menu ul li a:hover:after {
width: 100%;
}
.overlay .menu ul .facebook {
}
.overlay .menu ul .facebook {
display: none;
}
@media screen and (max-width: 800px) {
.overlay .menu ul .facebook {
display: block;
}
}
.overlay .menu ul .facebook a {
display: block;
width:25px;
height:25px;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/head_facebook_icon.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto;
text-indent: -9999px;
} #header_facebook {
width:25px;
height:25px;
position: absolute;
bottom:20px;
left:38%;
}
@media screen and (max-width: 800px) {
#header_facebook {
display: none;
}
}
#header_facebook a {
display: block;
width:25px;
height:25px;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/head_facebook_icon.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto;
text-indent: -9999px;
} #head_contact {
position: fixed;
top:20px;
right:20px;
z-index: 9999;
}
@media screen and (max-width: 800px) {
#head_contact {
top:0px;
right:0px;
width:50px;
height:50px;
}
}
#head_contact a {
display: block;
background-color: #191a7c;
color:#FFF;
text-decoration: none;
font-size:13px;
line-height:1.7em;
padding:15px 20px 15px 70px;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/head_contact.png);
background-position: 20px center;
background-repeat: no-repeat;
background-size: 32px auto;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
@media screen and (max-width: 800px) {
#head_contact a {
padding:0;
background-position: 14px 14px;
width:80px;
height:50px;
background-size: 26px auto;
}
}
#head_contact a:hover {
background-color: #191a7c !important;
}
#head_contact a span {
}
@media screen and (max-width: 800px) {
#head_contact a span {
visibility: hidden;
}
}
.head_contact_top {
animation  : textFade1 6s;
}
@media screen and (max-width: 800px) {
.head_contact_top {
animation  : textFade1 0s;
}
} footer {
}
footer #backto_top {
width:100%;
height:60px;
}
@media screen and (max-width: 640px) {
footer #backto_top {
height:50px;
}
}
footer #backto_top a {
width:100%;
height:60px;
display: block;
background-color: #231815;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/footer_arrow.png);
background-size:70px auto;
background-position: center center;
background-repeat: no-repeat;
}
@media screen and (max-width: 640px) {
footer #backto_top a {
height:50px;
background-size:60px auto;
}
}
footer #footer_wrap {
padding:40px 0px 0px 0px;
}
@media screen and (max-width: 800px) {
footer #footer_wrap {
padding:50px 30px 30px 30px;
}
}
footer #footer_wrap #footer_menu {
}
@media screen and (max-width: 800px) {
footer #footer_wrap #footer_menu {
}
}
footer #footer_wrap #footer_menu ul {
text-align: center;
}
@media screen and (max-width: 800px) {
footer #footer_wrap #footer_menu ul {
}
}
footer #footer_wrap #footer_menu ul li {
margin:0px 10px 20px 10px;
font-size:13px;
display: inline-block;
}
@media screen and (max-width: 800px) {
footer #footer_wrap #footer_menu ul li {
margin:0px 30px 20px 30px;
}
}
@media screen and (max-width: 640px) {
footer #footer_wrap #footer_menu ul li {
margin:0px 10px 20px 10px;
}
}
footer #footer_wrap #footer_menu ul li a {
color:#231815;
text-decoration: none;
}
footer #copyright {
clear:both;
font-size:11px;
color:#999;
padding:0px 10px 40px 10px;
text-align: center;
}
@media screen and (max-width: 640px) {
footer #copyright {
font-size:11px;
padding:20px 5px;
}
}  section {
width: 100%;
padding: 80px 0px 80px 0px;
}
@media all and (max-width: 800px) {
section {
padding: 60px 0 60px 0;
}
}
@media all and (max-width: 640px) {
section {
width: 100%;
padding: 30px 0px 30px 0px;
box-sizing: border-box;
}
}
.top_section {
padding: 0px 0px 60px 0px;
}
.section_nopadding {
padding: 0px 0px 0px 0px;
} .contents {
max-width: 1200px;
margin: 0 auto;
}
@media all and (max-width: 1210px) {
.contents {
width: 96%;
}
}
@media all and (max-width: 800px) {
.contents {
padding:20px 0px 20px 0px;
width: 90%;
}
}
@media all and (max-width: 640px) {
.contents {
width: 90%;
}
}
.bg_gray {
background-color: #f8f8f8;
background-image:repeating-linear-gradient(to right,#eee, #eee 1px, transparent 0, transparent 25%);
}
.bg_stripe {
background-image:repeating-linear-gradient(to right,#eee, #eee 1px, transparent 0, transparent 25%);
} #page_visual {
padding: 0px 0px 0px 0px;
width:100%;
height:400px;
box-sizing: border-box;
background-repeat: no-repeat;
background-position: center center;
background-size: cover; position: relative;
margin:0px 0px 20px 0px;
text-align: center;
}
@media all and (max-width: 800px) {
#page_visual  {
height:300px;
margin:0px 0px 20px 0px;
}
}
@media all and (max-width: 640px) {
#page_visual  {
height:240px;
margin:0px 0px 20px 0px;
}
}
#page_visual #page_title {
width:100%;
color:#FFF;
font-weight:normal;
font-size:3.2vmax;
position: absolute;
top:50%;
text-align: center;
}
@media screen and (min-width: 1600px) {
#page_visual #page_title{
font-size:46px;
}
}
@media screen and (max-width: 800px) {
#page_visual #page_title{
font-size:3.6vmax;
}
}
@media screen and (max-width: 640px) {
#page_visual #page_title {
font-size:4.2vmax;
}
}
@media screen and (max-width: 330px) {
#page_visual #page_title {
}
} .title_center {
text-align: center;
margin:0 0 80px 0;
}
@media screen and (max-width: 800px) {
.title_center {
margin:0 0 40px 0;
}
}
.title_center .english_subtitle {
font-size:11px;
margin:0 0 10px 0;
}
@media screen and (max-width: 800px) {
.title_center .english_subtitle {
margin:0 0 5px 0;
}
}
.title_center h2 {
font-size:24px;
line-height:1.6em;
}
@media screen and (max-width: 800px) {
.title_center h2 {
font-size:22px;
}
}
@media screen and (max-width: 640px) {
.title_center h2 {
font-size:20px;
}
} .top_service {
font-size:0;
max-width:1100px;
margin:0 auto;
padding:80px 0 0 0;
}
.top_service .photo {
display: inline-block;
width:50%;
vertical-align: middle;
}
@media screen and (max-width: 1100px) {
.top_service .photo {
width:35%;
}
}
@media screen and (max-width: 1000px) {
.top_service .photo {
width:100%;
text-align: center;
margin:0 auto 20px auto;
}
}
.top_service .photo img {
max-width:450px;
}
@media screen and (max-width: 1100px) {
.top_service .photo img {
max-width:100%;
}
}
@media screen and (max-width: 1000px) {
.top_service .photo img {
max-width:70%;
}
}
.top_service .text {
display: inline-block;
width:50%;
vertical-align: middle;
font-size:13px;
box-sizing: border-box;
padding:0 0 0 4%;
}
@media screen and (max-width: 1100px) {
.top_service .text {
width:65%;
padding:0 0 0 8%;
}
}
@media screen and (max-width: 1000px) {
.top_service .text {
width:100%;
padding:0 10% 0 10%;
}
}
@media screen and (max-width: 640px) {
.top_service .text {
padding:0 5% 0 5%;
}
}
.top_service .text h3 {
font-size:11px;
margin:0 0 10px 0;
}
@media screen and (max-width: 1000px) {
.top_service .text h3 {
text-align: center;
}
}
.top_service .text h2 {
font-size:24px;
line-height:1.6em;
margin:0 0 40px 0;
}
@media screen and (max-width: 1000px) {
.top_service .text h2 {
text-align: center;
}
}
@media screen and (max-width: 800px) {
.top_service .text h2 {
font-size:20px;
}
}
@media screen and (max-width: 640px) {
.top_service .text h2 br {
display: none;
}
}
.top_service .text p {
margin:0 0 40px 0;
line-height:2em;
}
.top_service .text .button_more {
width:auto;
}
@media screen and (max-width: 1000px) {
.top_service .text .button_more {
margin:0 auto;
}
}
.top_service .text .button_more a {
display: inline-block;
padding: 20px 30px;
box-sizing: border-box;
font-size:15px;
font-weight:bold;
} .top_property {
max-width:1400px;
margin: 0 auto;
}
@media screen and (max-width: 1000px) {
.top_property  {
width:90%;
}
}
.top_property .box {
width:calc(100% / 3);
padding-top:30%;
float:left;
background-position: center center;
background-size: cover;
position: relative;
}
@media screen and (max-width: 1200px) {
.top_property .box  {
padding-top:40%;
}
}
@media screen and (max-width: 1000px) {
.top_property .box  {
width:100%;
padding-top:40%;
float:none;
margin-bottom:20px;
}
}
@media screen and (max-width: 640px) {
.top_property .box  {
padding-top:80%;
}
}
.top_property .box a {
width:100%;
height:100%;
display: block;
position: absolute;
top:0;
left:0;
color:#FFF;
text-decoration: none;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.top_property .mall {
}
.top_property .tenant {
margin:100px 0 0 0;
}
@media screen and (max-width: 1000px) {
.top_property .tenant {
margin:0px 0 0 0;
margin-bottom:20px;
}
}
.top_property .private {
}
.top_property .box a .mask {
width:100%;
height:100%;
display: block;
position: absolute;
top:0;
left:0;
background-color: rgba(0,0,0,0.35);
}
.top_property .box a:hover {
opacity: 0.7;
}
.top_property .box a h3 {
position: absolute;
top:-5%;
left:0;
right:0;
bottom:0;
margin:auto;
text-align: center;
height:1em;
font-size:24px;
}
@media screen and (max-width: 1400px) {
.top_property .box a h3 {
top:25%;
bottom:auto;
}
}
@media screen and (max-width: 1100px) {
.top_property .box a h3 {
top:20%;
}
}
@media screen and (max-width: 1000px) {
.top_property .box a h3 {
top:30%;
}
}
@media screen and (max-width: 640px) {
.top_property .box a h3 {
top:30%;
font-size:20px;
}
}
.top_property .box a .arrow {
position: absolute;
top:25%;
left:0;
right:0;
bottom:0;
margin:auto;
width:45px;
height:45px;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/arrow1.png);
background-repeat: no-repeat;
background-size: 45px auto;
}
@media screen and (max-width: 1400px) {
.top_property .box a .arrow {
top:38%;
bottom:auto;
}
}
@media screen and (max-width: 1100px) {
.top_property .box a .arrow {
top:35%;
}
}
@media screen and (max-width: 1000px) {
.top_property .box a .arrow {
top:45%;
}
}
@media screen and (max-width: 640px) {
.top_property .box a .arrow {
top:45%;
width:30px;
height:30px;
background-size: 30px auto;
}
}
.top_property .box a p {
color:#FFF;
position: absolute;
bottom:0;
padding:0 40px 30px 40px;
line-height:1.8em;
}
@media screen and (max-width: 800px) {
.top_property .box a p {
padding:0 20px 20px 20px;
line-height:1.6em;
font-size:12px;
}
} .pikup-items {
max-width: 1600px;
margin: 0 auto;
}
@media all and (max-width: 800px) {
.top_pickup {
padding-bottom:40px;
}
}
@media all and (max-width: 640px) {
.top_pickup {
padding-bottom:60px;
}
}
.pikup-items div {
padding:0 20px 0px 0;
}
@media all and (max-width: 800px) {
.pikup-items div {
padding:0 15px 0px 5px;
}
}
.pikup-items .slick-slide {
width:300px;
}
@media all and (max-width: 800px) {
.pikup-items .slick-slide {
width:240px;
}
}
.pikup-items a {
display: block;
text-decoration: none;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.pikup-items a:hover {
opacity: 0.8;
}
.pikup-items a .photo {
padding:0;
display: block;
width:100%;
padding-top:75%;
background-size: cover;
background-position: center center;
margin:0 0 20px 0;
}
@media all and (max-width: 800px) {
.pikup-items a .photo {
padding-top:85%;
}
}
.pikup-items a .title {
padding:0;
display: block;
margin:0 0 12px 0;
font-size:14px;
line-height: 180%;
min-height: calc(1em * 1.8 * 2);
color:#111;
}
@media all and (max-width: 800px) {
.pikup-items a .title {
font-size:13px;
line-height: 160%;
}
}
.pikup-items a .name {
padding:0;
display: block;
font-size:12px;
color:#777;
line-height:18px;
}
.pikup-items a .area {
padding:0;
display: block;
font-size:12px;
color:#777;
line-height:18px;
margin:0 0 6px 0;
}
.pikup-items a .area:before {
content:'エリア';
display: inline-block;
border:solid 1px #999;
color:#999;
font-size:10px;
line-height:12px;
padding:2px 4px;
width:40px;
box-sizing: border-box;
margin:0 10px 0 0;
text-align: center;
}
.pikup-items a .line {
padding:0;
display: block;
font-size:12px;
color:#777;
line-height:18px;
}
.pikup-items a .line:before {
content:'路線';
display: inline-block;
border:solid 1px #999;
color:#999;
font-size:10px;
line-height:12px;
padding:2px 4px;
width:40px;
box-sizing: border-box;
margin:0 10px 0 0;
text-align: center;
}
.pikup-items .slick-prev {
bottom: -80px;
right:100px;
}
.pikup-items .slick-next {
bottom: -80px;
right:40px;
}
.pikup-items .slick-dots {
bottom: -62px;
right: 170px;
}
@media all and (max-width: 800px) {
.pikup-items .slick-dots {
right: 0px;
}
}
@media all and (max-width: 640px) {
.pikup-items .slick-dots {
bottom: -50px;
right: 0px;
}
} .top_works {
max-width:1600px;
margin: 0 auto;
}
.multiple-items {
width: 92%;
margin: -40px 0 80px 8%;
}
@media all and (max-width: 800px) {
.multiple-items {
width: 100%;
margin: 0 0 80px 0;
}
}
.multiple-items div {
padding-right: 4rem;
padding-top:10px;
padding-left:10px;
}
@media all and (max-width: 800px) {
.multiple-items div {
padding-right: 35px;
padding-top:0px;
padding-left:10px;
}
}
@media all and (max-width: 640px) {
.multiple-items div {
padding-right: 15px;
padding-top:0px;
padding-left:5px;
}
}
.multiple-items div a {
display: block;
text-decoration: none;
transition: all .4s ease-out;
position: relative;
color:#FFF;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1); -webkit-transition: 0.4s 0s ease-in-out;
-moz-transition: 0.4s 0s ease-in-out;
-o-transition: 0.4s 0s ease-in-out;
transition: 0.4s 0s ease-in-out;
}
@media all and (max-width: 640px) {
.multiple-items div a {
box-shadow: none;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
}
}
.multiple-items .slick-active a { }
.multiple-items div a:hover {
background-color: transparent;
box-shadow: 0 0px 20px rgba(0, 0, 0, 0.4);
}
.multiple-items div .photo {
display: block;
background-size: cover;
background-position: center center;
padding-top:60%;
width:100%;
margin:0 auto 30px auto;
position: relative;
}
@media all and (max-width: 800px) {
.multiple-items div .photo {
padding-top:60%;
width:100%;
}
}
.multiple-items div a:hover {
filter: brightness(110%); }
.multiple-items div .title {
display: block;
width:90%;
font-size: 18px;
position: absolute;
bottom:60px;
right:30px;
text-align: right;
opacity: 0;
}
@media all and (max-width: 800px) {
.multiple-items div .title {
font-size:14px;
bottom:20px;
right:20px;
}
}
@media all and (max-width: 640px) {
.multiple-items div .title {
font-size:12px;
bottom:15px;
right:15px;
}
}
.multiple-items div a:hover .title {
}
.multiple-items div .name {
display: block;
width:90%;
font-size: 14px;
position: absolute;
bottom:30px;
right:30px;
text-align: right;
opacity: 0;
}
@media all and (max-width: 800px) {
.multiple-items div .name {
display: none;
}
}
.multiple-items div a .mask {
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
background: linear-gradient(rgba(0,0,0,0) 70%,rgba(0,0,0,0.2));
}
.multiple-items .slick-active .title , .multiple-items .slick-active .name {
opacity: 1;
animation  : textFade2 2s;
} .slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-cloned {
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
} .slick-loading .slick-list
{
background: #fff url(https://amp-clinic.com/cms/wp-content/themes/and_clinic/css/ajax-loader.gif) center center no-repeat;
}  .slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
bottom: -50px;
display: block;
width: 46px;
height: 46px;
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
@media all and (max-width: 1300px) {
.slick-prev, .slick-next {
display: none !important;
}
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
opacity: 1 !important;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1 !important;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: 1 !important;
}
.slick-prev:before,
.slick-next:before
{
}
.slick-prev
{
z-index: 10000;
right:180px;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/slick_arrow.png);
background-size: 92px auto;
background-position: 0px 0px;
opacity: 1 !important;
}
[dir='rtl'] .slick-prev
{
right: 0px;
left: auto;
}
.slick-prev:before
{
content: '';
}
[dir='rtl'] .slick-prev:before
{
content: '';
}
.slick-prev:hover, .slick-prev:focus {
color: transparent;
outline: none;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/slick_arrow.png);
background-size: 92px auto;
background-position: -46px 0px;
opacity: 1 !important;
}
.slick-next
{
right: 120px;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/slick_arrow.png);
background-size: 92px auto;
background-position: 0px -46px;
opacity: 1 !important;
}
[dir='rtl'] .slick-next
{
right: auto;
left: 0px;
}
.slick-next:before
{
content: '';
}
[dir='rtl'] .slick-next:before
{
content: '';
}
.slick-next:hover, .slick-next:focus {
color: transparent;
outline: none;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/slick_arrow.png);
background-size: 92px auto;
background-position: -46px -46px;
opacity: 1 !important;
} .slick-dotted.slick-slider
{
}
.slick-dots
{
position: absolute;
bottom: -32px;
right:250px;
display: block;
width: 80%;
padding: 0;
margin: 0;
list-style: none;
text-align: right;
}
@media all and (max-width: 1200px) {
.slick-dots {
}
}
@media all and (max-width: 800px) {
.slick-dots {
bottom: -20px;
width:100%;
right:0;
text-align: center;
}
}
@media all and (max-width: 640px) {
.slick-dots {
bottom: -10px;
}
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 3px;
padding: 0;
cursor: pointer;
}
@media all and (max-width: 800px) {
.slick-dots li {
width: 10px;
height: 10px;
}
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 4px;
height: 4px;
padding: 4px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
background-color: #ddd;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
content: '';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
background-color: #191a7c;
width: 4px;
height: 4px;
padding: 2px;
}
@media all and (max-width: 800px) {
.slick-dots li.slick-active button:before {
width: 10px;
height: 10px;
padding:0;
}
} .column_list {
padding:0px 0px 0px 0px;
margin:0 0%;
}
@media screen and (max-width: 1200px) {
.column_list {
margin:0 0%;
}
}
@media screen and (max-width: 1000px) {
.column_list {
padding:0px 0px 0px 0px;
}
}
.column_list ul {
font-size:0;
}
.column_list ul li {
display: inline-block;
font-size:18px;
width:27%;
margin:0px 3% 70px 3%;
vertical-align: top;
}
@media screen and (max-width: 1000px) {
.column_list ul li {
width:40%;
margin:0px 5% 70px 5%;
}
}
@media screen and (max-width: 640px) {
.column_list ul li {
width:100%;
margin:0px auto 40px auto;
}
}
.column_list ul li a { 
font-size:16px;
color:#231815;
text-decoration: none;
background-color: #FFF;
display: block;
position: relative;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.06);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
@media screen and (max-width: 640px) {
.column_list ul li a {
font-size:16px;
}
}
.column_list ul li a:hover {
box-shadow: 0 0px 20px rgba(0, 0, 0, 0.2);
}
.column_list ul li a:before {
padding-top:140%;
content:"";
display: block;
}
@media screen and (max-width: 1200px) {
.column_list ul li a:before {
padding-top:160%;
}
}
@media screen and (max-width: 640px) {
.column_list ul li a:before {
padding-top:0%;
}
}
.column_list ul li a .box {
margin:0px 0px 0px 0px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@media screen and (max-width: 640px) {
.column_list ul li a .box {
position: static;
}
}
.column_list ul li a .box .photo {
background-size: cover;
padding-top: 72%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
@media screen and (max-width: 640px) {
.column_list ul li a .box .photo {
padding-top: 50%;
}
}
.column_list ul li a:hover .box .photo {
}
.column_list ul li a h3 {
font-size:16px;
line-height:1.6em;
font-weight:normal;
margin:0px auto 0px auto;
padding:30px 30px 20px 30px;
}
@media screen and (max-width: 640px) {
.column_list ul li a h3 {
font-size:16px;
}
}
.column_list ul li a p {
font-size:13px;
padding:0px 30px 30px 30px;
min-height:4rem;
}
.column_list ul li a:hover p {
} .top_about {
font-size:0;
max-width:1400px;
margin: 0 auto;
}
.top_about .photo {
width:50%;
display: inline-block;
vertical-align: middle;
padding-top:50%;
background-size: cover;
background-position: center center;
}
@media screen and (max-width: 1000px) {
.top_about .photo {
padding-top:60%;
}
}
@media screen and (max-width: 800px) {
.top_about .photo {
padding-top:80%;
width:40%;
}
}
@media screen and (max-width: 640px) {
.top_about .photo {
display: none;
}
}
.top_about .text {
width:50%;
font-size:13px;
display: inline-block;
vertical-align: middle;
padding:0 8%;
box-sizing: border-box;
}
@media screen and (max-width: 1000px) {
.top_about .text {
padding:0 4%;
}
}
@media screen and (max-width: 800px) {
.top_about .text {
width:60%;
padding:40px 20px 40px 20px;
}
}
@media screen and (max-width: 640px) {
.top_about .text {
width:100%;
padding:40px 40px 40px 40px;
}
}
.top_about .text h3 {
font-size:11px;
margin: 0 0 10px 0;
}
.top_about .text h2 {
font-size: 24px;
line-height: 1.6em;
margin: 0 0 40px 0;
}
.top_about .text p {
margin: 0 0 40px 0;
line-height: 2em;
} .contact_area {
background-color: #191a7c;
color:#FFF;
background-image:repeating-linear-gradient(to right,#24415e, #24415e 1px, transparent 0, transparent 25%);
}
.contact_area .title_center {
margin-bottom:40px;
}
.contact_area .contact_text {
max-width:600px;
margin:0 auto 40px auto;
text-align: center;
}
.contact_area .contact_text2 {
max-width:1200px;
margin:0 auto 50px auto;
text-align: center;
}
.contact_area .contact_text2 p {
text-align: left;
display: inline-block;
color:#FFF;
}
.contact_area .contact_button {
max-width:500px;
margin:0 auto;
}
.button_area {
text-align: center;
font-size:0;
}
.contact_area .button_area {
max-width:90%;
margin:0 auto;
}
@media screen and (max-width: 1000px) {
.contact_area .button_area {
max-width:98%;
}
}
.contact_area .contact_button2 {
display: inline-block;
width:44%;
font-size:18px;
margin-right:12%;
vertical-align: top;
line-height:24px
}
@media screen and (max-width: 1000px) {
.contact_area .contact_button2 {
width:47%;
margin-right:6%;
}
}
@media screen and (max-width: 640px) {
.contact_area .contact_button2 {
width:96%;
margin:0 auto 20px auto;
}
}
.contact_area .contact_button2 .contact_icon {
display: inline-block;
width:26px;
height:18px;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/detail_contact.png);
background-size: 26px auto;
background-repeat: no-repeat;
background-position: 0 -18px;
margin-right:14px;
}
.contact_area .contact_button2 a:hover .contact_icon {
background-position: 0 -0px;
}
.contact_area .phone_button , .contact_area .phone_button2 {
display: inline-block;
width:44%;
font-size:18px;
vertical-align: top;
}
@media screen and (max-width: 1000px) {
.contact_area .phone_button , .contact_area .phone_button2 {
width:47%;
}
}
@media screen and (max-width: 640px) {
.contact_area .phone_button , .contact_area .phone_button2 {
width:96%;
margin:0 auto 0px auto;
}
}
.contact_area .phone_button a .phone_text , .contact_area .phone_button2 .phone_text {
display: block;
font-size:13px;
margin-bottom:5px;
font-weight:bold;
}
.contact_area .phone_button a .phone_icon , .contact_area .phone_button2 .phone_icon {
width:19px;
height:19px;
display: inline-block;
background-image: url(//amp-clinic.com/cms/wp-content/themes/and_clinic/images/phone_icon.png);
background-size: 19px auto;
margin-right:8px;
}
.contact_area .phone_button a:hover .phone_icon {
background-position: 0 -19px;
}
.contact_area .contact_button a , .contact_area .contact_button2 a , .contact_area .phone_button a , .contact_area .phone_button2 {
display: block;
color:#191a7c;
font-size:18px;
padding:30px 0;
background-color: #FFF;
text-align: center;
text-decoration: none;
position: relative;
box-sizing: border-box;
font-weight:bold;
height:80px;
}
.contact_area .phone_button a , .contact_area .phone_button2 {
padding:15px 0 0 0;
font-size:22px;
}
.contact_area .phone_button2 {
display: inline-block;
}
.contact_area .contact_button a::before,
.contact_area .contact_button a::after , .contact_area .contact_button2 a::before , .contact_area .contact_button2 a::after , .contact_area .phone_button a::before , .contact_area .phone_button a::after {
position: absolute;
z-index: 2;
content: '';
width: 0;
height: 0;
border: 1px solid transparent;
}
.contact_area .contact_button a::before , .contact_area .contact_button2 a::before , .contact_area .phone_button a::before {
top: -1px;
left: -1px;
}
.contact_area .contact_button a::after , .contact_area .contact_button2 a::after , .contact_area .phone_button a::after {
bottom: -1px;
right: -1px;
}
.contact_area .contact_button a:hover , .contact_area .contact_button2 a:hover , .contact_area .phone_button a:hover {
color: #fff;
background-color: #191a7c;
}
.contact_area .contact_button a:hover::before,
.contact_area .contact_button a:hover::after , .contact_area .contact_button2 a:hover::before,
.contact_area .contact_button2 a:hover::after , .contact_area .phone_button a:hover::before,
.contact_area .phone_button a:hover::after {
width: 100%;
height: 100%;
}
.contact_area .contact_button a:hover::before , .contact_area .contact_button2 a:hover::before , .contact_area .phone_button a:hover::before {
border-bottom-color: #fff;
border-left-color: #fff;
transition: height .4s, width .4s .4s;
}
.contact_area .contact_button a:hover::after , .contact_area .contact_button2 a:hover::after , .contact_area .phone_button a:hover::after {
border-top-color: #fff;
border-right-color: #fff;
transition: height .4s, width .4s .4s;
}
#menu_cont .button_area {
padding:0 40px 0 40px;
}
@media screen and (max-width: 640px) {
#menu_cont .button_area {
padding:0 0px 0 0px;
}
} .button_more {
width:200px;
}
.button_more a {
display: block;
padding:12px;
background-color: #191a7c;
box-sizing: border-box;
color:#fff;
text-align: center;
text-decoration: none;
position: relative;
transition: ease .2s;
} .button_more a::before,
.button_more a::after {
position: absolute;
z-index: 2;
content: '';
width: 0;
height: 0;
border: 1px solid transparent;
}
.button_more a::before {
top: -1px;
left: -1px;
}
.button_more a::after {
bottom: -1px;
right: -1px;
}
.button_more a:hover {
color: #191a7c;
background-color: #FFF;
}
.button_more a:hover::before,
.button_more a:hover::after {
width: 100%;
height: 100%;
}
.button_more a:hover::before {
border-bottom-color: #191a7c;
border-left-color: #191a7c;
transition: height .4s, width .4s .4s;
}
.button_more a:hover::after {
border-top-color: #191a7c;
border-right-color: #191a7c;
transition: height .4s, width .4s .4s;
}
.button_center {
margin:0 auto;
} .top_section_title {
font-size:18px;
margin:0px 0px 60px 0px;
padding:0px 0px 10px 0px;
position: relative;
display: inline-block;
color:#231815;
font-family: 'Roboto', sans-serif;
font-weight:500;
letter-spacing: 0.1em;
}
@media screen and (max-width: 1000px) {
.top_section_title {
margin:0px 0px 40px 0px;
}
}
.top_section_title:after {
background-color: #231815;
content: "";
display: block;
width:100%;
height:2px;
position: absolute;
bottom:0px;
height:2px;
}  #top_about {
padding:60px 0px 0px 0px;
}
#top_about_box {
position: relative;
height:600px;
}
@media screen and (min-width: 1600px) {
#top_about_box {
height:700px;
}
}
@media screen and (min-width: 1800px) {
#top_about_box {
height:800px;
}
}
@media screen and (max-width: 1000px) {
#top_about_box  {
height:auto;
padding-top:66.6%;
margin-top:80px;
}
}
#top_about_box .top_section_title {
position: absolute;
top:4%;
right:33%;
}
@media screen and (max-width: 1000px) {
#top_about_box .top_section_title  {
left:46%;
top:-80px;
width:70px;
}
}
@media screen and (max-width: 640px) {
#top_about_box .top_section_title  {
left:42%;
}
}
#top_about_box .txt {
width:52%;
box-sizing: border-box;
position: absolute;
bottom:0px;
right:0px;
background-color: #f8f8f8;
box-sizing: border-box;
}
@media screen and (max-width: 1000px) {
#top_about_box .txt  {
width:100%;
position: static;
}
}
#top_about_box .txt .txt_wrap {
padding:90px 10% 90px 25%;
}
@media screen and (min-width: 1600px) {
#top_about_box .txt .txt_wrap {
padding:15% 12% 15% 25%;
}
}
@media screen and (min-width: 1800px) {
#top_about_box .txt .txt_wrap {
padding:15% 12% 15% 25%;
}
}
@media screen and (max-width: 1000px) {
#top_about_box .txt .txt_wrap  {
padding:90px 10% 90px 10%;
}
}
@media screen and (max-width: 640px) {
#top_about_box .txt .txt_wrap  {
padding:60px 8% 60px 8%;
}
}
#top_about_box .txt .txt_wrap:after {
}
#top_about_box .txt h3 {
font-size:32px;
margin:0px 0px 40px 0px;
font-weight:normal;
}
@media screen and (max-width: 1000px) {
#top_about_box .txt h3  {
text-align: center;
}
}
@media screen and (max-width: 640px) {
#top_about_box .txt h3  {
font-size:24px;
}
}
#top_about_box .txt p {
margin:0px 0px 40px 0px;
}
#top_about_box .txt .button_link1 {
width:280px;
margin: 0 auto 0px 0px;
}
@media screen and (max-width: 1000px) {
#top_about_box .txt .button_link1  {
margin: 0 auto 0px auto;
}
}
#top_about_box .txt .button_link1 a {
padding:16px 16px;
}
#top_about_box .photo {
width:55%;
position: absolute;
top:0px;
left:0px;
}
@media screen and (max-width: 1000px) {
#top_about_box .photo  {
width:100%;
}
} #howto_list {
padding:0px 50px 0px 50px;
}
@media screen and (max-width: 1000px) {
#howto_list  {
padding:0px 0px 0px 0px;
}
}
#howto_list ul {
font-size:0;
}
#howto_list ul li {
display: inline-block;
font-size:18px;
vertical-align: top;
width:30%;
margin:0px 5% 80px 0px;
}
@media screen and (max-width: 640px) {
#howto_list ul li  {
width:100%;
margin:0px 0% 60px 0px;
}
}
#howto_list ul li:nth-child(3n) {
margin:0px 0% 80px 0px;
}
#howto_list ul li a {
font-size:18px;
color:#231815;
text-decoration: none;
}
#howto_list ul li a .box {
overflow: hidden;
margin:0px 0px 30px 0px;
}
@media screen and (max-width: 1000px) {
#howto_list ul li a .box  {
}
}
@media screen and (max-width: 640px) {
#howto_list ul li a .box  {
margin:0px 0px 20px 0px;
}
}
#howto_list ul li a .box .photo_box {
background-size: cover;
padding-top: 100%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#howto_list ul li a:hover .box .photo_box {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
#howto_list ul li a .cat {
font-size:14px;
margin:0px 0 20px 0;
}
@media screen and (max-width: 640px) {
#howto_list ul li a .cat  {
font-size:13px;
margin:0px 0px 10px 0px;
}
}
#howto_list ul li a h3 {
font-size:18px;
font-weight:normal;
padding-bottom:10px;
}
@media screen and (max-width: 640px) {
#howto_list ul li a h3  {
font-size:16px;
}
}
#howto_list ul li a h3:before {
position: absolute;
background: #231815;
content: "";
display: block;
width: 100%;
height: 1px;
left: 0%;
bottom: 0px;
transform: scale(0);
transition: all .6s ease-out;
}
#howto_list ul li a:hover h3:before {
transform: scale(1);
} .fl	{ float:left; }
.fr	{ float:right; }
.cb	{ clear:both; }
.tl	{ text-align:left; }
.tc	{ text-align:center; }
.tr	{ text-align:right; } .align_left {
text-align: left !important;
}
.align_right {
text-align: right !important;
}
.align_center {
text-align: center !important;
}
.fsize60per {
font-size: 60% !important;
}
.fsize70per {
font-size: 70% !important;
}
.fsize80per {
font-size: 80% !important;
}
.fsize90per {
font-size: 90% !important;
}
.fsize100per {
font-size: 100% !important;
}
.fsize110per {
font-size: 110% !important;
}
.fsize120per {
font-size: 120% !important;
}
.fsize130per {
font-size: 130% !important;
}
.fsize140per {
font-size: 140% !important;
} .mt0 {margin-top: 0 !important;}
.mt5 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mt80 {margin-top: 80px !important;}
.mt90 {margin-top: 90px !important;}
.mt100 {margin-top: 100px !important;}
.mb0 {margin-bottom: 0 !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb90 {margin-bottom: 90px !important;}
.mb100 {margin-bottom: 100px !important;}
.mr0 {margin-right: 0 !important;}
.mr5 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr35 {margin-right: 35px !important;}
.mr40 {margin-right: 40px !important;}
.mr45 {margin-right: 45px !important;}
.mr50 {margin-right: 50px !important;}
.mr60 {margin-right: 60px !important;}
.mr70 {margin-right: 70px !important;}
.mr80 {margin-right: 80px !important;}
.mr90 {margin-right: 90px !important;}
.mr100 {margin-right: 100px !important;}
.ml0 {margin-left: 0 !important;}
.ml5 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml35 {margin-left: 35px !important;}
.ml40 {margin-left: 40px !important;}
.ml45 {margin-left: 45px !important;}
.ml50 {margin-left: 50px !important;}
.ml60 {margin-left: 60px !important;}
.ml70 {margin-left: 70px !important;}
.ml80 {margin-left: 80px !important;}
.ml90 {margin-left: 90px !important;}
.ml100 {margin-left: 100px !important;} .pt0 {padding-top: 0 !important;}
.pt5 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt25 {padding-top: 25px !important;}
.pt30 {padding-top: 30px !important;}
.pt35 {padding-top: 35px !important;}
.pt40 {padding-top: 40px !important;}
.pt45 {padding-top: 45px !important;}
.pt50 {padding-top: 50px !important;}
.pt60 {padding-top: 60px !important;}
.pt70 {padding-top: 70px !important;}
.pt80 {padding-top: 80px !important;}
.pt90 {padding-top: 90px !important;}
.pt100 {padding-top: 100px !important;}
.pb0 {padding-bottom: 0 !important;}
.pb5 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb35 {padding-bottom: 35px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb45 {padding-bottom: 45px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb60 {padding-bottom: 60px !important;}
.pb70 {padding-bottom: 70px !important;}
.pb80 {padding-bottom: 80px !important;}
.pb90 {padding-bottom: 90px !important;}
.pb100 {padding-bottom: 100px !important;}