@charset "UTF-8";
html{background:#fff}blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,pre,table,textarea,tr,ul{margin:0;padding:0}p{padding:0}td,th{margin:0}table{border-collapse:collapse;border-spacing:0}fieldset,img,table{border:0}address,dfn,em{font-weight:400}caption,cite,code,var{font-style:normal;font-weight:400}address,dfn,strong,th{font-style:normal}a:active,a:hover,del,ins{text-decoration:none}li{list-style:none}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1}q:after,q:before{content:''}abbr,acronym{border:0;font-variant:normal}abbr{cursor:help}label{cursor:pointer}sub,sup{vertical-align:baseline}html,legend{color:#000}optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}button,input,select,textarea{*font-size:100%}strong{font-weight:700}em{font-style:italic}td,th{border:1px solid #e1e1e0;padding:1em}th{font-weight:700;text-align:center;background-color:#f1d8b6;color:#333333}caption{padding-bottom:.5em;text-align:right}address{line-height:1}.clear{clear:both}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0}.clearfix,article,aside,figure,footer,header,main,nav,section{display:block}* html .clearfix{height:1%}.left{text-align:left}.center{text-align:center}.right{text-align:right}.mb0{margin-bottom:0!important}.mb05{margin-bottom:5px!important}.mb07{margin-bottom:7px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.mb20{margin-bottom:20px!important}.mb25{margin-bottom:25px!important}.mb28{margin-bottom:28px!important}.mb30{margin-bottom:30px!important}.mb35{margin-bottom:35px!important}.mb40{margin-bottom:40px!important}.mb50{margin-bottom:50px!important}.mr0{margin-right:0!important}.mr05{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}.mt0{margin-top:0!important}.mt05{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}.mt45{margin-top:45px!important}.mt50{margin-top:50px!important}.mt55{margin-top:55px!important}.ml0{margin-left:0!important}.ml05{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}.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}.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}.pb40{padding-bottom:40px!important}.pb50{padding-bottom:50px!important}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w100{width:100%}body{font:62.5% Yu Gothic medium,arial,clean,verdana,'Hiragino Kaku Gothic Pro',"ＭＳ Ｐゴシック",Osaka,sans-serif;color:#333;line-height:1.4}html>body{font-size:10px;font-size:62.5%\9}button,input,select,table,textarea{font:100% Yu Gothic medium,arial,clean,verdana,'Hiragino Kaku Gothic Pro',"ＭＳ Ｐゴシック",Osaka,sans-serif;color:#333;line-height:1.4}table{font:100%;width:100%}code,kbd,samp,tt{font-size:100%}code,kbd,pre,samp,tt{font-family:monospace;*font-size:108%;line-height:1.4;color:#333}dd button,dd dd,dd dt,dd input,dd li,dd p,dd select,dd td,dd textarea,dd th,dt button,dt dd,dt dt,dt input,dt li,dt p,dt select,dt td,dt textarea,dt th,li button,li dd,li dt,li input,li li,li p,li select,li td,li textarea,li th,p input,td button,td dd,td dt,td input,td li,td p,td select,td td,td textarea,td th,th button,th dd,th dt,th input,th li,th p,th select,th td,th textarea,th th{font-size:100%}@font-face{font-family:'Yu Gothic Medium';src:url(font/genjyuugothic-medium-webfont.eot);src:url(font/genjyuugothic-medium-webfont.eot?#iefix) format('embedded-opentype'),url(font/genjyuugothic-medium-webfont.woff2) format('woff2'),url(font/genjyuugothic-medium-webfont.woff) format('woff'),url(font/genjyuugothic-medium-webfont.ttf) format('truetype'),url(font/genjyuugothic-medium-webfont.svg#gen_jyuu_gothicmedium) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Yu Gothic bold';src:url(font/genjyuugothic-bold-webfont.eot);src:url(font/genjyuugothic-bold-webfont.eot?#iefix) format('embedded-opentype'),url(font/genjyuugothic-bold-webfont.woff2) format('woff2'),url(font/genjyuugothic-bold-webfont.woff) format('woff'),url(font/genjyuugothic-bold-webfont.ttf) format('truetype'),url(font/genjyuugothic-bold-webfont.svg#gen_jyuu_gothicbold) format('svg');font-weight:700;font-style:normal}@font-face{font-family:'Yu Gothic bold';src:url(font/genjyuugothic-heavy-webfont.eot);src:url(font/genjyuugothic-heavy-webfont.eot?#iefix) format('embedded-opentype'),url(font/genjyuugothic-heavy-webfont.woff2) format('woff2'),url(font/genjyuugothic-heavy-webfont.woff) format('woff'),url(font/genjyuugothic-heavy-webfont.ttf) format('truetype'),url(font/genjyuugothic-heavy-webfont.svg#gen_jyuu_gothicheavy) format('svg');font-weight:400;font-style:normal}address,blockquote,button,dd,dt,h1,h2,h3,h4,h5,h6,input,li,p,pre,select,td,textarea,th{font-size:140%;-webkit-text-size-adjust:none}img{vertical-align:bottom}a{color:#4b3b25}a:active,a:hover{color:#4b3b25}p{margin:0 0 1.5em}.section{margin:0 0 30px}.section .section{margin:0 0 10px}dd,li,p,td,th{line-height:1.8em}.image-l{float:left;margin:0 16px 8px 0}.image-r{float:right;margin:0 0 8px 16px}.w33{width:33%}.w05{width:5%}.w70{width:70%}#totop{position:fixed;bottom:60px;right:50px;z-index:1000;margin-bottom:0}#totop:hover{opacity:.8}.bold{font-weight:700}.fl{float:left}.fr{float:right}
/*==========================================================================*/
/* Container */
/*==========================================================================*/
.wrapper {
max-width: 1300px;
width: 100%;
margin: 0 auto;
}
#wrapper {
min-width: 1200px;
overflow: hidden;
position: relative;
}
.container {
width: 1080px;
margin: 0 auto;
box-sizing: border-box;
}
img {
max-width: 100%;
}
/* MENU-ICON */
.menu-icon {
display: block;
height: 100px;
box-sizing: border-box;
background: #64c9e1;
text-align: center;
padding: 35px 0 0;
color: #fff;
font-size: 15px;
font-family: 'Nunito', sans-serif;
font-weight: 600;
border-bottom: 1px solid #6ea8ce;
}
.menu-icon span {
display: inline-block;
position: relative;
margin: 0;
width: 45px;
height: 4px;
margin-bottom: 10px;
background-color: #fff;
border-radius: 3px;
-webkit-transition-duration: 0;
-moz-transition-duration: 0;
-ms-transition-duration: 0;
-o-transition-duration: 0;
transition-duration: 0;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.menu-icon span::after, .menu-icon span::before {
content: '';
position: absolute;
width: 45px;
height: 4px;
left: 0;
border-radius: 3px;
background-color: #fff;
-webkit-transition-property: margin, -webkit-transform;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-ms-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-delay: 0.2s, 0;
-moz-transition-delay: 0.2s, 0;
-ms-transition-delay: 0.2s, 0;
-o-transition-delay: 0.2s, 0;
transition-delay: 0.2s, 0;
}
.menu-icon span::before {
margin-top: -10px;
}
.menu-icon span::after {
margin-top: 10px;
}
.menu-icon.active span {
background-color: transparent;
}
.menu-icon.active span::before, .menu-icon.active span::after {
margin-top: 0px;
-webkit-transition-delay: 0, 0.2s;
-moz-transition-delay: 0, 0.2s;
-ms-transition-delay: 0, 0.2s;
-o-transition-delay: 0, 0.2s;
transition-delay: 0, 0.2s;
}
.menu-icon.active span::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-icon.active span::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*Header*/
#header .header-global-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 0;
text-align: right;
z-index: 1010;
background: #FFF;
}
#header:not(.fixed) .header-global-nav {
padding-bottom: 13px;
}
#header .header-side-menu {
position: absolute;
overflow: hidden;
top: 130px;
right: 0;
width: 90px;
box-sizing: border-box;
z-index: 1000;
padding: 40px 0 0;
}
.header-menu .menu {
position: fixed;
z-index: 999;
top: 190px;
}
.header-side-menu .menu02 {
box-sizing: border-box;
}
.header-side-menu .menu02 li.menu02-ttl {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 14px;
text-align: center;
color: #64c9e1;
line-height: 1.4em;
padding: 5px 0 10px;
}
.header-side-menu .menu02 li.menu02-ttl span {
font-size: 13px;
}
.header-menu .menu li {
width: 100%;
}
.header-menu .menu li a {
display: block;
text-decoration: none;
color: #64c9e1;
font-size: 13px;
font-family: 'Yu Gothic bold';
font-weight: bold;
text-align: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu li a span, .menu02 li a span {
display: block;
margin: 0 0 8px;
line-height: 1em;
}
.menu li a span i.fa {
font-size: 24px;
}
.menu02 li a span img {
width: 25%;
}
.header-menu .menu li a:hover {
opacity: 0.7;
}
.header-side-menu .menu02 li a:hover {
opacity: 0.7;
}
.header-side-menu .menu02 li {
margin-top: 10px;
}
.header-side-menu .menu02 li a {
display: block;
text-decoration: none;
color: #64c9e1;
font-size: 13px;
font-family: 'Yu Gothic bold';
font-weight: bold;
text-align: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
line-height: 1.4em;
}
.header-side-menu .menu02 li a i {
font-size: 9px;
position: absolute;
right: 3px;
bottom: 3px;
}
#header .header-sub {
width: 1200px;
margin: 0 auto;
}
@media all and (min-width: 769px) {
#header.fixed .header-sub {
transform: scale(0.8, 0.8);
}
#header.fixed .header-sub h1 {
padding: 10px 0 0 0;
}
#header.fixed .header-sub h1 img {
max-width: 90%;
}
#header.fixed .header-sub .h-contact dt {
display: none;
}
#header.fixed .header-sub .h-star {
padding-top: 12px;
}
#header.fixed .header-sub .h-star a {
padding: 5px 30px;
transition: transform .2s ease-out 0s;
-webkit-transition: -webkit-transform .2s ease-out 0s;
-moz-transition: -moz-transform .2s ease-out 0s;
}
#header.fixed .header-sub .h-star.expanded a {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
}
#header.fixed .header-sub .h-mail {
display: none;
}
#header.fixed .header-sub .idx-main-bnr {
display: none;
}
}
#header.fixed #gnavi {
top: 62px;
}
#header.fixed #gnavi ul.gnavi-inner li a {
padding: 10px 18px;
}
#header .h-contact {
display: block;
text-align: left;
width: 200px;
box-sizing: border-box;
float: right;
margin: 0;
padding: 7px 0 0 15px;
z-index: 100;
-webkit-box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
margin-top: 10px;
line-height: 0.8;
}
#header .h-contact dt {
font-size: 12px;
color: #524640;
font-family: 'Yu Gothic bold';
font-weight: bold;
margin: 0;
}
#header .h-contact dd {
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 20px;
color: #524640;
letter-spacing: -0.5px;
}
#header .h-contact dd span {
display: inline-block;
line-height: 0;
vertical-align: middle;
margin: -5px 5px 0 0;
}
#header .h-contact a {
text-decoration: none;
color: #4b3b25;
}
#header .h-mail {
float: right;
margin: 0 5px;
padding-top: 25px;
}
#header .h-mail a {
display: block;
text-decoration: none;
color: #64c9e1;
font-size: 13px;
font-family: 'Yu Gothic bold';
font-weight: bold;
border: 2px solid #64c9e1;
border-radius: 5px;
padding: 12px 10px 10px;
}
#header .h-mail a span {
display: inline-block;
vertical-align: middle;
width: 25px;
margin-right: 10px;
margin-top: -5px;
}
#header .h-mail a:hover {
opacity: 0.7;
}
#header .h-star {
float: right;
margin: 0 0 0 10px;
padding-top: 12px;
}
#header .h-star a {
display: block;
text-decoration: none;
color: #fff;
font-size: 15px;
font-family: 'Yu Gothic bold';
font-weight: bold;
background: #64c9e1;
border-radius: 5px;
padding: 12px 30px 14px;
}
#header .h-star a span {
display: inline-block;
font-size: 16px;
color: #f7ce68;
margin-right: 5px;
}
#header .h-star a span.pickup-number {
font-size: 24px;
}
#header .h-star a:hover {
opacity: 0.7;
}
#header .tel_text_box {
margin: 0;
padding: 0 0 7px 0;
line-height: 0;
text-align: center;
}
#header .h-contact dd.tel_text_box span {
width: 100%;
display: block
}
#header .tel_text {
font-size: 10px;
font-weight: normal;
padding: 5px 0 2px;
text-align: left;
}
/*Gnavi*/
#gnavi {
display: block;
position: absolute;
width: 100%;
top: 84px;
left: 0;
box-sizing: border-box;
text-align: left;
z-index: 999;
background: #64c9e1;
/*-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;*/
}
#gnavi.fixed {
top: 0;
position: fixed;
}
#gnavi li {
float: left;
}
#gnavi ul.gnavi-inner {
width: 1100px;
margin: 0 auto;
}
#gnavi ul.gnavi-inner > li > a {
display: block;
text-decoration: none;
color: #fff;
font-family: 'Yu Gothic bold';
font-weight: bold;
padding: 15px 18px;
position: relative;
border-right: 1px dashed rgba(255, 255, 255, 0.3);
z-index: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
#gnavi ul.gnavi-inner > li > a:hover, #gnavi ul.gnavi-inner > li.over > a.active {
background: #fff;
color: #64c9e1;
}
#gnavi ul.gnavi-inner > li > a:after {
content: '';
position: absolute;
border-top: 4px solid transparent;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
bottom: 6px;
left: calc(50% - 3px);
z-index: -1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
#gnavi ul.gnavi-inner > li.over > a:after {
border-top: 4px solid #fff;
}
#gnavi ul.gnavi-inner > li.over > a:hover:after, #gnavi ul.gnavi-inner > li.over > a.active:after {
border-top: 4px solid #64c9e1;
}
#gnavi ul.gnavi-inner .contact_btn {
background-color: #FFF;
border-top: 1px solid #64c9e1;
border-bottom: 1px solid #64c9e1;
color: #64c9e1;
}
#gnavi ul.gnavi-inner > li.contact_btn > a {
display: block;
text-decoration: none;
color: #64c9e1;
font-family: 'Yu Gothic bold';
font-weight: bold;
padding: 15px 18px;
position: relative;
border-right: 1px dashed rgba(255, 255, 255, 0.3);
z-index: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
#gnavi ul.gnavi-inner > li.contact_btn > a:hover, #gnavi ul.gnavi-inner > li.over.contact_btn > a.active {
background: #fbf071;
color: #64c9e1;
}
#gnavi ul.gnavi-inner > li.contact_btn > a:after {
content: '';
position: absolute;
border-top: 4px solid transparent;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
bottom: 6px;
left: calc(50% - 3px);
z-index: -1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
#gnavi ul.gnavi-inner > li.over.contact_btn > a:after {
border-top: 4px solid #64c9e1;
}
#gnavi ul.gnavi-inner > li.over.contact_btn > a:hover:after, #gnavi ul.gnavi-inner > li.over.contact_btn > a.active:after {
border-top: 4px solid #64c9e1;
}
#gnavi .sub-menu {
position: absolute;
width: 100%;
padding: 0 100px;
left: 0;
background: rgba(255, 255, 255, 0.9);
display: none;
box-sizing: border-box;
border-bottom: 1px solid #64c9e1;
}
#gnavi .sub-menu.active {
display: flex;
}
#gnavi .sub-menu li {
flex-grow: 1;
text-align: center;
cursor: pointer;
padding: 15px 0;
}
#gnavi .sub-menu li:last-child a, #gnavi ul.gnavi-inner > li:last-child > a {
border-right: none;
}
#gnavi .sub-menu li a {
text-decoration: none;
color: #534741;
position: relative;
z-index: 0;
display: block;
border-right: 2px solid #a39b97;
}
#gnavi .sub-menu li:hover {
background: #fbf071;
}
#gnavi .sub-menu li a:after {
content: '';
position: absolute;
width: 100%;
height: 9px;
background: #fbf071;
left: 0;
bottom: 1px;
opacity: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
z-index: -1;
}
/*Footer*/
#footer {
padding: 40px 0 0;
}
#footer .footer-link {
margin: 0 auto;
width: 1080px;
}
.footer-link .f-link-items {
float: left;
margin: 0 40px 0 0;
}
.footer-link .f-link-items:nth-child(6) {
margin: 0;
}
.footer-link .f-link-items ul li.col2 {
line-height: 1em;
padding: 5px 0;
}
.footer-link .f-social {
float: right;
width: 300px;
margin-right: 20px;
}
.footer-link .f-social ul {
display: flex;
justify-content: space-between;
padding: 15px 0;
}
.footer-link .f-social li {
width: 60px;
}
.footer-link .f-social .f-social-ttl {
text-align: center;
margin: 0;
font-size: 12px;
font-weight: bold;
}
.f-link-items dl {
margin: 0 0 30px;
}
.f-link-items dt {
color: #64c9e1;
font-size: 15px;
font-weight: bold;
margin: 0 0 15px;
}
.f-link-items dd a {
text-decoration: none;
color: #534741;
font-size: 12px;
margin: 0 0 12px;
}
.f-link-items dd a:hover {
text-decoration: underline;
}
.f-link-items dt a {
text-decoration: none;
color: #64c9e1;
}
.f-link-items dt a:hover {
text-decoration: underline;
}
.f_linkos {
background: url(/images/f_linkoutside.png) right no-repeat;
}
.f-copy {
margin: 0;
border-top: 1px solid #ddd0c2;
font-size: 11px;
color: #534741;
padding: 15px calc((100% - 1080px) / 2) 10px;
}
.footercontact {
display: none;
}
/*Index Button*/
.idx-btn01 {
margin: 0;
}
.idx-btn01 a {
display: inline-block;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 16px;
font-family: 'Yu Gothic bold';
font-weight: bold;
position: relative;
width: 240px;
padding: 2px 0 10px;
z-index: 0;
}
.idx-btn01 a:hover {
opacity: 0.7;
}
.idx-btn01 a:before {
content: '';
width: 100%;
height: 80%;
position: absolute;
background: #f5a868 url(/images/idx_arrow03.png) 8% center no-repeat;
border-radius: 100px;
left: 0;
top: 0;
z-index: -1;
}
.idx-btn01 a:after {
content: '';
width: 100%;
height: 80%;
position: absolute;
background: #dc975d;
border-radius: 100px;
left: 0;
top: 5px;
z-index: -2;
}
.idx-search-submit a {
display: inline-block;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 16px;
font-family: 'Yu Gothic bold';
font-weight: bold;
position: relative;
width: 100%;
padding: 10px 50px;
z-index: 0;
box-sizing: border-box;
}
.idx-search-submit a:hover {
opacity: 0.7;
}
.idx-search-submit a:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #f5a868 url(/images/idx_search_icon03.png) 15% center no-repeat;
border-radius: 100px;
left: 0;
top: 0;
z-index: -1;
}
.idx-search-submit a:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #dc975d;
border-radius: 100px;
left: 0;
top: 5px;
z-index: -2;
}
.idx-search-btn01 {
/*display: inline-block;*/
text-align: center;
text-decoration: none;
font-size: 13px;
font-family: 'Yu Gothic bold';
font-weight: bold;
position: relative;
width: 140px;
padding: 2px 10px;
z-index: 0;
box-sizing: border-box;
cursor: pointer;
margin: 0 auto 15px;
}
.idx-search-btn01:hover {
opacity: 0.7;
}
.idx-search-btn01:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #f1d8b6;
border-radius: 100px;
left: 0;
top: 0;
z-index: -1;
}
.idx-search-btn01:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #d4ba9b;
border-radius: 100px;
left: 0;
top: 5px;
z-index: -2;
}
.idx-search-btn01 a:before {
content: '';
width: 0;
height: 0;
position: absolute;
left: 13px;
top: 50%;
margin-top: -5px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #f5a868;
}
.under .idx-search-btn01 a {
color: #534741;
text-decoration: none;
}
/*Index*/
#index #mainvisual {
position: relative;
padding: 0;
box-sizing: border-box;
height: 540px;
z-index: 10;
margin-top: 139px;
}
#index #mainvisual .slider li {
height: 540px;
}
#index #mainvisual li.slider01 {
background: url(/images/idx_main_bg01.jpg) 0 top no-repeat;
background-size: cover;
}
#index #mainvisual li.slider02 {
background: url(/images/idx_main_bg02.jpg) 10% top no-repeat;
background-size: cover;
}
#index #mainvisual li.slider03 {
background: url(/images/idx_main_bg03.jpg) 10% top no-repeat;
background-size: cover;
}
#index #mainvisual li.slider04 {
background: url(/images/idx_main_bg04.jpg) 10% top no-repeat;
background-size: cover;
}
#index #mainvisual li.slider05 {
background: url(/images/idx_main_bg05.jpg) 10% top no-repeat;
background-size: cover;
}
#index #mainvisual li.slider06 {
background: url(/images/idx_main_bg06.jpg) 10% top no-repeat;
background-size: cover;
}
#index #mainvisual li.slider07 {
background: url(/images/idx_main_bg07.jpg) 10% top no-repeat;
background-size: cover;
}
#index #mainvisual .slider-ctn {
width: 60%;
max-width: 770px;
position: absolute;
height: 550px;
box-sizing: border-box;
right: calc(50% - 610px);
}
#index #mainvisual .slider-ctn .idx-main-btn.idx-btn01 a {
display: inline-block;
text-align: center;
text-decoration: none;
color: #f5a868;
font-size: 16px;
font-family: 'Yu Gothic bold';
font-weight: bold;
position: relative;
width: 240px;
padding: 12px 0 10px;
z-index: 0;
}
#index #mainvisual .slider-ctn .idx-main-btn.idx-btn01 a:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #FFF url(/images/idx_arrow04.png) 8% center no-repeat;
border-radius: 100px;
left: 0;
top: 0;
z-index: -1;
}
#index #mainvisual .slider-ctn .idx-main-btn.idx-btn01 a:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #d9d9d9;
border-radius: 100px;
left: 0;
top: 5px;
z-index: -2;
}
#index #mainvisual li.slider02 .slider-ctn {
/*background: url(/images/idx_main02_img01.png), url(/images/idx_main02_img04.png), url(/images/idx_main02_img03.png), url(/images/idx_main02_img02.png);
background-size: 15%, 18%, 20%, 20%;
background-position: 40% 0, 90% 15%, 5% 90%, 90% 80%;
background-repeat: no-repeat;*/
}
#index #mainvisual li.slider03 .slider-ctn {
/*background: url(/images/idx_main_img03.png) left bottom no-repeat;*/
background-size: 100%;
text-align: center;
}
#index #mainvisual li.slider04 .slider-ctn {}
#index #mainvisual li.slider05 .slider-ctn {}
#index #mainvisual li.slider06 .slider-ctn {}
#index #mainvisual li.slider07 .slider-ctn {}
#index #mainvisual li.slider01 h2 {
width: 35%;
max-width: 325px;
position: absolute;
top: 150px;
right: 20%;
}
#index #mainvisual li.slider01 p.slider01-txt {
position: absolute;
color: #534741;
font-size: 11px;
margin: 0;
bottom: 100px;
left: 7%;
font-family: 'Yu Gothic Medium';
text-shadow: #FFF 1px 1px 0px, #FFF -1px 1px 0px, #FFF 1px -1px 0px, #FFF -1px -1px 0px;
}
#index #mainvisual li.slider01 .slider01-position {
width: 100%;
position: absolute;
top: 60%;
transform: translateY(-55%);
text-align: center;
}
#index #mainvisual li.slider01 p.slider01-img {
display: inline-block;
position: absolute;
left: 8%;
top: -250px;
}
#index #mainvisual li.slider01 p.slider-bnr {
display: inline-block;
position: absolute;
right: 145px;
top: -60px;
}
#index #mainvisual li.slider01 p.slider-bnr:hover {
opacity: 0.7;
}
#index #mainvisual li.slider02 .slider02-position {
width: 100%;
position: absolute;
top: 30%;
transform: translateY(-55%);
text-align: center;
}
#index #mainvisual li.slider02 p.slider02-img {
display: inline-block;
padding: 50px 50px 20px 0;
margin: 0 0 15px;
}
#index #mainvisual li.slider02 p.slider-bnr {
display: inline-block;
position: absolute;
right: 0%;
top: 20px;
}
#index #mainvisual li.slider02 p.slider-bnr:hover {
opacity: 0.7;
}
#index #mainvisual li.slider03 p.slider03-img {
text-align: center;
padding: 0;
margin: 30px 150px 258px 0;
}
#index #mainvisual li.slider03 p.slider-bnr {
display: inline-block;
position: absolute;
right: 8%;
top: 20px;
}
#index #mainvisual li.slider03 p.slider-bnr:hover {
opacity: 0.7;
}
#index #mainvisual li.slider04 p.slider04-img {
text-align: center;
padding: 0;
margin: 240px 220px 30px 0;
}
#index #mainvisual li.slider04 p.slider-bnr {
display: inline-block;
position: absolute;
right: 80%;
top: 70px;
}
#index #mainvisual li.slider04 p.slider-bnr:hover {
opacity: 0.7;
}
#index #mainvisual li.slider04 .idx-btn01 {
margin: 0 0 0 40px;
}
#index #mainvisual li.slider05 p.slider05-img {
text-align: center;
padding: 0;
margin: 262px 330px 30px 0;
}
#index #mainvisual li.slider05 p.slider-bnr {
display: inline-block;
position: absolute;
right: 80%;
top: 80px;
}
#index #mainvisual li.slider05 p.slider-bnr:hover {
opacity: 0.7;
}
#index #mainvisual li.slider05 .idx-btn01 {
margin: 0 0 0 60px;
}
#index #mainvisual li.slider06 p.slider06-img {
text-align: right;
padding: 0;
margin: 20px 20px 310px 0;
}
#index #mainvisual li.slider06 p.slider-bnr {
display: inline-block;
position: absolute;
right: 80%;
top: 40px;
}
#index #mainvisual li.slider06 p.slider-bnr:hover {
opacity: 0.7;
}
#index #mainvisual li.slider06 .idx-btn01 {
margin: 440px 0 0 540px;
}
#index #mainvisual li.slider07 p.slider07-img {
text-align: right;
padding: 0;
margin: 20px 20px 310px 0;
}
#index #mainvisual li.slider07 p.slider-bnr {
display: inline-block;
position: absolute;
right: 80%;
top: 40px;
}
#index #mainvisual li.slider07 p.slider-bnr:hover {
opacity: 0.7;
}
#index #mainvisual li.slider07 .idx-btn01 {
margin: 0 0 0 260px;
}
#index #mainvisual .slider-play-pause-btn {
display: block;
position: relative;
float: left;
width: 20px;
height: 17px;
margin-right: 20px;
background: url(/images/idx_stop_icon.png);
cursor: pointer;
}
#index #mainvisual .slider-play-pause-btn.pause {
background: url(/images/idx_play_icon.png);
}
#index #mainvisual .slider-play-pause-btn:before {
content: ' ';
display: block;
position: absolute;
right: -13px;
top: 1px;
width: 1px;
height: 17px;
background-color: #64c9e1;
}
#index #mainvisual li.slider-image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#index #mainvisual li.slider-image .slider-position {
position: absolute;
top: 40px;
left: 0;
right: 0;
bottom: 50px;
}
#index #mainvisual li.slider-image .slider-img, #index #mainvisual li.slider-image .slider-bnr, #index #mainvisual li.slider-image .slider-link {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
#index #mainvisual li.slider-image .slider-img span, #index #mainvisual li.slider-image .slider-bnr span {
display: block;
position: relative;
}
#index #mainvisual li.slider-image img {
max-width: none;
}
#index #mainvisual li.slider-image .slider-img-x-0, #index #mainvisual li.slider-image .slider-bnr-x-0, #index #mainvisual li.slider-image .slider-link-x-0 {
left: 0%;
transform: translateX(0%);
}
#index #mainvisual li.slider-image .slider-img-x-1, #index #mainvisual li.slider-image .slider-bnr-x-1, #index #mainvisual li.slider-image .slider-link-x-1 {
left: 10%;
transform: translateX(-10%);
}
#index #mainvisual li.slider-image .slider-img-x-2, #index #mainvisual li.slider-image .slider-bnr-x-2, #index #mainvisual li.slider-image .slider-link-x-2 {
left: 20%;
transform: translateX(-20%);
}
#index #mainvisual li.slider-image .slider-img-x-3, #index #mainvisual li.slider-image .slider-bnr-x-3, #index #mainvisual li.slider-image .slider-link-x-3 {
left: 30%;
transform: translateX(-30%);
}
#index #mainvisual li.slider-image .slider-img-x-4, #index #mainvisual li.slider-image .slider-bnr-x-4, #index #mainvisual li.slider-image .slider-link-x-4 {
left: 40%;
transform: translateX(-40%);
}
#index #mainvisual li.slider-image .slider-img-x-5, #index #mainvisual li.slider-image .slider-bnr-x-5, #index #mainvisual li.slider-image .slider-link-x-5 {
left: 50%;
transform: translateX(-50%);
}
#index #mainvisual li.slider-image .slider-img-x-6, #index #mainvisual li.slider-image .slider-bnr-x-6, #index #mainvisual li.slider-image .slider-link-x-6 {
left: 60%;
transform: translateX(-60%);
}
#index #mainvisual li.slider-image .slider-img-x-7, #index #mainvisual li.slider-image .slider-bnr-x-7, #index #mainvisual li.slider-image .slider-link-x-7 {
left: 70%;
transform: translateX(-70%);
}
#index #mainvisual li.slider-image .slider-img-x-8, #index #mainvisual li.slider-image .slider-bnr-x-8, #index #mainvisual li.slider-image .slider-link-x-8 {
left: 80%;
transform: translateX(-80%);
}
#index #mainvisual li.slider-image .slider-img-x-9, #index #mainvisual li.slider-image .slider-bnr-x-9, #index #mainvisual li.slider-image .slider-link-x-9 {
left: 90%;
transform: translateX(-90%);
}
#index #mainvisual li.slider-image .slider-img-x-10, #index #mainvisual li.slider-image .slider-bnr-x-10, #index #mainvisual li.slider-image .slider-link-x-10 {
left: 100%;
transform: translateX(-100%);
}
#index #mainvisual li.slider-image .slider-img-y-0, #index #mainvisual li.slider-image .slider-bnr-y-0, #index #mainvisual li.slider-image .slider-link-y-0 {
top: 0%;
transform: translateY(0%);
}
#index #mainvisual li.slider-image .slider-img-y-1, #index #mainvisual li.slider-image .slider-bnr-y-1, #index #mainvisual li.slider-image .slider-link-y-1 {
top: 10%;
transform: translateY(-10%);
}
#index #mainvisual li.slider-image .slider-img-y-2, #index #mainvisual li.slider-image .slider-bnr-y-2, #index #mainvisual li.slider-image .slider-link-y-2 {
top: 20%;
transform: translateY(-20%);
}
#index #mainvisual li.slider-image .slider-img-y-3, #index #mainvisual li.slider-image .slider-bnr-y-3, #index #mainvisual li.slider-image .slider-link-y-3 {
top: 30%;
transform: translateY(-30%);
}
#index #mainvisual li.slider-image .slider-img-y-4, #index #mainvisual li.slider-image .slider-bnr-y-4, #index #mainvisual li.slider-image .slider-link-y-4 {
top: 40%;
transform: translateY(-40%);
}
#index #mainvisual li.slider-image .slider-img-y-5, #index #mainvisual li.slider-image .slider-bnr-y-5, #index #mainvisual li.slider-image .slider-link-y-5 {
top: 50%;
transform: translateY(-50%);
}
#index #mainvisual li.slider-image .slider-img-y-6, #index #mainvisual li.slider-image .slider-bnr-y-6, #index #mainvisual li.slider-image .slider-link-y-6 {
top: 60%;
transform: translateY(-60%);
}
#index #mainvisual li.slider-image .slider-img-y-7, #index #mainvisual li.slider-image .slider-bnr-y-7, #index #mainvisual li.slider-image .slider-link-y-7 {
top: 70%;
transform: translateY(-70%);
}
#index #mainvisual li.slider-image .slider-img-y-8, #index #mainvisual li.slider-image .slider-bnr-y-8, #index #mainvisual li.slider-image .slider-link-y-8 {
top: 80%;
transform: translateY(-80%);
}
#index #mainvisual li.slider-image .slider-img-y-9, #index #mainvisual li.slider-image .slider-bnr-y-9, #index #mainvisual li.slider-image .slider-link-y-9 {
top: 90%;
transform: translateY(-90%);
}
#index #mainvisual li.slider-image .slider-img-y-10, #index #mainvisual li.slider-image .slider-bnr-y-10, #index #mainvisual li.slider-image .slider-link-y-10 {
top: 100%;
transform: translateY(-100%);
}
#index #mainvisual li.slider-image .slider-link {
width: 240px;
text-align: center;
pointer-events: none;
}
#index #mainvisual li.slider-image .slider-link span {
position: absolute;
display: block;
}
#index #mainvisual li.slider-image .slider-link a {
display: inline-block;
text-align: center;
text-decoration: none;
color: #f5a868;
font-size: 16px;
font-family: 'Yu Gothic bold';
font-weight: bold;
position: relative;
width: 240px;
padding: 12px 0 10px;
z-index: 0;
pointer-events: visible;
}
#index #mainvisual li.slider-image .slider-link a:before {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
background: #FFF url(/images/idx_arrow04.png) 8% center no-repeat;
border-radius: 100px;
left: 0;
top: 0;
z-index: -1;
}
#index #mainvisual li.slider-image .slider-link a:after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
background: #d9d9d9;
border-radius: 100px;
left: 0;
top: 5px;
z-index: -2;
}
/*Search Form*/
#index .idx-search-position {
position: absolute;
width: 430px;
height: calc(100% - 70px);
box-sizing: border-box;
text-align: right;
top: 0;
right: calc(50% + 600px);
padding: 22px 0 0;
z-index: 0;
transform: translateX(100%);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
transition: all 2s ease;
}
#index .idx-search-position.active {
width: 1200px;
}
#index .idx-search-position.active .action-js-hide {
display: none;
}
#index .idx-search {
width: 100%;
}
#index .idx-search-tab {
float: left;
width: 50px;
padding-top: 5px;
}
#index .idx-search-tab li {
display: inline-block;
color: #a56437;
font-size: 16px;
font-family: 'Yu Gothic bold';
font-weight: bold;
background: #fff;
text-align: center;
width: 50px;
margin: 0;
padding: 5px 10px 10px;
box-sizing: border-box;
letter-spacing: 0.5px;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: tb-rl;
-moz-writing-mode: tb-rl;
writing-mode: tb-rl;
white-space: nowrap;
border-radius: 5px 0 0 0;
position: relative;
cursor: pointer;
max-height: 130px;
}
#index .idx-search-tab li.active {
color: #fff;
background: #a56437;
}
#index .idx-search-tab li span {
position: absolute;
top: -28px;
left: -65px;
width: 71px;
}
#index .search-inner {
display: none;
position: relative;
}
#index .search-inner.active {
display: block;
}
#index .search-ctn {
width: calc(100% - 53px);
float: left;
position: relative;
text-align: left;
z-index: 0;
box-sizing: border-box;
padding: 10px 15px 20px;
min-height: 445px;
}
#index .search-ctn:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9) url(/images/idx_search_bg.png) right bottom no-repeat;
z-index: -1;
top: 0;
left: 0;
border-radius: 5px;
overflow: hidden;
}
#index .search-ctn:after {
content: '';
position: absolute;
width: calc(100% + 3px);
height: calc(100% + 4px);
background: rgba(0, 0, 0, 0.1);
z-index: -2;
top: 0;
left: 0;
border-radius: 5px;
}
#index .search-ttl.search-title {
border-bottom: 1px dashed #cbb9a2;
margin-bottom: 5px;
}
#index .search-ttl li {
display: inline-block;
font-size: 24px;
color: #534741;
font-family: 'Yu Gothic bold';
font-weight: bold;
line-height: 1.6;
}
#index .search-ttl li span {
display: block;
color: #f5a868;
font-size: 14px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
padding: 0 0 5px;
margin: 0 0 10px;
}
#index .search-ttl .search-change {
font-size: 14px;
background: #f1d8b6;
position: absolute;
right: -16px;
top: -10px;
padding-top: 20px;
cursor: pointer;
text-align: center;
width: 110px;
height: 60px;
border-top-right-radius: 4px;
border-bottom: 8px solid #d4ba9b;
}
#index .search-inner-tab {
margin: 0 0 12px;
}
#index .search-inner-tab li {
font-size: 15px;
color: #534741;
font-weight: bold;
padding: 0 0 0 30px;
display: inline-block;
vertical-align: middle;
background: url(/images/idx_search_icon01.png) left center no-repeat;
cursor: pointer;
}
#index .search-inner-tab li.s-i02 {
background: url(/images/idx_search_icon02.png) left center no-repeat;
}
#index .select-fullw {
width: 100%;
margin: 0 0 5px;
}
#index .select-fullw li {
margin: 3px 0;
}
#index .select-fullw input.fw {
width: 100%;
box-sizing: border-box;
color: #534741;
font-size: 15px;
font-weight: bold;
border: none;
background-color: #f8f3e6;
border-radius: 5px;
padding: 10px 25px 10px 5px;
position: relative;
z-index: 0;
border-top: 2px solid #ebe7da;
border-right: 2px solid #ebe7da;
background-position: calc(100% - 15px) calc(1em + 2px), calc(100% - 10px) calc(1em + 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
margin-top: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#index .select-fullw input:placeholder-shown {
color: #bbae8c;
}
#index .select-fullw input::-webkit-input-placeholder {
color: #bbae8c;
}
#index .select-fullw input::-moz-input-placeholder {
color: #bbae8c;
}
#index .select-fullw input:-ms-input-placeholder {
color: #bbae8c;
}
#index .select-halfw {
margin: 0 0 5px;
/*overflow: hidden;*/
}
#index .select-halfw li {
width: 48%;
float: left;
}
#index .idx-select.select-halfw.idx-sl-lbl li {
width: 46%;
margin: 0;
display: inline-block;
float: none;
}
#index .select-halfw li:first-child {
margin: 0 4% 0 0;
}
#index .idx-select select {
width: 100%;
box-sizing: border-box;
color: #534741;
font-size: 12px;
font-weight: bold;
border: none;
background-color: #f8f3e6;
border-radius: 5px;
padding: 10px 25px 10px 5px;
position: relative;
z-index: 0;
border-top: 2px solid #ebe7da;
border-right: 2px solid #ebe7da;
background-image: linear-gradient(45deg, transparent 50%, #fc817b 50%), linear-gradient(135deg, #fc817b 50%, transparent 50%);
background-position: calc(100% - 15px) calc(1em + 2px), calc(100% - 10px) calc(1em + 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#index .idx-select select::-ms-expand {
display: none;
}
#index .idx-select select span {
font-size: 12px;
font-weight: normal;
}
#index #s-i01 .idx-select select {
border-top: 2px solid #b3d6ff;
border-right: 2px solid #b3d6ff;
background-image: linear-gradient(45deg, transparent 50%, #64c9e1 50%), linear-gradient(135deg, #64c9e1 50%, transparent 50%);
background-color: #e2f0ff;
}
#index #s-i01 .select-fullw input.fw {
border-top: 2px solid #b3d6ff;
border-right: 2px solid #b3d6ff;
color: #534741;
background-color: #e2f0ff;
}
#index #s-i01 .select-fullw input:placeholder-shown {
color: #534741;
}
#index #s-i02 .idx-select select {
background-color: #ffefee;
border-top: 2px solid #ffc1be;
border-right: 2px solid #ffc1be;
background-image: linear-gradient(45deg, transparent 50%, #fc817b 50%), linear-gradient(135deg, #fc817b 50%, transparent 50%);
}
#index #s-i02 .select-fullw input.fw {
color: #534741;
background-color: #ffefee;
border-top: 2px solid #ffc1be;
border-right: 2px solid #ffc1be;
}
#index #s-i02 .select-fullw input:placeholder-shown {
color: #534741;
}
#index .idx-search-txt01 {
text-align: center;
font-size: 12px;
color: #534741;
margin: 0px 0 7px;
}
#index .idx-search-btn {
text-align: center;
margin: 20px 0;
}
#index .idx-search-btn li {
width: 70%;
display: inline-block;
vertical-align: top;
max-width: 400px;
}
.idx-sl-lbl {
margin: 7px 10px 0 0;
float: left;
color: #534741;
font-weight: bold;
font-size: 15px;
width: calc(15% - 10px);
}
.idx-select.select-halfw.idx-sl-lbl {
width: 85%;
}
.idx-search-link.idx-btn01 {
margin: 0 0 0 2%;
}
.idx-search-link.idx-btn01 a {
width: 100%;
}
.idx-search-link.idx-btn01 a:before {
background: #f5a868 url(/images/idx_arrow03.png) 15px center no-repeat;
}
#index .search02-img {
text-align: center;
margin: 25px auto;
position: relative;
width: 525px;
display: none;
}
#index .search02-ttl {
margin: 0 0 10px;
font-size: 16px;
color: #534741;
font-weight: bold;
}
#index .search02-ttl span {
display: inline-block;
line-height: 0;
margin: -5px 8px 0 0;
vertical-align: middle;
}
#index .search02-local > li {
background: rgba(0, 0, 0, 0.8);
border-radius: 20px;
color: #fff;
text-align: center;
padding: 0 10px;
cursor: pointer;
position: absolute;
top: 0;
font-size: 13px;
white-space: nowrap;
}
#index .search02-local > li > a {
color: #fff;
text-decoration: none;
}
#index .search02-local > li#list_hokkaido {
top: 15%;
right: 0;
}
#index .search02-local > li#list_tohoku {
top: 36%;
right: 12%;
}
#index .search02-local > li#list_kitaKanto {
top: 47%;
right: 10%;
}
#index .search02-local > li#list_metropolitan {
top: 68%;
right: 22%;
}
#index .search02-local > li#list_izuHakone {
top: 76%;
right: 20%;
}
#index .search02-local > li#list_koshinetsu {
top: 48%;
right: 33%;
}
#index .search02-local > li#list_hokuriku {
top: 50%;
right: 41%;
}
#index .search02-local > li#list_tokai {
top: 75%;
right: 40%;
}
#index .search02-local > li#list_kinki {
top: 75%;
right: 60%;
}
#index .search02-local > li#list_chugoku {
top: 56%;
right: 72%;
}
#index .search02-local > li#list_shikoku {
top: 80%;
right: 75%;
}
#index .search02-local > li#list_kyushu {
top: 67%;
left: 0;
}
#index .search02-local > li#list_chuugoku {
top: 58%;
left: 20%;
}
#index .search02-local > li#list_okinawa {
top: 90%;
right: 4%;
}
#index .search02-local > li.active > a, #index .search02-local > li:hover > a {
opacity: 0.8;
}
#index .search02-local li:nth-child(4n) {
margin-right: 0;
}
.search02-local-sub {
position: absolute;
width: 300px;
right: 0;
background: #f8f3e6;
padding: 10px;
display: none;
border-radius: 5px;
border: 1px solid #ebe7da;
z-index: 10;
}
#index .search02-local > li:hover .search02-local-sub {
display: block;
}
.search02-local-sub li {
float: left;
text-align: left;
padding-left: 10px;
position: relative;
box-sizing: border-box;
margin: 0 5px;
}
.search02-local-sub li:before {
width: 0;
height: 0;
position: absolute;
content: '';
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid #f5a868;
left: 0;
top: 7px;
}
.search02-local-sub li a {
text-decoration: none;
color: #534741;
}
.search02-local-sub li a:hover {
text-decoration: underline;
}
#index .search02-local .search02-local-sub li:nth-child(4n) {
margin-right: 5px;
}
#index .search03-ctn {
text-align: center;
background: url(/images/box02_bg.jpg) repeat;
border-radius: 10px;
border: 1px dashed #bda890;
color: #524640;
font-size: 16px;
font-weight: bold;
line-height: 1.8em;
padding: 25px 0;
width: 95%;
margin: 25px auto 0;
}
#index .search03-top {
max-width: 780px;
margin-bottom: 10px;
display: none;
}
#index .search03-top-ttl {
padding: 0 0 5px;
font-size: 18px;
font-weight: bold;
line-height: 1;
color: #534741;
}
#index .search03-top-ttl .d {
color: #7abbff;
}
#index .search03-top-ttl .c {
color: #ff807f;
}
#index .search03-top-alert {
margin-right: 165px;
padding: 15px;
background-color: #e1eaf1;
border-radius: 8px;
}
#index .search03-top-alert p {
margin: 0;
}
#index .search03-top-alert h4 {
font-size: 18px;
color: #64c9e1;
font-family: 'Yu Gothic bold';
font-weight: bold;
margin-bottom: 20px;
}
#index .search03-top-alert-image {
float: right;
width: 150px;
}
#index .search03-top-alert-ttl {
font-size: 14px;
font-weight: bold;
color: #ed5c1b;
}
#index .search03-below-type-ttl {
font-size: 14px;
font-weight: bold;
color: #2285c9;
}
#index .search03-below {
max-width: 780px;
display: none;
}
#index .search03-below-left {
float: left;
width: 40%;
}
#index .search03-below-right {
float: right;
width: 58%;
}
#index .search03-type-dog, #index .search03-type-cat, .search03-type-dog-breed, .search03-type-cat-breed {
display: none;
}
#index .search03-type-dog.active, #index .search03-type-cat.active, .search03-type-dog-breed.active, .search03-type-cat-breed.active {
display: block;
}
#index .search03-type-dog select, #index .search03-type-cat select {
margin-bottom: 5px;
}
#index .search03-top-i01 {
background: url(/images/box02_bg.jpg) repeat;
margin-bottom: 5px;
border-radius: 10px;
border: 2px dashed #d3bea6;
position: relative;
text-align: center;
height: 120px;
font-size: 20px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
#index .search03-top-i01 > span {
position: relative;
z-index: 1;
}
#index .search03-img {
margin: 0;
position: absolute;
right: 0;
bottom: -2px;
width: 100px;
}
#index .search03-top-i02 {
float: left;
background: #e9f3f9;
border-radius: 10px;
position: relative;
width: 300px;
height: 160px;
box-sizing: border-box;
margin-left: 20px;
padding: 20px;
font-size: 12px;
line-height: 1.6em;
}
#index .search03-top-i02:before {
content: url(/images/pets_ctn_tape.png);
position: absolute;
left: calc(50% - 45px);
top: -5px;
}
#index .search03-img02 {
margin: 0;
position: absolute;
right: 10px;
bottom: -15px;
width: 120px;
}
#index .search-pic-up {
border-radius: 10px;
padding: 10px 15px 10px 15px;
margin-bottom: 20px;
}
#index .search-pic-ttl {
font-size: 14px;
color: #534741;
font-weight: bold;
margin-bottom: 5px;
float: left;
}
#index .search-pic-btn {
position: relative;
background: #534741;
border-radius: 8px;
display: inline-block;
vertical-align: middle;
padding: 3px 20px;
color: #fff;
font-weight: bold;
font-size: 14px;
margin: 0;
float: right;
}
#index .search-pic-btn input {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
#index .search-pic-btn span {
display: inline-block;
width: 20px;
vertical-align: middle;
line-height: 0;
margin-right: 10px;
}
#index .search-pic-txt {
margin-bottom: 0;
/* display: inline-block; */
display: none;
vertical-align: middle;
margin-left: 20px;
}
#index .search03-list li {
padding: 0 0 0 20px;
text-indent: -15px;
}
#index .search03-txt {
text-align: center;
color: #524640;
margin: 0;
}
#index .idx-main-bnr {
width: 1080px;
position: absolute;
bottom: 0;
left: calc(50% - 540px);
text-align: right;
}
#header .idx-main-bnr {
width: auto;
position: static;
padding-top: 30px;
display: inline-block;
}
.idx-main-bnr li {
display: inline-block;
vertical-align: middle;
;
text-align: left;
margin: 0 0 0 20px;
}
#header .idx-main-bnr li {
margin: 0 10px 0 0;
}
#header .idx-main-bnr li:first-child {
width: 180px;
display: none;
}
.idx-main-bnr li a {
display: block;
text-decoration: none;
}
.idx-main-bnr li a:hover {
opacity: 0.7;
}
#index .idx-main-bnr01 {
position: absolute;
bottom: 10px;
left: 60%;
transform: translateX(-50%);
}
#index .idx-main-bnr01 li {
display: inline-block;
vertical-align: bottom;
text-align: left;
margin: 0 0 0 10px;
cursor: pointer;
border-radius: 50%;
background-color: #FFFFFF;
height: 15px;
width: 15px;
}
#index .idx-main-bnr01 li:hover {
background: #fff;
}
#index .idx-main-bnr01 li:hover img {
opacity: 0.5;
}
#index .idx-main-bnr01 li.slick-current {
background: #64c9e1;
border: 1px solid #FFF;
}
#index .idx-main-bnr01 li.slick-current img {
opacity: 1;
}
#index .idx-main-bnr01 li {
outline: none;
}
.idx-main-bnr dl {
background: #fff;
border-radius: 5px 5px 0 0;
display: table;
padding: 14px 20px;
}
#header .idx-main-bnr dl {
padding: 0;
}
.idx-main-bnr dt {
display: table-cell;
vertical-align: middle;
color: #534741;
font-family: 'Yu Gothic Medium';
padding: 0 5px 0 0;
}
#header .idx-main-bnr dt {
font-size: 12px;
}
.idx-main-bnr dd {
display: table-cell;
vertical-align: middle;
color: #64c9e1;
font-family: 'Yu Gothic Medium';
}
#header .idx-main-bnr dd {
font-size: 12px;
}
.idx-main-bnr dd span {
display: inline-block;
vertical-align: middle;
font-family: 'Roboto', sans-serif;
font-weight: 700;
background: #e9f3f9;
border-radius: 5px;
font-size: 28px;
padding: 8px 10px;
margin: 0 5px 0 0;
}
#header .idx-main-bnr dd span {
font-size: 18px;
}
#index .search-inner-tabs {
display: flex;
}
#index .search-inner-tabs-tab {
flex: 1;
display: block;
padding: 15px 7px;
font-size: 14px;
}
#index .search-inner-tab-content:not(.active) {
display: none;
}
/*box01*/
.box01 {
padding: 30px 0 32px;
}
.box01 .box01-ttl {
width: 180px;
float: left;
margin: 0 25px 0 0;
}
.box01-ttl-img {
line-height: 0;
margin: 0 0 12px;
}
/* box01 の英語タイトル用 */
/* 既存の .box01 h3 span より強い指定にする */
.box01-ttl h3 span.main-title {
color: #132743;
font-size: 14px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
display: block;
margin: 0 0 5px;
background: none !important; /* 背景の消し忘れ対策 */
padding: 0 !important; /* 既存paddingをリセット */
}
.box01-small-ttl {
text-align: center;
color: #a49e9a;
font-family: 'Yu Gothic bold';
font-weight: bold;
margin: 0 0 5px;
}
.box01 h3 {
text-align: center;
margin: 0 0 5px;
font-size: 24px;
color: #534741;
font-family: 'Yu Gothic bold';
font-weight: bold;
line-height: 1.35em;
}
.box01 h3 span {
color: #64c9e1;
font-size: 16px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
vertical-align: bottom;
margin: 0;
display: block;
background: url(/images/box01_ttl_bg01.png) no-repeat center center;
padding: 9px 0;
}
.box01-btn {
text-align: center;
margin: 0 auto;
position: relative;
width: 80%;
padding: 2px 10px;
z-index: 0;
box-sizing: border-box;
max-width: 180px;
}
.box01-btn:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #f5a868;
border-radius: 100px;
left: 0;
top: 0;
z-index: -1;
}
.box01-btn:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #dc975d;
border-radius: 100px;
left: 0;
top: 5px;
z-index: -2;
}
.box01-btn a {
text-decoration: none;
color: #fff;
font-size: 15px;
letter-spacing: 0.5px;
font-family: 'Yu Gothic Medium';
position: relative;
display: inline-block;
}
.box01-btn a:before {
content: '';
position: absolute;
border-left: 6px solid #fff;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
left: -19px;
top: calc(50% - 4px);
}
.box01 .box01-ctn {
width: 875px;
float: right;
text-align: center;
}
.box01 .box01-ctn li {
width: 160px;
overflow: hidden;
float: left;
margin: 0 18px 0 0;
}
.box01 .box01-ctn li:last-child {
margin: 0;
}
.box01-ctn li a {
text-decoration: none;
display: block;
color: #534741;
font-size: 12px;
}
.box01-ctn li a:hover, .box01-btn a:hover {
opacity: 0.8;
}
.box01-ctn .box01-img {
line-height: 0;
margin: 0 0 10px;
height: 90px;
overflow: hidden;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.box01-ctn .box01-img img {
width: 100%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.box01-ctn .box01-date {
margin: 0 0 3px;
}
.box01-ctn .box01-name {
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
margin: 0;
overflow: hidden;
}
.box01-ctn .box01-sub {
margin: 0;
}
.box01-txt {
margin: 0;
}
.box01-ctn .box01-price {
margin: 0 0 1px;
font-weight: bold;
}
.box01-ctn .box01-price-tax {
margin: 0 0 5px;
font-size: 10px;
font-weight: normal;
}
.box01-ctn .box01-cate {
margin: 0;
color: #fff;
display: inline-block;
padding: 0 20px;
font-weight: bold;
border-radius: 5px;
}
.box01-ctn .box01-cate.cate01 {
background: #82bdff;
}
.box01-ctn .box01-cate.cate02 {
background: #fc817b;
}
/*box02*/
.box02 {
background: url(/images/box02_bg.jpg) 0 0 repeat;
padding: 10px 0 35px;
margin-bottom: 30px;
}
.box02 .container {
position: relative;
z-index: 0;
}
.box02 .container:before {
content: '';
position: absolute;
width: 212px;
height: 115px;
background: url(/images/box02_ttl_bg01.png) 0 0 no-repeat;
background-size: contain;
top: -50px;
left: calc(50% - 106px);
z-index: -1;
}
.box02 h3 {
text-align: center;
margin: 0 0 25px;
color: #534741;
font-size: 24px;
font-family: 'Yu Gothic bold';
font-weight: bold;
letter-spacing: 1px;
}
.box02 h3 span {
color: #64c9e1;
font-size: 14px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
display: block;
margin: 0 0 15px;
}
.box02 .box02-bnr {
text-align: center;
}
.box02 .box02-bnr li {
display: inline-block;
vertical-align: top;
margin: 4px;
}
/*.box02 .box02-bnr li:first-child {
margin: 0 20px 0 0;
}*/
.box02 .box02-bnr li a:hover img {
opacity: 0.8;
}
/*box03*/
.box03 {
background: url(/images/box03_bg.png) 0 0 repeat-x;
margin: -10px 0 0;
padding: 10px 0 58px;
}
.box03 .box03-ctn {
width: 1100px;
height: 546px;
box-sizing: border-box;
margin: 0 auto;
padding: 30px 0 0;
position: relative;
/* z-index: 1; */
}
/*.box03 .box03-ctn:before {
content: url(/images/box03_img01.png);
position: absolute;
top: -14px;
left: calc(50% - 570px);
z-index: -1;
}
.box03 .box03-ctn:after {
content: url(/images/box03_img02.png);
position: absolute;
top: -13px;
right: calc(50% - 569px);
z-index: -1;
}*/
.box03-ctn .box03-ttl-en {
text-align: center;
color: #64c9e1;
font-family: 'Nunito', sans-serif;
font-weight: 700;
padding: 0 0 10px;
margin: 0 0 10px;
background: url(/images/idx_icon01.png) center bottom no-repeat;
}
.box03-ctn h3 {
text-align: center;
font-size: 32px;
font-family: 'Yu Gothic bold';
font-weight: bold;
color: #524640;
line-height: 1.3em;
margin: 0 0 20px;
}
.txt-pink {
color: #fc817b;
}
.txt-blue {
color: #4abbf5;
}
.bg-yellow {
content: '';
width: 100%;
height: 8px;
background: #fdf57a;
z-index: -1;
left: 0;
/*bottom: 3px;*/
}
.box03-ctn .box03-txt {
text-align: center;
color: #524640;
font-size: 13px;
line-height: 2em;
margin: 0 0 10px;
}
.b03-btn {
position: absolute;
bottom: -40px;
left: calc(50% - 116px);
}
.b03-btn.idx-btn01 a {
width: 240px;
padding: 5px 0 15px;
letter-spacing: 1px;
}
.box03-items {
position: absolute;
width: 260px;
/*height: 260px;*/
}
.box03-items.i01 {
left: calc(50% - 435px);
padding-right: 22px;
border-right: 2px dashed #cae5f3;
}
.box03-items.i02 {
right: calc(50% - 435px);
padding-left: 20px;
border-left: 2px dashed #cae5f3;
}
.box03-items.i03 {
left: calc(50% - 128px);
/* bottom: -88px; */
}
.b03-i-ttl {
text-align: center;
color: #fff;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 14px;
padding: 5px 0 5px;
margin-bottom: 20px;
background-color: rgba(0, 0, 0, 0.60);
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
.box03-items dt {
text-align: center;
margin: 0 0 5px;
}
.box03-items dt img {
margin: 0 auto;
}
.box03-items dd {
text-align: center;
color: #524640;
font-size: 17px;
font-family: 'Yu Gothic bold';
font-weight: bold;
}
.box03-items dd .b03-i-txt01 {
/*margin: 0 0 3px;*/
margin: 0px;
}
.box03-items dd .b03-i-txt02 {
font-size: 20px;
margin: 0;
}
.box03-items dd .b03-i-txt02 span {
font-size: 36px;
color: #64c9e1;
letter-spacing: -3px;
font-family: 'Yu Gothic bold';
font-weight: 900;
margin: 0 3px 0 0;
display: inline-block;
vertical-align: baseline;
}
/*box04*/
.box04 {
padding: 10px 0 85px;
}
.box04 .container {
width: 1080px;
position: relative;
}
.box04 .container:before {
top: 0;
left: calc(50% - 460px);
position: absolute;
z-index: -1;
}
.box04 h3 {
/*background: url(/images/box04_ttl_bg.png) center center no-repeat;*/
color: #534741;
font-size: 28px;
font-family: 'Yu Gothic bold';
font-weight: bold;
text-align: center;
margin: 0 0 35px;
}
.box04 h3 span {
display: block;
color: #64c9e1;
font-size: 14px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
margin: 0 0 15px;
}
.box04-bnr {
/* text-align: center; */
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-align-items: flex-start;
align-items: flex-start;
justify-content: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.box04-bnr li{
/* display: inline-block;
vertical-align: top;
margin: 0 13px 0 0; */
width: 260px;
margin: 0 0 15px 10px;
}
.box04-bnr li:nth-child(4n+1){
margin-left: 0;
}
.box04-bnr li a {
display: block;
/* -webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s; */
}
.box04-bnr li a:hover {
opacity: 0.8;
}
/* .box04-bnr li:last-child {
margin: 0;
} */
.box04-slick-prev, .box04-slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
cursor: pointer;
color: transparent;
border: none;
outline: none;
z-index: 999;
background: transparent;
}
.box04-slick-prev:hover, .box04-slick-next:hover {
opacity: 0.7;
}
.box04-slick-prev {
left: calc(50% - 580px);
}
.box04-slick-next {
right: calc(50% - 580px);
}
/*box05*/
.box05 {
background: url(/images/box02_bg.jpg) 0 0 repeat;
}
.box05 .container {
padding: 25px 0 30px;
position: relative;
z-index: 0;
width: 1080px;
}
/*.box05 .container:before {
content: url(/images/box05_bg.png);
top: 0;
left: calc(50% - 444px);
position: absolute;
z-index: -1;
}*/
.box05 h3 {
text-align: center;
color: #534741;
font-size: 28px;
font-family: 'Yu Gothic bold';
font-weight: bold;
letter-spacing: 1px;
margin: 0 0 30px;
}
.box05 h3 span {
color: #64c9e1;
font-size: 14px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
display: block;
margin: 0 0 15px;
}
.box05-slider {
width: 1080px;
margin: 0 auto;
}
.box05-slider li {
float: left;
box-sizing: border-box;
margin: 0 6px 0 0;
width: 265px;
/*border-radius: 10px;
border-bottom: 4px solid rgba(0,0,0,0.05);
border-right: 3px solid rgba(0,0,0,0.05);*/
}
.box05-slider li a {
display: block;
text-decoration: none;
/*background: #fff;*/
/*border-radius: 10px;*/
/*border: 1px solid #ded1c3;*/
}
.box05-slider li a:hover {
opacity: 0.8;
}
.box05-slider li a dl {
display: table;
padding: 10px;
}
.box05-slider li a dt {
display: table-cell;
vertical-align: middle;
width: 110px;
padding: 0 7px 0 0;
}
.box05-slider li a dd {
display: table-cell;
vertical-align: top;
}
.box05-ttl01 {
color: #524640;
font-family: 'Yu Gothic bold';
font-weight: bold;
letter-spacing: -0.5px;
margin: 0;
line-height: 1.4em;
}
.box05-ttl02 {
color: #f59157;
font-size: 28px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
line-height: 1.2em;
margin: 0;
}
.box05-note {
font-size: 10px;
font-family: 'Yu Gothic bold';
font-weight: bold;
background: #a9cee7;
border-radius: 5px;
width: 200px;
box-sizing: border-box;
padding: 0 10px;
margin: 0;
}
.box05-note br {
display: none;
}
/*Box05 Arrows */
.box05-slick-prev, .box05-slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
cursor: pointer;
color: transparent;
border: none;
outline: none;
z-index: 999;
background: transparent;
}
.box05-slick-prev:hover, .box05-slick-next:hover {
opacity: 0.7;
}
.box05-slick-prev {
left: calc(50% - 580px);
}
.box05-slick-next {
right: calc(50% - 580px);
}
/*box06*/
.box06 {
padding: 50px 0 68px;
background: url(/images/box06_bg02.png) top center no-repeat;
}
.box06 .container {
border-bottom: 4px solid rgba(0, 0, 0, 0.05);
border-right: 3px solid rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
.box06 .box06-ctn {
border-radius: 10px;
border: 1px solid #ded1c3;
background: url(/images/box06_bg.png) -10px -20px no-repeat;
padding: 30px;
position: relative;
background-color: #FFF;
}
.box06-btn {
text-align: right;
margin: 0;
position: absolute;
right: 20px;
top: 20px;
}
.box06-btn a {
text-decoration: none;
color: #534741;
font-size: 15px;
letter-spacing: 0.5px;
font-family: 'Yu Gothic Medium';
position: relative;
display: inline-block;
z-index: 0;
}
.box06-btn a:before {
content: '';
position: absolute;
border-left: 6px solid #f5a868;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
left: -15px;
top: calc(50% - 4px);
}
.box06-btn a:after {
content: '';
position: absolute;
width: calc(100% + 10px);
height: 10px;
background: #fdf57a;
z-index: -1;
bottom: 2px;
left: -5px;
}
.box06-btn a:hover {
opacity: 0.8;
}
.box06 h3 {
font-size: 24px;
color: #534741;
font-family: 'Yu Gothic bold';
font-weight: bold;
margin: 0 0 20px;
position: relative;
float: left;
}
.box06 h3 span.en {
font-size: 14px;
color: #64c9e1;
font-family: 'Nunito', sans-serif;
font-weight: 700;
display: block;
margin: 0 0 15px;
}
.box06 h3 span.b06-h3 {
position: relative;
}
/*.box06 h3:after {
content: '';
position: absolute;
line-height: 0;
left: 114px;
bottom: 10px;
width: calc(100% - 114px);
border: 1px dashed #e2c39c;
}*/
.box06-news {
max-height: 410px;
overflow: auto;
}
.box06-list li {
padding: 7px 0 7px 10px;
border-bottom: 1px solid #e5dacf;
position: relative;
overflow: hidden;
}
.box06-list li span {
font-size: 13px;
color: #998675;
display: inline-block;
margin: 0 15px 0 0;
vertical-align: middle;
}
.under .box06-list li span.news-thumb {
float: left;
}
.box06-list li span.news-date {
padding-top: 5px;
}
.box06-list li a {
font-size: 13px;
text-decoration: none;
display: inline-block;
max-width: calc(100% - 300px);
vertical-align: middle;
padding-top: 5px;
}
/*.under .box06-list li .news-link{
width: calc(100% - 85px);
float: right;
}*/
.under .box06-list li a {
max-width: 100%;
}
.box06-list li a:hover {
text-decoration: underline;
}
/*box07*/
.box07 {
padding: 70px 0 60px;
}
.box07 .box07-ctn {
width: 1080px;
margin: 0 auto;
background: url(/images/box07_bg02.jpg) repeat;
border-radius: 0 0 10px 10px;
z-index: 0;
position: relative;
padding: 20px 85px 45px;
box-sizing: border-box;
}
.box07 .box07-ctn:before {
content: '';
position: absolute;
width: 100%;
height: 13px;
background: url(/images/box07_bg01.jpg) left top repeat-x;
border-radius: 10px 10px 0 0;
left: 0;
top: -13px;
z-index: -1;
}
.box07 .box07-ctn:after {
content: url(/images/box07_after.png);
position: absolute;
top: -31px;
left: calc(50% - 500px);
z-index: -1;
}
.box07 h3 {
text-align: center;
font-size: 28px;
color: #534741;
font-family: 'Yu Gothic bold';
font-weight: bold;
letter-spacing: 1px;
margin: 0 0 60px;
}
.box07 h3 span.en {
display: block;
font-size: 14px;
color: #64c9e1;
font-family: 'Nunito', sans-serif;
font-weight: 700;
margin: 0 0 15px;
}
.box07-list li {
width: 443px;
float: left;
box-sizing: border-box;
position: relative;
z-index: 0;
padding: 21px;
}
.box07-list li:before {
content: '';
position: absolute;
background: #fff;
border-radius: 5px;
box-sizing: border-box;
border: 1px solid #dfd2c4;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.box07-list li:after {
content: '';
position: absolute;
background: rgba(0, 0, 0, 0.05);
border-radius: 5px;
top: 4px;
left: 3px;
width: 100%;
height: 100%;
z-index: -2;
}
.box07-list li:first-child {
margin: 0 20px 0 0;
}
.box07-list .box07-ttl {
position: absolute;
background: #524640;
border-radius: 5px;
text-align: center;
width: 280px;
color: #fff;
font-size: 20px;
letter-spacing: 1px;
font-family: 'Yu Gothic bold';
font-weight: bold;
padding: 7px 0;
margin: 0;
left: 50%;
top: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.box07-list .box07-ttl span {
line-height: 0;
display: inline-block;
vertical-align: middle;
margin: 0 8px 0 0;
}
.box07-list .box07-img {
margin: 0 0 15px;
}
.box07-list .box07-txt {
font-size: 15px;
letter-spacing: 0.4px;
line-height: 2em;
margin: 0 0 15px;
}
.box07-list .box07-btn {
text-align: center;
margin: 0 0 5px;
}
/*box08*/
.box08 {
background: url(/images/box08_bg.jpg) 0 0 repeat;
border-bottom: 1px solid #ddd0c2;
padding: 30px 0 10px;
position: relative;
z-index: 0;
}
/*.box08:after{
content: '';
position: absolute;
width: 100%;
height: 50%;
background: url(/images/box08_bg01.jpg) 0 0 repeat;
bottom: 0;
left: 0;
z-index: -1;
}*/
.box08-bnr {
overflow: hidden;
}
.box08-bnr li {
float: left;
margin: 0 16px 16px 0;
}
.box08-bnr li:nth-child(4n) {
margin: 0 0 16px;
}
.box08-bnr li a {
display: block;
}
.box08-bnr li a.hover:hover {
opacity: 0.8;
}
/*box09*/
.box09 {
background: url(/images/box09_bg.jpg) 0 0 repeat;
padding: 30px 0 0px;
position: relative;
z-index: 0;
}
.box09-bnr {
overflow: hidden;
display: flex;
justify-content: center;
}
.box09-bnr li {
margin: 0 8px 6px;
}
.box09-bnr li a {
display: block;
}
.box09-bnr li a.hover:hover {
opacity: 0.8;
}
/*box10*/
.box10 {
padding: 10px 0 85px;
}
.box10 .container {
width: 1080px;
position: relative;
}
.box10 .container:before {
content: url(/images/box10_ttl_bg.png);
top: 0;
left: calc(50% - 460px);
position: absolute;
z-index: -1;
}
.box10 h3 {
/*background: url(/images/box10_ttl_bg.png) center center no-repeat;*/
color: #534741;
font-size: 28px;
font-family: 'Yu Gothic bold';
font-weight: bold;
text-align: center;
margin: 0 0 35px;
}
.box10 h3 span {
display: block;
color: #64c9e1;
font-size: 14px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
margin: 0 0 15px;
}
.box10-bnr {
text-align: center;
}
.box10-bnr li {
display: inline-block;
vertical-align: top;
margin: 0 13px 0 0;
width: 260px;
}
.box10-bnr li a {
display: block;
}
.box10-bnr li a:hover {
opacity: 0.8;
}
.box10-bnr li:last-child {
margin: 0;
}
.box10-slick-prev, .box10-slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
cursor: pointer;
color: transparent;
border: none;
outline: none;
z-index: 999;
background: transparent;
}
.box10-slick-prev:hover, .box10-slick-next:hover {
opacity: 0.7;
}
.box10-slick-prev {
left: calc(50% - 580px);
}
.box10-slick-next {
right: calc(50% - 580px);
}
/*---Under---*/
.under a {
color: #64c9e1;
}
.under th a {
color: #a56437;
}
.under a:hover, a:active {
text-decoration: none;
}
.under #main {
margin: 0 auto 70px;
width: 1080px;
}
.under.search #main {
margin-bottom: 0;
}
.under #footer {
border-top: 1px solid #ddd0c2;
padding: 40px 0 0;
}
.under.thought .topic-path {
margin: 0 0 60px;
}
.topic-path {
margin: 0 0 20px;
padding: 14px 0 16px;
box-sizing: border-box;
background: url(/images/topic_path_bg.jpg);
}
.topic-path ul {
width: 1080px;
margin: 0 auto;
}
.topic-path li {
display: inline-block;
font-size: 12px;
font-family: 'Yu Gothic Medium';
position: relative;
z-index: 1;
}
.topic-path li:after {
position: absolute;
background: url(/images/arrow01.png) no-repeat;
width: 6px;
height: 8px;
content: '';
right: 25px;
top: calc(50% - 4px);
}
.topic-path li:last-child:after {
display: none;
}
.topic-path li a {
font-size: 12px;
color: #002e54;
margin-right: 60px;
text-decoration: none;
position: relative;
}
.topic-path li a:after {
position: absolute;
background: #faef6f;
width: 100%;
height: 8px;
content: '';
left: 0;
top: 50%;
z-index: -1;
}
.topic-path li a:hover {
opacity: 0.8;
}
.image-r img, .image-l img {
border-radius: 10px;
}
.under #content {
float: right;
width: 760px;
}
.under #navi {
width: 280px;
float: left;
}
.note {
font-size: 12px;
color: #64c9e1;
margin-bottom: 10px;
}
.under sub {
vertical-align: top;
}
.under-tbl th, .under-tbl td {
padding: 10px;
border: 1px solid #ddd0c2;
background: #fff;
}
.under-tbl th {
background: #e5f4f9;
font-weight: bold;
color: #534741;
text-align: left;
}
.under-tbl th.center {
text-align: center;
}
.under-tbl th.right {
text-align: right;
}
.under-tbl th.left {
text-align: left;
}
.under-tbl td.vtop {
vertical-align: top;
}
.under-tbl .bg01 {
background: #f4ecda;
font-weight: bold;
}
.under-tbl .bg02 {
background: #ffe41f;
}
.under-tbl .bg-blue {
background: #ebf2f7;
}
.under-tbl.center th, .under-tbl.center td {
text-align: center;
}
.under-tbl td a {
color: #534741;
font-weight: bold;
}
.under #mainvisual {
min-height: 150px;
background: #ecf0f3 url(/images/under_h2_bg.jpg) center bottom no-repeat;
background-size: auto 100%;
position: relative;
margin-top: 139px;
}
.under #mainvisual.bgimage02 {
background: #ecf0f3 url(/images/under_h2_bg02.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual.bgimage03 {
background: #ecf0f3 url(/images/under_h2_bg03.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual.bgimage04 {
background: #ecf0f3 url(/images/under_h2_bg04.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual.bgimage05 {
background: #ecf0f3 url(/images/under_h2_bg05.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual.bgimage06 {
background: #ecf0f3 url(/images/under_h2_bg06.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual.bgimage07 {
background: #ecf0f3 url(/images/under_h2_bg07.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual.bgimage08 {
background: #ecf0f3 url(/images/under_h2_bg08.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual.bgimage09 {
background: #ecf0f3 url(/images/under_h2_bg09.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual.bgimage10 {
background: #ecf0f3 url(/images/under_h2_bg10.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual.bgimage11 {
background: #ecf0f3 url(/images/under_h2_bg11.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual.bgimage12 {
background: #ecf0f3 url(/images/under_h2_bg12.jpg) center bottom no-repeat;
background-size: auto 100%;
}
.under #mainvisual .mainvisual-logo {
position: absolute;
top: 20px;
left: calc(50% - 560px);
}
.under #mainvisual .container {
display: table;
height: 150px;
box-sizing: border-box;
}
.under #mainvisual .container h2 {
display: table-cell;
vertical-align: middle;
font-size: 28px;
line-height: 35px;
font-family: 'Yu Gothic bold';
font-weight: bold;
}
.under #mainvisual .container h2 span {
font-family: 'Nunito', sans-serif;
font-weight: 700;
color: #64c9e1;
font-size: 16px;
display: block;
line-height: 20px;
margin-top: 10px;
}
.large-ttl {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 28px;
line-height: 42px;
}
.large-ttl span {
color: #fc817b;
}
.mid-ttl {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 20px;
color: #64c9e1;
}
.font18 {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 18px;
}
.under h3, .under h4, .under h5, .under h6, .under .h3 {
font-family: 'Yu Gothic bold';
font-weight: bold;
margin-bottom: 20px;
line-height: 1.3em;
position: relative;
}
.under h3, .under .h3 {
font-size: 28px;
color: #534741;
}
.under h3.zukan-all-h3 {
padding: 15px 0 15px 65px;
background: url(/images/zukan_h3.png) 0 center no-repeat;
}
.under h3.trim-h3 {
padding: 15px 0 15px 65px;
background: url(/images/trim_idx_icon01.png) 0 center no-repeat;
}
.under h3.lang-h3 {
font-size: 28px;
color: #534741;
background: none;
padding-bottom: 0px;
}
.under h4 {
padding-left: 24px;
font-size: 18px;
color: #64c9e1;
}
.under h4:after {
position: absolute;
width: 10px;
height: 10px;
border: #64c9e1 3px solid;
border-radius: 50%;
content: '';
left: 0;
top: 3px;
}
.under h5 {
padding: 2px 0 0 17px;
font-size: 16px;
color: #64c9e1;
border-left: #64c9e1 4px solid;
}
.under-list li {
position: relative;
padding-left: 17px;
}
.under-list li:before {
position: absolute;
width: 6px;
height: 6px;
content: '';
left: 0;
top: 11px;
margin-top: -3px;
background: #64c9e1;
border-radius: 50%;
}
.under #content a.link-btn {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 16px;
color: #fff;
text-align: center;
padding: 10px 20px 7px 30px;
text-decoration: none;
position: relative;
display: inline-block;
background: #f5a868;
border-radius: 50px;
box-sizing: border-box;
-webkit-box-shadow: 1px 5px #dc975d;
-moz-box-shadow: 1px 5px #dc975d;
box-shadow: 1px 5px #dc975d;
}
.under #content a.link-btn:after {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #fff;
content: '';
left: 20px;
top: 50%;
margin-top: -3px;
}
.under #content a.link-btn:hover {
opacity: 0.8;
}
.nav-box01 {
margin-bottom: 38px;
}
.nav-box01 dt a, .nav-box01 dt.n-b01-notlink {
display: block;
background: url(/images/nav_box01_ttl.jpg) no-repeat;
height: 56px;
padding: 16px 0 0 73px;
box-sizing: border-box;
font-family: 'Yu Gothic bold';
font-weight: bold;
color: #fff;
font-size: 20px;
margin-bottom: 15px;
text-decoration: none;
}
.nav-box01 dd a {
background: url(/images/under_h3_bg.png) left bottom repeat-x;
font-weight: bold;
padding: 8px 0 7px 30px;
text-decoration: none;
display: block;
color: #534741;
position: relative;
}
.nav-box01 dd a:before {
position: absolute;
background: url(/images/arrow01.png) no-repeat;
width: 6px;
height: 8px;
content: '';
left: 10px;
top: 18px;
}
.nav-box01 dd a span {
position: relative;
padding: 0 5px;
}
.nav-box01 dd a span:before {
position: absolute;
background: #fdf57a;
height: 10px;
width: 100%;
top: 50%;
left: 0;
z-index: -1;
content: '';
}
.nav-box01 dd a:hover, .nav-box01 dt a:hover {
opacity: 0.8;
}
.nav-box02 {
border: #eee8e0 1px solid;
border-radius: 10px;
box-shadow: 4px 4px #f2f2f2;
padding: 13px 10px 17px 15px;
box-sizing: border-box;
margin-bottom: 20px;
}
.nav-box02 p {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 20px;
background: url(/images/under_h3_bg.png) left bottom repeat-x;
padding-bottom: 5px;
margin-bottom: 7px;
}
.nav-box02 p span {
font-family: 'Nunito', sans-serif;
font-weight: 700;
color: #64c9e1;
display: block;
font-size: 14px;
line-height: 15px;
}
.news-list li {
border-bottom: #e2d9cf 1px solid;
padding: 0 0 8px 15px;
margin-bottom: 4px;
color: #998675;
position: relative;
}
.news-list li:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.news-list li:before {
position: absolute;
width: 6px;
height: 6px;
content: '';
left: 0;
top: 11px;
background: #64c9e1;
border-radius: 50%;
}
.news-list li a {
display: block;
color: #524640;
text-decoration: none;
line-height: 22px;
}
.news-list li a:hover {
text-decoration: underline;
}
.marker {
background: url(/images/ico_marker.png) left top no-repeat;
padding: 5px 0 4px 50px;
}
.petshop .gMap {
width: 100%;
height: 400px;
}
.frame01 {
background: url(/images/frame01_bg.png);
padding: 20px;
border-radius: 5px;
}
.frame02 {
border: #eee8e0 1px solid;
border-radius: 10px;
box-shadow: 4px 4px #f2f2f2;
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
.shop-info dl {
background: url(/images/info_line.png) left bottom repeat-x;
margin-bottom: 10px;
padding-bottom: 5px;
display: table;
width: 100%;
}
.shop-info dl dt {
display: table-cell;
vertical-align: middle;
padding-left: 20px;
width: 150px;
font-weight: bold;
position: relative;
}
.shop-info dl dt:before {
position: absolute;
width: 6px;
height: 6px;
content: '';
left: 0;
top: 50%;
margin-top: -3px;
background: #64c9e1;
border-radius: 50%;
}
.shop-info .ico li {
float: left;
margin-right: 15px;
text-align: center;
}
.shop-info .ico li img {
margin-bottom: 10px;
}
.shop-info .ico li span {
display: block;
font-size: 10px;
line-height: 2px;
}
.regis-type {
padding-left: 20px;
margin-bottom: 15px;
}
.regis-type li {
display: inline-block;
margin-right: 20px;
}
.regis-type li a {
display: block;
padding: 3px 30px 2px;
line-height: 1.5;
text-decoration: none;
color: #333;
background: #fff;
border-radius: 5px;
}
.regis-type li a:hover {
opacity: 0.7;
}
.frame01 .child-box {
background: #fff;
padding: 20px;
border-radius: 10px;
word-break: break-word;
}
.resetpad {
line-height: 0;
margin-bottom: 0;
}
/*.pet-list, .shop-list, .baby-list {*/
.pet-list, .baby-list {
display: -webkit-flex;
display: flex;
/*-webkit-justify-content: space-between;
justify-content: space-between;*/
flex-wrap: wrap;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.pet-list li .date, .pet-list li .name {
font-size: 12px;
line-height: 18px;
margin-bottom: 10px;
}
.pet-list li p:first-child {
text-align: center;
height: 138px;
}
.pet-list li img {
border-radius: 10px;
max-height: 138px;
max-width: 175px;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
.pet-list .male, .pet-list .fe-male {
background: #82bdff;
border-radius: 5px;
padding: 3px 22px 0px;
display: table;
font-weight: bold;
font-size: 12px;
color: #fff;
line-height: 21px;
}
.pet-list .fe-male {
background: #fc817b;
}
.shop-list li {
text-align: center;
-ms-opacity: 0;
opacity: 0;
min-height: 240px;
}
.shop-list li a {
outline: none;
}
.shop-list li a:hover {
opacity: 0.7;
}
.shop-list li span {
display: block;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 16px;
line-height: 20px;
}
.shop-list li img {
max-height: 225px;
border-radius: 10px;
margin-bottom: 10px;
width: auto;
margin: 0 auto 10px;
}
body #shop_detail.section {
margin-bottom: 40px;
}
body .bx-wrapper {
margin-left: auto;
margin-right: auto;
padding: 0;
border: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
body #shop_detail .bx-wrapper {
margin-bottom: 30px;
}
body .bx-wrapper .bx-pager {
position: absolute;
top: 100%;
bottom: auto;
left: 0;
right: 0;
padding-top: 15px;
}
body #shop_detail .bx-wrapper .bx-pager {
position: absolute;
top: 87%;
bottom: auto;
left: 0;
right: 0;
padding-top: 40px;
}
body .bx-wrapper .shop-list li {
-ms-opacity: 1;
opacity: 1;
}
body .bx-wrapper .bx-controls-direction a {
top: 110%;
}
body #shop_detail .bx-wrapper .bx-controls-direction a {
top: 50%;
z-index: 999;
}
body #shop_detail .bx-wrapper .bx-prev {
left: -60px;
background: url(images/bx_controls.png) 0 -32px no-repeat;
}
body #shop_detail .bx-wrapper .bx-next {
right: -60px;
background: url(images/bx_controls.png) -43px -32px no-repeat;
}
.shop-blog {
border: #eee8e0 1px solid;
border-radius: 10px;
box-shadow: 4px 4px #f2f2f2;
padding: 15px 30px 25px;
box-sizing: border-box;
margin-bottom: 20px;
}
.shop-blog .shop-blog-ttl {
background: url(/images/shop_detail_img12.png) left bottom repeat-x;
padding-bottom: 5px;
margin-bottom: 7px;
}
.shop-blog .shop-blog-ttl p {
margin-bottom: 0;
position: relative;
}
.shop-blog .shop-blog-ttl p:first-child {
margin-top: 18px;
}
.shop-blog .shop-blog-ttl p:last-child {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 20px;
padding: 0 0 0 35px;
margin-right: 300px;
}
.shop-blog .shop-blog-ttl p:last-child span {
font-family: 'Nunito', sans-serif;
font-weight: 700;
color: #fc817b;
display: block;
font-size: 14px;
line-height: 20px;
}
.shop-blog .shop-blog-ttl p:last-child:before {
position: absolute;
background: url(/images/shop_detail_img15.png) no-repeat;
content: '';
width: 48px;
height: 48px;
left: -9px;
top: -22px;
}
/*.shop-blog ul {
height: 210px;
overflow: auto;
padding-right: 10px;
}*/
.arr-link {
font-family: 'Yu Gothic Medium';
font-size: 15px;
color: #534741;
text-decoration: none;
padding: 0 5px;
position: relative;
}
.arr-link:before {
position: absolute;
background: url(/images/arrow01.png) no-repeat;
width: 6px;
height: 8px;
content: '';
left: -10px;
top: 50%;
margin-top: -4px;
}
/*.arr-link:after {
position: absolute;
background: #fdf57a;
height: 10px;
width: 100%;
top: 50%;
left: 0;
z-index: -1;
content: '';
}*/
.arr-link:hover {
opacity: 0.8;
color: #534741;
}
/*.shop-blog ul li {
display: table;
width: 100%;
border-bottom: #e5dacf 1px solid;
padding: 7px 0 5px;
}*/
/*.shop-blog ul li:last-child {
border-bottom: none;
padding-bottom: 0;
}*/
/*.shop-blog ul li span {
display: table-cell;
font-size: 13px;
}*/
/*.shop-blog ul li span:first-child {
color: #998675;
width: 93px;
}
.shop-blog ul li span:last-child a {
color: #534741;
text-decoration: none;
}
.shop-blog ul li span:last-child a:hover {
text-decoration: underline;
}*/
.shop-blog.sale {
position: relative;
padding-bottom: 10px;
}
.shop-blog.sale:before {
position: absolute;
background: url(/images/shop_detail_img13.png) no-repeat;
background-size: 69px 50px;
content: '';
width: 69px;
height: 50px;
left: 5px;
top: -10px;
}
.shop-blog.sale .shop-blog-ttl p:last-child:before {
display: none;
}
.sale-ttl {
font-weight: bold;
font-size: 18px;
color: #dc641e;
margin: 15px 0 7px;
}
.sale-txt-right {
text-align: right;
font-size: 13px;
margin-bottom: 0;
}
.babyarea p.pets-view-more {
margin: 0;
text-align: center;
position: absolute;
width: 140px;
top: 8px;
right: 17px;
}
.babyarea .pets-view-more a {
display: inline-block;
width: 100%;
text-decoration: none;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
background: #f5a868;
border-radius: 100px;
padding: 5px 0 1px;
border-bottom: 5px solid #dc975d;
}
.babyarea .rare-leftbox {
width: 68%;
float: left;
}
.babyarea .rare-img-list {
width: 32%;
float: right;
}
.babyarea .pets-ctn-l {
width: 174px;
float: left;
margin: 0 9px 0 0;
}
.baby-list li {
width: 31%;
}
.baby-list li img {
border-radius: 10px;
}
.baby-date span {
display: inline-block;
font-weight: bold;
margin-right: 20px;
}
.txt-red {
color: #FF0004;
}
.txt-red-u {
color: #ff0004;
text-decoration: underline;
}
.txt-blue {
color: #64c9e1;
}
.txt-pink {
color: #f5b2b2;
}
.txt-orange {
color: #f5a868;
}
.pet-list-show {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.pet-list-show li {
width: 32%;
margin-right: 2%;
border: #eee8e0 1px solid;
border-radius: 10px;
padding: 20px 20px 15px;
box-sizing: border-box;
margin-bottom: 20px;
text-align: center;
}
.pet-list-show li:nth-child(3n+3) {
margin-right: 0;
}
.pet-list-show li p:first-child {
background: #82bdff;
border-radius: 5px;
font-weight: bold;
font-size: 12px;
color: #fff;
line-height: 21px;
}
.pet-list-show li p:first-child a {
display: block;
text-decoration: none;
padding: 3px 22px 0px;
color: #fff;
}
.pet-list-show li p:first-child a:hover {
opacity: .8;
}
.pet-list-show li p:nth-child(2), .pet-list-show li p:nth-child(3), .pet-list-show li p:nth-child(4), .pet-list-show li p:nth-child(5) {
margin-bottom: 0;
}
.pet-list-show li img {
border-radius: 5px;
}
.kounyu-tel {
display: table;
margin: 0 auto 10px;
}
.kounyu-tel span {
font-weight: bold;
display: table-cell;
}
.kounyu-tel span:last-child {
color: #fc817b;
font-size: 40px;
padding-left: 20px;
vertical-align: middle;
}
.news-ttl {
background: url(/images/shop_detail_img12.png) left bottom repeat-x;
padding-bottom: 15px;
margin-bottom: 20px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.news-ttl li:first-child {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 20px;
padding-right: 20px;
}
.news-ttl li:last-child {
color: #64c9e1;
font-size: 12px;
white-space: nowrap;
}
.contact-bnr {
border: #eee8e0 1px solid;
border-radius: 10px;
box-shadow: 4px 4px #f2f2f2;
padding: 38px 0 35px 150px;
box-sizing: border-box;
width: 450px;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 20px;
text-decoration: none;
color: #534741;
background: url(/images/contact_img01.png) right -23px bottom -25px no-repeat;
display: inline-block;
text-align: left;
position: relative;
}
.contact-bnr:hover {
opacity: .8;
color: #534741;
}
.contact-bnr:before {
position: absolute;
background: url(/images/contact_img02.png) center bottom no-repeat;
width: 121px;
height: 110px;
content: '';
left: 5px;
bottom: 0;
}
.contact-bnr.bnr2:before {
background: url(/images/contact_img03.png) center bottom no-repeat;
}
.contact-bnr.bnr3:before {
background: url(/images/contact_img04.png) center bottom no-repeat;
left: 10px;
}
.under a.f-btn, .under input[type=submit].f-btn {
color: #fff;
font-weight: bold;
text-align: center;
padding: 15px 15px 14px;
text-decoration: none;
position: relative;
display: inline-block;
width: 300px;
background: #82bdff;
box-shadow: 1px 4px #66a7ef;
border-radius: 50px;
border: none;
cursor: pointer;
line-height: 1.4em;
box-sizing: border-box;
}
.under a.f-btn.pink {
background: #fc817b;
box-shadow: 1px 4px #eb6963;
}
.f-btn:hover {
opacity: .8;
}
.fmail-btn {
text-align: center;
}
.fmail-btn li {
display: inline-block;
padding: 0 15px;
margin-bottom: 20px;
}
.info-detail .fmail-btn li a.f-btn {
padding: 6px 15px 3px 15px;
min-width: 100px;
line-height: 22px;
}
.info-detail .fmail-btn li a.f-btn:after {
display: none;
}
/* Start fmail */
#fmail .size_1 input[type="text"], #fmail .size_1 select, #fmail .size_1 textarea {
width: 50px;
height: auto;
}
#fmail .size_2 input[type="text"], #fmail .size_2 select, #fmail .size_2 textarea {
width: 150px;
height: auto;
}
#fmail .size_25 input[type="text"], #fmail .size_25 select, #fmail .size_25 textarea {
width: 100px;
height: auto;
}
#fmail .size_3 input[type="text"], #fmail .size_3 select, #fmail .size_3 textarea {
width: 150px;
height: auto;
}
#fmail .size_4 input[type="text"], #fmail .size_4 select, #fmail .size_4 textarea {
width: 200px;
height: auto;
}
#fmail .size_5 input[type="text"], #fmail .size_5 select, #fmail .size_5 textarea {
width: 250px;
height: auto;
}
#fmail .size_6 input[type="text"], #fmail .size_6 select, #fmail .size_6 textarea {
width: 300px;
height: auto;
}
#fmail .size_7 input[type="text"], #fmail .size_7 select, #fmail .size_7 textarea {
width: 350px;
height: auto;
}
#fmail .w100 {
width: 100%;
}
#fmail li {
display: block;
float: left;
margin-right: 13px;
margin-bottom: 3px;
}
#fmail td li span.nw {
display: block;
padding-top: 10px;
}
#fmail textarea {
height: 190px;
width: 100%;
}
/* End fmail */
.imp-where {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
}
.imp-where1 li, .imp-where2 li {
width: 20%;
}
#fmail .imp-where2 li:last-child {
width: 70%;
margin-right: 0;
}
.nw {
white-space: nowrap;
}
.estate-col2 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
}
.estate-col2 dl {
width: 48%;
}
.faq dl {
margin-bottom: 30px;
}
.faq dl:last-child {
margin-bottom: 0;
}
.faq dl dt {
font-family: 'Yu Gothic bold';
font-weight: bold;
margin-bottom: 20px;
line-height: 1.3em;
font-size: 16px;
border-bottom: #ccc 2px dotted;
padding-bottom: 11px;
padding-right: 50px;
position: relative;
cursor: pointer;
}
.faq dl dt:after, .faq dl dt:before {
position: absolute;
width: 20px;
height: 2px;
content: '';
background: #4f81bd;
right: 10px;
top: 30%;
}
.faq dl dt:before {
transform: rotate(90deg);
}
.faq dl dt.change:before {
display: none;
}
.faq dl dt:hover {
opacity: .8;
}
.faq dl dd {
display: none;
}
.trim-tbl td {
position: static;
cursor: pointer;
}
/*.trim-tbl td.bg01:after, .trim-tbl td.bg01:before {
position: absolute;
width: 20px;
height: 2px;
content: '';
background: #4f81bd;
right: 10px;
top: 25px;
}
.trim-tbl td.bg02:after, .trim-tbl td.bg02:before {
position: absolute;
width: 20px;
height: 2px;
content: '';
background: #4f81bd;
right: 10px;
top: 25px;
}
.trim-tbl td:before {
transform: rotate(90deg);
}*/
.trim-tbl td.change:before {
display: none;
}
.trim-tbl td:hover {
opacity: .8;
}
.trim-tbl td p {
display: none;
margin: 0;
}
.trim-tbl th.bg01trimfirst, .trim-tbl td.bg01trimfirst {
background-color: #e3f2f7;
width: 690px;
}
.trim-tbl th.bg01, .trim-tbl td.bg01 {
background: url(/images/trim_plus.png) no-repeat right 2% center #e3f2f7;
width: 690px;
}
.trim-tbl th.bg01, .trim-tbl td.bg01.change {
background: url(/images/trim_minus.png) no-repeat right 2% center #e3f2f7;
width: 690px;
}
.trim-tbl th.bg02trimfirst, .trim-tbl td.bg02trimfirst {
background-color: #fbf4f4;
width: 690px;
}
.trim-tbl th.bg02, .trim-tbl td.bg02 {
background: url(/images/trim_plus.png) no-repeat right 2% center #fbf4f4;
width: 690px;
}
.trim-tbl th.bg02, .trim-tbl td.bg02.change {
background: url(/images/trim_minus.png) no-repeat right 2% center #fbf4f4;
width: 690px;
}
.csr-ttl {
border-bottom: #cbb7a0 2px solid;
border-top: #cbb7a0 2px solid;
padding: 13px 20px 10px;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 18px;
display: table;
margin: 0 auto 20px;
text-align: center;
}
.csr-list {
text-align: center;
margin-bottom: 10px;
}
.csr-list li {
display: inline-block;
margin: 20px 5px;
}
.csr-list li img {
width: 80%;
/*height: 185px;*/
}
.privacy-ttl {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 18px;
color: #64c9e1;
margin-bottom: 10px;
}
.privacy ol li {
list-style-type: decimal;
margin-left: 17px;
}
.info-detail h3.sale {
padding-left: 80px;
}
.info-detail h4 span:first-child {
color: #fc817b;
}
.info-detail h4 span:last-child {
color: #f5a868;
}
.info-detail h3.sale:before {
position: absolute;
background: url(/images/info_detail_img02.jpg) no-repeat;
background-size: 70px 51px;
top: 0;
left: 0;
width: 70px;
height: 51px;
content: '';
}
.info-detail table th {
text-align: center;
}
.info-detail table td ul {
text-align: center;
}
.info-detail table td ul li {
display: inline-block;
padding: 0 4%;
width: 40%;
text-align: right;
}
.info-detail table td ul li:last-child {
text-align: left;
}
.kaitori-topimg img {
border-bottom: solid 1px #ded3b9;
}
.kaitori-btn {
text-align: center;
}
.kaitori-btn li {
display: inline-block;
width: 42%;
padding: 0 2% 0 0;
box-sizing: border-box;
vertical-align: top;
}
.kaitori-btn li:last-child {
background: url(/images/contents_kaitori_img07.png) left center no-repeat;
padding: 0 0 0 3%;
width: 52%;
}
.kaitori-btn li:last-child p {
margin-bottom: 0;
}
.kaitori-list {
background: url(/images/contents_kaitori_img08.gif);
padding: 30px 20px;
box-sizing: border-box;
margin-bottom: 30px;
}
.kaitori-list ul {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-evenly;
flex-wrap: wrap;
}
.kaitori-list ul li {
width: 31%;
margin-bottom: 25px;
}
.img768, .img640 {
display: none;
}
.kaitori-txtbox {
background: url(/images/contents_kaitori_img15.gif);
padding: 10px;
margin-bottom: 30px;
}
.kaitori-txtbox p {
background: rgba(255, 255, 255, 0.5);
padding: 1em;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 17px;
margin-bottom: 0;
text-align: center;
}
.family, .family .child ul.child-list {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
}
.family .parent {
width: 25%;
background: #fff;
border-radius: 10px;
vertical-align: top;
padding: 10px;
}
.family .child {
width: 70%;
vertical-align: top;
}
.family .parent dl:first-child {
background: url(/images/under_h3_bg.png) left bottom repeat-x;
padding-bottom: 25px;
margin-bottom: 30px;
}
.family .parent dl dt {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 17px;
text-align: center;
margin-bottom: 10px;
}
.family .parent ul li {
display: table;
width: 100%;
}
.family .parent ul li span {
display: table-cell;
font-size: 13px;
}
.family .parent ul li span:first-child {
width: 40%;
position: relative;
padding-left: 12px;
}
.family .parent ul li span:first-child:before {
position: absolute;
width: 6px;
height: 6px;
content: '';
left: 0;
top: 11px;
background: #64c9e1;
border-radius: 50%;
}
.family .parent dd p {
text-align: center;
}
.family .parent dd p img {
border-radius: 5px;
}
.family .child > p {
background: #fc817b;
border-radius: 5px;
padding: 7px 15px;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 17px;
color: #fff;
}
.family .child ul.child-list {
margin-bottom: 30px;
}
.family .child ul.child-list li {
width: 32%;
text-align: center;
line-height: 20px;
margin-bottom: 10px;
font-size: 13px;
}
.family .child ul.child-list li img {
border-radius: 5px;
}
.family .child .child-info {
display: table;
width: 100%;
background: url(/images/info_line.png) left bottom repeat-x;
margin-bottom: 30px;
padding-bottom: 25px;
position: relative;
}
.family .child .child-info.child-info-first {
padding-top: 25px;
}
.family .child .child-info.child-info-first:before {
position: absolute;
width: 100%;
height: 1px;
content: '';
background: url(/images/info_line.png) left bottom repeat-x;
top: 0;
left: 0;
}
.family .child .child-info dt, .family .child .child-info dd {
display: table-cell;
}
.family .child .child-info dt {
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 17px;
vertical-align: middle;
width: 20%;
text-align: center;
}
.family .child .child-info dd {
width: 80%;
}
/* Start Japan map */
.japan-map iframe {
border: 1px solid #666;
}
#japan-map-container {
overflow: hidden;
position: relative;
display: fixed;
z-index: 100;
}
#japan-map-container > canvas {
position: relative;
top: 0px;
left: 0px;
z-index: 101;
}
#japan-map-back-btn {
position: absolute;
top: 10px;
left: 10px;
z-index: 100000;
display: none;
}
/* End Japan map */
.shop-info-simple > dl {
margin-bottom: 40px;
}
.shop-info-simple > dl:last-child {
margin-bottom: 0;
}
.shop-info-simple > dl > dt {
background: url(/images/shop_ind_img01.png) left top no-repeat;
padding: 5px 0 4px 85px;
background-size: auto 51px;
margin-bottom: 30px;
}
.shop-info-simple dl dd.shop-img {
float: left;
width: 33%;
}
.shop-info-simple dl dd.shop-img > p img {
border-radius: 10px;
margin-bottom: 0;
max-height: 180px;
width: auto;
}
.shop-info-simple dl dd.shop-img > ul {
text-align: center;
}
.shop-info-simple dl dd.shop-img > ul li {
display: inline-block;
padding: 0 2px;
}
.shop-info-simple dl dd.shop-img > ul li img {
border: #E2F1FA 1px solid;
}
.shop-info-simple dl dd.shop-i {
float: right;
width: 62%;
}
.shop-info-simple .shop-i .shop-info dl dt {
width: 85px;
}
.under .flex-box {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.under .flex-box.flex-03 li {
width: 32%;
margin-right: 2%;
}
.under .flex-box.flex-03 li:nth-child(3n+3) {
margin-right: 0;
}
.under .flex-box.flex-03 li img {
border-radius: 10px;
}
.under.search #content {
width: 1080px;
margin: 0 0 60px;
float: none;
}
.sdisplay {
display: block;
}
#navi .sdisplay {
margin-bottom: 30px;
}
.under .search-detail, .under.search .under .search-detail {
width: 760px;
padding: 10px 0 0;
margin: 0 auto;
}
.under.search .search-detail, .under #navi .search-detail {
width: 100%;
}
.search-detail.sindex {
width: 100%;
margin: 0 0 30px;
}
.under .search-tab {
padding: 0 30px;
height: 48px;
padding-top: 10px;
}
.under #navi .search-tab {
padding: 0 15px;
height: 44px;
}
.under .search-tab li {
float: left;
background-color: #FFF;
background-image: url(/images/search_bg01_off.png);
background-position: 7px center;
background-repeat: no-repeat;
border-radius: 10px 10px 0 0;
font-size: 20px;
line-height: 0;
color: #a56437;
font-family: 'Yu Gothic bold';
font-weight: bold;
letter-spacing: 0.4px;
padding: 24px 50px;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
margin-top: 0;
border: 1px solid #ccb9a2;
}
.under .search-tab li.active {
margin-top: -10px;
background-color: #a56437;
color: #FFF;
background-image: url(/images/search_bg01.png);
}
.under .search-tab li.tab-cat {
/*background-color: #FC817B;*/
margin-left: 20px;
}
.under #navi .search-tab li {
background-position: 5% center;
background-size: 15% auto;
font-size: 14px;
padding: 22px 3% 22px 12%;
width: 48%;
box-sizing: border-box;
}
.under #navi .search-tab li.tab-cat {
margin-left: 2%;
}
.under.search .search-box {
padding: 30px 30px 40px;
}
.under .search-box {
border-radius: 10px;
position: relative;
z-index: 0;
padding: 10px 30px 30px;
display: none;
margin-top: -10px;
}
.under #search-dog.search-box, .under #search-cat.search-box {
padding: 20px;
}
.under.search.thought .under .search-box {
padding: 10px 30px 1px;
}
.under.search.thought .search-box {
padding: 20px 30px 1px;
}
.under .search-box.active {
display: block;
}
.under .search-box:before {
content: '';
position: absolute;
border-radius: 10px;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-sizing: border-box;
border: 1px solid #EEE8E0;
z-index: -1;
background: #fff;
}
.under .search-box:after {
content: '';
position: absolute;
border-radius: 10px;
width: 100%;
height: 100%;
top: 3px;
left: 3px;
box-sizing: border-box;
z-index: -2;
background: rgba(0, 0, 0, 0.05);
}
.search-box01 {
position: relative;
border-bottom: 1px dashed #ccb9a2;
padding: 0 0 15px;
margin: 0 0 5px;
}
.search .search-box01 {
margin: 0 0 20px;
}
.search-box01.no-border {
border-bottom: none;
}
.search-box02 {
margin: 0 0 30px;
}
.searchbtn a:hover {
opacity: 0.7;
}
.under.search .search-items {
width: 327px;
}
.under .search-items, .under.search .under .search-items {
width: 220px;
}
.under.search .search-items.si02 {
left: 347px;
}
.under .search-items.si02, .under.search .under .search-items.si02 {
position: absolute;
left: 240px;
top: 0;
}
.under.search .search-items.si03 {
left: 694px;
}
.under .search-items.si03, .under.search .under .search-items.si03 {
position: absolute;
left: 480px;
top: 0;
}
.under .search-items dt {
color: #534741;
font-size: 14px;
font-weight: bold;
background: url(/images/search_bg02.png) left center no-repeat;
background-size: 20px auto;
padding: 7px 0 5px 30px;
margin: 0 0 5px;
}
.under .search-box-cat .search-items dt {
background: url(/images/search_bg03.png) left center no-repeat;
background-size: 20px auto;
}
.under.search .search-items dt {
font-size: 16px;
background: url(/images/search_bg02.png) left center no-repeat;
background-size: 30 auto;
padding: 7px 0 5px 40px;
}
.under #search-cat .search-items dt {
background: url(/images/search_bg03.png) left center no-repeat;
background-size: 20px auto;
}
.under.search #search-cat .search-items dt {
background: url(/images/search_bg03.png) left center no-repeat;
background-size: 30 auto;
}
.under.search #search-cat .search-item01 dt {
background: url(/images/search_bg03.png) left center no-repeat;
}
.under.search #search-cat .search-b02-l {
width: 900px;
float: left;
box-sizing: border-box;
margin-right: 20px;
padding: 15px 15px 30px;
border: 2px solid #fc817b;
border-radius: 10px;
margin-bottom: 10px;
}
.under .search-items dt span {
display: inline-block;
line-height: 0;
vertical-align: middle;
margin-left: 10px;
}
.under select {
width: 100%;
box-sizing: border-box;
color: #534741;
font-size: 12px;
font-weight: bold;
border: none;
background-color: #f8f3e6;
border-radius: 5px;
padding: 10px 25px 10px 10px;
position: relative;
z-index: 0;
border-top: 2px solid #ebe7da;
border-right: 2px solid #ebe7da;
background-image: linear-gradient(45deg, transparent 50%, #fc817b 50%), linear-gradient(135deg, #fc817b 50%, transparent 50%);
background-position: calc(100% - 15px) calc(1em + 2px), calc(100% - 10px) calc(1em + 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
.under select::-ms-expand {
display: none;
}
.under.search select {
font-size: 15px;
}
.under select:focus {
outline: none;
}
.under input[type="text"], .under input[type="email"], .under input[type="number"], .under input[type="tel"], .under #fmail textarea {
color: #534741;
font-size: 12px;
font-weight: bold;
border: none;
background-color: #f8f3e6;
border-radius: 5px;
padding: 10px;
position: relative;
z-index: 0;
border-top: 2px solid #ebe7da;
border-right: 2px solid #ebe7da;
margin-bottom: 1px;
box-sizing: border-box;
}
.under input[type="text"] {
width: 100%;
}
.under input[type="email"] {
margin-bottom: 5px;
width: 100%;
}
.mwform-zip-field input[type="number"]:first-child {
margin-left: 5px;
}
.mwform-zip-field input[type="number"] {
width: 100px;
}
.agree-policy {
background-color: #2080be;
color: #ffffff;
text-align: center;
border-radius: 8px;
padding: 0.8rem;
}
form .btn-ac01, form .btn-ac02, form .btn-ac03 {
padding: 3px 15px;
background-color: #efefef;
font-size: 11px;
box-sizing: border-box;
margin-left: 5px;
border: 1px solid #dfdfdf;
border-radius: 4px;
}
.under input.inline {
width: auto;
max-width: 80%;
padding: 5px 10px;
}
.under input[type="text"].ct-d-c-spc {
font-size: 18px;
color: #ff0000;
}
.under.search input[type="text"] {
font-size: 15px;
}
.under #side-search-dog select {
background-color: #e2f0ff;
border-top: 2px solid #b3d6ff;
border-right: 2px solid #b3d6ff;
background-image: linear-gradient(45deg, transparent 50%, #82bdff 50%), linear-gradient(135deg, #82bdff 50%, transparent 50%);
}
.under #side-search-dog input[type="text"] {
background-color: #e2f0ff;
border-top: 2px solid #b5d7ff;
border-right: 2px solid #b3d6ff;
}
.under #search-dog select {
background-color: #e2f0ff;
border-top: 2px solid #b5d7ff;
border-right: 2px solid #b7d8ff;
background-image: linear-gradient(45deg, transparent 50%, #82bdff 50%), linear-gradient(135deg, #82bdff 50%, transparent 50%);
}
.under #search-dog input[type="text"] {
background-color: #e2f0ff;
border-top: 2px solid #b5d7ff;
border-right: 2px solid #b5d7ff;
}
.under #side-search-cat select {
background-color: #ffefee;
border-top: 2px solid #ffc1be;
border-right: 2px solid #ffc1be;
background-image: linear-gradient(45deg, transparent 50%, #fc817b 50%), linear-gradient(135deg, #fc817b 50%, transparent 50%);
}
.under #side-search-cat input[type="text"] {
background-color: #ffefee;
border-top: 2px solid #ffc1be;
border-right: 2px solid #ffc1be;
}
.under #search-cat select {
background-color: #ffefee;
border-top: 2px solid #ffc1be;
border-right: 2px solid #ffc1be;
background-image: linear-gradient(45deg, transparent 50%, #fc817b 50%), linear-gradient(135deg, #fc817b 50%, transparent 50%);
}
.under #search-cat input[type="text"] {
color: #534741;
background-color: #ffefee;
border-top: 2px solid #ffc1be;
border-right: 2px solid #ffc1be;
}
.sizedog-checkbox li, .sizecat-checkbox li {
width: 24%;
margin: 0 1.3% 3px 0;
float: left;
position: relative;
box-sizing: border-box;
line-height: 1.4em;
}
.sizedog-checkbox li:nth-child(4n), .sizecat-checkbox li:nth-child(4n) {
margin: 0 0 5px;
}
.sizedog-checkbox li:nth-child(4n+1), .sizecat-checkbox li:nth-child(4n+1) {
clear: left;
}
/*.under input[type="checkbox"] {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.under #fmail input[type="checkbox"] {
position: static;
height: auto;
width: auto;
}
.under input[type=checkbox]:checked + label {
background-position: 0 -15px;
}
.under input[type=checkbox] + label {
padding-left: 20px;
height: 15px;
display: inline-block;
line-height: 15px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 12px;
vertical-align: middle;
cursor: pointer;
background-image: url(/images/lite-orange-check.png);
}*/
.sizedog-checkbox, .sizecat-checkbox {
display: none;
padding: 15px 2px 0;
overflow: hidden;
}
.sizedog-checkbox.active, .sizecat-checkbox.active {
display: block;
}
.under .searchshop-cb {
display: none;
}
.under .searchshop-cb.active {
display: block;
}
.under .searchshop-cb dl {
padding: 15px 0 0;
display: inline-block;
vertical-align: top;
width: 24%;
}
.under .searchshop-cb dt {
color: #f5a868;
font-size: 15px;
font-weight: bold;
margin: 0 0 5px;
}
.under .searchshop-cb ul {
overflow: hidden;
}
.under .searchshop-cb ul li {
width: 46%;
margin: 0 2% 10px 0;
float: left;
position: relative;
box-sizing: border-box;
}
.under .searchshop-cb ul li:nth-child(2n) {
margin: 0 0 10px;
}
.under .searchshop-cb ul li:nth-child(2n+1) {
clear: left;
}
.under .search-radio li {
display: inline-block;
vertical-align: top;
}
.under .search-radio li {
margin: 0 5px 0 0;
}
.under #navi .search-radio li {
margin-right: 2px;
}
.under #navi .search-radio li:last-child {
margin: 0;
}
.under .search-radio input[type=radio] {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.under .search-radio input[type=radio] + label {
padding-left: 28px;
height: 24px;
display: inline-block;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 12px;
color: #534741;
font-weight: bold;
vertical-align: middle;
cursor: pointer;
background-image: url(/images/search-radio.png);
}
.under.search .search-radio input[type=radio] + label {
font-size: 15px;
}
.under .search-radio input[type=radio]:checked + label {
background-position: 0 -24px;
}
.under .s-price {
position: relative;
}
.under .s-price:before {
content: '';
position: absolute;
width: 5px;
height: 1px;
left: calc(50% - 2.5px);
top: 50%;
background: #534741;
}
.under.search .s-price li {
width: 153px;
}
.under .s-price li, .under.search .under .s-price li {
width: 100px;
display: inline-block;
vertical-align: top;
}
.under .s-price li:first-child {
margin-right: 15px;
}
.under .search-b02-l {
width: 900px;
float: left;
box-sizing: border-box;
margin-right: 20px;
padding: 15px 15px 30px;
border: 2px solid #cde5ff;
border-radius: 10px;
margin-bottom: 10px;
}
.under #search-cat .search-b02-l {
border: 2px solid #fc817b;
margin-top: 15px;
}
.under .featurecont .search-b02-l {
width: 100%;
margin-top: 15px;
}
.under .search-b02-l.fullw {
width: 100%;
margin-right: 0;
margin-bottom: 10px;
}
.under .search-b02-r {
width: 500px;
float: left;
box-sizing: border-box;
}
.under .search-item01 {
padding: 15px 0 0;
}
.under .search-item01 dt {
font-size: 16px;
font-weight: bold;
color: #534741;
margin: 0 0 10px;
background: url(/images/search_bg02.png) left center no-repeat;
padding: 0 0 0 40px;
}
.under #search-cat .search-item01 dt {
background: url(/images/search_bg03.png) left center no-repeat;
}
.under .s-parent {
position: relative;
}
.under .s-parent:before {
content: 'x';
position: absolute;
font-size: 15px;
font-weight: bold;
color: #534741;
line-height: 0;
top: 50%;
left: calc(50% - 7px);
}
.under .s-parent.s-parent-pipe:before {
content: '|';
}
.under .s-parent li {
width: 416px;
display: inline-block;
vertical-align: top;
}
.under .featurecont .s-parent li {
width: 47.5%;
}
.under .s-parent li:first-child {
margin-right: 25px;
}
.under .search-b02r-top {
padding: 15px;
border: 2px solid #cde5ff;
border-radius: 10px;
margin: 0 0 20px;
}
.under .idx-search-submit {
text-align: center;
}
.under .idx-search-submit a {
font-size: 18px;
width: 320px;
color: #fff;
}
/* Start gazou */
#index .gazou-below {
width: 680px;
display: none;
}
#index .gazou-below-left {
float: left;
width: 47%;
}
#index .gazou-alert-ttl {
font-size: 18px;
font-weight: bold;
color: #ed5c1b;
}
#index .gazou-alert {
margin-right: 165px;
padding: 15px;
background: url(/images/frame01_bg.png);
border-radius: 8px;
}
#index .gazou-alert p {
margin: 0;
}
#index .gazou-alert-image {
float: right;
width: 150px;
}
.under .search-radio-gazou li {
display: inline-block;
vertical-align: top;
}
.under .search-radio-gazou li {
margin: 0 5px 0 0;
}
.under #navi .search-radio-gazou li {
margin-right: 2px;
}
.under #navi .search-radio-gazou li:last-child {
margin: 0;
}
.under .search-radio-gazou input[type=radio] {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.under .search-radio-gazou input[type=radio] + label {
padding-left: 34px;
height: 24px;
display: inline-block;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 18px;
color: #534741;
font-weight: bold;
vertical-align: middle;
cursor: pointer;
background-image: url(/images/search-radio.png);
}
.under.search .search-radio-gazou input[type=radio] + label {
font-size: 15px;
}
.under .search-radio-gazou input[type=radio]:checked + label {
background-position: 0 -24px;
}
.search-bnr {
width: 680px;
box-sizing: border-box;
margin: 0 auto;
position: relative;
padding: 18px 15px 21px;
z-index: 0;
cursor: pointer;
}
.search-bnr:hover {
opacity: 0.7;
}
.search-bnr:before {
content: '';
position: absolute;
border-radius: 10px;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-sizing: border-box;
border: 1px solid #EEE8E0;
z-index: -1;
background: #fff;
}
.search-bnr:after {
content: '';
position: absolute;
border-radius: 10px;
width: 100%;
height: 100%;
top: 3px;
left: 3px;
box-sizing: border-box;
z-index: -2;
background: rgba(0, 0, 0, 0.05);
}
.search-bnr-img {
position: absolute;
width: 152px;
right: 27px;
margin: 0;
top: calc(50% - 61px);
}
.search-bnr .search-ttl01 {
color: #534741;
font-size: 16px;
font-family: 'Yu Gothic bold';
font-weight: bold;
letter-spacing: 0.4px;
line-height: 1.6em;
margin: 0;
}
.search-bnr .search-ttl02 {
display: inline-block;
color: #534741;
font-family: 'Yu Gothic bold';
font-weight: 900;
font-size: 34px;
position: relative;
z-index: 0;
margin: 0 0 15px;
}
.search-bnr .search-ttl02 span {
color: #7AC943;
}
.search-bnr .search-ttl02:after {
content: '';
position: absolute;
width: 100%;
height: 9px;
background: #F9F18B;
left: 0;
bottom: -3px;
z-index: -1;
}
.search-bnr .idx-btn01 a {
width: 270px;
padding: 4px 0;
color: #fff;
}
.search-bnr .idx-btn01 a:hover {
opacity: 1;
}
.search-bnr .idx-btn01 a:before {
background: #f5a868 url(/images/idx_arrow03.png) 15px center no-repeat;
background-size: 5px auto;
}
.search-group-bnr {
background: url(/images/box08_bg.jpg) repeat;
padding: 30px 0;
}
.search-group-bnr ul {
width: 1080px;
overflow: hidden;
margin: 0 auto 20px;
display: flex;
justify-content: center;
}
.search-group-bnr ul li {
float: left;
width: 350px;
margin: 0 15px 0 0;
line-height: 0;
}
.search-group-bnr ul li:last-child {
margin: 0;
}
.search-group-bnr ul li a:hover img {
opacity: 0.7;
}
.search-pager-top {
padding: 15px 0 10px;
border-top: 1px dashed #ccb9a2;
border-bottom: 1px dashed #ccb9a2;
position: relative;
margin: 0 0 25px;
}
.search-pager-top.bottom {
margin: 0 0 50px;
}
.search-pager-top .total-pets {
position: absolute;
right: 0;
top: 15px;
color: #534741;
margin: 0;
letter-spacing: 0.4px;
}
.search-pager-top .total-pets span {
font-weight: bold;
color: #f5a868;
font-size: 20px;
display: inline-block;
margin: 0 3px;
vertical-align: middle;
}
.search-date {
margin: 0 0 5px;
color: #534741;
letter-spacing: 0.4px;
}
.search-option {
margin: 0 0 20px;
}
.search-option > li, .search-option > li.pc {
display: inline-block;
vertical-align: middle;
margin: 0 15px 0 0;
}
.search-option > li.search-method {
width: 200px;
}
.search-show li {
display: inline-block;
vertical-align: middle;
margin: 0 15px 0 0;
}
.search-show li a {
text-decoration: none;
color: #534741;
font-size: 15px;
font-weight: bold;
letter-spacing: 0.2px;
position: relative;
z-index: 0;
}
.search-show li a:hover, .search-show li a.active {
color: #f5a868;
}
.search-show li a:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
background: #fdf57a;
left: 0;
bottom: 5px;
z-index: -1;
}
.search-show li a:hover:after, .search-show li a.active:after {
display: none;
}
.search-results-pager {
width: 100%;
display: table;
}
.search-results-pager dt {
display: table-cell;
vertical-align: top;
width: 90px;
padding: 3px 0 0;
}
.search-results-pager dd {
display: table-cell;
vertical-align: top;
}
.search-total-results {
display: inline-block;
vertical-align: middle;
}
.search-total-results li {
display: inline-block;
vertical-align: middle;
margin: 0 15px 0 0;
}
.search-total-results li:first-child {
color: #534741;
letter-spacing: 0.4px;
}
.search-total-results li:first-child span {
font-weight: bold;
color: #f5a868;
font-size: 20px;
display: inline-block;
margin: 0 3px;
vertical-align: middle;
}
.search-total-results li a {
text-decoration: none;
color: #534741;
}
.search-total-results:first-child li a:before {
transform: rotate(180deg);
}
.pager {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.pager li {
display: inline-block;
vertical-align: middle;
margin: 0 5px 0 0;
}
.pager li a {
text-decoration: none;
color: #534741;
font-size: 14px;
letter-spacing: 0.2px;
position: relative;
z-index: 0;
display: block;
border: 1px solid #64c9e1;
border-radius: 3px;
padding: 0 7px;
line-height: 1.6em;
}
.pager li a:hover, .pager li a.active {
color: #fff;
background: #64c9e1;
}
.search-note {
padding: 20px;
background: #e9f3f9;
border-radius: 10px;
margin: 0 0 20px;
}
.search-note dt {
font-size: 16px;
color: #534741;
font-weight: bold;
letter-spacing: 0.4px;
margin: 0 0 10px;
}
.search-note dd {
color: #534741;
letter-spacing: 0.4px;
line-height: 1.8em;
}
.search-list {
margin: 0 0 30px;
}
.search-list > li {
width: 532px;
box-sizing: border-box;
float: left;
margin: 0 16px 27px 0;
background: rgba(0, 0, 0, 0.05);
position: relative;
z-index: 0;
border-radius: 10px;
padding: 10px 20px 20px;
}
.search-list.rare-list > li {
width: 100%;
}
.search-list.rare-list.grid-view > li {
width: 360px;
margin-right: 30px;
}
.search-list.rare-list.grid-view > li:nth-child(2n) {
margin-right: 0;
}
.search-list > li:before {
content: '';
position: absolute;
width: calc(100% - 3px);
height: calc(100% - 3px);
box-sizing: border-box;
border-radius: 10px;
background: #fff;
border: 1px solid #e2dcd5;
z-index: -2;
top: 0;
left: 0;
}
.search-list > li:after {
content: url(/images/search_result_icon01.png);
position: absolute;
right: 26px;
top: -24px;
z-index: -1;
}
.search-list.rare-list > li:after {
right: inherit;
left: 140px;
}
.search-list.rare-list.grid-view > li:after {
right: 26px;
left: inherit;
}
.pets-name {
font-size: 18px;
color: #534741;
font-weight: bold;
background: url(/images/search_bg02.png);
background-position: left 8px;
background-repeat: no-repeat;
padding: 10px 0 10px 45px;
position: relative;
border-bottom: 1px dashed #ccb9a2;
margin: 0 0 5px;
}
.search-type-dog .pets-name {
background-image: url(/images/search_bg02.png);
}
.search-type-cat .pets-name {
background-image: url(/images/search_bg03.png);
}
/* オスメスで変わるように調整 */
.search-male .pets-name {
background-image: url(/images/search_bg04.png);
}
.search-female .pets-name {
background-image: url(/images/search_bg05.png);
}
.search-new-temp .pets-name {
border-bottom: none;
}
.pets-name .pets-no {
font-size: 14px;
font-weight: normal;
position: absolute;
right: 0;
top: 10px;
}
.search .pets-name .pets-no {
font-size: 14px;
font-weight: normal;
float: right;
position: static;
margin-right: 10px;
}
.pets-note {
font-size: 12px;
color: #534741;
margin: 0 0 10px;
}
.pets-note span {
color: #fc817b;
}
.pets-name p.titleft {
margin-bottom: 0;
float: left;
width: 75%;
}
.trim-detail .pets-name p.titleft {
width: 70%;
}
.search .trim-detail .pets-name p.titleft {
width: 100%;
}
.pets-name p.rightno {
margin-bottom: 0;
}
.pets-ctn-l {
width: 174px;
float: left;
margin: 0 18px 0 0;
}
.grid-view .pets-ctn {
position: relative;
padding-top: 250px;
}
.grid-view .pets-ctn-l {
/*display: none;*/
float: none;
width: auto;
margin: 0 0 5px;
text-align: center;
}
.grid-view .pets-ctn-l .pets-avatar {
display: none;
}
.grid-view .pets-stance_01, .grid-view .pets-stance_02, .grid-view .pets-stance_03 {
display: inline-block;
}
.grid-view .pets-ctn-r {
float: none;
width: auto;
}
.grid-view .pets-ctn img {
max-height: 300px;
}
.grid-view .show-slider {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.pets-ctn-r {
width: 300px;
float: left;
background: url(/images/search_list_bg.jpg) repeat;
border-radius: 10px;
box-sizing: border-box;
padding: 18px 10px;
position: relative;
}
.pets-ctn-r:after {
content: url(/images/pets_ctn_tape.png);
position: absolute;
top: -8px;
left: calc(50% - 45px);
}
.grid-view .pets-ctn-r:after {
display: none;
}
.pets-ctn-r dl {
width: 100%;
display: table;
border-bottom: 1px dashed #ccb9a2;
}
.rare-list .pets-ctn-r dl {
padding: 2px 0;
}
.pets-ctn-r dl dt {
display: table-cell;
vertical-align: middle;
color: #78aa22;
font-weight: bold;
font-size: 12px;
width: 150px;
line-height: 1.5em;
padding: 3px 0 2px;
}
.pets-ctn-r dl dd {
display: table-cell;
vertical-align: middle;
color: #534741;
font-size: 12px;
}
.pets-ctn-r dl dd span.shop-name {
position: relative;
font-size: 13px;
font-weight: bold;
z-index: 0;
}
.pets-ctn-r dl.pets-column2 dt {
font-size: 12px;
width: 65px;
line-height: 1.5em;
}
.pets-ctn-r dl.pets-column2 dd {
font-size: 12px;
width: 65px;
line-height: 1.5em;
}
.pets-ctn-r dl dd span a:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
background: #fcf273;
left: 0;
bottom: 2px;
z-index: -1;
}
.pets-ctn-r dl dd span a {
font-weight: bold;
position: relative;
z-index: 0;
text-decoration: none;
color: #534741;
}
.pets-ctn-r dl dd span a:hover {
opacity: 0.5;
}
.pets-ctn-r dl dd span.shop-name:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
background: #fcf273;
left: 0;
bottom: 2px;
z-index: -1;
}
.pets-ctn-r dl dd span.pets-price {
font-size: 18px;
font-weight: bold;
letter-spacing: -0.5px;
}
.info-btn{
position: absolute;
top: 15px;
right: 10px;
}
.info-btn img{
display: block;
width: 14px;
height: auto;
cursor: pointer;
}
#info-balloon{
background-color: #E9F3F9;
border-radius: 4px;
padding: 13px 18px;
font-size: 10px;
white-space: nowrap;
position: absolute;
/* transform: translate(-47.7%, -116%);/*translate(calc(-50% + 7px), calc(-100% - 20px));*/
margin: 0;
font-weight: bold;
color: #534741;
z-index: 1012;
box-shadow: 0 4px 10px rgba(0,0,0,.4);
display: none;
}
#info-balloon > i{
width: 0;
height: 0;
border-color: #E9F3F9 transparent transparent transparent;
border-width: 17px 7px 0 7px;
border-style: solid;
position: absolute;
top: calc(100% - 1px);
left: 0;
right: 0;
margin: 0 auto;
}
#info-balloon p{
margin: 0;
}
#info-cover{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1011;
background-color: transparent;
display: none;
}
.pets-avatar {
margin: 0 0 18px;
line-height: 0;
}
.pets-view-more {
margin: 0;
text-align: center;
}
.pets-stance_01, .pets-stance_02, .pets-stance_03 {
text-align: center;
padding: 2px 10px;
font-weight: bold;
width: 70px;
margin: 0 auto 5px;
border-radius: 5px;
}
.pets-stance_01 {
background: #8accce;
color: #FFF;
}
.pets-stance_02 {
background: #aec510;
color: #FFF;
}
.pets-stance_03 {
background: #fc817b;
color: #FFF;
}
.pets-come {
text-align: center;
padding: 2px 10px;
background: #ffa250;
font-weight: bold;
color: #FFF;
width: auto;
margin: 5px auto;
border-radius: 5px;
}
.rare-list .pets-view-more {
margin: 0;
text-align: center;
position: absolute;
width: 130px;
top: 24px;
right: 17px;
}
.rare-list.grid-view .pets-view-more {
margin: 15px auto 0;
position: static;
}
.rare-list.grid-view .pets-view-more.sp {
display: none;
}
.pets-view-more a {
display: inline-block;
width: 100%;
text-decoration: none;
color: #fff;
font-size: 15px;
/*font-family: 'GenShinGothic-Bold';*/
font-weight: bold;
text-align: center;
background: #f5a868;
border-radius: 100px;
padding: 7px 0 3px;
border-bottom: 5px solid #dc975d;
}
.pets-view-more a:hover {
opacity: 0.7;
}
.trim-detail {
width: 100%;
box-sizing: border-box;
margin: 0 0 75px 0;
background: rgba(0, 0, 0, 0.05);
position: relative;
z-index: 0;
border-radius: 10px;
padding: 10px 20px 30px;
}
.trim-detail:before {
content: '';
position: absolute;
width: calc(100% - 3px);
height: calc(100% - 3px);
box-sizing: border-box;
border-radius: 10px;
background: #fff;
border: 1px solid #e2dcd5;
z-index: -2;
top: 0;
left: 0;
}
.trim-detail:after {
content: url(/images/search_result_icon01.png);
position: absolute;
right: 26px;
top: -24px;
left: 0;
z-index: -1;
}
.trim-detail .pets-name {
margin: 0 0 23px;
}
.trim-ctn-l {
width: 410px;
float: left;
margin: 0 30px 0 0;
}
.trim-ctn-r {
width: calc(100% - 440px);
float: left;
position: relative;
}
.trim-ctn-r .movingbox {
position: absolute;
font-weight: bold;
z-index: 0;
top: -46px;
right: 230px;
}
.trim-ctn-r .movingbox span.moving {
position: relative;
margin-left: 10px;
}
.trim-ctn-r .movingbox span.moving:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
background: #fcf273;
left: 0px;
bottom: 2px;
z-index: -500;
}
.trim-detail .pets-avatar {
line-height: 0;
margin: 0 auto 20px;
position: relative;
width: 100%;
max-width: 410px;
}
.trim-detail .pets-avatar:before {
content: url(/images/trim_tape01.png);
position: absolute;
top: -14px;
left: -8px;
}
.trim-detail .pets-avatar:after {
content: url(/images/trim_tape02.png);
position: absolute;
top: -14px;
right: -8px;
}
.trim-thumb li {
line-height: 0;
width: 95px;
margin: 0 10px 20px 0;
float: left;
cursor: pointer;
}
.trim-thumb li:last-child {
margin: 0 0 20px;
}
.trim-thumb li:hover {
opacity: 0.5;
}
.trim-detail-inner {
width: 100%;
background: url(/images/search_list_bg.jpg) repeat;
border-radius: 10px 10px 0 0;
box-sizing: border-box;
padding: 18px 25px 21px;
position: relative;
}
.trim-detail-inner dl {
width: 100%;
display: table;
border-bottom: 1px dashed #ccb9a2;
}
.trim-detail-inner dt {
display: table-cell;
vertical-align: top;
color: #78aa22;
font-weight: bold;
font-size: 15px;
width: 160px;
line-height: 30px;
padding: 10px 0 5px;
}
.trim-detail-inner dt span {
display: block;
font-weight: normal;
color: #534741;
line-height: 18px;
font-size: 12px;
padding: 0 0 0 12px;
text-indent: -12px;
margin: -3px 0 0;
}
.trim-detail-inner dd {
display: table-cell;
vertical-align: top;
color: #534741;
font-size: 14px;
padding: 10px 0 5px;
}
.trim-detail-inner dd.trim-detail-sml {
font-size: 12px;
line-height: 24px;
}
.trim-detail-inner dd span.shop-name {
position: relative;
font-weight: bold;
z-index: 0;
}
.trim-detail-inner dd span.shop-name:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
background: #fcf273;
left: 0;
bottom: 2px;
z-index: -1;
}
.shop-name_a a {
font-weight: bold;
position: relative;
z-index: 0;
text-decoration: none;
color: #534741;
}
.shop-name_a a:hover {
opacity: 0.5;
}
.trim-detail-inner dd span.pets-price {
font-size: 22px;
font-weight: bold;
letter-spacing: -0.5px;
display: inline-block;
vertical-align: middle;
margin: 0 3px;
}
.trim-detail-inner a, a.under-line {
font-weight: bold;
position: relative;
z-index: 0;
text-decoration: none;
color: #534741;
}
.trim-detail-inner a:after, a.under-line:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
background: #fcf273;
left: 0;
bottom: 2px;
z-index: -1;
}
.trim-detail-inner a:hover, a.under-line:hover {
opacity: 0.5;
}
.trim-btn {
padding: 0 25px 30px;
background: url(/images/search_list_bg.jpg) repeat;
border-radius: 0 0 10px 10px;
}
.trim-btn li {
float: left;
margin: 0 1px 0 0;
}
.trim-btn li:last-child {
margin: 0;
}
.trim-btn li a {
display: block;
text-decoration: none;
background: #8accce;
border-radius: 100px;
color: #FFF;
text-align: center;
font-size: 15px;
/*font-family: 'GenJyuuGothic-Bold';*/
font-weight: bold;
padding: 7px 15px 3px;
border-bottom: 5px solid #7cb7b9;
}
.trim-btn li:nth-child(2) a {
background: #fca7a1;
border-bottom: 5px solid #e29691;
}
.trim-btn li:nth-child(3) a {
background: #aec510;
border-bottom: 5px solid #9cb10e;
}
.trim-btn li a span {
line-height: 0;
display: inline-block;
vertical-align: middle;
margin: -3px 8px 0 0;
}
.trim-btn li a span img {
height: 26px;
}
.trim-btn li a br {
display: none;
}
.trim-btn li a:hover {
opacity: 0.7;
}
.trim-btn02 {
padding: 0 0 30px;
border-radius: 0 0 10px 10px;
}
.trim-btn02 li {
float: left;
margin: 0 10px 0 0;
}
.trim-btn02 li:last-child {
margin: 0;
}
.trim-btn02 li a {
display: block;
text-decoration: none;
background: #8accce;
border-radius: 100px;
color: #FFF;
text-align: center;
font-size: 18px;
/*font-family: 'GenJyuuGothic-Bold';*/
font-weight: bold;
padding: 7px 68px 3px;
border-bottom: 5px solid #7cb7b9;
}
.trim-ctn-top {
margin: 0 0 24px;
}
.trim-note {
background: #fff2f2;
border-radius: 10px;
padding: 12px 12px 25px 12px;
}
.trim-note dt {
background: url(/images/trim_bg01.jpg) repeat;
font-size: 15px;
font-weight: bold;
color: #fff;
border-radius: 5px;
padding: 5px 10px;
margin: 0 0 20px;
}
.trim-note dd {
padding: 0 0 0 15px;
max-height: 112px;
overflow: auto;
line-height: 24px;
}
.trim-back-btn {
text-align: center;
margin: 0 0 90px;
}
.trim-back-btn a {
display: inline-block;
color: #fff;
/*font-family: 'GenJyuuGothic-Bold';*/
font-weight: bold;
font-size: 20px;
width: 360px;
background: #f5a868 url(/images/idx_arrow03.png) 24px center no-repeat;
border-radius: 100px;
text-decoration: none;
padding: 18px 0;
border-bottom: 5px solid #dc975d;
}
.trim-back-btn a:hover {
opacity: 0.7;
}
.trim-icon {
position: absolute;
right: 11px;
top: -42px;
}
.trim-video {
text-align: center;
margin: 0;
}
.thought-spc {
font-size: 28px;
color: #534741;
font-weight: bold;
font-family: 'Yu Gothic bold';
line-height: 1.6em;
margin: 0 0 15px;
}
.section-thought01 {
background: url(/images/thought_bg02.jpg) repeat;
border-radius: 10px;
position: relative;
z-index: 0;
padding: 60px 12px 20px;
}
.section-thought01:before {
content: url(/images/thought_bg01.jpg);
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.section-thought01:after {
content: url(/images/thought_bg03.png);
position: absolute;
top: 18px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
transform: translate(-50%, 0);
z-index: -1;
}
.thought-ttl01 {
text-align: center;
}
.thought-txt01 {
text-align: center;
color: #534741;
line-height: 2.2em;
margin: 0 0 60px;
}
.thought-bnr01 li {
float: left;
margin: 0 0 5px;
}
.thought-bnr01 li a:hover img {
opacity: 0.7;
}
.sec-thought02 {
background: url(/images/box08_bg.jpg) repeat;
padding: 30px 0;
margin: 0;
position: relative;
z-index: 0;
}
.sec-thought02:after {
content: '';
position: absolute;
width: 100%;
height: calc(38% - 5px);
background: url(/images/box08_bg01.jpg) 0 0 repeat;
left: 0;
bottom: 0;
z-index: -1;
}
.thought-ctn {
width: 1080px;
margin: 0 auto;
}
.thought-ttl02 {
font-size: 22px;
color: #534741;
font-weight: bold;
font-family: 'Yu Gothic bold';
margin: 0 0 20px;
}
.thought-bnr02.mar20 {
margin-bottom: 40px;
}
.thought-bnr02 li {
width: 500px;
float: left;
margin-right: 80px;
margin-bottom: 27px;
}
.thought-bnr02 li:nth-child(2n) {
margin-right: 0;
}
.thought-bnr02 li:nth-child(2n+1) {
clear: left;
}
.thought-bnr02 dt {
display: inline-block;
vertical-align: top;
margin: 0;
width: 258px;
}
.thought-bnr02 dt a:hover img {
opacity: 0.7;
}
.thought-bnr02 dt a:hover img.no-hover {
opacity: 1;
}
.thought-bnr02 dd {
display: inline-block;
vertical-align: top;
font-size: 13px;
color: #534741;
width: calc(100% - 263px);
padding: 8px 0 0;
}
.sec-thought03 {
padding: 30px 0 50px;
background: url(/images/box02_bg.jpg) repeat;
}
.thought-bnr03 {
text-align: center;
}
.thought-bnr03 li {
display: inline-block;
vertical-align: middle;
}
.thought-bnr03 li:first-child {
margin-right: 17px;
}
.thought-bnr03 li a img:hover {
opacity: 0.7;
}
.sec-thought04 {
padding: 30px 0 50px;
}
.thought-ttl03 {
background: url(/images/thought_icon.png) 0 center no-repeat;
padding: 20px 0 10px 130px;
color: #534741;
font-weight: bold;
font-family: 'Yu Gothic bold';
margin: 0 0 20px;
font-size: 22px;
}
.thought-r {
width: 775px;
float: right;
background: url(/images/thought_bg04.png) right bottom no-repeat;
}
.thought-txt02 {
color: #534741;
line-height: 2.2em;
margin: 0 0 30px;
}
.thought-btn a {
display: inline-block;
text-decoration: none;
color: #fff;
font-size: 18px;
font-weight: bold;
font-family: 'Yu Gothic bold';
background: #f5a868 url(/images/idx_arrow03.png) 20px center no-repeat;
width: 260px;
text-align: center;
border-radius: 100px;
padding: 10px 0;
border-bottom: 5px solid #dc975d;
}
h1.logo {
float: left;
width: 250px;
padding: 23px 0;
}
.f-search {
position: fixed;
right: 20px;
top: 38%;
width: 150px;
cursor: pointer;
z-index: 999;
margin: 0;
}
.f-search a {
outline: none;
}
.f-search:hover {
opacity: 0.8;
}
.f-search span {
display: block;
background: #1b84c7;
border-radius: 5px;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 1.8em;
font-weight: bold;
padding: 5px;
position: relative;
margin: 0 0 10px;
}
.f-search span:before {
position: absolute;
content: '';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 10px solid transparent;
border-top: 13px solid #1b84c7;
bottom: -12px;
left: 40px;
}
.about-spc {
text-align: center;
font-size: 18px;
font-weight: bold;
}
.about-spc span {
font-weight: normal;
font-size: 14px;
}
.csr-spc {
font-weight: bold;
font-size: 18px;
}
.csr-bg02 {
background: url(/images/csr_bg02.png) center center no-repeat;
}
.src-anchor {
width: 100%;
height: 500px;
position: relative;
background: url(/images/csr_bg01.png) center center no-repeat;
}
.src-anchor li {
position: absolute;
}
.src-anchor li:nth-child(1) {
top: 0;
left: calc(50% - 75px);
}
.src-anchor li:nth-child(2) {
top: 150px;
left: calc(50% - 235px);
}
.src-anchor li:nth-child(3) {
top: 150px;
right: calc(50% - 235px);
}
.src-anchor li:nth-child(4) {
top: 320px;
left: calc(50% - 175px);
}
.src-anchor li:nth-child(5) {
top: 320px;
right: calc(50% - 175px);
}
.src-anchor li a {
width: 150px;
height: 150px;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid #4bacc6;
text-decoration: none;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #4bacc6;
text-align: center;
background: #FFF;
}
.src-anchor li a:hover {
background: #4bacc6;
color: #fff;
}
.src-anchor li:nth-child(2) a {
border: 2px solid #4f81bd;
color: #4f81bd;
}
.src-anchor li:nth-child(2) a:hover {
background: #4f81bd;
color: #fff;
}
.src-anchor li:nth-child(3) a {
border: 2px solid #f79646;
color: #f79646;
}
.src-anchor li:nth-child(3) a:hover {
background: #f79646;
color: #fff;
}
.src-anchor li:nth-child(4) a {
border: 2px solid #9bbb59;
color: #9bbb59;
}
.src-anchor li:nth-child(4) a:hover {
background: #9bbb59;
color: #fff;
}
.src-anchor li:nth-child(5) a {
border: 2px solid #c00000;
color: #c00000;
}
.src-anchor li:nth-child(5) a:hover {
background: #c00000;
color: #fff;
}
.under-tbl.ouline-tbl th {
border: none;
background: #64c9e1;
vertical-align: top;
color: #fff;
}
.under-tbl.ouline-tbl td {
border: none;
vertical-align: top;
}
.under-tbl.ouline-tbl tr:nth-child(2n) td {
background: #fcfeff;
}
.under-tbl.ouline-tbl tr:nth-child(2n+1) td {
background: #f3fbff;
}
.outline-map {
display: flex;
flex-wrap: wrap;
}
.outline-map > li {
width: calc(100% / 3);
margin-bottom: 10px;
}
.outline-map li dl {
display: table;
width: 100%;
}
.outline-map dl dt {
display: table-cell;
width: 40px;
text-align: center;
vertical-align: middle;
writing-mode: horizontal-tb;
font-weight: bold;
padding: 0 12px;
box-sizing: border-box;
}
.outline-map dl dt.green-bg01 {
background: #a4d5c1;
}
.outline-map dl dt.cyan-bg {
background: #a4acd6;
}
.outline-map dl dt.pink-bg {
background: #f4b3c2;
}
.outline-map dl dt.green-bg02 {
background: #bfdeae;
}
.outline-map dl dt.orange-bg {
background: #f8c499;
}
.outline-map dl dt.puple-bg {
background: #bba1cb;
}
.outline-map dl dt.blue-bg {
background: #718cc7;
}
.outline-map dl dt.red-bg {
background: #f19c97;
}
.outline-map dl dd {
padding: 0 10px;
}
.together-list01 li {
float: left;
cursor: pointer;
}
.together-list02, .together-list03 {
float: left;
}
.together-list02 li, .together-list03 li {
cursor: pointer;
}
.together-list01 li:hover, .together-list02 li:hover, .together-list03 li:hover {
opacity: 0.7;
}
.together-list01 li.no-hover:hover, .together-list02 li.no-hover:hover, .together-list03 li.no-hover:hover {
opacity: 1;
}
.together-list .secto {
opacity: 0;
z-index: -1;
position: relative;
}
.together-spc {
text-align: center;
color: #9d6c09;
font-size: 28px;
border-bottom: 1px dashed #ddd;
padding: 0 0 5px;
margin: 0 0 25px;
font-family: 'Yu Gothic bold';
font-weight: bold;
}
.together-result {
text-align: center;
font-size: 24px;
color: #999;
font-family: 'Yu Gothic bold';
font-weight: bold;
margin-bottom: 20px;
}
.together-result span {
width: 50px;
display: inline-block;
vertical-align: middle;
margin-right: 20px;
}
.together-frame {
padding: 20px;
border: 3px solid #64c9e1;
font-size: 14px;
line-height: 1.6em;
margin: 0 0 20px;
}
#search-cat .together-frame {
border: 3px solid #fc817b;
}
/*rare*/
.rare-note {
background: url(/images/rare_bg01.jpg) 0 0 no-repeat;
background-size: cover;
margin: 0 0 45px;
padding: 0 40px 30px;
border-radius: 10px;
position: relative;
}
.rare-note dt {
position: relative;
top: -7px;
margin: 0 0 10px;
}
.rare-note dd {
color: #534741;
font-weight: bold;
}
.rare-img {
position: absolute;
bottom: 0;
right: 15px;
}
.rare-list .pets-no {
margin: 0;
}
.rare-list .pets-name {
margin: 0 0 22px;
padding: 5px 10px 3px 45px;
}
/* 20181113チャンピオンには王冠 */
.pets-name.pet-champion {
background-image: url(/images/crown.png);
}
.search-new-temp {
width: 100%;
display: flex;
align-items: flex-end;
border-bottom: 1px dashed #ccb9a2;
margin-bottom: 22px;
padding-right: 135px;
box-sizing: border-box;
}
.search-list .search-new-temp {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
border-bottom: 1px dashed #ccb9a2;
margin-bottom: 22px;
padding-right: 135px;
box-sizing: border-box;
}
.rare-list .search-list-hide-detail .search-new-temp {
padding-right: 0;
}
.rare-list.grid-view .search-new-temp {
padding-right: 0;
margin-bottom: 15px;
min-height: 80px;
}
.rare-list .search-new-temp .pets-name {
margin: 0;
}
.grid-view.rare-list .search-new-temp .pets-name {
line-height: 1.2;
background-size: 23px auto;
}
.grid-view.rare-list .search-new-temp .search-vip-btn {
margin-bottom: 5px;
}
.rare-img-list {
float: right;
width: 220px;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.rare-img-list li {
width: 105px;
margin-right: 10px;
margin-bottom: 10px;
}
.rare-img-list li:nth-child(2n) {
margin-right: 0;
}
.search-list .rare-img-list li {
cursor: pointer;
}
.search-list .rare-img-list li:hover {
opacity: 0.5;
}
.grid-view .rare-img-list {
display: none;
}
.grid-view .rare-img-list li {
width: 174px;
}
.search-lineat-btn {
margin-left: auto;
margin-bottom: 10px;
width: 40px;
height: auto;
float: right;
}
.trim-detail .search-lineat-btn {
float: left;
margin-top: -4px;
}
.search .search-lineat-btn {
margin-bottom: 10px;
width: auto;
height: auto;
float: right;
}
.search .search-lineat-btn a {
display: block;
padding: 0 8px;
border: 2px solid transparent;
color: #fff;
text-decoration: none;
background: #00b800;
border-radius: 5px;
font-weight: bold;
font-size: 13px;
line-height: 1;
margin-top: 6px;
}
.search .search-lineat-btn a img {
width: 30px;
}
.search .search-lineat-btn a span {
line-height: 26px;
}
.search-list .search-lineat-btn {
margin-left: auto;
margin-top: 15px;
margin-bottom: 0;
height: auto;
float: right;
width: 100px;
}
.search-list .search-lineat-btn a {
display: flex;
padding: 3px 3px;
border: 2px solid transparent;
color: #fff;
text-decoration: none;
background: #00b800;
border-radius: 5px;
font-weight: bold;
font-size: 10px;
line-height: 1;
align-items: center;
flex-wrap: nowrap;
justify-content: center;
}
.search-list .search-lineat-btn img {
width: 30px;
}
.search-list .search-lineat-btn p {
margin-bottom: 0;
line-height: 1.4em;
text-align: center;
}
.search-vip-btn {
margin-left: 10px;
margin-bottom: 10px;
float: right;
padding: 0 110px 0 0;
}
.search .search-vip-btn {
margin: 0 10px 10px 10px;
float: right;
padding: 0;
}
.search-list .search-vip-btn {
padding-right: 0;
margin-bottom: 0;
margin-top: 15px;
width: 145px;
}
.search-vip-btn a {
display: block;
padding: 6px 8px;
border: 2px solid transparent;
color: #fff;
text-decoration: none;
background: #64c9e1;
border-radius: 5px;
font-weight: bold;
font-size: 13px;
line-height: 1;
margin-top: 6px;
}
.search .search-vip-btn a {
display: block;
padding: 8px 8px;
border: 2px solid transparent;
color: #fff;
text-decoration: none;
background: #64c9e1;
border-radius: 5px;
font-weight: bold;
font-size: 13px;
line-height: 1;
margin-top: 2px;
}
.search-list .search-vip-btn a {
display: block;
margin-top: 0;
padding: 10px 5px;
color: #fff;
text-decoration: none;
background: #64c9e1;
border-radius: 5px;
font-weight: bold;
font-size: 13px;
}
.search-vip-btn a span {
font-size: 15px;
margin-right: 5px;
color: #f7ce68;
vertical-align: middle;
}
.search-vip-btn a:hover {
opacity: 0.7;
}
.search-vip-btn a.active {
background-color: #516471;
border-top-color: #627a8a;
border-left-color: #7e919c;
}
.picked-popup {
position: fixed;
bottom: 60px;
left: 10px;
padding: 15px 30px;
font-size: 20px;
border: 3px solid #64c9e1;
color: #64c9e1;
background-color: #bfe6ff;
border-radius: 8px;
font-weight: bold;
visibility: hidden;
opacity: 0;
transition: all .5s ease-out 0s;
-webkit-transition: all .5s ease-out 0s;
}
.picked-popup.active {
visibility: visible;
opacity: 1;
}
.picked-star {
position: fixed;
width: 6px;
height: 20px;
z-index: 10500;
border-radius: 3px;
background-color: #f7ce68;
}
.picked-star.active {
transition: all .5s linear 0s;
-webkit-transition: all .5s linear 0s;
-moz-transition: all .5s linear 0s;
-ms-transition: all .5s linear 0s;
}
/*easycare*/
.easycare-note {
background: url(/images/easycare_bg01.jpg) 0 0 no-repeat;
background-size: cover;
margin: 0 0 45px;
padding: 10px 20px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.easycare-note dt {
margin: 10px 0 0;
}
.easycare-note dd {
color: #534741;
font-weight: bold;
}
.easycare-img {
position: absolute;
bottom: 0;
right: 0;
width: 250px;
}
/*walk*/
.walk-note {
background: url(/images/walk_bg01.jpg) 0 0 no-repeat;
background-size: cover;
margin: 0 0 45px;
padding: 10px 20px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.walk-note dt {
margin: 10px 0;
}
.walk-note dd {
color: #534741;
font-weight: bold;
}
.walk-img {
position: absolute;
bottom: 0;
right: 0;
width: 250px;
}
/*water*/
.water-note {
background: url(/images/water_bg01.jpg) 0 0 no-repeat;
background-size: cover;
margin: 0 0 45px;
padding: 10px 20px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.water-note dt {
margin: 10px 0;
}
.water-note dd {
color: #534741;
font-weight: bold;
}
.water-img {
position: absolute;
bottom: 0;
right: 0;
width: 250px;
}
/*family*/
.family-note {
background: url(/images/family_bg01.jpg) 0 0 no-repeat;
background-size: cover;
margin: 0 0 45px;
padding: 10px 20px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.family-note dt {
margin: 10px 0;
}
.family-note dd {
color: #534741;
font-weight: bold;
}
.family-img {
position: absolute;
bottom: 0;
right: 0;
width: 250px;
}
/*recommend*/
.recommend-note {
background: url(/images/recommend_bg01.jpg) 0 0 no-repeat;
background-size: cover;
margin: 0 0 45px;
padding: 30px 40px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.recommend-note dt {
margin: 0 0 20px;
}
.recommend-note dd {
color: #534741;
font-weight: bold;
}
.recommend-img {
position: absolute;
bottom: 0;
right: 0;
width: 250px;
}
.list-grid {
padding: 0 3%;
margin: 0 0 40px;
}
.list-grid li {
display: inline-block;
margin-right: 20px;
vertical-align: top;
font-size: 34px;
color: #64c9e1;
cursor: pointer;
padding: 7px 10px 6px;
border: 2px solid #64c9e1;
border-radius: 10px;
line-height: 0;
}
.list-grid li.picked-delete {
padding: 22px 30px;
font-size: 15px;
border: 3px solid #627a8a;
color: #ffffff;
background-color: #516471;
border-radius: 8px;
font-weight: bold;
}
.list-grid li:hover, .list-grid li.active {
color: #fff;
background: #64c9e1;
}
.list-grid li.picked-delete:hover, .list-grid li.picked-delete.active {
color: #fff;
background: #64c9e1;
border: 3px solid #64c9e1;
}
.rare-img-slider {
margin: 0 0 8px;
}
.show-slider {
display: none;
}
.rare-img-slider li {
text-align: center;
}
.rare-img-slider li.slick-slide {
height: 200px;
overflow: hidden;
}
.search-dots {
text-align: center;
margin-top: 15px;
}
.search-dots li {
display: inline-block;
margin: 0 5px;
line-height: 0;
}
.search-dots li button {
color: transparent;
width: 12px;
height: 12px;
border: none;
background: #bab5b3;
border-radius: 50%;
outline: none;
cursor: pointer;
}
.search-dots li.slick-active button {
background: #2685c3;
}
#index .under #main, .under .under #main, .under.search .under #content {
width: 100%;
margin: 0;
}
.popup-btn {
text-align: center;
padding: 5px 0 20px;
}
.popup-btn li {
display: inline-block;
vertical-align: middle;
margin: 0 10px;
}
.search-submit a {
text-align: center;
text-decoration: none;
color: #fff;
font-size: 16px;
font-family: 'Yu Gothic bold';
font-weight: bold;
position: relative;
width: 100%;
padding: 8px 50px;
z-index: 0;
box-sizing: border-box;
}
.search-submit a:hover {
opacity: 0.7;
}
.search-submit a:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #f5a868 url(/images/idx_search_icon03.png) 15% center no-repeat;
border-radius: 100px;
left: 0;
top: 0;
z-index: -1;
}
.search-submit a:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #dc975d;
border-radius: 100px;
left: 0;
top: 5px;
z-index: -2;
}
#navi .popup-btn li.idx-search-btn01 {
padding: 2px 10px;
width: 140px;
}
.line-ttl {
text-align: center;
font-size: 40px;
color: #3eb034;
font-family: 'Yu Gothic bold';
font-weight: bold;
margin-bottom: 10px;
}
.line-ttl span {
width: 18%;
display: inline-block;
vertical-align: middle;
line-height: 0;
margin: -2% 10px 0;
}
.line-box {
background: #3eb034;
border-radius: 30px;
padding: 30px;
display: table;
width: 100%;
box-sizing: border-box;
position: relative;
}
.line-box-l {
width: 30%;
display: table-cell;
vertical-align: middle;
}
.line-box-r {
box-sizing: border-box;
padding: 0 0 0 3%;
display: table-cell;
}
.line-txt01 {
color: #fff;
font-size: 26px;
font-family: 'Yu Gothic bold';
font-weight: bold;
line-height: 1.8em;
margin-bottom: 10px;
}
.line-txt02 {
font-size: 18px;
font-family: 'Yu Gothic bold';
font-weight: bold;
color: #fff;
margin: 0 0 30px;
line-height: 1.4em;
}
.line-img {
position: absolute;
top: 20px;
right: 30px;
width: 100px;
}
.line-btn {
margin: 0;
text-align: center;
}
.line-btn a {
display: block;
text-align: center;
text-decoration: none;
padding: 15px 0;
background: #fff;
color: #3d1909;
z-index: 0;
position: relative;
}
.line-btn a:after {
content: '';
position: absolute;
width: calc(100% - 10px);
height: calc(100% - 10px);
top: 5px;
left: 5px;
box-sizing: border-box;
border: 1px solid #3d1909;
z-index: -1;
}
.shop-map {
position: relative;
margin-bottom: 30px;
}
.shop-map-jp {
margin-bottom: 60px;
}
.shop-map-jp:after {
content: ' ';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: -30px;
border-bottom: 1px solid #666666;
}
.shop-map .search02-local > li > a {
color: #fff;
text-decoration: none;
}
.shop-map .search02-local > li {
background: rgba(0, 0, 0, 0.8);
border-radius: 20px;
color: #fff;
text-align: center;
padding: 5px 20px;
cursor: pointer;
position: absolute;
top: 0;
font-size: 16px;
white-space: nowrap;
}
.shop-map .search02-local > li#list_hokkaido {
top: 15%;
right: 0;
}
.shop-map .search02-local > li#list_tohoku {
top: 36%;
right: 12%;
}
.shop-map .search02-local > li#list_kitaKanto {
top: 47%;
right: 10%;
}
.shop-map .search02-local > li#list_metropolitan {
top: 68%;
right: 22%;
}
.shop-map .search02-local > li#list_izuHakone {
top: 76%;
right: 20%;
}
.shop-map .search02-local > li#list_koshinetsu {
top: 48%;
right: 33%;
}
.shop-map .search02-local > li#list_hokuriku {
top: 50%;
right: 41%;
}
.shop-map .search02-local > li#list_tokai {
top: 75%;
right: 40%;
}
.shop-map .search02-local > li#list_kinki {
top: 75%;
right: 60%;
}
.shop-map .search02-local > li#list_chugoku {
top: 56%;
right: 72%;
}
.shop-map .search02-local > li#list_shikoku {
top: 80%;
right: 75%;
}
.shop-map .search02-local > li#list_kyushu {
top: 67%;
left: 0;
}
.shop-map .search02-local > li#list_chuugoku {
top: 62%;
left: 23%;
}
.shop-map .search02-local > li#list_okinawa {
top: 90%;
right: 4%;
}
.shop-map .search02-local > li#list_china {
top: 5.52%;
left: 3.73%;
}
.shop-map .search02-local > li#list_malaysia {
top: 5.52%;
left: 23.18%;
}
.shop-map .search02-local > li.active > a, .shop-map .search02-local > li:hover > a {
opacity: 0.8;
}
.shop-map .search02-local li:nth-child(4n) {
margin-right: 0;
}
.shop-map .search02-local > li:hover .search02-local-sub {
display: block;
}
.shop-map .search02-local-sub li {
font-size: 14px;
}
.shop-map .search02-local-sub li:nth-child(4n) {
margin-right: 5px;
}
.qa-anchor {
text-align: center;
margin-bottom: 30px;
}
.qa-anchor li {
width: 31%;
margin-bottom: 10px;
margin-right: 2%;
display: inline-block;
vertical-align: middle;
}
.qa-anchor li:nth-child(3n) {
margin-right: 0;
}
.qa-anchor li a {
display: block;
text-decoration: none;
background: #64c9e1;
border-radius: 10px;
color: #fff;
padding: 10px 0;
text-align: center;
}
.qa-anchor li a:hover {
opacity: 0.7;
}
.together-frame.flow > li {
margin-bottom: 30px;
border-bottom: 1px dashed #ddd;
padding-bottom: 20px;
position: relative;
}
.together-frame.flow > li:after {
content: '';
position: absolute;
border-top: 15px solid #ddd;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
bottom: -15px;
left: calc(50% - 20px);
}
.together-frame.flow > li dt {
font-weight: bold;
font-size: 18px;
text-align: center;
border: 2px solid #fc817b;
/*background: #fc817b;*/
color: #fc817b;
padding: 10px 3%;
margin: 0 0 20px;
border-radius: 5px;
}
#search-dog .together-frame.flow > li dt {
border: 2px solid #64c9e1;
color: #64c9e1;
}
.together-btn {
text-align: center;
}
.together-btn li {
display: inline-block;
vertical-align: middle;
width: 150px;
background: #82bdff;
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 10px 0;
cursor: pointer;
position: relative;
border-radius: 5px;
}
.together-btn li.notactive, .together-btn li.notactive:hover {
opacity: 0.2;
}
.together-btn li:first-child {
margin-right: 15px;
background: #c0504d;
}
.together-btn li:hover {
opacity: 0.7;
}
.together-btn li:before {
content: '';
position: absolute;
border-top: 5px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
bottom: 5px;
left: calc(50% - 5px);
}
.data-flow {
display: none;
}
.data-flow.active {
display: block;
}
.data-flow2 {
display: none;
}
.data-flow2.active {
display: block;
}
.outside-rs {
display: none;
border: 3px solid #64c9e1;
border-radius: 10px;
padding: 20px;
margin-top: 50px;
}
#search-cat .outside-rs {
border: 3px solid #fc817b;
}
.together-frame.flow > li.result01 {
margin: 0 auto;
border-bottom: none;
padding: 10px;
text-align: center;
background: #ff0000;
color: #fff;
width: 60%;
display: none;
}
.together-frame.flow > li.result01:after {
content: '';
position: absolute;
border-top: none;
border-left: none;
border-right: 20px solid #ff0000;
bottom: inherit;
top: 99%;
left: calc(50% - 10px);
height: 50px;
}
.together-frame.flow > li.result01:before {
content: '';
position: absolute;
border-top: 15px solid #ff0000;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
bottom: -63px;
left: calc(50% - 20px);
}
.together-frame.flow > li.result02, .together-frame.flow > li.result04 {
display: none;
margin: 0 auto;
border-bottom: none;
padding: 10px;
text-align: center;
background: #ff0000;
color: #fff;
width: 60%;
}
.together-frame.flow {
border-radius: 10px;
}
.together-frame.flow > li.result02, .together-frame.flow > li.result03 {
margin: 0 auto;
border-bottom: none;
padding: 10px;
text-align: center;
background: #4f81bd;
color: #fff;
width: 60%;
display: none;
}
.together-frame.flow > li.flow_arrow {
content: '';
border-bottom: none;
margin-bottom: 0;
z-index: 2;
font-size: 6px;
display: none;
}
.together-frame.flow > li.flow_arrow p {
text-align: center;
color: #9d6c09;
font-size: 28px;
padding: 0 0 5px;
margin: 0;
font-family: 'Yu Gothic bold';
font-weight: bold;
}
.together-frame.flow > li.flow_arrow:after {
content: '';
border-top: none;
border-left: none;
border-bottom: none;
}
.together-frame.flow > li.flow_arrow:before {
content: '';
width: 0;
height: 0;
border-top: 40px solid #4f81bd;
border-right: 100px solid transparent;
border-bottom: 40px solid transparent;
border-left: 100px solid transparent;
bottom: -80px;
left: calc(50% - 100px);
position: absolute;
margin-bottom: 0;
z-index: 3;
}
#search-cat .together-frame.flow > li.flow_arrow:before {
border-top: 40px solid #fc817b;
}
.together-frame.flow > li.result02:after {
content: '';
position: absolute;
border-top: none;
border-left: none;
border-right: 20px solid #4f81bd;
bottom: inherit;
top: 99%;
left: calc(50% - 10px);
height: 50px;
}
.together-frame.flow > li.result02:before {
content: '';
position: absolute;
border-top: 15px solid #4f81bd;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
bottom: -63px;
left: calc(50% - 20px);
}
.together-frame.flow > li.result03:after, .together-frame.flow > li.result04:after {
display: none;
}
.lang-ttl01 {
color: #534741;
margin-bottom: 60px;
}
.lang-flag {
display: flex;
margin-bottom: 85px;
}
.lang-flag li {
margin-right: 65px;
}
.lang-ctn {
display: flex;
flex-wrap: wrap
}
.lang-ctn li {
width: 516px;
box-sizing: border-box;
border: 1px solid #eee8e0;
border-radius: 10px;
margin-right: 40px;
margin-bottom: 80px;
-webkit-box-shadow: 3px 3px 0px 0px rgba(242, 242, 242, 1);
-moz-box-shadow: 3px 3px 0px 0px rgba(242, 242, 242, 1);
box-shadow: 3px 3px 0px 0px rgba(242, 242, 242, 1);
padding: 0 20px 18px;
}
.lang-ctn li:nth-child(2n) {
margin-right: 0;
}
.lang-top dt {
text-align: center;
border-bottom: 2px dotted #ccb9a3;
padding-bottom: 15px;
margin-top: -30px;
margin-bottom: 30px;
}
.lang-top dd {
padding: 0 10px 25px;
}
.lang-top dd p {
color: #534741;
margin-bottom: 5px;
line-height: 2.2em;
}
.lang-contact {
background: #e9f3f9;
border-radius: 10px;
padding: 15px;
color: #534741;
}
.lang-contact dl {
width: 100%;
display: table;
}
.lang-contact dl dt {
display: table-cell;
vertical-align: top;
width: 75px;
}
.lang-contact dl dd {
display: table-cell;
vertical-align: top;
}
.under-tbl-nobd td {
border: none;
}
.under-ttl01 {
text-align: center;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.breeding-flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.breeding-img {
width: 260px;
}
.breeding-img img {
border-radius: 10px;
}
.breeding-side {
width: 460px;
}
.txt-brown {
color: #534741;
}
.zukan-all-link {
display: flex;
}
.zukan-all-link li {
width: 520px;
background: #fff;
box-sizing: border-box;
border: 1px solid #efe9e2;
border-radius: 10px;
-webkit-box-shadow: 3px 3px 0px 0px rgba(242, 242, 242, 1);
-moz-box-shadow: 3px 3px 0px 0px rgba(242, 242, 242, 1);
box-shadow: 3px 3px 0px 0px rgba(242, 242, 242, 1);
/*padding: 15px;*/
padding: 15px 30px;
}
.zukan-all-link li:first-child {
margin-right: 40px;
}
.zukan-all-link dl {
/*display: flex;*/
}
.zukan-all-link dt {
width: 240px;
text-align: center;
margin: 0 auto 20px;
}
.zukan-all-link dd {
/*width: calc(100% - 265px);*/
}
.zukan-all-ttl01 {
font-family: 'Nunito', sans-serif;
font-weight: 700;
color: #64c9e1;
margin-bottom: 5px;
}
.zukan-all-ttl01 span.icon {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
margin-top: -10px;
}
.zukan-all-ttl02 {
color: #534741;
font-size: 20px;
font-family: 'Yu Gothic bold';
font-weight: bold;
margin-bottom: 10px;
}
.zukan-all-txt01 {
color: #534741;
margin-bottom: 10px;
}
.zukan-all-btn01 {
margin: 0;
}
.zukan-all-btn01 a {
display: block;
text-decoration: none;
color: #fff;
font-size: 16px;
font-family: 'Yu Gothic bold';
font-weight: bold;
background: #f5a868;
border-radius: 50px;
text-align: center;
padding: 8px 0;
border-bottom: 4px solid #dc975d;
}
.zukan-all-btn01 a:hover {
opacity: 0.7;
}
.zukan-all-frame01 {
background: url(/images/box07_bg02.jpg) 0 0 repeat;
position: relative;
border-radius: 0 0 10px 10px;
padding: 40px 20px 15px;
margin-bottom: 40px;
}
.zukan-all-frame01:before {
content: '';
position: absolute;
width: 100%;
height: 13px;
background: url(/images/box07_bg01.jpg) 0 0 repeat-x;
top: 0;
left: 0;
border-radius: 10px 10px 0 0;
}
.zukan-all-ttl03 {
color: #64c9e1;
font-size: 22px;
font-family: 'Yu Gothic bold';
font-weight: bold;
padding-bottom: 10px;
background: url(/images/under_h3_bg.png) 0 100% repeat-x;
margin-bottom: 25px;
}
.zukan-all-list {
padding: 0 10px;
display: flex;
flex-wrap: wrap;
}
.zukan-all-list li {
background: #fff;
border-radius: 10px;
width: 160px;
margin-right: 18px;
margin-top: 15px;
margin-bottom: 25px;
position: relative;
z-index: 0;
padding: 17px 12px;
box-sizing: border-box;
}
.zukan-all-list li:before {
content: url(/images/zukan_tape.png);
position: absolute;
top: -10px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
}
.zukan-all-list li:after {
content: '';
position: absolute;
z-index: -1;
width: calc(100% + 2px);
height: calc(100% + 2px);
border-radius: 10px;
border-right: 2px dashed rgba(0, 0, 0, 0.1);
border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
top: 0px;
left: 0px;
box-sizing: border-box;
}
.zukan-all-list li:nth-child(4n) {
margin-right: 0;
}
.zukan-all-list li a {
text-decoration: none;
color: #64c9e1;
}
.zukan-all-list dl a {
text-decoration: none;
}
.zukan-all-list dl:hover {
opacity: 0.7;
}
.zukan-all-list dt {
margin-bottom: 15px;
text-align: center;
}
.zukan-all-list dd {
color: #534741;
font-size: 15px;
font-family: 'Yu Gothic bold';
font-weight: bold;
line-height: 1.2em;
}
.zukan-all-list dd a {
text-decoration: none;
}
.zukan-all-list dd a:hover {
color: #534741;
}
.zukan-all-frame02 {
background: url(/images/zukan_bg01.jpg) 0 0 repeat;
position: relative;
border-radius: 0 0 10px 10px;
padding: 40px 20px 15px;
}
.zukan-all-frame02:before {
content: '';
position: absolute;
width: 100%;
height: 15px;
background: url(/images/zukan_bg02.jpg) 0 0 repeat-x;
top: 0;
left: 0;
border-radius: 10px 10px 0 0;
}
.zukan-all-ttl04 {
color: #fc817b;
font-size: 22px;
font-family: 'Yu Gothic bold';
font-weight: bold;
padding-bottom: 10px;
background: url(/images/under_h3_bg.png) 0 100% repeat-x;
margin-bottom: 25px;
}
.zukan-cat-box01 {
padding: 20px 20px 30px 20px;
background: #fff;
border-radius: 10px;
border: 1px solid #eee8e0;
-webkit-box-shadow: 2px 2px 0px 0px rgba(242, 242, 242, 1);
-moz-box-shadow: 2px 2px 0px 0px rgba(242, 242, 242, 1);
box-shadow: 2px 2px 0px 0px rgba(242, 242, 242, 1);
}
.zukan-cat-ttl {
border-bottom: 1px dashed #ccb9a2;
position: relative;
padding: 10px 180px 8px 40px;
font-size: 18px;
color: #534741;
font-weight: bold;
background: url(/images/zukan_cat_icon.png) 3px 5px no-repeat;
margin-bottom: 15px;
}
.zukan-dog .zukan-cat-ttl {
background: url(/images/zukan_dog_icon.png) 3px 5px no-repeat;
}
.zukan-cat-ttl span.ttl-en {
color: #fb807a;
font-size: 16px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.zukan-dog .zukan-cat-ttl span.ttl-en {
color: #64c9e1;
}
.zukan-cat-flag {
position: absolute;
top: 12px;
right: 0;
font-size: 12px;
letter-spacing: 1px;
}
.zukan-cat-flag span {
display: inline-block;
vertical-align: middle;
margin-left: 15px;
}
.zukan-c-img {
display: flex;
margin-bottom: 28px;
}
.zulan-c-main {
width: 340px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #e9e0d6;
padding: 4px 5px;
text-align: center;
margin-right: 20px;
align-self: flex-start;
}
.zulan-c-main.slider {
border: none;
}
.zulan-c-main.slider li {
border: 1px solid #e9e0d6;
border-radius: 10px;
padding: 5px;
}
.zukan-check {
width: 350px;
}
.zukan-check .zukan-c-ttl01 {
margin-bottom: 20px;
padding-right: 0;
}
.zukan-check-img {
text-align: center;
padding: 15px 10px;
border: 1px solid #534741;
border-radius: 5px;
}
.zukan-c-thumb {
width: 350px;
display: flex;
flex-wrap: wrap;
}
.zukan-c-thumb li {
width: 170px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #e9e0d6;
margin-right: 10px;
margin-bottom: 10px;
padding: 4px;
}
.zukan-c-thumb li:nth-child(2n) {
margin-right: 0;
}
.zukan-c-ctn {
border-radius: 10px;
background: url(/images/box02_bg.jpg) 0 0 repeat;
padding: 20px;
margin-bottom: 20px;
}
.zukan-c-2side {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.zukan-c-2side > li {
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.05);
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
padding: 10px;
position: relative;
}
.zukan-dog .zukan-c-2side {
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.05);
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.05);
padding: 10px;
margin-bottom: 20px;
}
.zukan-dog .zukan-c-2side > li {
width: 50%;
margin-bottom: 20px;
background: none;
-webkit-box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0);
-moz-box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0);
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0);
padding: 0;
}
.zukan-c-2side li.zukan-p:before {
content: '';
position: absolute;
width: 113px;
height: 41px;
background: url(/images/zukan_cat_icon03.png) 0 0 no-repeat;
background-size: contain;
top: -5px;
right: -5px;
}
.zukan-c-2side li.zukan-p.dog:before {
content: '';
position: absolute;
width: 83px;
height: 36px;
background: url(/images/zukan_cat_icon02.png) 0 0 no-repeat;
background-size: contain;
top: -5px;
right: -5px;
}
.zukan-dog .zukan-c-2side li.zukan-p:before {
top: -5px;
right: inherit;
left: 80px;
}
.zukan-c-ttl01 {
font-size: 16px;
color: #534741;
font-weight: bold;
padding-right: 100px;
border-bottom: 1px dashed #ccb9a2;
margin-bottom: 12px;
}
.zukan-c-detail {
padding: 0 5px;
display: flex;
flex-wrap: wrap;
}
.zukan-c-detail dt {
width: 60px;
padding-right: 5px;
color: #78aa22;
font-weight: bold;
}
.zukan-c-detail dd {
width: calc(100% - 65px);
}
.zukan-cat-sum {
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.05);
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.05);
padding: 20px;
}
.zukan-cat-sum dt {
color: #78aa22;
font-weight: bold;
margin-bottom: 12px;
}
.zukan-cat-sum dd {
color: #534741;
margin-bottom: 30px;
}
.zukan-cat-sum dd:last-child {
margin-bottom: 0;
}
.zukan-c-list {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.zukan-c-list li {
margin-right: 10px;
width: 25%;
}
.zukan-c-list li .box01-img {
height: 95px;
overflow: hidden;
margin-bottom: 10px
}
.zukan-c-list li:last-child {
margin-right: 0;
}
.zukan-c-list li p {
margin: 0 0 0.2em;
line-height: 1.5em;
font-weight: bold;
}
.zukan-c-list li:hover {
opacity: 0.7;
}
.zukan-c-list li a {
text-decoration: none;
color: #534741;
}
.zukan-c-list li p.cate01 {
margin: 0;
color: #fff;
display: inline-block;
padding: 0 20px;
font-weight: bold;
border-radius: 5px;
background: #82bdff;
}
.zukan-c-list li p.cate02 {
margin: 0;
color: #fff;
display: inline-block;
padding: 0 20px;
font-weight: bold;
border-radius: 5px;
background: #fc817b;
}
.idx-search-submit.zukan-c a:before {
background: #f5a868 url(/images/idx_search_icon03.png) 18px center no-repeat;
}
#respond .comment-form-comment textarea#comment {
width: 100%;
height: 150px;
}
#respond .form-submit {
margin: 0 0 20px;
text-align: center;
}
#respond .inputtext label {
font-weight: bold;
}
.form-submit input#submit.submit {
width: 200px;
background: #f5a868;
height: 40px;
border: none;
border-radius: 20px;
font-size: 18px;
font-weight: bold;
color: #FFF;
cursor: pointer;
}
.form-submit input#submit.submit:hover {
opacity: 0.7;
}
.estate-frame {
border-radius: 10px;
background: url(/images/box02_bg.jpg) 0 0 repeat;
padding: 20px;
}
.estate-frame-txt {
color: #534741;
font-size: 16px;
font-family: 'Yu Gothic bold';
font-weight: bold;
line-height: 2.2em;
margin: 0;
}
.estate-frame-img {
margin-bottom: 0;
margin-top: -3%;
}
.estate-frame .dog-list {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.estate-frame .dog-list li {
position: relative;
padding-left: 17px;
width: 45%;
line-height: 2.5em;
}
.estate-frame .dog-list li::before {
position: absolute;
width: 6px;
height: 6px;
content: '';
left: 0;
top: 14px;
background: #534741;
border-radius: 50%;
}
.estate-frame .dog-list li a {
text-decoration: underline;
color: #534741;
font-weight: bold;
}
.estate-frame .dog-list li a:hover {
text-decoration: none;
color: #534741;
opacity: 0.8;
}
.estate-frame h4 {
padding-left: 24px;
font-size: 18px;
color: #534741;
border-bottom: 1px dotted #534741;
padding: 5px 24px;
}
.estate-frame h4::after {
position: absolute;
width: 10px;
height: 10px;
border: #534741 3px solid;
border-radius: 50%;
content: '';
left: 0;
top: 8px;
}
.concept-frame {
background: url(/images/concept_bg01.png), url(/images/box02_bg.jpg);
background-repeat: no-repeat, repeat;
background-position: top right, 0 0;
background-size: auto 100%, auto;
border-radius: 10px;
padding: 35px 25px 20px;
}
.concept-ttl {
color: #534741;
font-size: 24px;
font-weight: bold;
line-height: 1.5em;
margin-bottom: 10px;
}
.concept-txt {
color: #534741;
line-height: 2.1em;
margin-bottom: 25px;
}
.concept-list li {
padding-left: 60px;
padding-bottom: 8px;
margin-bottom: 15px;
position: relative;
background: url(/images/concept_bg02.png) 0 bottom repeat-x;
color: #534741;
font-size: 16px;
font-family: 'Yu Gothic bold';
font-weight: bold;
}
.concept-list li span.icon {
position: absolute;
top: -3px;
left: 0;
}
.concept-list li span.bg-yellow {
display: inline;
position: relative;
z-index: 0;
}
.concept-list li span.bg-yellow:after {
content: '';
position: absolute;
width: 100%;
height: 8px;
background: #fdf57a;
z-index: -1;
left: 0;
bottom: 3px;
}
.zukan-d-detail {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.zukan-d-detail .zukan-c-detail {
width: 48%;
}
.zukan-d-detail .zukan-c-detail dt {
width: 60px;
}
.zukan-d-detail .zukan-c-detail dd {
width: calc(100% - 65px);
}
.zukan-d-detail02 {
margin-top: 10px;
}
.zukan-d-detail02 dt {
color: #78aa22;
font-weight: bold;
margin-bottom: 5px;
}
.zukan-d-detail02 dd {
margin-bottom: 10px;
}
.zukan-d-check {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px 20px 20px;
}
.zukan-popup {
padding: 15px 20px;
border: 1px solid #534741;
border-radius: 10px;
margin: 20px 0 30px;
}
.zukan-popup li {
margin-bottom: 10px;
}
.zukan-popup li:last-child {
margin: 0;
}
.zukan-popup li a {
font-weight: bold;
font-size: 15px;
color: #534741;
}
.zukan-bellow {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.zukan-btn {
margin-bottom: 5px;
}
.zukan-btn a {
display: block;
font-size: 16px;
color: #fff;
font-weight: bold;
padding: 10px 100px;
border-radius: 30px;
background: #ff7c80;
text-decoration: none;
}
.zukan-btn.dog a {
background: #0070c0;
}
.zukan-btn a:hover {
opacity: 0.7;
}
.zukan-note {
font-size: 12px;
}
.zcat-popup {
display: none;
}
.search-dots {
text-align: center;
margin-top: 15px;
}
.zukan-dots {
text-align: center;
margin-top: 15px;
}
.zulan-c-main.slider .zukan-dots li {
display: inline-block;
margin: 0 5px;
line-height: 0;
padding: 0;
border: none;
}
.zukan-dots li button {
color: transparent;
width: 12px;
height: 12px;
border: none;
background: #bab5b3;
border-radius: 50%;
outline: none;
cursor: pointer;
}
.zukan-dots li.slick-active button {
background: #2685c3;
}
.contact-d-c-img {
text-align: center;
margin-bottom: 20px;
display: flex;
display: -ms-flexbox;
justify-content: space-between;
padding: 0 20px;
}
.contact-d-c-img img {
width: 336px;
}
.contact-d-c-img li {
width: 48%;
}
#fmail .contact-d-c-img li.photo2 {
margin-right: 0;
}
.contact-d-c-dl01 {
display: flex;
}
.contact-d-c-dl01 dt {
width: 30%;
margin-right: 3%;
text-align: right;
}
.contact-d-c-dl01 dd {
width: 67%;
}
.ct-d-c-a01 {
display: none;
}
.list-indent {
padding-left: 20px;
}
.list-indent > li {
text-indent: -20px;
}
.txt-sml {
font-size: 80%;
}
.ct-d-c-2side {
display: flex;
justify-content: space-between;
align-items: center;
}
.ct-d-c-l, .ct-d-c-r {
width: 49%;
margin-left: 10px;
}
.ct-d-c-a02 {
cursor: pointer;
}
.ct-d-c-a02 span, .ct-s-a {
position: relative;
}
.ct-d-c-a02 span:after, .ct-s-a:after {
content: ' (+)';
}
.ct-d-c-a02 span.active:after, .ct-s-a.active:after {
content: ' (-)';
}
.ct-d-c-td02 {
display: none;
}
.ct-if {
display: none;
}
.box06-list li.cate01 span.news-cate {
background: #64c9e1;
}
.box06-list li.cate02 span.news-cate {
background: #f79646;
}
.box06-list li.cate03 span.news-cate {
background: #f5b2b2;
}
.box06-list li span.news-cate {
color: #fff;
border-radius: 5px;
text-align: center;
background: #eee;
padding: 5px 0;
width: 92px;
}
.news-tab {
text-align: left;
margin-bottom: 25px;
margin-top: 10px;
margin-left: 150px;
}
.news-tab li {
display: inline-block;
margin-right: 10px;
border-radius: 5px;
width: 120px;
padding: 5px 0;
text-align: center;
color: #333;
border: 2px solid #333;
cursor: pointer;
font-weight: bold;
}
.news-tab li:hover, .news-tab li.active {
color: #fff;
background: #333;
}
.news-tab li:last-child {
margin-right: 0;
}
.news-tab li.tab-cate01 {
color: #64c9e1;
border-color: #64c9e1;
}
.news-tab li.tab-cate01:hover, .news-tab li.tab-cate01.active {
color: #fff;
background: #64c9e1;
}
.news-tab li.tab-cate02 {
color: #f79646;
border-color: #f79646;
}
.news-tab li.tab-cate02:hover, .news-tab li.tab-cate02.active {
color: #fff;
background: #f79646;
}
.news-tab li.tab-cate03 {
color: #f5b2b2;
border-color: #f5b2b2;
}
.news-tab li.tab-cate03:hover, .news-tab li.tab-cate03.active {
color: #fff;
background: #f5b2b2;
}
#navi .search-items.si02, .under #navi .search-items.si03 {
position: static;
}
.under #navi .sizedog-checkbox li, .under #navi .sizecat-checkbox li {
width: 48%;
margin: 0 2% 5px 0;
}
.under #navi .sizedog-checkbox li input[type=checkbox] + label, .under #navi .sizecat-checkbox li input[type=checkbox] + label {
font-size: 10px;
}
.under #navi .sizedog-checkbox li:nth-child(2n+1), .under #navi .sizecat-checkbox li:nth-child(2n+1) {
clear: left;
}
.under #navi .search-box {
padding: 10px 15px 1px;
}
.under #navi .search-items {
width: 100%;
box-sizing: border-box;
}
.under #navi .s-price li {
width: 115px;
}
#navi .popup-btn li {
width: 100%;
box-sizing: border-box;
margin: 0;
}
#navi .popup-btn li:first-child {
margin-bottom: 10px;
}
#navi .search-submit a {
display: block;
}
.under #navi .search-radio li:first-child {
margin-right: 3px;
}
.under #navi .searchshop-cb ul li {
width: 48%;
margin-right: 2%;
margin-bottom: 10px;
}
.under #navi .searchshop-cb ul li:nth-child(2n) {
margin-right: 0;
}
.under #navi .searchshop-cb ul li:nth-child(5n+1) {
clear: inherit;
}
.under .searchshop-cb ul li:nth-child(2n+1) {
clear: left;
}
.under.search .search-b02r-top .search-items {
width: 100%;
}
.top-search {
margin-bottom: 10px;
}
.top-search dt {
font-size: 16px;
color: #534741;
font-weight: bold;
margin-bottom: 5px;
margin-top: 10px;
}
.top-search input[type=radio] {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.top-search input[type=radio] + label {
padding-left: 34px;
height: 24px;
display: inline-block;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 12px;
color: #534741;
font-weight: bold;
vertical-align: middle;
cursor: pointer;
background-image: url(/images/search-radio.png);
}
.top-search input[type=radio] + label {
font-size: 12px;
}
.top-search input[type=radio]:checked + label {
background-position: 0 -24px;
}
.top-search li {
display: inline-block;
vertical-align: top;
}
.section-begin {
display: inline-block;
vertical-align: top;
width: 100%;
}
.section-action {
display: inline-block;
vertical-align: top;
opacity: 0;
height: 0;
-webkit-transition-property: all; /* Safari */
-webkit-transition-duration: 0.3s; /* Safari */
transition-property: all;
transition-duration: 0.3s;
width: 330px;
}
.section-action.active {
opacity: 1;
height: 100%;
}
.search-close-action {
position: absolute;
bottom: -20px;
right: -15px;
background: #555555;
color: #fff;
text-align: center;
padding: 6px 0;
width: 90px;
font-size: 14px;
cursor: pointer;
border-radius: 0 0 5px 0;
display: none;
}
.search-close-action:hover {
opacity: 0.5;
}
.line-box02 {
background: url(/images/line_bg.jpg) 0 0 no-repeat;
background-size: cover;
border-radius: 10px;
overflow: hidden;
position: relative;
padding: 30px 20px 20px;
}
.line-icon01 {
display: inline-block;
vertical-align: top;
}
.line-ttl {
display: inline-block;
vertical-align: top;
margin-left: 15px;
margin-top: 15px;
}
.line-icon02 {
position: absolute;
top: 14px;
right: 14px;
}
.line-qr {
position: absolute;
right: 18px;
bottom: 18px;
}
.line-txt03 {
margin-left: 10px;
margin-top: 70px;
margin-bottom: 18px;
}
.line-btn01 {
margin-left: 10px;
}
.line-btn01 a:hover img {
opacity: 0.7;
}
.line-list {
display: flex;
flex-wrap: wrap;
}
.line-list li {
width: 240px;
margin-right: 20px;
margin-bottom: 20px;
}
.line-list li:nth-child(3n) {
margin-right: 0;
}
.line-ttl04 {
font-weight: bold;
font-size: 18px;
text-decoration: underline;
}
.under #navi .searchshop-cb dl {
width: 100%;
}
.under #navi a img:hover {
opacity: 0.7;
}
.under .search-b02r-top .search-items {
width: 100%;
}
.trim-ttl01 {
color: #64c9e1;
font-size: 22px;
font-family: 'Yu Gothic bold';
font-weight: bold;
padding-bottom: 10px;
padding-right: 200px;
background: url(/images/under_h3_bg.png) 0 100% repeat-x;
margin-bottom: 40px;
position: relative;
}
.trim-ttl01:after {
content: "";
position: absolute;
right: 0;
bottom: -15px;
background: url(/images/trim_idx_icon02.png) 0 0 no-repeat;
background-size: contain;
width: 197px;
height: 64px;
}
.trim-tbl th, .trim-tbl td {
padding: 15px;
background: #fff;
color: #524740;
border: 1px solid #dacebf;
}
.trim-tbl th.txt-pink, .trim-tbl td.txt-pink {
color: #e17b78;
}
.trim-tbl th.left {
text-align: left;
}
.sizedog-checkbox label, .sizecat-checkbox label, .searchshop-cb label {
font-size: 12px;
line-height: 1.4em;
}
.search-ctn .sizedog-checkbox label, .search-ctn .sizecat-checkbox label, .searchshop-cb label {
font-size: 10px;
}
li.checktool {
float: none;
}
.under .pict-frame {
border: 1px solid #eee8e0;
border-radius: 10px;
padding: 20px;
-webkit-box-shadow: 2px 2px 0px 0px rgba(242, 242, 242, 1);
-moz-box-shadow: 2px 2px 0px 0px rgba(242, 242, 242, 1);
box-shadow: 2px 2px 0px 0px rgba(242, 242, 242, 1);
}
.under .search-pict-top {
margin-bottom: 20px;
width: 100%;
}
.under .search-pict-below {
width: 100%;
}
.under .search-pict-i01 {
float: left;
background: url(/images/box02_bg.jpg) repeat;
border-radius: 10px;
border: 2px dashed #d3bea6;
position: relative;
width: 414px;
text-align: center;
height: 160px;
font-size: 20px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.under .search-pict-img {
margin: 0;
position: absolute;
right: 0;
bottom: -2px;
width: 100px;
}
.under .search-pict-i02 {
float: left;
background: #e9f3f9;
border-radius: 10px;
position: relative;
width: 280px;
height: 160px;
box-sizing: border-box;
margin-left: 20px;
padding: 20px;
font-size: 12px;
line-height: 1.6em;
}
.under .search-pict-i02:before {
content: url(/images/pets_ctn_tape.png);
position: absolute;
left: calc(50% - 45px);
top: -5px;
}
.under .search-pict-img02 {
margin: 0;
position: absolute;
right: 10px;
bottom: -15px;
width: 120px;
}
.under .search-pict-up {
background: #e9f3f9;
border-radius: 10px;
padding: 10px 20px;
margin-bottom: 20px;
}
.under .search-pict-ttl {
font-size: 16px;
color: #534741;
font-weight: bold;
margin-bottom: 5px;
}
.under .search-pict-btn {
background: #534741;
border-radius: 8px;
display: inline-block;
vertical-align: middle;
padding: 3px 20px;
color: #fff;
font-weight: bold;
font-size: 16px;
margin: 0;
}
.under .search-pict-btn span {
display: inline-block;
width: 20px;
vertical-align: middle;
line-height: 0;
margin-right: 10px;
}
.under .search-pict-txt {
margin-bottom: 0;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
}
.under .search-pict-list li {
padding: 0 0 0 20px;
text-indent: -15px;
}
.bigsale-camp-frame {
background-image: url(/images/bigsale_camp_img01.png), url(/images/bigsale_camp_img02.png), url(/images/bigsale_camp_bg02.png), url(/images/bigsale_camp_bg01.jpg);
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
background-position: 0 0, 100% 0, top center, 0 0;
border-radius: 8px;
padding: 70px 60px;
}
.bigsale-camp-ttl {
text-align: center;
margin-bottom: 16px;
}
.bigsale-camp-ttl .bc-icon01 {
display: inline-block;
margin-right: 20px;
vertical-align: middle;
}
.bigsale-camp-ttl .bc-icon02 {
display: inline-block;
margin-left: 28px;
margin-bottom: -20px;
vertical-align: middle;
}
.bigsale-camp-inner {
background-color: #fff;
background-image: url(/images/bigsale_camp_bg02.jpg);
background-repeat: no-repeat;
background-position: calc(100% - 40px) calc(100% - 10px);
border-radius: 8px;
position: relative;
padding: 30px;
}
.bigsale-camp-txt {
background-image: url(/images/bigsale_camp_bg03.png);
background-repeat: repeat;
color: #534741;
line-height: 3.6em;
margin-bottom: 40px;
padding: 0 10px;
}
.bigsale-camp-inner .bigsale-camp-txt + .bigsale-camp-txt {
border-top: 1px solid rgba(199, 178, 153, 0.2);
}
.bigsale-camp-sign {
text-align: right;
color: #534741;
font-weight: bold;
font-size: 24px;
font-family: 'Yu Gothic bold';
margin: 0;
}
.bigsale-camp-sign span {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.bigsale-camp-img {
position: absolute;
margin: 0;
bottom: -26px;
left: 0;
}
.under-ttl-blue {
color: #64c9e1;
font-weight: bold;
font-size: 22px;
font-family: 'Yu Gothic bold';
background: url(/images/under_h3_bg.png) 0 100% repeat-x;
padding-bottom: 10px;
}
.harfprice-frame01 {
padding: 0 70px;
margin-bottom: 60px;
}
.harfprice-ttl01 {
text-align: center;
margin-bottom: 25px;
}
.harfprice-des01 {
text-align: center;
background-color: #754c24;
color: #fff;
font-weight: bold;
font-size: 20px;
font-family: 'Yu Gothic bold';
border-radius: 10px;
padding: 5px 60px;
background-image: url(/images/harfprice_camp_img08.png), url(/images/harfprice_camp_img08.png);
background-repeat: no-repeat;
background-position: 10px center, calc(100% - 10px) center;
letter-spacing: 0.5px;
margin-bottom: 60px;
width: 894px;
box-sizing: border-box;
margin: 0 auto 60px;
}
.harfprice-des01 > span {
color: #ffdc4a;
font-size: 130%;
}
.harfprice-des01 > span > span {
font-size: 20px;
}
.harfprice-frame01-txt {
line-height: 2.2em;
margin-left: 450px;
}
.harfprice-txt-large {
font-size: 18px;
}
.harfprice-frame02 {
background: url(/images/bigsale_camp_bg01.jpg) 0 0 repeat;
border-radius: 8px;
margin-bottom: 80px;
padding: 45px 30px 15px;
}
.harfprice-inner01 {
padding: 0 0 40px;
margin: 0 0 30px;
border-bottom: 1px solid #c7b299;
}
.harfprice-ttl02 {
text-align: center;
color: #754c24;
font-weight: bold;
font-size: 28px;
font-family: 'Yu Gothic bold';
margin: 0 0 20px;
}
.hp-left01 {
float: left;
width: 460px;
box-sizing: border-box;
}
.hp-right01 {
float: right;
width: 520px;
box-sizing: border-box;
background: #fff;
border-radius: 10px;
padding: 30px 35px 15px;
}
.hp-img01 {
text-align: center;
margin-bottom: 10px;
}
.hp-img02 {
text-align: center;
margin-bottom: 10px;
}
.hp-txt01 {
color: #754c24;
font-weight: bold;
font-size: 20px;
font-family: 'Yu Gothic bold';
margin-bottom: 0;
}
.hp-price01 {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.hp-price01 dt {
color: #fc817b;
font-weight: bold;
font-size: 83px;
font-family: 'Yu Gothic bold';
margin-right: 50px;
line-height: 1em;
letter-spacing: -1.5px;
position: relative;
}
.hp-price01 dt:after {
content: url(/images/harfprice_camp_img07.png);
position: absolute;
left: calc(100% + 12px);
top: calc(50% - 12px);
line-height: 0;
font-size: 0;
}
.hp-price01 dd li {
text-align: center;
font-weight: bold;
font-family: 'Yu Gothic bold';
color: #fff;
background: #603813;
border-radius: 10px;
width: 100px;
}
.hp-price01 dd li:first-child {
margin-bottom: 4px;
}
.hp-note01 {
margin: 0;
color: #754c24;
font-weight: bold;
font-family: 'Yu Gothic bold';
}
.harfprice-ttl03 {
text-align: center;
color: #754c24;
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 20px;
line-height: 1.6em;
margin-bottom: 15px;
}
.harfprice-ttl03 span {
color: #fc817b;
font-size: 130%;
}
.hp-price02 {
display: flex;
}
.hp-price02 dt {
margin-right: 25px;
width: 177px;
}
.hp-price02 dd {
width: 250px;
}
.hp-price02 dd p:first-child {
line-height: 2.1em;
}
.hp-txt02 {
margin: 0;
color: #754c24;
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 24px;
}
.harfprice-inner02 {
background: #fff;
border-radius: 10px;
padding: 40px 30px 30px;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.hp-img03 {
float: left;
margin-right: 10px;
}
.hp-ctn01 {
width: 680px;
float: right;
}
.hp-list01 {
display: flex;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 10px;
}
.hp-list01 li {
width: 140px;
text-align: center;
background: #603813;
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 16px;
color: #fff;
border-radius: 8px;
padding: 11px 0;
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
align-items: center; /* 縦方向中央揃え */
-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
justify-content: center; /* 横方向中央揃え */
}
.hp-list01 li:after {
content: url(/images/harfprice_camp_img07.png);
position: absolute;
left: calc(100% + 8px);
top: calc(50% - 12px);
line-height: 0;
font-size: 0;
}
.hp-list01 li:last-child:after {
display: none;
}
.hp-price03 {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.hp-price04 {
color: #fc817b;
font-weight: bold;
font-size: 83px;
font-family: 'Yu Gothic bold';
margin-bottom: 10px;
line-height: 1em;
letter-spacing: -1.5px;
position: relative;
text-align: center;
}
.hp-oldprice {
color: #c69c6d;
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 50px;
line-height: 1em;
margin: 0;
}
.hp-oldprice span {
position: relative;
}
.hp-oldprice span:before {
content: '';
position: absolute;
width: 100%;
border-bottom: 2px solid #fa4a70;
left: 0;
top: calc(50% - 5px);
}
.hp-oldprice span:after {
content: '';
position: absolute;
width: 100%;
border-bottom: 2px solid #fa4a70;
left: 0;
top: calc(50% + 5px);
}
.hp-newprice {
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 100px;
line-height: 1em;
color: #fc817b;
padding-right: 30px;
margin: 0;
}
.hp-note02 {
text-align: right;
color: #754c24;
font-weight: bold;
font-family: 'Yu Gothic bold';
margin: 0;
}
.hp-txt03 {
margin: 0;
text-align: right;
color: #754c24;
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 16px;
}
.hp-left02 {
float: left;
width: 580px;
box-sizing: border-box;
}
.h-price04 {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.h-price04 li {
width: 280px;
border: 2px solid #ffdbdb;
background: #fff7f7;
border-radius: 8px;
text-align: center;
padding: 8px 0 5px;
}
.h-price04 dt {
color: #754c24;
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 18px;
}
.h-price04 dt span {
font-size: 130%;
color: #fc817b;
letter-spacing: 2px;
}
.h-price04 dd {
color: #754c24;
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 60px;
line-height: 1.2em;
}
.h-price04 dd span {
font-size: 70%;
}
.hp-right02 {
/*background:#fa4a70;*/
border-radius: 8px;
/*width: 450px;*/
/*height: 200px;*/
float: right;
z-index: 0;
/*padding: 32px 10px;*/
box-sizing: border-box;
position: relative;
/*margin: 45px 0 0 0;*/
}
.hp-right02_img {
background: url(/images/harfprice_camp_img12.png) no-repeat;
position: absolute;
background-size: contain;
width: 100%;
top: -40px;
}
/*.hp-right02:before{
content: '';
position: absolute;
width: calc(100% - 10px);
height: calc(100% - 10px);
box-sizing: border-box;
border: 1px solid #fff;
border-radius: 8px;
top: 5px;
left: 5px;
}*/
.hp-txt04 {
color: #fff;
text-align: center;
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 16px;
margin-bottom: 10px;
margin-top: 60px;
}
.hp-txt05 {
text-align: center;
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 55px;
color: #fff;
line-height: 1em;
margin-bottom: 10px;
}
.hp-txt06 {
text-align: center;
color: #fff;
font-weight: bold;
font-family: 'Yu Gothic bold';
margin: 0;
}
.hp-list02 {
background: #fff6eb;
border-radius: 8px;
padding: 20px 30px 10px 30px;
}
.hp-list02 li {
padding-left: 15px;
margin-bottom: 5px;
position: relative;
}
.hp-list02 li:before {
content: '・';
position: absolute;
left: 0;
top: 12px;
line-height: 0;
}
.ranking-list {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.ranking-list li {
background: #e6eff6;
width: 30%;
text-align: center;
padding: 30px 0 20px;
border: 5px solid #5190b9;
border-radius: 10px;
position: relative;
margin-top: 40px;
}
.ranking-list li img {
position: absolute;
top: -40px;
left: 35%;
}
.ranking-acc {
margin-bottom: 20px;
}
.ranking-acc dt {
color: #534741;
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 20px;
position: relative;
border-radius: 5px;
border: 1px solid #eee8e0;
-webkit-box-shadow: 3px 3px 0px 0px rgba(170, 170, 170, 0.2);
-moz-box-shadow: 3px 3px 0px 0px rgba(170, 170, 170, 0.2);
box-shadow: 3px 3px 0px 0px rgba(170, 170, 170, 0.2);
margin-bottom: 15px;
padding: 13px 210px 13px 40px;
cursor: pointer;
}
.ranking-acc dt:before {
content: '';
position: absolute;
background: #4f91bc;
width: 10px;
height: 10px;
border-radius: 50%;
left: 20px;
top: calc(50% - 5px);
}
.ranking-acc dt span {
position: absolute;
right: 10px;
top: 0;
height: 100%;
line-height: 0;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
}
.ranking-acc dt:hover {
opacity: 0.8;
}
.ranking-acc dd {
padding: 20px;
background: #f7f7f7;
border-radius: 10px;
display: none;
}
.ranking-acc th{
background: #e5f4f9;
font-weight: bold;
color: #534741;
text-align: left;
}
.under-ranking-area th, .under-ranking-area td {
text-align: center;
color: #534741;
border: 1px solid #ddd0c2;
}
.under-ranking-area tr:nth-child(odd) td {
background: #eff8fb;
}
.under-ranking-area tr:nth-child(even) td {
background: #fff;
}
.under-ranking-area tr:nth-child(odd) td:nth-child(odd), .under-ranking-area tr:nth-child(even) td:nth-child(odd) {
font-weight: bold;
font-family: 'Yu Gothic bold';
font-size: 16px;
}
.confirm .dispnone {
display: none;
}
.slick-slide img[src="https://i.ytimg.com/vi/Ue7_zkUzkUU/default.jpg"] {
/*height: 320px;*/
width: 100%;
}
select[name="month"] {
width: 32%;
margin: 10px 0px 10px 20px;
}
select[name="day"] {
width: 32%;
}
select[name="hour"] {
width: 40%;
margin: 0 10px 0 0;
}
select[name="minute"] {
width: 40%;
}
/* 画像検索用 */
.image-search-types {
margin-bottom: 10px;
}
.image-search-types li {
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
.image-search-types li input[type=radio] {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.image-search-types li input[type=radio] + label {
padding-left: 34px;
height: 24px;
display: inline-block;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 18px;
color: #534741;
font-weight: bold;
vertical-align: middle;
cursor: pointer;
background-image: url(/images/search-radio.png);
}
.image-search-types li input[type=radio]:checked + label {
background-position: 0 -24px;
}
.image-search-breed {
display: none;
}
.image-search-breed.active {
display: block;
}
.image-search-result-row {
clear: both;
}
.image-search-result-row:before, .image-search-result-row:after {
content: ' ';
display: table;
}
.image-search-result-row:after {
clear: both;
}
.image-search-result-col {
float: left;
width: 25%;
}
.image-search-result-col:nth-child(4n + 1) {
clear: left;
}
.image-search-result-col > a {
display: block;
padding: 10px;
color: #534741;
text-decoration: none;
}
.image-search-result-col > a:hover {
opacity: 0.7;
}
.image-search-result-col p {
margin: 0 0 5px;
font-size: 12px;
}
.image-search-result-image {
position: relative;
margin: -10px -10px 10px;
padding-top: 72%;
overflow: hidden;
}
.image-search-result-image > img {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.image-search-result-col dl {
padding-top: 5px;
font-size: 12px;
font-weight: bold;
}
.image-search-result-col dl div {
margin-bottom: 0.5em;
}
.image-search-result-col dl:before, .image-search-result-col dl:after {
content: ' ';
display: table;
}
.image-search-result-col dl:after {
clear: both;
}
.image-search-result-col dl dt {
float: left;
width: 80px;
font-size: 12px;
line-height: 1.2;
}
.image-search-result-col dl dd {
margin-left: 85px;
font-size: 12px;
line-height: 1.2;
}
.image-search-result-col dl dd.cate01 {
background: #82bdff;
margin: 0;
color: #fff;
display: inline-block;
padding: 2px 20px;
font-weight: bold;
border-radius: 5px;
}
.image-search-result-col dl dd.cate02 {
background: #fc817b;
margin: 0;
color: #fff;
display: inline-block;
padding: 2px 20px;
font-weight: bold;
border-radius: 5px;
}
.image-search-result-col dl dd:after {
content: ' ';
display: block;
clear: left;
}
.image-search-form .uploaded {
float: left;
width: 20%;
margin-right: 10px;
padding: 15px;
border: 1px solid #64c9e1;
border-radius: 10px;
text-align: center;
}
.image-search-form .uploaded img {
max-height: 160px;
}
.image-search-form .uploaded p {
margin: 5px 0;
font-weight: bold;
line-height: 1;
}
.image-search-form-inputs {
float: right;
width: 72%;
}
.image-search-form .search03-below-left {
float: left;
width: 50%;
}
.image-search-form .search03-below-right {
float: right;
width: 48%;
}
.image-search-form .search03-top-i01 {
background: url(/images/box02_bg.jpg) repeat;
margin-bottom: 5px;
border-radius: 10px;
border: 2px dashed #d3bea6;
position: relative;
text-align: center;
height: 100px;
font-size: 14px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.image-search-form .search03-top-i01 > span {
position: relative;
z-index: 1;
}
.image-search-form .search03-img {
display: none;
position: absolute;
right: 0;
bottom: -2px;
width: 100px;
margin: 0;
}
.image-search-form .search-pic-up {
background: #e9f3f9;
border-radius: 10px;
padding: 10px 20px;
margin-bottom: 20px;
}
.image-search-form .search-pic-btn {
position: relative;
background: #534741;
border-radius: 8px;
display: inline-block;
vertical-align: middle;
padding: 3px 20px;
color: #fff;
font-weight: bold;
font-size: 16px;
margin: 0;
}
.image-search-form .search-pic-btn span {
display: inline-block;
width: 20px;
vertical-align: middle;
line-height: 0;
margin-right: 10px;
}
.image-search-form .search-pic-btn input {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.image-search-form .search-pic-ttl {
font-size: 12px;
color: #534741;
font-weight: bold;
margin-bottom: 5px;
}
.image-search-form .search03-below-type-ttl {
position: relative;
margin: 0 0 5px;
padding-left: 24px;
font-size: 18px;
font-weight: bold;
color: #64c9e1;
}
.image-search-form .search03-below-type-ttl:after {
position: absolute;
width: 10px;
height: 10px;
border: #64c9e1 3px solid;
border-radius: 50%;
content: '';
left: 0;
top: 3px;
}
#search03 .image-search-types {
float: none;
width: auto;
}
.title_brown {
margin: 0 0 0.5em;
font-weight: bold;
font-family: 'Yu Gothic bold';
color: #534741;
}
.fz230 {
font-size: 230%;
}
.fz180 {
font-size: 180%;
}
.breeder-txtbox {
padding: 7% 5% 12% 5%;
margin: 0;
background: url(/images/breeder_notice_bg.jpg) center center no-repeat;
}
.breeder-txtbox p {
margin: 0;
}
.t_center {
text-align: center;
}
.list_type_column2 li {
width: 40%;
}
.list_type_column2 li:nth-child(1) {
float: left;
}
.list_type_column2 li:nth-child(2) {
float: right;
}
.breeder_list {
min-height: 470px;
}
.list_type_column2 li {
padding: 4%;
margin-bottom: 50px;
border-top: solid 1px #eee8e0;
border-right: solid 3px #eee8e0;
border-bottom: solid 3px #eee8e0;
border-left: solid 1px #eee8e0;
border-radius: 10px;
}
.list_number {
padding: 2% 2% 1.5% 5%;
;
margin: 0;
background: #f8f3e6;
border-radius: 10px;
}
.list_number span {
margin-right: 2%;
font-family: 'Roboto', sans-serif;
color: #0771ba;
font-size: bold;
}
.img_center {
text-align: center;
margin: 0;
}
.contents_footer li {
display: inline-block;
width: 49%;
padding: 0 2% 0 0;
box-sizing: border-box;
vertical-align: top;
}
.contents_footer li:nth-child(2) {
width: 49%;
}
.contents_footer li a:hover {
opacity: 0.7;
}
.list_type_column2:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.frame03 {
background-color: #f8f3e6;
padding: 20px;
border-radius: 5px;
}
.frame01_top {
position: absolute;
top: -20px;
left: -20px;
width: 760px;
z-index: 10000;
}
.family, .family .child01 ul.child-list {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.family .child01 ul.child-list li {
margin-right: 1%;
}
.family .parent01 {
width: 100%;
background: #fff;
border-radius: 10px;
vertical-align: top;
padding: 10px;
margin-bottom: 20px;
position: relative;
}
.family .child01 {
width: calc(100% - 20px);
background: #fff;
border-radius: 10px;
vertical-align: top;
padding: 10px;
margin-bottom: 20px;
position: relative;
}
.family .parent01 dl.mother {
width: 47%;
float: left;
}
.family .parent01 dl.father {
width: 47%;
float: right;
}
.family .parent01 dl dt {
padding: 7px 15px;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 20px;
background: url(/images/under_h3_bg.png) left bottom repeat-x;
text-align: center;
margin-bottom: 10px;
}
.family .parent01 dd p img {
border-radius: 5px;
float: left;
width: 40%;
}
.family .parent01 dd ul {
padding-left: 45%;
}
.family .child01 > p {
padding: 7px 15px;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 17px;
color: #534741;
background: url(/images/under_h3_bg.png) left bottom repeat-x;
}
.family .child01 ul.child-list li {
width: 32%;
text-align: center;
line-height: 20px;
margin-bottom: 10px;
font-size: 13px;
}
.family .child01 ul.child-list li img {
border-radius: 5px;
}
.parentbox {
width: 100%;
}
.mid-ttl02 {
background: url(/images/icon01.jpg) no-repeat left;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 20px;
color: #534741;
padding-left: 28px;
}
.txt-blue {
color: #2080be;
}
.clear_both {
clear: both;
}
a.tellink {
text-decoration: none;
color: #333;
}
.buy-btn {
text-align: center;
margin: 0;
}
.buy-btn a {
display: inline-block;
color: #fff;
font-weight: bold;
font-size: 20px;
width: 360px;
background: #f5a868 url(/images/idx_arrow03.png) 24px center no-repeat;
border-radius: 100px;
text-decoration: none;
padding: 18px 0;
border-bottom: 5px solid #dc975d;
}
.buy-btn a:hover {
opacity: 0.7;
}
#tglBtn {
background: #333;
border: none;
border-radius: 3px;
color: #fafafa;
padding: 20px;
}
#tglBtn:hover {
cursor: pointer;
}
/** * mwform */
.mwform-checkbox-field label, .mwform-radio-field label {
font-weight: normal;
margin-bottom: 0;
display: inline-block;
}
.mwform-radio-field input {
margin-right: 5px;
vertical-align: -0.1em;
}
.mwform-checkbox-field input {
margin-right: 5px;
vertical-align: -0.2em;
}
.mwform-checkbox-field input, .mwform-radio-field input {
margin-right: 5px;
}
.mwform-radio-field.horizontal-item {
padding-left: 2px;
}
.mw_wp_form .horizontal-item + .horizontal-item {
margin-left: 0 !important;
}
.mw_wp_form .horizontal-item {
margin-right: 10px;
}
/** * mwform */
.wpcf7-form-control-wrap input {
vertical-align: -0.2em;
}
.image-search-loading {
position: fixed;
top: 100%;
left: 0;
right: 0;
bottom: 0;
z-index: 1200;
overflow: hidden;
background-color: rgba(0, 0, 0, .7);
}
.image-search-loading:before {
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 400px;
height: 400px;
max-width: 80%;
max-height: 80%;
margin: auto;
background: url(/images/image-search-loading.png) 0 0 no-repeat;
animation: image-search-loading 5s linear 0s infinite;
-ms-animation: image-search-loading 5s linear 0s infinite;
-moz-animation: image-search-loading 5s linear 0s infinite;
-webkit-animation: image-search-loading 5s linear 0s infinite;
}
@media screen and (max-width:768px) {
.image-search-loading:before {
zoom: .6;
}
}
.image-search-loading.active {
top: 0;
}
@keyframes image-search-loading {
0% {
background-position: 0 0;
}
14.99% {
background-position: 0 0;
}
15% {
background-position: 0 -400px;
}
29.99% {
background-position: 0 -400px;
}
30% {
background-position: 0 -800px;
}
44.99% {
background-position: 0 -800px;
}
45% {
background-position: 0 -1200px;
}
59.99% {
background-position: 0 -1200px;
}
60% {
background-position: 0 -1600px;
}
100% {
background-position: 0 -1600px;
}
}
/*@-ms-keyframes image-search-loading {
0% { background-image: url(/images/image-search-loading-01.png); }
14% { background-image: url(/images/image-search-loading-01.png); }
15% { background-image: url(/images/image-search-loading-02.png); }
29% { background-image: url(/images/image-search-loading-02.png); }
30% { background-image: url(/images/image-search-loading-03.png); }
44% { background-image: url(/images/image-search-loading-03.png); }
45% { background-image: url(/images/image-search-loading-04.png); }
59% { background-image: url(/images/image-search-loading-04.png); }
60% { background-image: url(/images/image-search-loading-05.png); }
100% { background-image: url(/images/image-search-loading-05.png); }
}*/
@-moz-keyframes image-search-loading {
0% {
background-position: 0 0;
}
14.99% {
background-position: 0 0;
}
15% {
background-position: 0 -400px;
}
29.99% {
background-position: 0 -400px;
}
30% {
background-position: 0 -800px;
}
44.99% {
background-position: 0 -800px;
}
45% {
background-position: 0 -1200px;
}
59.99% {
background-position: 0 -1200px;
}
60% {
background-position: 0 -1600px;
}
100% {
background-position: 0 -1600px;
}
}
@-webkit-keyframes image-search-loading {
0% {
background-position: 0 0;
}
14.99% {
background-position: 0 0;
}
15% {
background-position: 0 -400px;
}
29.99% {
background-position: 0 -400px;
}
30% {
background-position: 0 -800px;
}
44.99% {
background-position: 0 -800px;
}
45% {
background-position: 0 -1200px;
}
59.99% {
background-position: 0 -1200px;
}
60% {
background-position: 0 -1600px;
}
100% {
background-position: 0 -1600px;
}
}
.picked-left, .picked-right {
position: fixed;
top: 0;
left: 0;
z-index: 10050;
width: 30px;
height: 26px;
background: url(/images/search_bg02.png) no-repeat 0 0;
}
.picked-left {
transform: rotate(-15deg) translate(-30px, 10px);
}
.picked-right {
transform: rotate(15deg) translate(30px, -10px);
}
.shop-select {
position: relative;
}
.shop-select-help {
display: none;
position: absolute;
top: -20px;
left: 100%;
z-index: 10050;
width: 180px;
margin-left: 10px;
padding: 7px 10px;
border-radius: 10px;
background-color: #a56437;
color: white;
}
.shop-select-help p {
margin: 8px 0;
font-size: 12px;
line-height: 1.3;
}
.shop-select-help:before {
content: ' ';
display: block;
position: absolute;
top: 40px;
left: -20px;
border: 10px solid transparent;
border-right-color: #a56437;
}
.shop-select:hover .shop-select-help {
display: block;
}
.picker-memo {
position: relative;
}
.picker-memo-editor {
display: none;
position: absolute;
left: 20px;
bottom: 40px;
padding: 20px;
background-color: white;
border-radius: 15px;
}
.picker-memo.active .picker-memo-editor {
display: block;
}
.picker-memo-text pre {
box-sizing: border-box;
width: 100%;
margin-top: 5px;
padding: 10px 0;
border: 0;
border-radius: 5px;
background-color: transparent;
font-size: inherit;
font-family: inherit;
white-space: pre-wrap;
word-break: break-all;
}
.picker-memo-editor textarea {
width: 100%;
box-sizing: border-box;
color: #534741;
font-size: 12px;
font-weight: bold;
border: none;
background-color: #e2f0ff;
border-radius: 5px;
margin-bottom: 1px;
padding: 10px;
position: relative;
z-index: 0;
border-top: 2px solid #b5d7ff;
border-right: 2px solid #b3d6ff;
resize: auto;
max-width: 500px;
max-height: 300px;
}
.under .picker-memo-edit, .picker-memo-editor a {
display: inline-block;
padding: 6px 8px;
border: 2px solid transparent;
color: #fff;
text-decoration: none;
background: #64c9e1;
border-radius: 5px;
font-weight: bold;
font-size: 13px;
line-height: 1;
margin-top: 6px;
}
.search-counter {
display: none;
position: absolute;
top: -50px;
right: -10px;
z-index: 10;
width: 72px;
height: 72px;
text-align: center;
border-radius: 36px;
background-color: #e9f3f9;
background-color: rgba(233, 243, 249, .8);
color: #64c9e1;
font-size: 10px;
font-weight: bold;
line-height: 1;
-webkit-box-shadow: 2px 5px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: 2px 5px 0px rgba(0, 0, 0, .1);
box-shadow: 2px 5px 0px rgba(0, 0, 0, .1);
-webkit-animation: search-counter .5s ease 0s infinite alternate;
-moz-animation: search-counter .5s ease 0s infinite alternate;
animation: search-counter .5s ease 0s infinite alternate;
}
.search-counter.active {
display: table;
}
.search-counter > div {
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
/*
.search-counter>div:before {
content: ' ';
position: absolute;
left: 50%;
bottom: -25px;
border: 10px solid transparent;
border-top: 15px solid rgba(0,0,0,.1);
margin-left: -8px;
}
.search-counter>div:after {
content: ' ';
position: absolute;
left: 50%;
bottom: -22px;
border: 10px solid transparent;
border-top: 15px solid #e9f3f9;
border-top-color: rgba(233,243,249,.8);
margin-left: -10px;
}
*/
.search-counter > div > span {
font-size: 15px;
}
@-webkit-keyframes search-counter {
0% {
margin-top: 0;
}
100% {
margin-top: -6px;
}
}
@-moz-keyframes search-counter {
0% {
margin-top: 0;
}
100% {
margin-top: -6px;
}
}
@keyframes search-counter {
0% {
margin-top: 0;
}
100% {
margin-top: -6px;
}
}
.idx-search-submit-inner {
display: inline-block;
position: relative;
}
.search-submit-inner {
position: relative;
}
.under .idx-search-submit .search-counter {
top: -65px;
width: 80px;
height: 80px;
border-radius: 40px;
font-size: 12px;
font-weight: bold;
}
.under .idx-search-submit .search-counter > div > span {
font-size: 18px;
}
.under .idx-search-submit .search-counter > div:before {
bottom: -25px;
}
.under .search-counter > div:after {
bottom: -20px;
}
/** 180223 add ***/
.doglist-frame {
border-radius: 0 0 10px 10px;
background: #F3EDE1;
padding: 20px;
position: relative;
}
.doglist-frame:before {
content: '';
position: absolute;
width: 100%;
height: 15px;
background: url(/images/doglist_bg01.jpg) 0 0 repeat-x;
top: 0;
left: 0;
border-radius: 10px 10px 0 0;
}
.doglist-frame .dog-list {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.doglist-frame .dog-list li a {
text-decoration: underline;
color: #534741;
font-weight: bold;
}
.doglist-frame .dog-list li a:hover {
text-decoration: none;
color: #534741;
opacity: 0.8;
}
.doglist-frame .dog-list li {
position: relative;
padding-left: 25px;
width: 45%;
line-height: 2.5em;
margin-bottom: 20px;
}
.doglist-frame .dog-list li::before {
position: absolute;
width: 7px;
height: 7px;
content: '';
left: 0;
top: 10px;
margin-top: 1px;
border-radius: 50%;
border: #64c9e1 3px solid;
}
.doglist-frame h4 {
padding-left: 24px;
font-size: 18px;
color: #534741;
background: url(/images/under_h3_bg.png) 0 100% repeat-x;
/*border-bottom: 2px dotted #C7B299;*/
padding: 22px 24px;
text-align: center;
}
.under .doglist-frame h4:after {
border: none;
content: none;
}
.doglist-frame h4#dog_h401 span {
background: url(/images/doglist_h401.png) 100% no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
height: 45px;
}
.doglist-frame h4#dog_h402 span {
background: url(/images/doglist_h402.png) 100% no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
height: 65px;
}
.doglist-frame h4#dog_h403 span {
background: url(/images/doglist_h403.png) 100% no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
.doglist_anchor {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.doglist_anchor li a {
margin: 0 5px;
padding: 12px 0;
color: #fff;
text-decoration: none;
background: #614442;
border-radius: 5px;
font-weight: bold;
font-size: 20px;
width: 240px;
text-align: center;
display: block;
}
.doglist_anchor li a:hover {
opacity: 0.8;
}
.doglist_anchor li.dog_h401 a {
background: url(/images/doglist_btn01.png) #614442 100% no-repeat;
background-position-x: 48px;
background-position-y: center;
}
.doglist_anchor li.dog_h402 a {
background: url(/images/doglist_btn02.png) #614442 100% no-repeat;
background-position-x: 40px;
background-position-y: center;
}
.doglist_anchor li.dog_h403 a {
background: url(/images/doglist_btn03.png) #614442 100% no-repeat;
background-position-x: 24px;
background-position-y: center;
}
.doglist_outer {
position: relative;
}
.doglist_top {
position: absolute;
right: -40px;
}
.under .idx-search-submit.zukan-c a {
width: 100%;
max-width: 480px;
}
/*** 181023 add ***/
.protect_tit {
padding: 55px 0 15px;
position: relative;
text-align: center;
font-size: 24px;
color: #a56437;
line-height: 24px;
font-family: 'Yu Gothic bold';
font-weight: bold;
}
.protect_tit::after {
position: absolute;
content: ' ';
background: url(/images/protect_tit04_under.png) no-repeat;
width: 313px;
height: 4px;
left: calc(50% - 156px);
bottom: 0;
}
.protect_box01 {
margin: 80px 10px 19px;
padding: 30px 33px 30px;
background-color: #f9f8ed;
position: relative;
}
.protect_box01::before {
content: ' ';
position: absolute;
background: url(/images/protect_box01_bgtop.png) repeat-y;
width: 100%;
height: 20px;
left: 0;
top: -20px;
}
.protect_box01::after {
content: ' ';
position: absolute;
background: url(/images/protect_img02.png) repeat-y;
width: 162px;
height: 106px;
top: -80px;
left: 65px;
}
.protect_box01 .protect_tit::before {
position: absolute;
content: ' ';
background: url(/images/protect_tit01_img.png) no-repeat;
background-size: cover;
width: 86px;
height: 40px;
left: calc(50% - 42px);
top: 0;
}
.protect_box01 .txt_large_o {
color: #64c9e1;
font-size: 24px;
text-align: center;
font-family: 'Yu Gothic bold';
font-weight: bold;
}
.protect_box02 {
margin: 0 0 100px;
}
.protect_box02 .protect_tit::before {
position: absolute;
content: ' ';
background: url(/images/protect_tit02_img.png) no-repeat;
background-size: cover;
width: 86px;
height: 40px;
left: calc(50% - 42px);
top: 0;
}
.protect_box02 .protect_rule {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 20px;
}
.protect_box02 .protect_rule li {
width: 200px;
padding: 65px 0 0;
margin-bottom: 85px;
position: relative;
}
.protect_box02 .protect_rule li:nth-of-type(n+4) {
margin-bottom: 70px;
}
.protect_box02 .protect_rule li::before {
position: absolute;
content: ' ';
background-size: cover;
width: 54px;
height: 53px;
left: -25px;
top: 0;
}
.protect_box02 .protect_rule li:nth-child(1)::before {
background: url(/images/protect_num_img01.png) no-repeat;
}
.protect_box02 .protect_rule li:nth-child(2)::before {
background: url(/images/protect_num_img02.png) no-repeat;
}
.protect_box02 .protect_rule li:nth-child(3)::before {
background: url(/images/protect_num_img03.png) no-repeat;
}
.protect_box02 .protect_rule li:nth-child(4)::before {
background: url(/images/protect_num_img04.png) no-repeat;
}
.protect_box02 .protect_rule li:nth-child(5)::before {
background: url(/images/protect_num_img05.png) no-repeat;
}
.protect_box02 .protect_rule li:nth-child(6)::before {
background: url(/images/protect_num_img06.png) no-repeat;
}
.protect_box02 .protect_rule li::after {
position: absolute;
content: ' ';
background: url(/images/protect_arrow_img.png) no-repeat;
background-size: cover;
width: 8px;
height: 12px;
right: -30px;
top: calc(50% - 6px);
}
.protect_box02 .protect_rule li:last-child::after {
display: none;
}
.protect_box02 .protect_rule li:nth-child(3n)::after {
display: none;
}
.protect_box02 .protect_rule li .rule_tit {
height: 55px;
margin-bottom: 10px;
}
.protect_box02 .protect_rule li .rule_tit span {
background: linear-gradient(transparent 50%, #fdf795 0%);
color: #a56437;
font-weight: bold;
font-size: 18px;
}
.protect_box02 .protect_rule li img {
width: 100%;
}
.protect_box03 {
margin: 0 0 100px;
}
/* acordion */
.protect_box03 .accbox {
margin-bottom: 75px;
position: relative;
}
.protect_box03 .accbox label {
display: block;
margin: 1px 0;
cursor: pointer;
transition: all 0.5s;
font-size: 15px;
text-align: left;
box-sizing: border-box;
}
.protect_box03 .accbox label:before {
content: url(/images/protect_a_on.png);
float: right;
}
.protect_box03 .accbox label:hover, .protect_box03 .accbox input:checked + label {}
.protect_box03 .accbox input {
display: none;
}
.protect_box03 .accbox .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
.protect_box03 .accbox .accshow table td.td-heading-2 {
width: 30%;
}
.protect_box03 .accbox .accshow table.tbl td.td-heading-2 {
width: 20%;
}
.protect_box03 .accbox .accshow table td.td-heading-3 {
width: auto;
}
.protect_box03 .accbox .accshow .box-two {
width: 65%;
margin-bottom: 0;
}
.protect_box03 .accbox .accshow .box-two:last-child {
width: 29%;
}
.cssacc:checked + label + .accshow {
height: auto;
padding: 20px 0;
opacity: 1;
}
.cssacc:checked + label:before {
content: url(/images/protect_a_off.png);
float: right;
}
.protect_box03 .protect_tit::before {
position: absolute;
content: ' ';
background: url(/images/protect_tit03_img.png) no-repeat;
background-size: cover;
width: 86px;
height: 40px;
left: calc(50% - 42px);
top: 0;
}
.protect_box03 .right_img .animal_img {
float: right;
width: 110px;
margin-bottom: 0;
position: absolute;
right: 0;
top: 50px;
}
.protect_box03 .left_img .animal_img {
float: left;
width: 110px;
margin-bottom: 0;
position: absolute;
left: 0;
top: 50px;
}
.protect_box03 .protect_q {
position: relative;
padding-bottom: 10px;
font-size: 15px;
font-family: 'Yu Gothic bold';
}
.protect_box03 .protect_q::before {
content: url(/images/protect_q_img.png);
width: 12px;
height: 11px;
position: relative;
margin-right: 5px;
}
.protect_box03 .protect_q::after {
position: absolute;
content: ' ';
background: url(/images/protect_q_tit_under.png) no-repeat;
width: 600px;
height: 3px;
left: 0;
bottom: 0;
}
.protect_box03 .protect_q span {
position: relative;
font-size: 18px;
font-weight: bold;
padding-right: 20px;
}
.protect_box03 .right_img .protect_txtbox {
float: left;
width: 600px;
}
.protect_box03 .left_img .protect_txtbox {
float: right;
width: 600px;
}
.protect_box03 .right_img .protect_txtbox .protect_a {
position: relative;
width: 578px;
background: #FAF7EF;
padding: 10px;
text-align: left;
border: 1px solid #E7D7AF;
color: #3c3c3c;
font-size: 16px;
border-radius: 5px;
}
.protect_box03 .right_img .protect_txtbox .protect_a:after, .protect_box03 .right_img .protect_txtbox .protect_a:before {
border: solid transparent;
content: '';
height: 0;
width: 0;
pointer-events: none;
position: absolute;
left: 100%;
top: 20px;
}
.protect_box03 .right_img .protect_txtbox .protect_a:after {
border-color: #faf7ef00;
border-top-width: 13px;
border-bottom-width: 0;
border-left-width: 33px;
border-right-width: 33px;
margin-top: -5px;
border-left-color: #FAF7EF;
}
.protect_box03 .right_img .protect_txtbox .protect_a:before {
border-color: #e7d7af00;
border-top-width: 15px;
border-bottom-width: 0px;
border-left-width: 39px;
border-right-width: 39px;
margin-top: -6px;
margin-left: 1px;
border-left-color: #E7D7AF;
}
.protect_box03 .left_img .protect_txtbox .protect_a {
position: relative;
width: 578px;
background: #FAF7EF;
padding: 10px;
text-align: left;
border: 1px solid #E7D7AF;
color: #3c3c3c;
font-size: 16px;
border-radius: 5px;
}
.protect_box03 .left_img .protect_txtbox .protect_a:after, .protect_box03 .left_img .protect_txtbox .protect_a:before {
border: solid transparent;
content: '';
height: 0;
width: 0;
pointer-events: none;
position: absolute;
right: 100%;
top: 20px;
}
.protect_box03 .left_img .protect_txtbox .protect_a:after {
border-color: #e7d7af00;
border-top-width: 13px;
border-bottom-width: 0;
border-left-width: 33px;
border-right-width: 33px;
margin-top: -5px;
border-right-color: #FAF7EF;
}
.protect_box03 .left_img .protect_txtbox .protect_a:before {
border-color: #e7d7af00;
border-top-width: 15px;
border-bottom-width: 0px;
border-left-width: 39px;
border-right-width: 39px;
margin-top: -6px;
margin-right: 1px;
border-right-color: #E7D7AF;
}
.protect_box03 .protect_txtbox .protect_a .accshow p {
margin-bottom: 0;
font-size: initial;
}
.protect_box04 {
margin: 0 0 100px;
}
.protect_box04 .protect_tit::before {
position: absolute;
content: ' ';
background: url(/images/protect_tit04_img.png) no-repeat;
background-size: cover;
width: 86px;
height: 40px;
left: calc(50% - 42px);
top: 0;
}
.protect_box04 .afterimg_left {
background: url(/images/protect_afterimg_bg_l.png) no-repeat;
min-height: 640px;
margin-bottom: 150px;
}
.protect_box04 .afterimg_right {
background: url(/images/protect_afterimg_bg_r.png) no-repeat;
min-height: 640px;
margin-bottom: 150px;
}
.protect_box04 .afterimg_right .afterimg_upper, .protect_box04 .afterimg_left .afterimg_upper {
margin-bottom: 60px;
}
.protect_box04 .afterimg_left .afterimg_upper .imgarea {
float: left;
position: relative;
}
.protect_box04 .afterimg_right .afterimg_upper .imgarea {
float: right;
position: relative;
}
.protect_box04 .afterimg_upper .imgarea .afterimg_prof {
width: 169px;
height: 103px;
background: url(/images/protect_afterprof_bg.png) no-repeat;
background-size: cover;
font-family: 'Yu Gothic bold';
padding: 35px 30px;
}
.protect_box04 .afterimg_upper .imgarea .afterimg_prof li {
color: #FFF;
font-weight: bold;
font-family: 'Yu Gothic bold';
}
.protect_box04 .afterimg_upper .imgarea .afterimg_prof li:nth-child(1) {
font-size: 20px;
}
.protect_box04 .afterimg_upper .imgarea .afterimg_prof li:nth-child(2) {
font-size: 14px;
}
.protect_box04 .afterimg_upper .imgarea .afterimg_prof li:nth-child(3) {
font-size: 18px;
}
.protect_box04 .afterimg_left .afterimg_upper .imgarea .afterimg_prof {
position: absolute;
bottom: -40px;
right: -156px;
text-align: right;
}
.protect_box04 .afterimg_right .afterimg_upper .imgarea .afterimg_prof {
position: absolute;
bottom: -40px;
left: -156px;
text-align: right;
}
.protect_box04 .afterimg_right .afterimg_upper .afterimg_prof {}
.protect_box04 .afterimg_left .afterimg_upper .afterimg_catch {
float: right;
width: 240px;
font-family: 'Yu Gothic bold';
font-size: 28px;
font-weight: bold;
color: #a56437;
line-height: 2.5em;
margin-bottom: 0;
text-align: right;
}
.protect_box04 .afterimg_right .afterimg_upper .afterimg_catch {
float: left;
width: 240px;
font-family: 'Yu Gothic bold';
font-size: 28px;
font-weight: bold;
color: #a56437;
line-height: 2.5em;
margin-bottom: 0;
text-align: left;
}
.protect_box04 .afterimg_left .after_txt {
width: 490px;
float: right;
}
.protect_box04 .afterimg_right .after_txt {
width: 490px;
float: left;
}
.protect_box04 .after_txt p {
line-height: 2em;
}
.protect_box04 .after_txt p:last-child {
margin-bottom: 0;
}
.protect_btn {
height: 50px;
background: url(/images/protect_btn_bg02.png) center top;
border-radius: 40px;
max-width: 350px;
background-size: cover;
box-shadow: 0px 3px #0071b1;
display: flex;
justify-content: center;
margin: 0 auto;
transition: 0.5s;
}
.protect_btn:hover {
opacity: 0.7;
transition: 0.5s;
}
.protect_btn a {
text-decoration: none;
color: #FFF;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 18px;
width: 100%;
text-align: center;
height: 100%;
line-height: 50px;
}
/** 181023 add end **/
/** 181024 protect_list add **/
.protect-list {
margin: 0 0 30px;
}
.protect-list.p_rare-list > li {
width: 100%;
}
.protect-list > li {
width: 532px;
box-sizing: border-box;
float: left;
margin: 0 16px 27px 0;
background: rgba(0, 0, 0, 0.05);
position: relative;
z-index: 0;
border-radius: 10px;
padding: 10px 20px 20px;
}
.protect-list > .search-list > li:after {
content: '';
}
.protect-list > li:before {
content: '';
position: absolute;
width: calc(100% - 3px);
height: calc(100% - 3px);
box-sizing: border-box;
border-radius: 10px;
background: #fff;
border: 1px solid #e2dcd5;
z-index: -2;
top: 0;
left: 0;
}
.protect-list .protect-new-temp {
width: 100%;
display: flex;
align-items: flex-end;
border-bottom: 1px solid #ccb9a2;
margin-bottom: 30px;
box-sizing: border-box;
position: relative;
}
.protect-list .protect-new-name {
width: calc(100% - 220px);
position: relative;
}
.protect-list .protect-new-name::after {
content: url(/images/protectlist_img01.png);
position: absolute;
top: -20px;
left: 120px;
}
.protect-list .protect-new-temp .search-new-name {}
.protect-list .pets-name {
border-bottom: none;
margin: 0;
}
.protect-list .protect-new-name .pets-name {
padding-left: 45px;
background: url(/images/search_bg06.png) 0 center no-repeat;
}
.protect-list.p_rare-list .pets-no {
margin: 0;
}
.p_pet_notice {
width: 220px;
height: 40px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: url(/images/protect_btn_bg.png) center top;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
font-weight: bold;
margin-bottom: 0;
color: #FFF;
}
.protect-list .pets-ctn {
margin-bottom: 20px;
}
.protect-list .pets-ctn-r {
width: 300px;
float: left;
background: url(/images/search_list_bg.jpg) repeat;
border-radius: 10px;
box-sizing: border-box;
padding: 18px 10px;
position: relative;
}
.protect-list .pets-ctn-r:after {
content: url(/images/protectlist_img02.png);
position: absolute;
top: -20px;
right: 20px;
left: initial;
}
.protect-list .protect_btn {
margin-bottom: 20px;
}
.protect-list .protect_btn a {
font-size: 15px;
}
.search_ppet-pager-top {
padding: 15px 0 10px;
border-top: 1px dashed #ccb9a2;
border-bottom: 1px dashed #ccb9a2;
position: relative;
margin: 0 0 25px;
}
.search_ppet-pager-top .total_ppet-pets {
position: absolute;
right: 0;
top: 15px;
color: #534741;
margin: 0;
letter-spacing: 0.4px;
}
.search_ppet-pager-top .total_ppet-pets span {
font-weight: bold;
color: #f5a868;
font-size: 20px;
display: inline-block;
margin: 0 3px;
vertical-align: middle;
}
.search_ppet-date {
margin: 0 0 5px;
color: #534741;
letter-spacing: 0.4px;
}
.search_ppet-option {
margin: 0 0 20px;
}
.search_ppet-option > li, .search_ppet-option > li.pc {
display: inline-block;
vertical-align: middle;
margin: 0 15px 0 0;
}
.search_ppet-option > li.search_ppet-method {
width: 200px;
}
.search_ppet-show li {
display: inline-block;
vertical-align: middle;
margin: 0 15px 0 0;
}
.search_ppet-show li a {
text-decoration: none;
color: #534741;
font-size: 15px;
font-weight: bold;
letter-spacing: 0.2px;
position: relative;
z-index: 0;
}
.search_ppet-show li a:hover, .search_ppet-show li a.active {
color: #f5a868;
}
.search_ppet-show li a:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
background: #fdf57a;
left: 0;
bottom: 5px;
z-index: -1;
}
.search_ppet-show li a:hover:after, .search_ppet-show li a.active:after {
display: none;
}
.search_ppet-results-pager {
width: 100%;
display: table;
}
.search_ppet-results-pager dt {
display: table-cell;
vertical-align: top;
width: 90px;
padding: 3px 0 0;
}
.search_ppet-results-pager dd {
display: table-cell;
vertical-align: top;
}
.search_ppet-total-results {
display: inline-block;
vertical-align: middle;
}
.search_ppet-total-results li {
display: inline-block;
vertical-align: middle;
margin: 0 15px 0 0;
}
.search_ppet-total-results li:first-child {
color: #534741;
letter-spacing: 0.4px;
}
.search_ppet-total-results li:first-child span {
font-weight: bold;
color: #f5a868;
font-size: 20px;
display: inline-block;
margin: 0 3px;
vertical-align: middle;
}
.search_ppet-total-results li a {
text-decoration: none;
color: #534741;
}
.search_ppet-total-results li a.arr-link:hover {
opacity: 0.8;
color: #534741;
}
/** 181024 protect_list end **/
/** 181101_test btmnavi add **/
#btmnavi {
display: none;
}
/** 181101_test btmnavi end **/
/** 181120 checkbox area add **/
label[for="s02-1"], label[for="s03-1"] {
border: 1px solid #ff0000;
padding: 2px 10px;
background: #f4d4d4;
}
/** 181125 media_csr **/
#main #media h3, #main #media h4, #main #media h5 {
font-family: Yu Gothic medium, arial, clean, verdana, 'Hiragino Kaku Gothic Pro', "ＭＳ Ｐゴシック", Osaka, sans-serif;
}
#main #media .media_title {
margin-top: 30px;
}
#main #media h3.thought-spc {
text-align: center;
font-size: 40px;
}
.actual_scene {
margin: 55px 0 0;
}
.actual_scene .scene {
padding-bottom: 135px;
}
.actual_scene .scene_img {
max-width: 625px;
width: 100%;
display: block;
}
.actual_scene .scene_img img {
width: 100%;
}
.actual_scene .hr {
display: block;
border-top: 1px solid #3c3c3c;
max-width: 325px;
width: 100%;
}
.actual_scene .scene1 .scene_img {
float: right;
}
.actual_scene .scene2 .scene_img {
float: left;
}
.actual_scene .scene1 .hr {
float: right;
text-align: right;
margin: 25px 85px 0 0;
}
.actual_scene .scene2 .hr {
float: left;
text-align: left;
margin: 25px 0 0 85px;
}
.actual_scene .textBox {
background-color: rgba(255, 255, 255, .9);
padding: 30px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, .1);
width: 340px;
margin-top: -150px;
}
.actual_scene .textBox p {
line-height: 2;
margin-bottom: 0;
}
.actual_scene .scene1 .textBox {
float: left;
}
.actual_scene .scene2 .textBox {
float: right;
}
#main #media .feature h2 {
text-align: center;
font-size: 40px;
font-weight: bold;
margin: 10px 0;
}
#main #media .feature .subTitle {
text-align: center;
font-size: 22px;
font-weight: bold;
display: block;
position: relative;
margin-bottom: 30px;
}
#main #media .feature .subTitle::before {
content: "";
height: 1px;
background-color: #3c3c3c;
width: 232px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto 0;
}
#main #media .feature .subTitle::after {
content: "";
height: 1px;
background-color: #3c3c3c;
width: 232px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto 0
}
#main #media .feature3 {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#main #media .feature3 > div {
width: 223px;
}
#main #media .feature3 p {
text-align: center;
font-size: 14px;
line-height: 20px;
margin-top: 20px;
}
#main #media .feature .photo {
margin-top: 70px;
}
#main #media .feature .photo img {
width: 24.4%;
float: left;
}
#main #media .feature .photo img:not(:nth-child(4n)) {
margin-right: .8%;
margin-bottom: .8%;
}
.latest_publish {
border-top: 1px solid #0089a8;
border-bottom: 1px solid #0089a8;
padding: 40px 0 50px;
position: relative;
margin: 120px 0 58px;
}
.latest_publish h4 {
font-size: 24px;
color: #4f86b1;
position: absolute;
top: -15px;
left: 0;
background-color: #fff;
width: 220px;
padding-left: 0;
margin-bottom: 0;
}
.latest_publish h4::after {
content: none;
}
.latest_publish ul {
display: table;
width: 690px;
margin: 0 auto;
}
.latest_publish ul li {
display: table-row;
background-image: url(/images/dashed_line.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 14px 1px;
}
.latest_publish ul li > div {
white-space: nowrap;
width: 166px;
}
.latest_publish ul li > div, .latest_publish ul li p {
display: table-cell;
vertical-align: top;
padding: 20px 0;
}
.latest_publish ul li date, .latest_publish ul li p {
font-size: 14px;
line-height: 24px;
}
.latest_publish ul li > div > span {
font-size: 12px;
line-height: 1;
padding: 3px 22px;
color: #fff;
background-color: #4f86b1;
border-radius: 3px;
margin-left: 22px;
}
.latest_publish ul li p {
padding-left: 45px;
}
#main #media .media_photo img {
float: left;
width: 32%;
}
#main #media .media_photo img:not(:nth-child(3n)) {
margin-right: 2%;
margin-bottom: 2%;
}
#main #media .forMedia .messageBox {
padding: 50px 40px 32px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, .1);
width: 545px;
}
#main #media .forMedia {
margin: 120px 0 130px;
}
#main #media .forMedia .messageBox .boxInner {
border-top: 1px solid #4f86b1;
border-bottom: 1px solid #4f86b1;
position: relative;
padding: 60px 0 100px;
}
#main #media .forMedia .messageBox .boxInner h4 {
font-size: 24px;
position: absolute;
top: -15px;
left: 0;
background-color: #fff;
width: 282px;
padding-left: 0;
margin-bottom: 0;
}
#main #media .forMedia .messageBox .boxInner h4::after {
content: none;
}
#main #media .forMedia .messageBox .boxInner p {
font-size: 14px;
line-height: 2;
margin-bottom: 0;
}
#main #media .forMedia .btn {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
background-color: #4f86b1;
background-image: url(/images/media_icon_mail.png);
-webkit-background-size: 52px auto;
background-size: 52px auto;
background-repeat: no-repeat;
background-position: 50px center;
padding: 49px 64px 49px 123px;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
position: relative;
z-index: 3;
float: right;
margin-top: -90px;
}
#main #media .forMedia .btn img {
width: 52px;
}
#main #media .forMedia .btn:hover {
background-color: #71a3c9;
}
/** 181114 p_pet_list add **/
.under .protect_dog #side-search-dog select {
background-color: #ffe8c9;
border-top: 2px solid #ffa878;
border-right: 2px solid #ffa878;
background-image: linear-gradient(45deg, transparent 50%, #ffa878 50%), linear-gradient(135deg, #ffa878 50%, transparent 50%);
}
.under .protect_dog #side-search-dog input[type="text"] {
background-color: #ffe8c9;
border-top: 2px solid #ffa878;
border-right: 2px solid #ffa878;
}
.p_petinfo_list {
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.p_pet_section {
width: 49%;
margin: 0 2% 20px 0;
}
.p_pet_section:nth-child(2n) {
margin-right: 0;
}
.p_pet_section ul li {
float: left;
margin-right: 10px;
}
.p_pet_section .p_pet_info01, .p_pet_section .p_pet_info02, .p_pet_section .p_pet_info03, .p_pet_section .p_pet_info04 {
font-weight: bold;
font-size: 16px;
color: #78aa22;
margin-bottom: 10px;
padding: 0 0 5px 50px;
border-bottom: 1px solid #ccb9a2;
position: relative;
}
.p_pet_section .p_pet_info01 p, .p_pet_section .p_pet_info02 p, .p_pet_section .p_pet_info03 p, .p_pet_section .p_pet_info04 p {
margin-bottom: 0px;
}
.p_pet_section .p_pet_info01 .p_pet_logo img, .p_pet_section .p_pet_info02 .p_pet_logo img, .p_pet_section .p_pet_info03 .p_pet_logo img, .p_pet_section .p_pet_info04 .p_pet_logo img {
width: 65%;
height: auto;
}
.p_pet_section .p_pet_logo {
background: url(/images/protectlist_iconbg.jpg) repeat;
width: 40px;
height: 40px;
left: 0;
bottom: 0;
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.p_comment {
height: 100px;
overflow: auto;
/* -webkit-overflow-scrolling: touch;*/
}
.protection_list_btn {
display: flex;
justify-content: space-around;
}
.protection_list_btn .protect_btn {
margin: 10px auto;
}
/**** 190116 photo-view_css add ****/
.search-list.rare-list.photo-view {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
/*.rare-list.photo-view .pets-view-more,*/
.rare-list.photo-view .pets-no, .rare-list.photo-view .birthdate, .rare-list.photo-view .sexinfo, .rare-list.photo-view .rare-img-list, .search-list.photo-view .search-new-temp .search-lineat-btn, .search-list.photo-view .shopinfo, .search-list.photo-view .typeinfo, .search-list.photo-view .pricedata dt, .search-list.photo-view .pricedata dt.pc {
display: none;
}
.search-list.rare-list.photo-view > li {
width: 24.25%;
margin: 0 1% 27px 0;
padding: 10px 8px 10px 5px;
}
.search-list.rare-list.photo-view li:nth-child(4n) {
margin: 0 0px 27px 0;
}
.rare-list.photo-view .pets-name {
padding: 5px 0px 3px 20px;
background-size: 15px;
font-size: 15px;
line-height: 1.4em;
}
.rare-list.photo-view .pets-ctn-l {
width: 100%;
float: initial;
margin: 0;
}
.rare-list.photo-view .pets-ctn-l a .pets-avatar img {
transition: 0.5s;
}
.rare-list.photo-view .pets-ctn-l a .pets-avatar img:hover {
opacity: 0.7;
transition: 0.5s
}
.rare-list.photo-view .pets-ctn-r {
width: 100%;
float: initial;
padding: 15px 8px;
}
.search-list.rare-list.photo-view .search-new-temp {
padding-right: 0px;
margin-bottom: 10px;
padding-bottom: 5px;
}
.search-list.rare-list.photo-view .search-new-temp .search-new-name {
width: calc(100% - 30px);
}
.rare-list.photo-view .pets-ctn-r dl dt {
display: table-row;
width: 100%;
}
.photo_btns {
display: none;
}
.rare-list.photo-view .photo_btns {
display: flex;
justify-content: center;
margin: 15px 0 20px;
}
.search-list.rare-list.photo-view .photo_btns .search-lineat-btn {
margin-left: initial;
margin-top: 0;
margin-bottom: 0;
float: initial;
width: 45px;
}
.search-list.rare-list.photo-view .photo_btns .search-lineat-btn img {
width: 40px;
}
.search-list.rare-list.photo-view .photo_btns .search-vip-btn {
padding-right: 0;
margin-bottom: 0;
margin-top: 0;
width: 45px;
}
.search-list.rare-list.photo-view .photo_btns .search-vip-btn a {
text-align: center;
}
.search-list.rare-list.photo-view .photo_btns .search-vip-btn a span {
font-size: 20px;
margin-right: 0;
}
.search-list.rare-list.photo-view .pets-view-more {
margin: 15px auto 10px;
text-align: center;
width: 130px;
position: static;
}
.search-list .search-vip-btn a span.photo_v_dn {
color: #fff;
font-size: 13px;
}
.search-list.grid-view .search-vip-btn a span.photo_v_dn {
color: #fff;
font-size: 10px;
}
.search-list.photo-view .search-new-temp .search-vip-btn a span.photo_v_dn {
display: none;
}
.search-list.photo-view .search-vip-btn {
width: 30px;
margin-top: 10px;
}
.search-list.photo-view .search-vip-btn a {
padding: 5px;
}
.list-grid li .fa-photoview::before {
content: url(/images/photoview_icon_off.png);
}
.list-grid li.active .fa-photoview::before {
content: url(/images/photoview_icon_on.png);
}
.list-grid li:hover .fa-photoview::before {
content: url(/images/photoview_icon_on.png);
}
/**** 190116 photo-view_css end ****/
/**** 190406 .search_btn add ****/
.search_gps {
display: none;
}
.search_btn {
width: 400px;
margin: 40px auto 60px;
text-align: center;
height: 50px;
position: relative;
font-size: 16px;
}
.search_btn a {
text-align: center;
background-color: #f5a868;
color: #FFF;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 25px;
font-family: 'Yu Gothic bold';
font-weight: bold;
box-shadow: 0 5px 0 #dc975d;
position: relative;
transition: 0.5s all;
}
.search_btn a:hover {
opacity: 0.7;
}
.search_btn a::after {
content: '';
position: absolute;
background: url(/images/idx_arrow03.png) center no-repeat;
width: 7px;
height: 11px;
top: calc(50% - 5.5px);
left: 25px;
}
/**** 190406 .search_btn end ****/
/**** 190515 .mapballoon add ****/
.mapballoon th, .mapballoon td {
padding: 8px;
}
.mapbutton {
text-align: center;
margin: 5px;
}
/**** 190515 .mapballoon end ****/
/**** 190531 protect and protect news add ****/
.protection-count {
position: relative;
}
.protection-count .count {
color: #f25d11;
position: absolute;
font-size: 50px;
top: 390px;
font-weight: bold;
}
.protection-count .count span {
font-size: 18px;
}
.protection-count .ct01 {
left: 140px;
}
.protection-count .ct02 {
left: 340px;
}
.protection-count .ct03 {
left: 560px;
}
.protections_news {
padding: 0.5rem;
margin-bottom: 30px;
position: relative;
}
.protections_news .archive-link {
text-align: right;
margin: 0;
position: absolute;
right: 20px;
top: 20px;
}
.protections_news .archive-link a {
text-decoration: none;
color: #534741;
font-size: 15px;
letter-spacing: 0.5px;
font-family: 'Yu Gothic Medium';
position: relative;
display: inline-block;
z-index: 0;
}
.protections_news .archive-link a:before {
content: '';
position: absolute;
border-left: 6px solid #f5a868;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
left: -15px;
top: calc(50% - 4px);
}
.protections_news dl {
display: flex;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid #e5dacf;
}
.protections_news dl dt {
width: 30%;
margin-right: 3%;
}
.protections_news dl dd p.date {
font-size: 13px;
color: #998675;
display: inline-block;
margin: 0 15px 0 0;
vertical-align: middle;
}
.protect_faq_anchor {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto 30px;
}
.protect_faq_anchor li {
margin: 0 1.5%;
width: 30%;
}
.protect_faq_anchor li a {
text-align: center;
display: inlin-block;
text-decoration: none;
color: #534741;
font-size: 15px;
font-weight: bold;
letter-spacing: 0.2px;
position: relative;
z-index: 0;
}
.protect_faq_anchor li a:after {
content: '';
position: absolute;
width: 100%;
height: 6px;
background: #fdf57a;
left: 0;
bottom: 5px;
z-index: -1;
}
.protections_news_photos {
margin-bottom: 20px;
}
/**** 190531 protect and protect news end ****/
/**** 190615 number of protect ****/
.protection_list_btn div {
width: 250px;
margin: 0 auto;
}
.protection_list_btn div .number_protection_dog, .protection_list_btn div .number_protection_cat {
display: block;
width: 212px;
height: 29px;
padding-top: 2px;
padding-left: 38px;
color: #443732;
font-size: 16px;
text-align: center;
}
.protection_list_btn div .number_protection_dog {
background: url(/images/protection/top_number_of_dog.png) center top;
}
.protection_list_btn div .number_protection_cat {
background: url(/images/protection/top_number_of_cat.png) center top;
}
.protection_list_btn div span .p_number {
font-size: 22px;
}
/**** 190615 number of protect end ****/
/**** 190621 ****/
#index .idx-search-tab .idx-search-tab-nodisplay {
display: none;
}
/**** 190630 ****/
.txt_table {
border-top: solid 3px #f9f8ed;
border-left: solid 3px #f9f8ed;
margin-bottom: 36px;
}
.txt_table th, .txt_table td {
border-right: solid 3px #f9f8ed;
border-bottom: solid 3px #f9f8ed;
color: #a56437;
font-size: 18px;
vertical-align: bottom;
}
.section.txt_table th, .section.txt_table td {
font-size: 14px;
}
.section.txt_table {
border-top: solid 3px #ffffff;
border-left: solid 3px #ffffff;
}
.section.txt_table th, .section.txt_table td {
border-right: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
}
.txt_table th {
background: #c8e0f0;
font-weight: normal;
}
.txt_table td {
background: #ffffff;
text-align: right;
}
.section.txt_table td {
background: #edf5fa;
}
.txt_table th p, .txt_table td p {
display: inline-block;
margin: 0;
text-align: left;
}
.txt_table th .p120, .txt_table td .p120 {
padding-right: 4px;
font-size: 120%;
font-weight: bold;
padding-top: .4em;
}
.txt_table th .p120.dot-txt, .txt_table td .p120.dot-txt {
-webkit-text-emphasis: filled circle #98ca4d;
-moz-text-emphasis-style: filled circle #98ca4d;
-ms-text-emphasis-style: filled circle #98ca4d;
text-emphasis: filled circle #98ca4d;
}
.txt_table th .p220, .txt_table td .p220 {
padding-right: 8px;
font-size: 220%;
font-weight: bold;
}
.txt_table th .p100, .txt_table td .p100 {
font-weight: bold;
}
.add_genetic_price {
padding: 20px;
border-radius: 5px;
border: 3px solid #64c9e1;
color: #a56437;
text-align: center;
font-weight: bold;
font-size: 18px;
}
.add_genetic_price .price {
padding-left: 20px;
color: #f5b2b2;
font-size: 22px;
}
.add_genetic_price .price .p220 {
padding-left: 5px;
font-size: 150%;
}
/*2019 top important news */
.top-important-news {
margin: 1rem auto;
width: 100%;
max-width: 680px;
font-size: 13px;
display: flex;
padding: 1rem;
border: 1px solid #4b3b25;
border-radius: 8px;
box-sizing: border-box;
}
.top-important-news .labels {
width: 200px;
font-weight: 700;
margin: auto;
}
.top-important-news .labels span {
color: #64c9e1;
font-family: 'Nunito', sans-serif;
}
.top-important-news .cts {
display: flex;
width: 480px;
line-height: 0px;
}
.top-important-news .cts .date {
width: 80px;
}
/*2020 top important news 2列表示に変更 */
.date {
font-size: 13px;
}
.title {
font-size: 13px;
}
.pro-topimg {
margin-bottom: 50px;
}
.pro-ribbon {
background: url("../images/property_img02.png") center no-repeat;
background-size: 100% 100%;
text-align: center;
color: #fff;
font-family: 'Yu Gothic bold';
font-weight: bold;
padding: 10px 20px;
font-size: 22px;
position: relative;
z-index: 1;
}
.orange-txt {
color: #f5a868;
}
.pro-b01 {
position: relative;
z-index: 0;
}
.pro-b01 li:first-child {
position: absolute;
z-index: -1;
right: -23px;
top: -46px;
}
.pro-b01 li:last-child {
width: 465px;
background: rgba(255, 255, 255, .8);
font-family: 'Yu Gothic bold';
font-weight: bold;
color: #534741;
height: 180px;
padding: 20px 10px;
font-size: 16px;
}
.pro-sub-ttl01 {
position: relative;
padding-left: 30px;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 18px;
margin-bottom: 10px;
line-height: 1.6em;
}
.pro-sub-ttl01:before {
position: absolute;
content: '';
width: 12px;
height: 12px;
background: #64c9e1;
left: 5px;
top: 8px;
}
.under-tbl.pro th {
color: #005BAC;
text-align: center;
font-size: 15px;
}
.pro-list-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 70px;
}
.pro-list-box li {
width: 24%;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 18px 0 15px;
font-family: 'Yu Gothic bold';
font-weight: bold;
font-size: 15px;
}
.pro-list-box li:nth-child(1) {
background: url("../images/property_img04.png");
}
.pro-list-box li:nth-child(2) {
background: url("../images/property_img05.png");
}
.pro-list-box li:nth-child(3) {
background: url("../images/property_img06.png");
}
.pro-list-box li:nth-child(4) {
background: url("../images/property_img07.png");
}
.under h4.pro {
font-size: 22px;
padding-left: 38px;
}
.under h4.pro:after {
width: 27px;
height: 27px;
border: #64c9e1 6px solid;
top: 0;
box-sizing: border-box;
}
.pro-b02 dt {
display: block;
width: 80%;
background: #E5F5FC;
font-family: 'Yu Gothic bold';
font-weight: bold;
color: #64c9e1;
font-size: 15px;
text-align: center;
border-radius: 30px;
margin: 0 auto -20px;
position: relative;
padding: 9px 10px;
}
.under-list.pro {
padding-left: 5px;
}
.under-list.pro li {
padding-left: 23px;
}
.under-list.pro li:before {
width: 13px;
height: 13px;
top: 8px;
background: #DCDCDC;
}
.pro-small-box {
padding: 0 30px;
}
.pro-list-area {
border-bottom: #c0bfbd 1px dotted;
margin-bottom: 30px;
}
.pro-list-area li {
margin: 0 30px 20px 0;
line-height: 28px;
display: inline-flex;
align-items: flex-start;
}
.pro-list-area li span {
display: inline-block;
border: #777778 1px solid;
border-radius: 5px;
padding: 4px 10px 3px;
margin-right: 10px;
line-height: 1.4em;
white-space: nowrap;
}
.wpcf7-recaptcha {
display: block;
margin-bottom: 20px;
text-align: center;
width: 300px;
}
.rc-anchor-normal {
margin: 0 auto;
}
/**
* 200716 company/property
*/
/* fonts */
.genjyuu_medium{
font-family: 'Yu Gothic Medium';
color: #534741;
}
.genjyuu_bold{
font-family: 'Yu Gothic bold';
font-weight: bold;
color: #534741;
}
.genjyuu_heavy{
font-family: 'Yu Gothic bold';
font-weight: bold;
color: #534741;
}
.nunito{
font-family: 'Nunito', sans-serif;
font-weight: 800;
}
.page-property #content h4{
font-size: 22px;
color: #534741;
padding-left: 0;
}
.page-property #content h4::after{
content: none;
}
.page-property #reason .feature{
display: flex;
justify-content: space-between;
}
.page-property #reason .feature li{
width: 30%;
padding: 7px 0;
}
.page-property #reason .feature li .icon{
width: 80px;
display: block;
margin: 0 auto;
}
.page-property #reason .feature li .ttl{
display: block;
font-size: 20px;
line-height: 1.5;
background-color: #e5f5fc;
text-align: center;
margin-top: 10px;
}
.page-property #reason .feature li .num{
font-size: 18px;
color: #777778;
display: block;
text-align: center;
margin-top: 10px;
}
.page-property #reason .feature li .num b{
font-size: 54px;
color: #64c9e1;
line-height: 1;
margin-right: 5px;
}
.page-property #reason .box,
.page-property #concept .box{
display: flex;
justify-content: space-between;
margin-top: 25px;
}
.page-property #reason .box .img,
.page-property #concept .box .img{
width: 400px;
flex-shrink: 0;
}
.page-property #reason .box .img img
.page-property #concept .box .img img{
width: 100%;
height: auto;
display: block;
}
.page-property #reason .box .txt
.page-property #concept .box .txt{
width: 100%;
}
.page-property #reason .box .img + .txt,
.page-property #reason .box .txt + .img,
.page-property #concept .box .img + .txt,
.page-property #concept .box .txt + .img{
margin-left: 35px;
}
.page-property #reason .box .txt p,
.page-property #concept .box .txt p{
font-size: 16px;
line-height: 1.5;
}
.page-property #reason .box .txt p:last-child,
.page-property #concept .box .txt p:last-child{
margin-bottom: 0;
}
.page-property #reason .box .txt .ttl,
.page-property #concept .box .txt .ttl{
font-size: 22px;
margin-bottom: 10px;
}
.page-property #concept .box .img{
width: 320px;
}
.page-property #concept .link_btn{
display: block;
text-decoration: none;
font-size: 14px;
line-height: 30px;
text-align: center;
color: #534741;
background-color: #f5b2b2;
box-shadow: 0 5px 0 #d29898;
white-space: nowrap;
padding: 9px 0;
border-radius: 40px;
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.page-property #concept .link_btn b{
display: block;
font-size: 24px;
line-height: 32px;
color: #fff;
}
.page-property #concept .link_btn:hover{
opacity: .7;
}
.page-property #case h5{
padding: 0;
color: #6fb14a;
border: none;
}
.page-property #case ul li:nth-child(n+2){
margin-top: 40px;
}
.page-property #case .main_imgs{
display: flex;
justify-content: space-between;
}
.page-property #case .main_imgs.type2{
flex-direction: column;
}
.page-property #case .main_imgs.type1 .img{
width: calc(50% - 5px);
}
.page-property #case .main_imgs.type2 .img{
width: 100%;
margin-bottom: 10px;
}
.page-property #case .main_imgs .img:first-child img{
width: 100%;
height: auto;
display: block;
}
.page-property #case .main_imgs .img:last-child{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page-property #case .main_imgs.type1 .img:last-child img{
width: calc(50% - 5px);
margin-bottom: 10px;
}
.page-property #case .main_imgs.type2 .img:last-child img{
width: 24%;
}
.page-property .toggle_box{
display: none;
}
.page-property button.btn{
padding: 10px 0;
border: 1px solid #c8c8c8;
border-radius: 4px;
background-color: #fff;
text-align: center;
white-space: nowrap;
position: relative;
box-shadow: 0 3px 0 #f0f0f0;
width: 240px;
margin: 20px auto 0;
display: block;
cursor: pointer;
font-size: 16px;
line-height: 20px;
}
.page-property button.btn::after{
content: "";
width: 8px;
height: 8px;
border-right: 2px solid #534741;
border-bottom: 2px solid #534741;
position: absolute;
top: calc(50% - 7px);
right: 16px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
border-radius: 2px;
}
.page-property button.btn.close{
display: none;
}
.page-property button.btn.close::after{
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
top: calc(50% - 2px);
}
.page-property button.btn:focus{
outline: none;
}
.page-property #case .detail{
padding: 15px 0 10px;
}
.page-property #case .detail .before_after{
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.page-property #case .detail .before_after .before,
.page-property #case .detail .before_after .after{
width: calc(50% - 25px);
}
.page-property #case .detail .before_after .after{
position: relative;
}
.page-property #case .detail .before_after .after::before{
content: "";
width: 0;
height: 0;
border-left: 18px solid #f5b2b2;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
position: absolute;
top: 16px;
bottom: 0;
left: -32px;
margin: auto 0;
}
.page-property #case .detail .before_after span{
font-size: 14px;
line-height: 1;
padding: 5px 0;
text-align: center;
display: block;
margin-bottom: 8px;
}
.page-property #case .detail .before_after .before span{
background-color: #f0f0f0;
}
.page-property #case .detail .before_after .after span{
background-color: #e5f5fc;
}
.page-property #case .detail .before_after img{
display: block;
width: 100%;
height: auto;
}
.page-property #case h6{
font-size: 16px;
line-height: 20px;
color: #777778;
padding-left: 15px;
position: relative;
}
.page-property #case h6::before{
content: "";
width: 5px;
height: 2px;
background-color: #777778;
position: absolute;
top: 10px;
left: 5px;
border-radius: 1px;
}
.page-property #case .detail .facilities .photo{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page-property #case .detail .facilities .photo figure{
width: calc(50% - 12px);
margin: 0 0 15px 0;
}
.page-property #case .detail .facilities .photo figcaption{
font-size: 16px;
color: #6fb14a;
margin-bottom: 5px;
}
.page-property #case .detail .facilities .photo figure img{
display: block;
width: 100%;
height: auto;
}
.page-property #case .detail .facilities .txt{
font-size: 14px;
line-height: 1.7;
color: #534741;
background-color: #f0f0f0;
border-radius: 10px;
padding: 10px 18px;
margin-top: 10px;
}
.page-property #case .detail .facilities .txt p{
line-height: 1.7;
}
.page-property #case .detail .facilities .txt p:last-child{
margin-bottom: 0;
}
.page-property #case .detail .facilities .under-tbl{
margin-top: 25px;
}
.page-property #case .detail .facilities .floor_map_slider a{
padding: 0 10px;
}
.page-property #case .detail .facilities .floor_map_slider a:focus{
outline: none;
}
.page-property #case .detail .facilities .floor_map_slider a img{
display: block;
width: 100%;
height: auto;
}
.page-property #case .detail .facilities .floor_map_slider .slick-prev,
.page-property #case .detail .facilities .floor_map_slider .slick-next{
background: none;
font-size: 0;
line-height: 0;
color: transparent;
width: 30px;
height: 30px;
border-radius: 0;
border: none;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
z-index: 1;
cursor: pointer;
}
.page-property #case .detail .facilities .floor_map_slider .slick-prev{
left: 0;
}
.page-property #case .detail .facilities .floor_map_slider .slick-next{
right: 0;
left: auto;
}
.page-property #case .detail .facilities .floor_map_slider .slick-arrow::before{
content: "";
width: 70%;
height: 70%;
border-color: #64c9e1;
border-style: solid;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.page-property #case .detail .facilities .floor_map_slider .slick-arrow:hover::before{
opacity: .6;
}
.page-property #case .detail .facilities .floor_map_slider .slick-arrow.slick-prev::before{
border-width: 0 0 2px 2px;
}
.page-property #case .detail .facilities .floor_map_slider .slick-arrow.slick-next::before{
border-width: 2px 2px 0 0;
}
.page-property #property_info .col2_table{
display: flex;
justify-content: space-between;
}
.page-property #property_info .col2_table .table_box{
width: calc(50% - 5px);
}
.page-property #priority_area .hokkaido_area{
color: #6db596;
border-left-color: #6db596;
}
.page-property #priority_area .tohoku_area{
color: #7b88c6;
border-left-color: #7b88c6;
}
.page-property #priority_area .kanto_area{
color: #ed96ad;
border-left-color: #ed96ad;
}
.page-property #priority_area .chubu_area{
color: #89ce5b;
border-left-color: #89ce5b;
}
.page-property #priority_area .kansai_area{
color: #ea9d63;
border-left-color: #ea9d63;
}
.page-property #priority_area .chugoku_area{
color: #a174c1;
border-left-color: #a174c1;
}
.page-property #priority_area .shikoku_area{
color: #4d78c4;
border-left-color: #4d78c4;
}
.page-property #priority_area .kyushu_area{
color: #ea6f6c;
border-left-color: #ea6f6c;
}
.page-property #smell_control img{
margin-bottom: 15px;
}
.page-property #smell_control p{
font-size: 14px;
padding: 0 15px;
}
.page-property #contact_form{
width: 100%;
background-color: #e5f5fc;
margin: 0 auto;
padding: 35px 60px;
box-sizing: border-box;
}
.page-property #contact_form h4{
font-size: 24px;
}
.page-property #contact_form .mw_wp_form_input .input_hide,
.page-property #contact_form .mw_wp_form_confirm .confirm_hide{
display: none !important;
}
.page-property #contact_form .mw_wp_form dl:nth-of-type(n+2){
margin-top: 15px;
}
.page-property #contact_form .mw_wp_form dl dt{
font-size: 15px;
font-weight: bold;
margin-bottom: 10px;
}
.page-property #contact_form .mw_wp_form input[type="text"],
.page-property #contact_form .mw_wp_form input[type="email"],
.page-property #contact_form .mw_wp_form input[type="number"],
.page-property #contact_form .mw_wp_form input[type="tel"],
.page-property #contact_form .mw_wp_form select,
.page-property #contact_form .mw_wp_form textarea{
color: #333;
font-size: 16px;
font-weight: normal;
background-color: #fff;
border-radius: 5px;
padding: 9px 10px;
border: none;
margin-bottom: 0;
}
.page-property #contact_form .mw_wp_form select{
cursor: pointer;
}
.page-property #contact_form .mw_wp_form .mwform-zip-field input[type="text"]:nth-of-type(1){
width: 60px;
margin-left: 3px;
}
.page-property #contact_form .mw_wp_form .mwform-zip-field input[type="text"]:nth-of-type(2){
width: 70px;
}
.page-property #contact_form .mw_wp_form .mwform-tel-field input[type="text"]{
width: 70px;
}
.page-property #contact_form .mw_wp_form .col2{
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.page-property #contact_form .mw_wp_form .col2 dl{
width: 49%;
margin-top: 0;
}
.page-property #contact_form .mw_wp_form textarea{
width: 100%;
box-sizing: border-box;
}
.page-property #contact_form .mw_wp_form .btn_box{
display: flex;
justify-content: center;
}
.page-property #contact_form .mw_wp_form_confirm .btn_box{
margin-top: 25px;
}
.page-property #contact_form .mw_wp_form .btn_box .mw_btn{
text-align: center;
}
.page-property #contact_form .mw_wp_form .btn_box input.btn{
font-size: 16px;
color: #fff;
background-color: #f5a868;
text-align: center;
width: 240px;
line-height: 20px;
padding: 10px 0;
border-radius: 6px;
box-shadow: 0 4px 0 #c95f2b;
border: none;
cursor: pointer;
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.page-property #contact_form .mw_wp_form .btn_box input.btn:hover{
opacity: .7;
}
.page-property #contact_form .mw_wp_form .btn_box input.btn.return{
width: 120px;
margin-right: 10px;
background-color: #afafaf;
box-shadow: 0 4px 0 #676767;
}
.page-property #contact_form .mw_wp_form .btn_box .g-recaptcha > div{
margin: 0 auto;
}
.page-property #contact_form button.btn::before{
content: "開く";
}
.page-property #contact_form button.btn.close{
display: none;
}
.page-property .under-tbl.pro th{
white-space: nowrap;
}
/**
* 200716 campaign/生体半額キャンペーン
*/
/* fonts */
.oswald,
.under.halfprice h3{
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 80%;
}/* https://fonts.google.com/specimen/Oswald */
.notosans,
.halfprice section,
.halfprice #price table,
.under.halfprice h3 small,
.under.halfprice h4,
.under.halfprice h5{
font-family: 'Noto Sans JP', sans-serif;
color: #515151;
}
.under.halfprice{
width: 100%;
}
.under.halfprice h3{
margin-bottom: 50px;
line-height: 1;
font-size: 30px;
color: #505050;
}
.under.halfprice h3 small{
font-size: 18px;
color: #323232;
margin-left: 25px;
font-weight: normal;
}
.under.halfprice h4{
margin-bottom: 0;
padding-left: 0;
font-weight: 500;
font-size: 23px;
line-height: 1.5;
}
.under.halfprice h4::after{
content: none;
}
.under.halfprice h5{
padding: 0;
border: none;
}
.bg_gray{
background-color: #f8f8f8;
}
.halfprice .topic-path{
margin-bottom: 0;
background: #fff;
border-bottom: 1px solid #c7c7c7;
}
/* MV */
.halfprice #mv{
/*background: url('../images/halfprice/mv_bg.jpg') no-repeat center bottom;
-webkit-background-size: cover;
background-size: cover;*/
padding: 30px 0 30px;
}
@media screen and (max-width: 1700px) {
.halfprice #mv{
-webkit-background-size: 1700px auto;
background-size: 1700px auto;
}
}
/* HALF PRICE PLAN 生体半額プラン */
.halfprice #plan{
padding: 100px 0 60px;
}
.halfprice #plan .wrapper{
position: relative;
}
.halfprice #plan .wrapper > img{
position: absolute;
top: 0;
right: 0;
width: 52.3%;
height: auto;
}
.halfprice #plan .container{
padding-right: 41.5%;
}
.halfprice #plan p{
font-size: 16px;
}
.halfprice #plan h4{
color: #323232;
margin-bottom: 30px;
}
.halfprice span.ul{
background: -moz-linear-gradient(transparent 93%, #81bcff 93%);
background: -webkit-linear-gradient(transparent 93%, #81bcff 93%);
background: linear-gradient(transparent 93%, #81bcff 93%);
}
.halfprice .red{
color: #fe1d25;
}
.halfprice #plan b{
font-size: 20px;
margin: 0 5px;
}
.halfprice #plan b em{
font-size: 1.6em;
font-style: normal;
font-weight: 900;
margin: 0 3px;
}
.halfprice #plan .img{
padding-left: 130px;
margin-bottom: 20px;
}
.halfprice #plan .img img{
display: block;
width: 125px;
height: auto;
}
.halfprice #plan p.note{
color: #8b8988;
}
/* CASE 5年のフード定期購入の例 */
.halfprice #case{
padding: 60px 0 0;
}
.halfprice #case .case{
padding-bottom: 100px;
position: relative;
}
.halfprice #case .case::before {
content: "";
width: 100vw; /* 画面幅いっぱい */
height: calc(100% - 80px);
background-color: #f8f8f8;
position: absolute;
bottom: 0;
left: 50%; /* 中央基準 */
transform: translateX(-50%); /* 中央に配置 */
z-index: -1;
}
.halfprice #case .case .discount_plan{
background-color: #e6f2ff;
border-radius: 10px;
font-size: 18px;
text-align: center;
line-height: 2;
padding: 24px 50px;
margin-bottom: 60px;
}
.halfprice #case .case .discount_plan b{
font-size: 28px;
font-weight: 500;
margin-right: 5px;
}
.halfprice #case .case .discount_plan b:not(.red){
color: #323232;
}
.halfprice #case .case .discount_plan i{
font-style: normal;
}
.halfprice #case .case .discount_plan i b{
position: relative;
}
.halfprice #case .case .discount_plan i b::before{
content: "";
width: 60px;
height: 40px;
background: url('../images/halfprice/icon_dog.svg') no-repeat center center/contain;
position: absolute;
top: 0;
left: -70px;
}
.halfprice #case .case .discount_plan i b .ul{
font-size: 23px;
font-weight: 500;
padding-right: 5px;
}
.halfprice #case .case .discount_plan i b .ul em{
font-size: 1.2em;
font-style: normal;
}
.halfprice #case .case .discount_plan small{
font-size: 16px;
}
.halfprice #case .case .discount_plan b.red{
margin-left: 5px;
margin-right: 0;
}
.halfprice #case .case .discount_plan b small{
font-size: .8em;
}
.halfprice #case .case .discount_plan .note{
font-size: 16px;
color: #8b8988;
margin-left: 5px;
margin-bottom: 0;
}
.halfprice #case .case h4{
font-size: 16px;
font-weight: 400;
margin-bottom: 25px;
}
.halfprice #case .case h4 b{
font-size: 23px;
font-weight: 500;
color: #323232;
margin-right: 5px;
}
.halfprice #case .case h4 b em{
font-size: 1.2em;
margin: 0 5px;
font-style: normal;
}
.halfprice #case .case h4 .when{
display: inline-block;
}
.halfprice #case .case2{
margin-top: 90px;
}
.halfprice #case .simulation{
margin-top: 90px;
padding-bottom: 70px;
}
.halfprice #case .simulation .in_case{
background-color: #e6f2ff;
border-radius: 10px;
font-size: 20px;
text-align: center;
line-height: 2;
padding: 50px;
color: #707070;
}
.halfprice #case .simulation .in_case i{
font-style: normal;
position: relative;
}
.halfprice #case .simulation .in_case i::before{
content: "";
width: 30px;
height: 40px;
background: url('../images/halfprice/icon_calc.svg') no-repeat center center/contain;
position: absolute;
top: 50%;
left: -40px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.halfprice #case .simulation .in_case b{
font-size: 20px;
font-weight: 500;
color: #323232;
}
.halfprice #case .simulation .in_case i b{
font-size: 24px;
}
.halfprice #case .simulation .in_case i + p{
margin-top: 20px;
line-height: 1.5;
}
.halfprice #case .simulation .in_case .target{
background-color: #fff;
border-radius: 10px;
padding: 25px 40px 45px;
color: #323232;
text-align: left;
}
.halfprice #case .simulation .in_case .target .store_name{
font-size: 23px;
margin-bottom: 20px;
}
.halfprice #case .simulation .in_case .target .flex{
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.halfprice #case .simulation .in_case .target .flex .img{
max-width: 340px;
flex-shrink: 0;
}
.halfprice #case .simulation .in_case .target .flex .txt{
width: 100%;
margin-left: 30px;
}
.halfprice #case .simulation .in_case .target .flex .txt .biological_no{
font-size: 16px;
}
.halfprice #case .simulation .in_case .target .flex .txt .detail_info{
border: 1px solid #8c8c8c;
padding: 20px 30px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.halfprice #case .simulation .in_case .target .flex .txt .detail_info li:nth-child(2){
margin-left: 50px;
}
.halfprice #case .simulation .in_case .target .flex .txt .detail_info li:nth-child(n+3){
margin-top: 25px;
width: 100%;
}
.halfprice #case .simulation .in_case .target .flex .txt .detail_info li dl{
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.halfprice #case .simulation .in_case .target .flex .txt .detail_info li dl dt,
.halfprice #case .simulation .in_case .target .flex .txt .detail_info li dl dd{
font-size: 16px;
line-height: 1.2;
}
.halfprice #case .simulation .in_case .target .flex .txt .detail_info li dl dt{
white-space: nowrap;
margin-right: 15px;
}
.halfprice #case .simulation .in_case .target .flex .txt .detail_info li dl dt::after{
content: "：";
margin-left: 15px;
}
.halfprice #case .simulation .plan_box{
padding: 51px 4.5% 45px;
background-color: #fff;
border-radius: 10px;
position: relative;
}
.halfprice #case .simulation .plan_box.normal_price{
margin-top: 88px;
background-image: url('../images/halfprice/normal_price_img.svg');
background-repeat: no-repeat;
background-position: left 60px bottom 50px;
-webkit-background-size: 410px auto;
background-size: 410px auto;
}
.halfprice #case .simulation .plan_box.subscription_price{
border: 2px solid #d86e0d;
padding-left: 1.8%;
padding-right: 1.8%;
}
.halfprice #case .simulation .plan_box.normal_price .title{
font-size: 18px;
line-height: 1;
letter-spacing: .06em;
padding: 9px 22px;
border-radius: 18px;
position: absolute;
top: 0;
left: 4.5%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #888;
color: #fff;
margin: 0;
}
.halfprice #case .simulation .plan_box.subscription_price .title{
font-size: 18px;
line-height: 1;
letter-spacing: .06em;
padding: 9px 22px;
border-radius: 18px;
position: absolute;
top: 0;
left: 4.5%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #d86e0d;
color: #fff;
white-space: nowrap;
}
.halfprice #case .simulation .plan_box .formula{
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: space-between;
}
.halfprice #case .simulation .plan_box .formula .price_elem{
width: 180px;
height: 100px;
flex-shrink: 0;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
justify-content: center;
border-radius: 6px;
box-sizing: border-box;
}
.halfprice #case .simulation .plan_box .formula .price_elem span{
font-size: 18px;
text-align: center;
}
.halfprice #case .simulation .plan_box .formula .price_elem span .price{
font-size: 21px;
font-weight: normal;
display: block;
}
.halfprice #case .simulation .plan_box .formula .price_elem{
background: url('../images/halfprice/toebeans_white.svg') no-repeat 30px 21px/30px 24px;
}
.halfprice #case .simulation .plan_box .formula .price_elem.price_green{
background-color: #dde9d8;
}
.halfprice #case .simulation .plan_box .formula .price_elem.price_red{
background-color: #f6e2e3;
}
.halfprice #case .simulation .plan_box .formula .price_elem.price_blue{
background-color: #d4e9ec;
}
.halfprice #case .simulation .plan_box .formula .price_elem.tax{
background-color: #ddd;
}
.halfprice #case .simulation .plan_box .formula .price_elem.discount{
background: #fff;
border: 2px solid #fe1d25;
}
.halfprice #case .simulation .plan_box .formula .price_elem.discount .price{
font-weight: bold;
font-size: 24px;
color: #fe1d25;
}
.halfprice #case .simulation .plan_box .formula .plus,
.halfprice #case .simulation .plan_box .formula .minus{
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
position: relative;
}
.halfprice #case .simulation .plan_box .formula .plus::before,
.halfprice #case .simulation .plan_box .formula .minus::before{
content: "";
width: 21px;
height: 3px;
background-color: #515150;
}
.halfprice #case .simulation .plan_box .formula .plus::after{
content: "";
width: 3px;
height: 21px;
background-color: #515150;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.halfprice #case .simulation .plan_box .total{
font-size: 16px;
text-align: right;
line-height: 1;
}
.halfprice #case .simulation .plan_box .total span.ul{
display: inline-block;
white-space: nowrap;
border-bottom: 3px solid #81bcff;
padding-bottom: 8px;
margin-top: 40px;
background: none;
}
.halfprice #case .simulation .plan_box .total span.ul .total_price::before{
content: "合計";
font-size: 18px;
font-weight: normal;
margin-right: 10px;
}
.halfprice #case .simulation .plan_box .total span.ul .total_price{
font-size: 48px;
font-weight: bold;
}
.halfprice #case .simulation .plan_box .total span.ul .total_price::after{
/*content: "円";*/
font-size: 28px;
margin-left: 5px;
margin-right: 5px;
}
.halfprice #case .simulation .plan_box.normal_price + .arrow{
width: 48px;
height: 25px;
background-color: #d2c880;
margin: 30px auto 60px;
position: relative;
}
.halfprice #case .simulation .plan_box.normal_price + .arrow::after{
content: "";
width: 0;
height: 0;
position: absolute;
top: calc(100% - 1px);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-style: solid;
border-width: 40px 50px 0 50px;
border-color: #d2c880 transparent transparent transparent;
}
.halfprice #case .simulation h4{
text-align: center;
font-size: 28px;
font-weight: 500;
margin-top: 30px;
margin-bottom: 0;
}
.halfprice #case .simulation h4 small{
font-size: .8em;
}
.halfprice #case .simulation h4 .red{
font-weight: bold;
}
.halfprice #case .simulation h4 b{
font-size: 48px;
}
.halfprice #case .case3{
margin-top: 110px;
padding-bottom: 110px;
}
.halfprice #case .case3 .in_case{
background-color: #e6f2ff;
border-radius: 10px;
font-size: 20px;
text-align: center;
line-height: 2;
padding: 50px;
color: #707070;
}
.halfprice #case .case3 .in_case i{
font-style: normal;
position: relative;
}
.halfprice #case .case3 .in_case i::before{
content: "";
width: 30px;
height: 30px;
background: url('../images/halfprice/icon_incase.svg') no-repeat center center/contain;
position: absolute;
top: 0;
left: -40px;
}
.halfprice #case .case3 .in_case b{
font-size: 24px;
font-weight: 500;
color: #323232;
}
.halfprice #case .case3 .in_case p{
font-size: 16px;
line-height: 1.75;
margin-top: 20px;
margin-bottom: 0;
}
.halfprice #case .case3 .in_case button.btn{
width: 640px;
height: 60px;
background-color: #505050;
color: #fff;
margin: 20px auto 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
.halfprice #case .case3 .in_case button.btn:focus{
outline: none
}
.halfprice #case .case3 .in_case button.btn::before{
content: "詳しくはこちら";
font-size: 17px;
}
.halfprice #case .case3 button.btn.close::before{
content: "閉じる";
}
.halfprice #case .case3 .in_case button.btn::after{
content: "";
width: 0;
height: 0;
border-width: 6px 5px 0 5px;
border-style: solid;
border-color: #fff transparent transparent;
margin-left: 10px;
}
.halfprice #case .case3 .in_case button.btn.close::after{
-webkit-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
.halfprice #case .case3 .in_case button.btn:hover{
background-color: #606060;
}
.halfprice #case .case3 .detail{
padding-top: 70px;
display: none;
}
.halfprice #case .case3 .ex{
display: flex;
align-items: center;
justify-content: center;
}
.halfprice #case .case3 .ex img{
width: 200px;
height: auto;
margin-right: 50px;
}
.halfprice #case .case3 .ex .ul{
font-size: 20px;
white-space: nowrap;
}
.halfprice #case .case3 .ex .ul b{
font-size: 32px;
font-weight: bold;
}
.halfprice #case .case3 .ex .ul b small{
font-size: 23px;
margin-left: 3px;
}
.halfprice #case .case3 .ex .blue{
color: #81bcff;
}
.halfprice #case .case3 .ex span.blue small{
font-size: 15px;
}
.halfprice #case .case3 .ex b.blue{
margin-left: 5px;
}
.halfprice #case .case3 .ex .when{
display: inline-block;
}
.halfprice #case .case3 .arrow{
display: block;
width: 100px;
height: auto;
margin: 45px auto 0;
}
.halfprice #case .case3 figure{
margin: 45px 0 0;
text-align: center;
}
.halfprice #case .case3 figcaption{
font-size: 23px;
font-weight: 500;
position: relative;
color: #323232;
padding-left: 50px;
display: inline-block;
}
.halfprice #case .case3 figcaption em{
font-style: normal;
font-size: 1.2em;
}
.halfprice #case .case3 figcaption::before{
content: "";
width: 35px;
height: 20px;
background: url('../images/halfprice/icon_coin_purse.svg') no-repeat center center/contain;
position: absolute;
top: 11px;
left: 0;
}
.halfprice #case .case3 figure img{
margin-top: 15px;
}
/* ABOUT FOOD フードについて */
.halfprice #food{
padding: 60px 0;
overflow: hidden;
}
.halfprice #food .box{
padding: 60px 50px;
}
.halfprice #food .box .txt{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.halfprice #food .box .txt img{
width: 192px;
flex-shrink: 0;
}
.halfprice #food .box .txt p{
font-size: 16px;
line-height: 2;
margin-bottom: 0;
}
.halfprice #food .box .food_feature{
display: flex;
justify-content: space-between;
counter-reset: item;
margin-top: 80px;
}
.halfprice #food .box .food_feature li{
width: 220px;
height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 50%;
position: relative;
}
.halfprice #food .box .food_feature li::before{
content: "";
width: 85px;
height: 85px;
border-radius: 50%;
background-color: #e6f2ff;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: 47px auto;
background-size: 47px auto;
position: absolute;
top: -35px;
left: -5px;
}
.halfprice #food .box .food_feature li:nth-child(1)::before{
background-image: url('../images/halfprice/food_feature_no1.svg');
}
.halfprice #food .box .food_feature li:nth-child(2)::before{
background-image: url('../images/halfprice/food_feature_no2.svg');
}
.halfprice #food .box .food_feature li:nth-child(3)::before{
background-image: url('../images/halfprice/food_feature_no3.svg');
}
.halfprice #food .box .food_feature li:nth-child(4)::before{
background-image: url('../images/halfprice/food_feature_no4.svg');
}
.halfprice #food .box .food_feature li img{
width: 50px;
height: auto;
}
.halfprice #food .box .food_feature li p{
font-size: 18px;
font-weight: 500;
line-height: 29px;
text-align: center;
margin-bottom: 0;
margin-top: 5px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.halfprice #food .slider{
margin-top: 85px;
width: 1830px;
margin-left: calc(50vw - 915px);
}
.halfprice #food .slider .item{
padding: 0 15px;
}
.halfprice #food .slider .item:focus{
outline: none;
}
.halfprice #food .slider .item_inner,
.halfprice #modal .modal_content{
padding: 50px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
}
.halfprice #food .slider .item_inner{
height: 580px;
padding-top: 150px;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
cursor: pointer;
}
.halfprice #food .slider .item_inner:hover{
background-color: #dedede;
}
.halfprice #food .slider .item .info,
.halfprice #modal .modal_content .info{
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.halfprice #food .slider .item .info{
position: absolute;
top: 50px;
left: 0;
right: 0;
margin: 0 auto;
width: calc(100% - 100px);
}
.halfprice #food .slider .item .info span,
.halfprice #modal .modal_content .info span{
font-size: 16px;
font-weight: 500;
}
.halfprice #food .slider .item .info .name,
.halfprice #modal .modal_content .info .name{
color: #747474;
}
.halfprice #food .slider .item .info .tag,
.halfprice #modal .modal_content .info .tag{
min-width: 160px;
background-color: #e6f2ff;
border-radius: 4px;
padding: 10px 5px;
text-align: center;
box-sizing: border-box;
margin-left: 10px;
flex-shrink: 0;
}
.halfprice #food .slider .item img,
.halfprice #modal .modal_content img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
}
.halfprice #modal .modal_content img{
margin-top: 30px;
}
.halfprice #food .slider .item .detail{
display: none !important;
}
.halfprice #modal .modal_content .detail{
margin-top: 30px;
max-width: 100%;
}
.halfprice #modal .modal_content .detail p{
font-size: 16px;
}
.halfprice #modal .modal_content .detail p.ttl{
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.halfprice #modal .modal_content .detail p:last-child{
margin-bottom: 0;
}
.halfprice #food .slider .slick-next,
.halfprice #food .slider .slick-prev{
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: 0;
bottom: 0;
margin: auto 0;
}
.halfprice #food .slider .slick-next{
border-left-color: #d2c880;
border-width: 60px 0 60px 40px;
right: calc(50% - 920px);
left: auto;
}
.halfprice #food .slider .slick-prev{
border-right-color: #d2c880;
border-width: 60px 40px 60px 0;
left: calc(50% - 920px);
}
@media screen and (max-width: 1940px) {
.halfprice #food .slider .slick-next{
right: calc(50% - 50vw + 50px);
left: auto;
}
.halfprice #food .slider .slick-prev{
left: calc(50% - 50vw + 50px);
}
}
.halfprice #modal{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
/* overflow: hidden; */
-webkit-overflow-scrolling: touch;
outline: 0;
overflow-x: hidden;
overflow-y: auto;
}
.halfprice #modal_bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: rgba(0,0,0,.5);
display: none;
}
.halfprice #modal.slide .modal_box {
-webkit-transition: -webkit-transform .7s cubic-bezier(0, 0, 0, 1);
-o-transition: -o-transform .7s cubic-bezier(0, 0, 0, 1);
transition: transform .7s cubic-bezier(0, 0, 0, 1);
-webkit-transform: translate(0,-25%);
-ms-transform: translate(0,-25%);
-o-transform: translate(0,-25%);
transform: translate(0,-25%);
}
.halfprice #modal.in .modal_box {
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.halfprice #modal .modal_box{
position: relative;
width: 600px;
margin: 30px auto;
}
.halfprice #modal .modal_box button.close{
background: none;
border: none;
border-radius: 0;
width: 40px;
height: 30px;
position: relative;
margin: 0 0 0 auto;
cursor: pointer;
display: block;
}
.halfprice #modal .modal_box button.close:focus{
outline: none;
}
.halfprice #modal .modal_box button.close::before,
.halfprice #modal .modal_box button.close::after{
content: "";
width: 20px;
height: 2px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
background-color: #fff;
}
.halfprice #modal .modal_box button.close::before{
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.halfprice #modal .modal_box button.close::after{
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.halfprice #modal .modal_content{
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
outline: 0;
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
/* Schedule / price 配送スケジュール・料金 */
.halfprice #price{
padding: 60px 0;
}
.halfprice #price .plan_checker{
margin: 50px auto 0;
max-width: 1080px;
width: 100%;
}
.halfprice #price .plan_checker input[type="radio"]{
display: none;
}
.halfprice #price .plan_checker label{
box-sizing: border-box;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
.halfprice #price .major_control_panel .family{
display: flex;
align-items: center;
justify-content: space-between;
width: 550px;
margin: 0 auto 40px;
}
.halfprice #price .major_control_panel .family label{
width: 220px;
height: 220px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f8f8f8;
box-shadow: 2px 2px 5px rgba(0,0,0,.1);
}
.halfprice #price .major_control_panel .family input[type="radio"]:checked + label,
.halfprice #price .major_control_panel .family label:hover{
background-color: #e9eaea;
}
.halfprice #price .major_control_panel .family label span{
font-size: 16px;
}
.halfprice #price .major_control_panel .family label img{
width: 90px;
height: auto;
margin-top: 10px;
}
.halfprice #price .major_control_panel .size{
display: flex;
justify-content: center;
/* flex-wrap: wrap; */
}
.halfprice #price .major_control_panel .size label{
font-size: 16px;
line-height: 20px;
width: 160px;
padding: 11px 0;
border-radius: 21px;
border: 1px solid #c8c9ca;
margin: 0 15px 15px;
text-align: center;
background-color: #fff;
box-shadow: 2px 2px 5px rgba(0,0,0,.1);
}
.halfprice #price .result_box{
padding: 30px 50px 25px;
}
.halfprice #price .minor_control_panel .weight{
display: flex;
justify-content: center;
}
.halfprice #price .minor_control_panel .weight label{
font-size: 16px;
line-height: 20px;
width: 110px;
padding: 14px 0;
border-radius: 6px;
border: 1px solid #c8c9ca;
text-align: center;
background-color: #fff;
box-shadow: 2px 2px 5px rgba(0,0,0,.1);
}
.halfprice #price .minor_control_panel .weight label:not(:last-of-type){
margin-right: 20px;
}
.halfprice #price .major_control_panel .size input[type="radio"]:checked + label,
.halfprice #price .major_control_panel .size label:hover,
.halfprice #price .minor_control_panel .weight input[type="radio"]:checked + label,
.halfprice #price .minor_control_panel .weight label:hover{
background-color: #fee6e5;
}
.halfprice #price .minor_control_panel .breed{
border-radius: 8px;
border: 1px solid #c8c9ca;
background-color: #fff;
padding: 20px 25px 12px;
}
.halfprice #price .minor_control_panel .breed .row{
display: flex;
justify-content: flex-start;
}
.halfprice #price .minor_control_panel .breed .row span{
font-size: 14px;
line-height: 17px;
width: 180px;
height: 52px;
border-radius: 6px;
text-align: center;
background-color: #ececec;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-left: calc(25% - 225px);
margin-bottom: 8px;
box-sizing: border-box;
/* word-break: keep-all; */
word-break: break-all;
}
/* _:lang(x)::-ms-backdrop, .halfprice #price .minor_control_panel .breed label{
word-break: break-all;
} */
.halfprice #price .minor_control_panel .breed .row span:nth-of-type(5n+1){
margin-left: 0;
}
.halfprice #price .minor_control_panel .weight_ttl,
.halfprice #price .minor_control_panel .breed_ttl{
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
display: block;
}
.halfprice #price .minor_control_panel .breed_ttl{
margin-top: 40px;
}
.halfprice #price .result_box .result{
margin-top: 38px;
}
.halfprice #price .result_box .result table{
width: 100%;
display: none;
}
.halfprice #price .result_box .result table th,
.halfprice #price .result_box .result table td{
font-size: 14px;
font-weight: 400;
text-align: center;
}
.halfprice #price .result_box .result table th{
background-color: #505050;
color: #fff;
}
.halfprice #price .result_box .result table td{
background-color: #fff;
}
.halfprice #price .result_box .result .no_data{
text-align: center;
padding: 30px 0;
}
.halfprice #price .result_box p.note{
font-size: 14px;
text-align: right;
color: #505050;
margin-top: 25px;
margin-bottom: 0;
}
.halfprice .scroll-hint-icon {
top: calc(50% - 30px);
left: calc(50% - 35px);
width: 70px;
height: 55px;
padding: 17px 5px 5px 5px;
}
.halfprice .scroll-hint-icon:before {
width: 20px;
height: 20px;
}
.halfprice .scroll-hint-text {
font-size: 10px;
margin-top: 1px;
}
.halfprice .scroll-hint-icon:after {
width: 30px;
height: 11px;
top: 6px;
margin-left: -18px;
background-size: contain;
}
.halfprice .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
animation: scroll-hint-appear-s 1.2s linear;
animation-iteration-count: 2;
}
@keyframes scroll-hint-appear-s {
0% {
transform: translateX(20px);
opacity: 0;
}
10% {
opacity: 1;
}
50%,
100% {
transform: translateX(-20px);
opacity: 0;
}
}
.halfprice #price .documents{
margin-top: 115px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.halfprice #price .documents .img{
width: 350px;
}
.halfprice #price .documents .img img{
display: block;
width: 100%;
height: auto;
}
.halfprice #price .documents .box{
padding: 45px;
width: 60%;
margin-left: 8%;
}
.halfprice #price .documents .box ul li{
padding-left: 20px;
position: relative;
}
.halfprice #price .documents .box ul li::before{
content: "＊";
position: absolute;
top: 0;
left: 0;
}
.halfprice #price .documents .box ul li:nth-child(n+2){
margin-top: 5px;
}
.halfprice #price .documents .box ul li a{
color: #505050;
}
/* FOOD DELIVERY application フード定期配送アプリ */
.halfprice #delivery{
padding: 60px 0;
}
.halfprice #delivery .box{
padding: 50px;
display: flex;
justify-content: space-between;
}
.halfprice #delivery .box .img{
width: 32%;
}
.halfprice #delivery .box .img img{
display: block;
width: 100%;
height: auto;
}
.halfprice #delivery .box .txt{
width: 60%;
padding: 40px 0 80px;
position: relative;
}
.halfprice #delivery .box .txt p{
font-size: 16px;
line-height: 2;
}
.halfprice #delivery .box .txt h4{
margin-bottom: 20px;
}
.halfprice #delivery .box .txt .dl_btn{
position: absolute;
bottom: 30px;
right: 0;
display: flex;
align-items: center;
}
.halfprice #delivery .box .txt .dl_btn a{
width: 120px;
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.halfprice #delivery .box .txt .dl_btn a:nth-child(n+2){
margin-left: 17px;
}
.halfprice #delivery .box .txt .dl_btn a img{
display: block;
width: 100%;
height: auto;
}
.halfprice #delivery .box .txt .dl_btn a:hover{
opacity: .8;
}
/* Q & A よくあるご質問 */
.halfprice #qa{
padding: 60px 0 130px;
}
.halfprice #qa .qa_list{
max-width: 980px;
width: 100%;
margin: 0 auto;
counter-reset: item;
}
.halfprice #qa .qa_list > dl:nth-child(n+2){
margin-top: 20px;
}
.halfprice #qa .qa_list > dl > dt{
font-size: 18px;
padding: 12px 60px 12px 120px;
border-radius: 6px;
background: url('../images/halfprice/icon_balloon.svg') no-repeat 19px 10px/30px auto;
background-color: #ddeffc;
position: relative;
cursor: pointer;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
.halfprice #qa .qa_list > dl > dt:hover{
background-color: #b7d8f0;
}
.halfprice #qa .qa_list > dl > dt::before{
counter-increment: item;
content: 'Q'counter(item)'.';
font-size: 24px;
font-weight: 500;
position: absolute;
left: 65px;
top: 7px;
}
.halfprice #qa .qa_list > dl > dt i{
width: 21px;
height: 21px;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto 0;
}
.halfprice #qa .qa_list > dl > dt i::before,
.halfprice #qa .qa_list > dl > dt i::after{
content: "";
background-color: #81bcff;
position: absolute;
margin: auto;
top: 0;
left: 0;
}
.halfprice #qa .qa_list > dl > dt i::before{
width: 100%;
height: 3px;
bottom: 0;
}
.halfprice #qa .qa_list > dl > dt i::after{
width: 3px;
height: 100%;
right: 0;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.halfprice #qa .qa_list > dl.open > dt i::after{
opacity: 0;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.halfprice #qa .qa_list > dl > dd{
font-size: 16px;
line-height: 1.4;
border-radius: 6px;
position: relative;
overflow: hidden;
padding: 20px 40px 20px 20px;
display: none;
opacity: 0;
}
.halfprice #qa .qa_list > dl > dd *{
font-size: 16px;
line-height: 1.4;
}
.halfprice #qa .qa_list > dl > dd::before{
content: "";
width: 37px;
height: 37px;
background: url('../images/halfprice/icon_a.svg') no-repeat center center/contain;
display: block;
margin-bottom: 10px;
margin-left: -5px;
}
.halfprice #qa .qa_list > dl > dd::after{
content: "";
width: 100%;
height: calc(100% - 10px);
position: absolute;
left: 0;
bottom: 0;
background: url('../images/halfprice/qa_logo.svg') no-repeat right 10px center/21px 113px;
background-color: #fbfbfb;
z-index: -1;
border-radius: 6px;
}
.halfprice #qa .qa_list > dl > dd ul li{
padding-left: 30px;
position: relative;
}
.halfprice #qa .qa_list > dl > dd ul li:nth-child(n+2){
margin-top: 5px;
}
.halfprice #qa .qa_list > dl > dd ul li::before{
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #81bcff;
position: absolute;
top: 9px;
left: 15px;
}
.halfprice #qa .qa_list > dl > dd > *{
margin-bottom: 0;
}
.halfprice #qa .qa_list > dl > dd > *:nth-child(n+2){
margin-top: 10px;
}
/* お問合せ */
.halfprice #contact_info{
padding: 70px 0 60px;
}
.halfprice #contact_info .container{
display: flex;
justify-content: space-between;
}
.halfprice #contact_info .tel_box{
text-align: center;
padding: 20px 0;
border-width: 1px 0;
border-color: #fb807b;
border-style: solid;
width: 57%;
flex-shrink: 0;
}
.halfprice #contact_info .tel_box p{
font-size: 17px;
margin-bottom: 0;
color: #505050;
}
.halfprice #contact_info .tel_box .tel{
display: inline-block;
text-align: left;
margin-top: 11px;
}
.halfprice #contact_info .tel_box .tel .tel_number{
display: block;
font-size: 48px;
line-height: 1;
font-weight: 500;
color: #fb807b;
}
.halfprice #contact_info .tel_box .tel .tel_number img{
margin: 0 5px 3px 0;
display: inline-block;
width: 25px;
height: auto;
}
.halfprice #contact_info .tel_box .tel p{
font-size: 15px;
margin-top: 11px;
}
.halfprice #contact_info .tel_box .tel p time{
margin-left: 10px;
}
.halfprice #contact_info .img{
width: 41%;
}
/**
* 201121 あんしん半額プラン
*/
body.under.relief_halfprice section,
.relief_halfprice section .note{
color: #777;
}
.under.relief_halfprice h3, .under.relief_halfprice h4, .under.relief_halfprice h5, .under.relief_halfprice h6, .under.relief_halfprice .h3{
font-family: Yu Gothic medium,arial,clean,verdana,'Hiragino Kaku Gothic Pro',"ＭＳ Ｐゴシック",Osaka,sans-serif;
color: #777;
}
.relief_halfprice section .wrapper{
max-width: 1030px;
}
.relief_halfprice section .container{
width: 1000px;
}
.relief_halfprice section p{
font-size: 17px;
margin-bottom: 30px;
}
.relief_halfprice section p:last-child{
margin-bottom: 0;
}
.relief_halfprice .topic-path {
margin-bottom: 0;
background: #fff;
border-bottom: 1px solid #c7c7c7;
}
/* MV */
/*.relief_halfprice #mv{
background: url('../images/relief_halfprice/mv_bg.jpg') no-repeat center bottom/cover;
}*/
.relief_halfprice #mv .container{
max-width: 1500px;
padding-top: 40px;
}
/* .relief_halfprice #mv .container iframe{
margin: 0 auto 10px;
display: block;
} */
.relief_halfprice #mv .container a.movie{
display: block;
width: 710px;
margin: 0 auto;
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.relief_halfprice #mv .container a.movie:hover{
opacity: .8;
}
.relief_halfprice #mv .container .movie img{
display: block;
width: 100%;
}
/* あんしん半額プランとは？ */
.relief_halfprice #feature .header{
padding: 90px 0 40px;
}
.relief_halfprice #feature .header h3{
font-size: 45px;
margin-bottom: 50px;
position: relative;
padding-left: 30px;
}
.relief_halfprice #feature .header h3::before{
content: "";
width: 7px;
height: 100%;
background-color: #4180b9;
position: absolute;
bottom: 5px;
left: 0;
}
.relief_halfprice #feature .header h3 small{
font-size: 28px;
}
.relief_halfprice #feature .header p b{
font-size: 22px;
}
.relief_halfprice #feature .contents{
padding: 56px 0 40px;
background-color: #f3eddd;
}
.relief_halfprice #feature .contents h4{
padding-left: 0;
font-size: 22px;
color: #4180b9;
margin-bottom: 50px;
}
.relief_halfprice #feature .contents h4::after{
content: none;
}
.relief_halfprice #feature .contents h4 + p{
margin-bottom: 20px;
text-align: center;
}
.relief_halfprice #feature .contents p b{
font-size: 25px;
}
.relief_halfprice #feature .contents .orange{
color: #ff9b35;
}
.relief_halfprice #feature .contents .accordion{
overflow: hidden;
margin-bottom: 20px;
position: relative;
-webkit-transition: all .7s;
-o-transition: all .7s;
transition: all .7s;
}
.relief_halfprice #feature .contents .accordion.hide{
opacity: 0;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.relief_halfprice #feature .contents .accordion.close{
height: 200px !important;
}
.relief_halfprice #feature .contents .accordion::after{
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
background: -moz-linear-gradient(top, rgba(244,238,222,0), rgba(244,238,222,0) 30%, rgba(244,238,222,1));
background: -webkit-linear-gradient(top, rgba(244,238,222,0), rgba(244,238,222,0) 30%, rgba(244,238,222,1));
background: linear-gradient(to bottom, rgba(244,238,222,0), rgba(244,238,222,0) 30%, rgba(244,238,222,1));
opacity: 0;
}
.relief_halfprice #feature .contents .accordion.close::after{
opacity: 1;
}
.relief_halfprice #feature .contents .accordion_toggle_btn{
border: none;
background: none;
cursor: pointer;
font-size: 18px;
line-height: 1;
color: #4180b9;
position: relative;
padding-left: 17px;
outline: none;
}
.relief_halfprice #feature .contents .accordion:not(.close) + .accordion_toggle_btn .more{
display: none;
}
.relief_halfprice #feature .contents .accordion.close + .accordion_toggle_btn .close{
display: none;
}
.relief_halfprice #feature .contents .accordion_toggle_btn::before{
content: "";
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #4180b9;
border-width: 0 5px 8px 5px;
position: absolute;
left: 0;
bottom: 4px;
-webkit-transition: transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
}
.relief_halfprice #feature .contents .accordion.close + .accordion_toggle_btn::before{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.relief_halfprice #feature .contents .accordion_toggle_btn:hover{
text-decoration: underline;
}
/* ご契約シミュレーション */
.relief_halfprice #contract_ex{
padding: 100px 0;
}
.relief_halfprice #contract_ex h3{
font-size: 30px;
margin-bottom: 60px;
}
.relief_halfprice #contract_ex h3 span{
display: inline-block;
position: relative;
}
.relief_halfprice #contract_ex h3 span::after{
content: "";
width: 100%;
height: 3px;
background-color: #4180b9;
position: absolute;
bottom: 0;
left: 0;
}
.relief_halfprice #contract_ex .store_title{
border-radius: 30px;
background-color: #dde8f4;
padding: 35px 80px;
margin-bottom: 55px;
}
.relief_halfprice #contract_ex .store_title .store_name{
font-size: 25px;
font-weight: bold;
margin-bottom: 0;
}
.relief_halfprice #contract_ex .store_title .flex{
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.relief_halfprice #contract_ex .store_title .flex .img{
flex-shrink: 0;
margin-right: 30px;
}
.relief_halfprice #contract_ex .store_title .flex .txt{
width: 100%;
}
.relief_halfprice #contract_ex .store_title .flex .txt p{
font-size: 20px;
font-weight: bold;
}
.relief_halfprice #contract_ex .store_title .flex .txt p.biological_no{
font-size: 20px;
margin-bottom: 5px;
}
.relief_halfprice #contract_ex .store_title .flex .txt .detail_info{
display: -webkit-flex;
display: -ms-flex;
display: flex;
flex-wrap: wrap;
}
.relief_halfprice #contract_ex .store_title .flex .txt .detail_info li{
width: 100%;
margin-bottom: 8px;
}
.relief_halfprice #contract_ex .store_title .flex .txt .detail_info li.half{
width: calc(50% - 8px);
}
.relief_halfprice #contract_ex .store_title .flex .txt .detail_info li.half + .half{
margin-left: 15px;
}
.relief_halfprice #contract_ex .store_title .flex .txt .detail_info li dl{
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: space-between;
-ms-align-items: stretch;
align-items: stretch;
}
.relief_halfprice #contract_ex .store_title .flex .txt .detail_info li dl dt{
width: 90px;
box-sizing: border-box;
flex-shrink: 0;
margin-right: 8px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
justify-content: center;
background-color: #bba28c;
color: #fff;
padding: 0 5px;
}
.relief_halfprice #contract_ex .store_title .flex .txt .detail_info li dl dd{
width: 100%;
background-color: #fff;
padding: 0 5px;
}
.relief_halfprice #contract_ex .price_simulation .plan_box{
border: 2px solid #808080;
padding: 40px 23px 20px;
border-radius: 10px;
position: relative;
}
.relief_halfprice #contract_ex .price_simulation .plan_box.promotion_price{
border-color: #8fa6cc;
padding-bottom: 49px;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .title{
font-size: 20px;
font-weight: bold;
letter-spacing: .1em;
color: #fff;
background-color: #808080;
padding: 0 20px;
line-height: 30px;
padding-top: 4px;
border-radius: 17px;
position: absolute;
top: 0;
left: 23px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.relief_halfprice #contract_ex .price_simulation .plan_box.promotion_price .title{
background-color: #8fa6cc;
letter-spacing: .04em;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .plan_box_inner{
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: space-between;
}
.relief_halfprice #contract_ex .price_simulation .plan_box.promotion_price .plan_box_inner{
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left{
display: -webkit-flex;
display: -ms-flex;
display: flex;
flex-shrink: 0;
}
.relief_halfprice #contract_ex .price_simulation .plan_box.promotion_price .formula_left{
width: 100%;
justify-content: space-between;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem{
width: 150px;
height: 118px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem:nth-child(n+2){
margin-left: 25px;
position: relative;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem:nth-child(n+2)::before{
content: "";
width: 13px;
height: 3px;
background-color: #777;
position: absolute;
top: 0;
bottom: 0;
right: calc(100% + 6px);
margin: auto 0;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem:nth-child(n+2).discount::before,
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem:nth-child(n+2).free::before{
right: calc(100% + 9px);
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem:nth-child(n+2):not(.discount)::after{
content: "";
width: 3px;
height: 13px;
background-color: #777;
position: absolute;
top: 0;
bottom: 0;
right: calc(100% + 11px);
margin: auto 0;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem:nth-child(n+2).free::after{
right: calc(100% + 14px);
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem span{
font-size: 15px;
line-height: 1.7;
text-align: center;
position: relative;
font-weight: bold;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.price{
background: url('../images/relief_halfprice/toebeans_white.svg') no-repeat 8px 6px/32px 32px;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.green{
background-color: #dde9d8;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.red{
background-color: #f6e2e3;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.blue{
background-color: #d4e9ec;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem .optional{
position: absolute;
bottom: 5px;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.tax{
background-color: #ddd;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.discount{
border: 3px solid #e6657d;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.discount span{
color: #e6657d;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.free{
border: 3px dashed #8bb3ba;
width: 150px;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.free span.red{
color: #d0001e;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.free span.red b{
font-size: 28px;
line-height: 1;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_left .price_elem.free small{
font-size: 14px;
white-space: nowrap;
}
.relief_halfprice #contract_ex .price_simulation .plan_box.promotion_price p.note{
font-size: 13px;
margin-top: 10px;
margin-bottom: 16px;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_right{
width: 100%;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.relief_halfprice #contract_ex .price_simulation .plan_box.promotion_price .formula_right{
justify-content: flex-end;
padding-right: 65px;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_right p{
position: relative;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_right p::before{
content: "";
width: 17px;
height: 3px;
border-style: solid;
border-color: #777;
border-width: 3px 0;
position: absolute;
top: 30px;
bottom: 0;
right: calc(100% + 10px);
margin: auto 0;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_right p > small{
font-size: 18px;
display: block;
margin-bottom: 10px;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_right p b{
font-size: 36px;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_right p b small{
font-size: 24px;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_right p b{
position: relative;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_right p b i{
position: absolute;
left: 100%;
bottom: 7px;
font-size: 15px;
font-style: normal;
white-space: nowrap;
}
.relief_halfprice #contract_ex .price_simulation .plan_box .formula_right p b + span{
display: block;
}
.relief_halfprice #contract_ex .price_simulation .plan_box > .note{
font-size: 12px;
line-height: 1.5;
margin-top: 20px;
}
.relief_halfprice #contract_ex .price_simulation .arrow{
padding: 50px 0 64px;
}
.relief_halfprice #contract_ex .price_simulation .arrow i{
position: relative;
width: 45px;
height: 22px;
background-color: #8fa6cc;
display: block;
margin: 0 auto;
font-style: normal;
}
.relief_halfprice #contract_ex .price_simulation .arrow i::after{
content: "";
width: 0;
height: 0;
border-width: 36px 46px 0 46px;
border-color: #8fa6cc transparent transparent transparent;
border-style: solid;
position: absolute;
top: calc(100% - 1px);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.relief_halfprice #contract_ex .price_simulation .arrow i span{
font-size: 20px;
font-weight: bold;
position: absolute;
top: 8px;
right: calc(100% + 40px);
white-space: nowrap;
}
.relief_halfprice #contract_ex .price_simulation > .note{
text-align: center;
margin-top: 22px;
}
.relief_halfprice #contract_ex .price_simulation > .note p{
background-color: #dfdfdf;
font-size: 16px;
font-weight: bold;
display: inline-block;
line-height: 36px;
padding: 2px 54px 0;
border-radius: 20px;
}
.relief_halfprice #contract_ex .price_simulation .difference{
color: #e6657d;
font-size: 23px;
font-weight: bold;
text-align: center;
margin-top: 60px;
margin-bottom: 51px;
}
.relief_halfprice #contract_ex .price_simulation .difference .underline{
border-bottom: 3px solid #e6657d;
}
.relief_halfprice #contract_ex .price_simulation .difference b{
font-size: 36px;
line-height: 1;
}
.relief_halfprice #contract_ex .price_simulation .monthly_payment_amount{
border: 3px solid #e6657d;
border-radius: 10px;
padding: 20px 0;
background: url('../images/relief_halfprice/toebeans_pink.svg') no-repeat 12px 12px/82px 82px;
}
.relief_halfprice #contract_ex .price_simulation .monthly_payment_amount dl{
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: space-between;
-ms-align-items: center;
align-items: center;
margin: 0 auto;
width: 100%;
max-width: 700px;
}
.relief_halfprice #contract_ex .price_simulation .monthly_payment_amount dl dt{
font-size: 27px;
font-weight: bold;
}
.relief_halfprice #contract_ex .price_simulation .monthly_payment_amount dl dt small{
font-size: 20px;
display: block;
}
.relief_halfprice #contract_ex .price_simulation .monthly_payment_amount dl dd{
font-size: 50px;
font-weight: bold;
}
.relief_halfprice #contract_ex .price_simulation .monthly_payment_amount dl dd small{
font-size: 33px;
}
.relief_halfprice #contract_ex .price_simulation .monthly_payment_amount dl dd small small{
font-size: 25px;
}
/* .relief_halfprice #contract_ex iframe{
margin: 50px auto 0;
display: block;
} */
.relief_halfprice #contract_ex .movie{
display: block;
margin: 50px auto 0;
width: 590px;
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.relief_halfprice #contract_ex .movie:hover{
opacity: .8;
}
.relief_halfprice #contract_ex .movie img{
display: block;
width: 100%;
}
/* ご契約基本内容 */
.relief_halfprice #basic_detail .header{
padding: 20px 0;
}
.relief_halfprice #basic_detail .header h3{
font-size: 30px;
margin-bottom: 60px;
}
.relief_halfprice #basic_detail .header h3 span{
display: inline-block;
position: relative;
}
.relief_halfprice #basic_detail .header h3 span::after{
content: "";
width: 100%;
height: 3px;
background-color: #4180b9;
position: absolute;
bottom: 0;
left: 0;
}
.relief_halfprice #basic_detail .header h4{
font-size: 42px;
padding-left: 45px;
position: relative;
}
.relief_halfprice #basic_detail .header h4.plan1_title{
color: #e18187;
}
.relief_halfprice #basic_detail .header h4.plan2_title{
color: #7ea86d;
}
.relief_halfprice #basic_detail .header h4::after{
content: none;
}
.relief_halfprice #basic_detail .header h4::before{
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 2px;
left: 0;
}
.relief_halfprice #basic_detail .header h4.plan1_title::before{
background-color: #e18187;
}
.relief_halfprice #basic_detail .header h4.plan2_title::before{
background-color: #7ea86d;
}
.relief_halfprice #basic_detail .plan1-1{
background-color: #f6e2e3;
padding: 35px 0 50px;
}
.relief_halfprice #basic_detail .plan1-1 p.plan_catch{
background-color: #e18187;
font-size: 26px;
line-height: 48px;
border-radius: 26px;
padding: 4px 26px 0;
color: #fff;
display: inline-block;
font-weight: bold;
margin-bottom: 30px;
}
.relief_halfprice #basic_detail .plan1-1 p.plan_catch small{
font-size: 20px;
}
.relief_halfprice #basic_detail .plan1-1 .flex{
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-align-items: flex-start;
align-items: flex-start;
margin-bottom: 35px;
}
.relief_halfprice #basic_detail .plan1-1 .flex .img{
flex-shrink: 0;
width: 470px;
margin-left: 20px;
}
.relief_halfprice #basic_detail .plan1-1 .flex .txt{
width: 100%;
}
.relief_halfprice #basic_detail .plan1-1 .flex .txt h5{
color: #e18187;
padding: 0;
border: none;
font-size: 35px;
}
.relief_halfprice #basic_detail .plan1-1 .flex .txt p{
font-size: 20px;
}
.relief_halfprice #basic_detail .plan1-1 .flex .txt p.note{
font-size: 17px;
color: #fff;
background-color: #777;
border-radius: 10px;
padding: 10px 20px;
}
.relief_halfprice #basic_detail .plan1-1 .flex .txt p.note a{
color: #fff;
}
.relief_halfprice #basic_detail .plan1-1 .flex .txt p.note a:hover{
text-decoration: none;
}
.relief_halfprice #basic_detail .plan1-2{
padding: 35px 0;
}
.relief_halfprice #basic_detail .plan1-2 .app{
padding: 10px 35px;
border: 3px solid #ff9b35;
display: -webkit-flex;
display: -ms-flex;
display: flex;
border-radius: 25px;
background-color: #fff;
box-shadow: 5px 4px 6px rgba(0,0,0,.2);
margin-bottom: 70px;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt{
width: 100%;
padding-top: 40px;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt h5{
padding: 0;
border: none;
font-size: 27px;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt h5 span{
display: inline-block;
border-bottom: 3px solid #ff9b35;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt p a{
color: #777;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt .how_to_install{
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-align-items: flex-end;
align-items: flex-end;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt .app_btn{
display: -webkit-flex;
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt .app_btn a{
width: 145px;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt .app_btn a:hover{
opacity: .7;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt .app_btn a img{
display: block;
width: 100%;
height: auto;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt .app_btn a:nth-child(n+2){
margin-left: 20px;
}
.relief_halfprice #basic_detail .plan1-2 .app .txt .how_to_install .qr{
width: 69px;
margin-left: 30px;
}
.relief_halfprice #basic_detail .plan1-2 .app .img{
flex-shrink: 0;
width: 380px;
margin-left: 20px;
}
.relief_halfprice #basic_detail .plan1-2 .app .img img{
width: 246px;
display: block;
margin: 0 auto;
}
.relief_halfprice #basic_detail .plan1-2 dl dt{
font-size: 22px;
font-weight: bold;
padding-left: 1em;
position: relative;
margin-bottom: 10px;
}
.relief_halfprice #basic_detail .plan1-2 dl dt::before{
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #777;
position: absolute;
top: 2px;
left: 0;
}
.relief_halfprice #basic_detail .plan1-2 dl dt:nth-child(n+2){
margin-top: 50px;
}
.relief_halfprice #basic_detail .plan1-2 dl dd small{
font-size: 14px;
line-height: 1.7;
display: block;
}
.relief_halfprice #basic_detail .plan1-2 dl dd figure{
margin: 20px 0 0;
}
.relief_halfprice #basic_detail .plan1-2 dl dd figure figcaption{
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
}
.relief_halfprice #basic_detail .plan1-2 p.pink{
color: #e6657d;
font-size: 28px;
font-weight: bold;
margin-top: 30px;
}
.relief_halfprice #basic_detail .plan1-2 p.pink span{
display: inline-block;
border-bottom: 3px solid #e6657d;
line-height: 1.2;
}
.relief_halfprice #basic_detail img.plus{
display: block;
width: 124px;
height: auto;
margin: 15px auto;
}
.relief_halfprice #basic_detail .plan2{
background-color: #dde9d8;
padding: 35px 0 50px;
}
.relief_halfprice #basic_detail .plan2 .flex{
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.relief_halfprice #basic_detail .plan2 .flex .txt{
width: 100%;
}
.relief_halfprice #basic_detail .plan2 .flex .txt p.plan_catch{
background-color: #7ea86d;
font-size: 26px;
line-height: 44px;
border-radius: 26px;
padding: 4px 26px 0;
color: #fff;
display: inline-block;
font-weight: bold;
margin-bottom: 30px;
}
small.super{
font-size: .5em;
display: inline-block;
-webkit-transform: translateY(-1em);
-ms-transform: translateY(-1em);
transform: translateY(-1em);
}
.relief_halfprice #basic_detail .plan2 .flex .txt h5{
color: #7ea86d;
padding: 0;
border: none;
font-size: 35px;
}
.relief_halfprice #basic_detail .plan2 .flex .txt p{
font-size: 20px;
}
.relief_halfprice #basic_detail .plan2 .flex .txt p.note{
font-size: 16px;
color: #7ea86d;
}
.relief_halfprice #basic_detail .plan2 .table{
width: 44%;
flex-shrink: 0;
margin-left: 47px;
}
.relief_halfprice #basic_detail .plan2 .table p.table_title{
font-size: 17px;
padding-left: 18px;
position: relative;
line-height: 1;
margin-bottom: 10px;
}
.relief_halfprice #basic_detail .plan2 .table p.table_title::before{
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #777;
position: absolute;
top: 0;
left: 0;
}
.relief_halfprice #basic_detail .plan2 .table table{
width: 100%;
table-layout: fixed;
background-color: #fff;
}
.relief_halfprice #basic_detail .plan2 .table table th{
background-color: #dfdfdf;
}
.relief_halfprice #basic_detail .plan2 .table table tbody tr:nth-child(even) td{
background-color: #fff1c6;
}
.relief_halfprice #basic_detail .plan2 .table table tr th,
.relief_halfprice #basic_detail .plan2 .table table tr td{
font-size: 17px;
font-weight: normal;
color: #777;
border: none;
padding: 0;
padding: 3px 0 1px;
text-align: center;
}
.relief_halfprice #basic_detail .plan2 .table table tr th:nth-child(n+2),
.relief_halfprice #basic_detail .plan2 .table table tr td:nth-child(n+2){
border-left: 1px solid #bfbfbf;
}
.relief_halfprice #basic_detail .plan2 .table p.note{
font-size: 14px;
margin-top: 10px;
}
.relief_halfprice #basic_detail .plan2 .necessary_information{
border: 3px solid #e6657d;
padding: 25px 30px;
background-color: #fff;
margin-top: 30px;
border-radius: 26px;
}
.relief_halfprice #basic_detail .plan2 .necessary_information img{
float: right;
width: 383px;
height: auto;
margin: 0 0 10px 20px;
}
.relief_halfprice #basic_detail .plan2 .necessary_information p.title{
font-size: 25px;
color: #e6657d;
font-weight: bold;
margin-bottom: 30px;
}
.relief_halfprice #basic_detail .plan2 .guarantee{
margin-top: 40px;
background-color: #fff;
padding: 30px 45px;
}
.relief_halfprice #basic_detail .plan2 .guarantee .title{
font-size: 25px;
margin-bottom: 0;
font-weight: bold;
}
.relief_halfprice #basic_detail .plan2 .guarantee .subtitle{
font-size: 21px;
margin-bottom: 10px;
font-weight: bold;
margin-top: 30px;
}
.relief_halfprice #basic_detail .plan2 .guarantee ul{
padding-left: 20px;
}
.relief_halfprice #basic_detail .plan2 .guarantee ul li:not(.note){
position: relative;
padding-left: 16px;
}
.relief_halfprice #basic_detail .plan2 .guarantee ul li:not(.note)::before{
content: "";
width: 13px;
height: 13px;
border-radius: 50%;
background-color: #777;
position: absolute;
top: 4px;
left: 0;
}
.relief_halfprice #basic_detail .plan2 .guarantee ul li.note{
font-size: 14px;
margin-top: 10px;
}
.relief_halfprice #basic_detail .plan2 .guarantee ul li a{
color: #777;
}
.relief_halfprice #basic_detail .plan2 .container > p.note{
margin-top: 50px;
border-radius: 10px;
background-color: #777;
color: #fff;
text-align: center;
padding: 10px 0;
}
.relief_halfprice #basic_detail .plan2 p.note a{
color: #fff;
}
.relief_halfprice #other_information{
padding: 130px 0 50px;
}
.relief_halfprice #other_information .about_pack{
padding: 40px 50px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
flex-direction: column;
-ms-align-items: center;
align-items: center;
background: url('../images/relief_halfprice/about_pack_bg.png') no-repeat center center/100% 100%;
}
.relief_halfprice #other_information .about_pack h3{
background-color: #ff9b35;
color: #fff;
font-size: 28px;
text-align: center;
line-height: 50px;
padding: 4px 27px 0;
border-radius: 27px;
position: relative;
}
.relief_halfprice #other_information .about_pack h3::before,
.relief_halfprice #other_information .about_pack h3::after{
content: "";
width: 84px;
height: 65px;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: contain;
background-size: contain;
position: absolute;
top: -7px;
}
.relief_halfprice #other_information .about_pack h3::before{
background-image: url('../images/relief_halfprice/about_pack_title_dog.svg');
right: calc(100% + 25px);
}
.relief_halfprice #other_information .about_pack h3::after{
background-image: url('../images/relief_halfprice/about_pack_title_cat.svg');
left: calc(100% + 25px);
}
.relief_halfprice #other_information .about_pack .flex{
display: -webkit-flex;
display: -ms-flex;
display: flex;
margin-top: 30px;
width: 100%;
}
.relief_halfprice #other_information .about_pack .flex .txt{
width: 100%;
}
.relief_halfprice #other_information .about_pack .flex .txt p{
font-weight: bold;
color: #5a3f18;
}
.relief_halfprice #other_information .about_pack .flex .txt ul li{
padding-left: 15px;
position: relative;
}
.relief_halfprice #other_information .about_pack .flex .txt ul li::before{
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 6px;
left: 0;
background-color: #ff9b35;
}
.relief_halfprice #other_information .about_pack .flex .txt ul li dl{
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.relief_halfprice #other_information .about_pack .flex .txt ul li dl dt{
color: #ff9b35;
flex-shrink: 0;
width: 135px;
font-weight: bold;
font-size: 13px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
white-space: nowrap;
}
.relief_halfprice #other_information .about_pack .flex .txt ul li dl dt::after{
content: "";
width: 100%;
margin: 0 5px;
background-image: linear-gradient(to right, #777, #777 2px, transparent 2px, transparent 6px);
background-repeat: repeat-x;
background-size: 6px 2px;
background-position: 0 10px;
}
.relief_halfprice #other_information .about_pack .flex .txt ul li dl dd{
width: 100%;
font-size: 13px;
}
.relief_halfprice #other_information .about_pack .flex .txt ul li span.underline{
font-weight: bold;
display: inline-block;
border-bottom: 1px solid #ff9b35;
line-height: 1;
}
.relief_halfprice #other_information .about_pack .flex .txt ul li span.orange{
color: #ff9b35;
}
.relief_halfprice #other_information .about_pack .flex .table{
width: 280px;
margin-left: 66px;
flex-shrink: 0;
}
.relief_halfprice #other_information .about_pack .flex .table table{
width: 100%;
table-layout: fixed;
background-color: #fff;
}
.relief_halfprice #other_information .about_pack .flex .table table th{
font-size: 17px;
font-weight: bold;
text-align: center;
background-color: #f8cea0;
border-color: #b7b7b7;
color: #777;
padding: 3px 0 1px;
}
.relief_halfprice #other_information .about_pack .flex .table table td{
font-size: 14px;
text-align: center;
border-color: #b7b7b7;
padding: 5px 0 3px;
font-weight: bold;
color: #777;
}
.relief_halfprice #other_information .about_pack .flex .table table .bg_gray{
background-color: #dfdfdf;
}
.relief_halfprice #other_information .about_pack .flex .table p.note{
margin-top: 5px;
font-size: 14px;
}
.relief_halfprice #other_information .notice{
margin-top: 40px;
padding: 0 20px;
}
.relief_halfprice #other_information .notice p.title{
font-size: 25px;
font-weight: bold;
padding-left: 27px;
position: relative;
line-height: 1;
}
.relief_halfprice #other_information .notice p.title::before{
content: "";
width: 23px;
height: 23px;
position: absolute;
top: 0;
left: 0;
background-color: #777;
}
.relief_halfprice #other_information .notice ul{
margin-top: 10px;
padding: 0 20px;
}
.relief_halfprice #other_information .notice ul li{
font-size: 17px;
padding-left: 18px;
position: relative;
}
.relief_halfprice #other_information .notice ul li::before{
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #777;
position: absolute;
top: 6px;
left: 0;
}
.relief_halfprice #relief_halfprice_contact{
padding: 35px 0;
background-color: #f6f6f6;
}
.relief_halfprice #relief_halfprice_contact h3{
font-size: 27px;
color: #fff;
background-color: #e18187;
border-radius: 10px;
text-align: center;
padding: 9px 0 6px;
margin-bottom: 30px;
}
.relief_halfprice #relief_halfprice_contact p{
font-weight: bold;
margin-bottom: 10px;
}
.relief_halfprice #relief_halfprice_contact p b{
font-size: 22px;
}
.relief_halfprice #relief_halfprice_contact .tel{
text-align: center;
}
.relief_halfprice #relief_halfprice_contact .tel a{
text-decoration: none;
font-size: 50px;
color: #e6657d;
font-weight: bold;
line-height: 1;
}
/*あんしん半額 検索一覧装飾用*/
.halfprice_campaign dd{
color: red;
font-size: 10px;
line-height:0.7;
}
/* スキップローンキャンペーン */
.skip {
margin-top: -60px;
}
.skip p:empty {
display: none;
}
.under .skip h4:after {
content: none;
}
.skip-text-center {
text-align: center;
}
.skip-align-center {
align-items: center;
}
.skip-container {
width: 95%;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-top: 75px;
padding-bottom: 75px;
}
.skip-container-up {
transform: translateY(-75px);
padding-top: 0;
padding-bottom: 0;
}
.skip-section-margin-bottom {
margin-bottom: 150px;
}
.skip-section-bg01 {
background: url(../images/skip/skip-point-bg.png) no-repeat center center / cover;
}
.skip-section-bg02 {
background-color: #F8F8F8;
}
.skip-section-bg03 {
background: url(../images/skip/skip-food-bg.png) no-repeat center center / cover;
}
.skip-row {
display: flex;
}
.skip-row-img {
width: 37.04%;
margin-right: 5rem;
}
.skip-row-right .skip-row-img {
order: 2;
margin-left: 3rem;
margin-right: 0;
}
.under .skip-btn-block {
display: block;
width: 620px;
max-width: 100%;
margin: 1rem auto;
padding: .75rem 1rem;
background-color: #5D5D5D;
color: white;
text-align: center;
text-decoration: none;
box-sizing: border-box;
}
.under .skip-btn-block:before {
content: ' ';
display: inline-block;
border: 6px solid transparent;
border-left: 11px solid white;
border-right: 0;
margin-right: 1rem;
}
.skip-underscore {
display: inline-block;
position: relative;
}
.skip-underscore:after {
content: ' ';
display: block;
position: absolute;
bottom: -6px;
left: -3px;
right: -3px;
border-bottom: 3px solid #81BCFF;
}
.under .skip-title {
font-size: 1.75rem;
}
.skip-title-small {
font-size: .9375rem;
}
.under .skip-subtitle {
padding-left: 0;
font-size: 1.4375rem;
color: inherit;
}
.skip-keyvisual {
background: url(../images/skip/skip-keyvisual-bg.png) no-repeat center center / cover;
}
.skip-keyvisual-container {
position: relative;
padding-top: 600px;
}
.skip-keyvisual-text {
position: absolute;
top: 10%;
width: 780px;
max-width: 72.22%;
}
.skip-keyvisual-icons {
display: flex;
position: absolute;
top: 50%;
}
.skip-keyvisual-icon {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 150px;
height: 150px;
margin-right: 30px;
border-radius: 50rem;
background-color: white;
color: #4D9DD3;
font-size: 1rem;
text-align: center;
}
.skip-keyvisual-icon-free {
font-size: 1.875rem;
font-weight: bold;
color: #FE3F46;
}
.skip-keyvisual-icon-number {
font-size: 2.625rem;
font-weight: bold;
vertical-align: bottom;
}
.skip-keyvisual-icon-sm {
font-size: 1.3125rem;
}
.skip-keyvisual-img {
position: absolute;
right: 0;
bottom: 10%;
width: 312px;
max-width: 28.89%;
}
.skip-keyvisual-img img {
max-width: 100%;
}
.skip-alert {
margin: 30px 0;
padding: 2rem;
border: 6px solid #81BCFF;
border-radius: 10px;
background-color: white;
}
.under .skip-alert-title {
font-size: 1.5625rem;
font-weight: normal;
}
.skip-campaign .skip-container {
padding-top: 0;
}
.skip-campaign .skip-alert {
padding: 2rem 4rem;
background: white url(../images/skip/skip-campaign-bg.png) no-repeat 0 center;
background-size: 25px;
border-color: #BCDBF7;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.skip-title-block {
margin-bottom: 2rem;
padding: 60px 0;
border-radius: 10px;
background-color: #E6F1FF;
text-align: center;
}
.under .skip-title-block-title {
margin-bottom: 0;
font-size: 1.5625rem;
}
.under .skip-title-dark,
.under .skip-title-dark-rounded {
padding: .5rem 0.7rem;
background-color: #6D6D6D;
color: white;
}
.under .skip-title-dark-rounded {
border-radius: 50rem;
}
.skip-title-dark img,
.skip-title-dark-rounded img {
margin-right: .5rem;
vertical-align: middle;
}
.skip-info-block {
border-radius: 10px;
background-color: #F8F8F8;
}
.skip-point {
background-color: white;
margin-top: -2.5rem;
padding: 2rem 5rem;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.skip-point-left,
.skip-point-right {
display: flex;
justify-content: space-between;
margin: 30px 0;
}
.skip-point-img {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 200px;
height: 200px;
margin-top: -20px;
margin-right: 50px;
border-radius: 50rem;
background-color: #F8F8F8;
}
.skip-point-right .skip-point-img {
order: 2;
margin-left: 40px;
margin-right: 10px;
}
.skip-point-label {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
width: 90px;
height: 90px;
border-radius: 50rem;
font-size: .75rem;
font-weight: bold;
color: #2085C8;
background-color: #E6F2FF;
transform: translate(25%,-25%);
}
.skip-point-label-number {
margin-left: .25rem;
font-size: 1.125rem;
}
.skip-point-text {
flex: 1;
}
.skip-point-text p {
font-size: 1rem;
}
.skip-alert-title-underscore::after {
content: ' ';
display: block;
width: 5rem;
margin: .5rem 0;
border-bottom: 3px solid #81BCFF;
}
.skip-list {
margin: 1rem 0;
}
.skip-list li {
font-size: 1.25rem;
font-weight: bold;
color: #81BCFF;
}
.skip-food .skip-row {
margin: 3rem 0;
}
.skip-food .skip-row-text {
width: 53.05%;
}
.skip-food-title {
transform: scale(1.2);
transform-origin: left center;
}
.skip-food .skip-row-img {
flex: 1;
}
.skip-pickup {
display: flex;
justify-content: space-between;
max-width: 550px;
}
.skip-pickup-col {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
border-radius: 50rem;
background-color: white;
}
.skip-faq {
max-width: 980px;
margin: 2rem auto;
}
.skip-faq-question,
.skip-faq-answer {
display: flex;
margin: .5rem 0;
border-radius: 5px;
font-size: 1rem;
}
.skip-faq-question {
align-items: center;
padding: .25rem 1rem;
background-color: #DDEFFC;
}
.skip-faq-question:before {
content: ' ';
display: block;
width: 30px;
min-width: 30px;
height: 26px;
margin-right: 1rem;
background: url(../images/skip/skip-icon-question.png) no-repeat center center / contain;
}
.skip-faq-question:after {
content: ' ';
display: block;
width: 20px;
min-width: 20px;
height: 20px;
margin-left: auto;
background: url(../images/skip/skip-icon-plus.png) no-repeat center center / contain;
}
.skip-faq-question.active:after {
background: url(../images/skip/skip-icon-minus.png) no-repeat center center / contain;
}
.skip-faq-question-number {
margin-right: 1rem;
font-size: 1.5rem;
}
.skip-faq-answer {
height: 0;
padding: 0 1rem;
background-color: #FBFBFB;
transform: scaleY(0);
transform-origin: top;
transition: none;
}
.skip-faq-answer.active {
height: auto;
padding: 1rem;
transform: scaleY(1);
transition: transform .5s;
}
.skip-faq-answer:after {
content: ' ';
display: block;
width: 24px;
height: 95px;
margin-left: auto;
background: url(../images/skip/skip-question-bg.png) no-repeat center center / contain;
}
.skip-faq-answer-number {
display: flex;
justify-content: center;
align-items: center;;
width: 37px;
min-width: 37px;
height: 37px;
margin-right: 1rem;
border-radius: 50rem;
background-color: #E1D9CE;
}
.skip-contact .skip-row-text {
flex: 1;
margin: 1rem 0;
padding: 1rem;
border-top: 1px solid #FB807B;
border-bottom: 1px solid #FB807B;
box-sizing: border-box;
}
.skip-contact .skip-row-text p {
margin: .5rem 0;
}
.skip-contact-tel a {
font-size: 3rem;
line-height: 1;
color: #FB807B;
text-decoration: none;
}
@media(max-width: 767.99px) {
.skip {
margin-top: 0;
}
.skip-underscore:after {
bottom: -3px;
}
.skip-section-margin-bottom {
margin-bottom: 75px;
}
.skip-container {
padding-top: 37.5px;
padding-bottom: 37.5px;
}
.skip-container-up {
padding-top: 0;
transform: translateY(-37.5px);
}
.skip-keyvisual-container {
padding-top: 86.95%;
}
.skip-keyvisual-text {
top: 3%;
max-width: 100%;
}
.skip-keyvisual-img {
bottom: 5%;
}
.skip-keyvisual-icons {
top: 64%;
z-index: 1;
transform-origin: top left;
transform: scale(.6);
}
.skip-keyvisual-icon {
margin-right: 5px;
}
.under .skip-title {
font-size: 1rem;
}
.skip-title-small {
font-size: .75rem;
}
.under .skip-subtitle {
font-size: .875rem;
}
.skip-row {
flex-direction: column;
}
.skip-row-img,
.skip-row-text,
.skip-row-right .skip-row-img {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.skip-row-img {
margin-bottom: 2rem;
}
.under .skip-title-dark,
.under .skip-title-dark-rounded {
font-size: .781rem;
}
.under .skip-alert-title {
font-size: .9375rem;
}
.skip-alert-title-underscore {
text-align: center;
}
.skip-alert-title-underscore::after {
margin-left: auto;
margin-right: auto;
}
.skip-campaign .skip-alert {
padding: 2rem;
}
.skip-title-block {
padding: 30px 1.5rem;
text-align: left;
}
.under .skip-title-block-title {
position: relative;
padding-left: 40px;
font-size: .9375rem;
}
.skip-title-block-title img {
position: absolute;
left: 0;
width: 30px;
}
.skip-list li {
font-size: 1rem;
}
.skip-point {
padding: 2rem 1rem;
}
.skip-point-img {
width: 100px;
height: 100px;
margin-right: 10px;
}
.skip-point-img p {
display: inline-block;
width: 50%;
margin: 0;
}
.skip-point-label {
flex-direction: column;
width: 50px;
height: 50px;
}
.skip-point-label-number {
margin-left: 0;
line-height: 1;
}
.skip-point-right .skip-point-img {
margin-top: 20px;
margin-right: 5px;
margin-left: 5px;
}
.skip-food .skip-row-text {
width: auto;
}
.skip-food-title {
transform: none;
}
.skip-food .skip-title-dark-rounded {
display: flex;
justify-content: center;
align-items: center;
}
.skip-pickup {
max-width: 84.27%;
margin: 0 auto 2rem;
}
.skip-pickup-col {
width: 80px;
height: 80px;
margin-left: .25rem;
margin-right: .25rem;
}
.skip-pickup-col img {
width: 75%;
}
.skip-contact .skip-row-img img {
max-width: 50%;
}
.skip-contact-tel a {
font-size: 2rem;
}
.skip-faq-question,
.skip-faq-answer {
font-size: .875rem;
}
.skip-faq-question:before {
width: 20px;
min-width: 20px;
height: 17px;
margin-right: .5rem;
}
.skip-faq-question:after {
width: 15px;
min-width: 15px;
height: 15px;
transform: translateX(.5rem);
}
.skip-faq-question-number {
margin-right: .25rem;
margin-bottom: auto;
font-size: .875rem;
}
.skip-faq-answer-number {
width: 23px;
min-width: 23px;
height: 23px;
margin-right: .5rem;
background-color: #D6CE8D;
}
}
/* New Shop Page */
.under .new_shop_page_button_red,
.under .new_shop_page_button_blue {
display: inline-block;
width: 90%;
padding: 1rem;
text-decoration: none;
}
.under .new_shop_page_button_red {
background-color: #FB807B;
color: white;
}
.under .new_shop_page_button_red:hover {
background-color: #FFA7A4;
}
.under .new_shop_page_button_blue {
background-color: #81BCFF;
color: white;
}
.under .new_shop_page_button_blue:hover {
background-color: #AAD1FC;
}
.under .new_shop_page_anchors {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 3rem;
margin-bottom: 3rem;
}
.under .new_shop_page_anchors li {
margin-right: .5rem;
margin-bottom: .5rem;
}
.under .new_shop_page_anchors li a {
display: block;
padding: .75rem 1.5rem;
border: 1px solid #4D4D4D;
border-radius: 50rem;
background-color: #4D4D4D;
color: white;
text-decoration: none;
}
.under .new_shop_page_anchors li a:hover {
background-color: white;
color: #333333;
}
.new_shop_page_shop {
margin-bottom: 5rem;
}
.new_shop_page_anchor {
position: relative;
top: -70px;
}
.new_shop_page_keyvisual {
margin-bottom: 2rem;
}
.new_shop_page_section {
margin-top: 2rem;
margin-bottom: 2rem;
}
.under .new_shop_page_title {
display: flex;
align-items: flex-end;
width: 100%;
margin-top: 3rem;
margin-bottom: 3rem;
padding-left: 0;
color: #333333;
font-size: 1.875rem;
line-height: 1;
}
.under .new_shop_page_title:after {
content: none;
}
.under .new_shop_page_title small {
margin-left: 1rem;
font-size: 1.125rem;
}
.under .new_shop_page_title_pill {
margin-left: auto;
padding: .5rem 1.25rem;
border: 1px solid;
border-radius: 50rem;
font-size: 1rem;
font-weight: normal;
}
.new_shop_page_info {
padding: 3rem;
background-color: #F6F6F6;
}
.new_shop_page_info table {
border: 3rem solid white;
background-color: white;
}
.new_shop_page_info table th,
.new_shop_page_info table td {
border-top: 1px solid #CCCCCC;
border-left: 0;
border-right: 0;
border-bottom: 0;
background-color: transparent;
text-align: left;
font-weight: normal;
color: #333;
}
.new_shop_page_info table tr:first-child th,
.new_shop_page_info table tr:first-child td {
border-top: 0;
}
.new_shop_page_movie {
position: relative;
padding-top: 56.25%;
}
.new_shop_page_movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.new_shop_page_comment {
padding: 2rem;
text-align: center;
}
.new_shop_page_table {
margin-top: 3rem;
margin-bottom: 3rem;
}
.new_shop_page_table th,
.new_shop_page_table td {
padding: 1rem;
color: #333;
text-align: left;
}
.new_shop_page_table th {
background-color: #F6F6F6;
}
.new_shop_page_table td {
background-color: white;
}
.new_shop_page_recruit_jobs_row {
display: flex;
align-items: flex-start;
justify-content: center;
}
.new_shop_page_recruit_jobs_col {
display: none;
flex: 1;
margin-left: 1rem;
margin-right: 1rem;
max-width: 33%;
}
.new_shop_page_recruit_jobs_col.show {
display: block;
}
.new_shop_page_recruit_jobs_prev,
.new_shop_page_recruit_jobs_next {
display: none;
}
.new_shop_page_section:not(.new_shop_page_section_info),
.new_shop_page_info {
display: none;
}
.active .new_shop_page_shop_show_button {
display: none;
}
.active .new_shop_page_section,
.active .new_shop_page_info {
display: block;
}
@media(max-width: 767.99px) {
.new_shop_page_info {
padding: 1rem;
}
.new_shop_page_info table {
border-width: 1rem;
}
.new_shop_page_info table,
.new_shop_page_info table tbody,
.new_shop_page_info table tr,
.new_shop_page_info table th,
.new_shop_page_info table td {
display: block;
width: 100%;
box-sizing: border-box;
}
.new_shop_page_info table th,
.new_shop_page_info table td {
padding: .5rem;
line-height: 1.25;
}
.new_shop_page_info table td {
padding-top: 0;
border-top: 0;
}
.new_shop_page_table,
.new_shop_page_table tbody,
.new_shop_page_table tr,
.new_shop_page_table th,
.new_shop_page_table td {
display: block;
width: 100%;
box-sizing: border-box;
}
.new_shop_page_table th,
.new_shop_page_table td {
border: 0;
text-align: center;
}
.new_shop_page_recruit_jobs_wrapper {
display: flex;
}
.new_shop_page_recruit_jobs_view {
flex: 1;
order: 2;
overflow: hidden;
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
.new_shop_page_recruit_jobs_row {
justify-content: flex-start;
width: 750px;
}
.new_shop_page_recruit_jobs_col {
max-width: 250px;
margin-left: 0;
margin-right: 0;
transition: transform .5s;
}
[data-view="2"] .new_shop_page_recruit_jobs_col {
transform: translateX(-100%);
}
[data-view="3"] .new_shop_page_recruit_jobs_col {
transform: translateX(-200%);
}
.new_shop_page_recruit_jobs_prev,
.new_shop_page_recruit_jobs_next {
display: block;
background-color: transparent;
border: 0;
padding: .5rem;
}
.new_shop_page_recruit_jobs_prev:before,
.new_shop_page_recruit_jobs_next:before {
content: ' ';
display: block;
width: 20px;
height: 20px;
border-right: 3px solid #333;
border-bottom: 3px solid #333;
}
.new_shop_page_recruit_jobs_prev {
order: 1;
}
.new_shop_page_recruit_jobs_next {
order: 3;
}
.new_shop_page_recruit_jobs_prev:before {
transform: rotate(135deg);
}
.new_shop_page_recruit_jobs_next:before {
transform: rotate(-45deg);
}
}
/*見積フォーム 円 改行調整*/
#fmail td li span.nw2 {
display: inline;
padding-top: 10px;}
/*検索ボックス 価格条件フリー入力変更*/
.input_number_dog{
background-color: #e2f0ff !important;
border-top: 2px solid #b5d7ff !important;
border-right: 2px solid #b5d7ff !important;
width: 80% !important;
font-size: 15px !important;
}
.input_number_cat{
color: #534741 !important;
background-color: #ffefee !important;
border-top: 2px solid #ffc1be !important;
border-right: 2px solid #ffc1be !important;
width: 80% !important;
font-size: 15px !important;
}
.new_search_button{
font-size: 18px;
color: #fff;
font-family: 'Yu Gothic bold';
font-weight: bold;
padding: 10px 50px;
background: #f5a868 url(/images/idx_search_icon03.png) 8% center no-repeat;
border-radius: 100px;
border: none;
box-shadow: 2px 5px 0px #dc975d;
margin-bottom: 20px;
}
.new_search_button::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #dc975d;
border-radius: 100px;
left: 0;
top: 5px;
z-index: -2;
}
/* ============================
CASE フード定期プラン画像タブ切り替え_202512
============================ */
.case_plan_tabs {
position: relative;
z-index: 10;
}
.case_plan_tabs .tab_nav {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
list-style: none;
padding: 0;
}
.case_plan_tabs .tab_nav li {
padding: 10px 20px;
cursor: pointer;
background: #eee;
border-radius: 4px;
}
.case_plan_tabs .tab_nav li.is-active {
background: #64c9e1;
color: #fff;
}
.case_plan_tabs .tab_content {
display: none;
}
.case_plan_tabs .tab_content.is-active {
display: block;
}
.case_plan_tabs .tab_content picture {
display: block;
margin-bottom: 20px;
}
.case_plan_tabs .tab_content img {
width: 100%;
height: auto;
}
.tab_content {
display: none;
}
.tab_content.is-active {
display: block;
}
.halfprice #case .case {
position: relative;
}
/* =========================
CASE タブ（SP表示）_202512
========================= */
@media screen and (max-width: 768px) {
.case_plan_tabs .tab_nav {
display: block;
padding: 0;
margin: 0;
}
.case_plan_tabs .tab_nav li {
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 14px 10px;
margin: 0 0 8px;
font-size: 12px;
line-height: 1.4;
}
.case_plan_tabs .tab_nav li:last-child {
margin-bottom: 20px;
}
}
@media screen and (max-width: 768px) {
.case_plan_tabs .tab_nav {
flex-direction: column;
}
}
.case_plan_tabs {
position: relative;
z-index: 20;
}
.case_plan_tabs * {
pointer-events: auto;
}
.halfprice #case .case::before {
pointer-events: none;
}
/* ==========================================================================
赤ちゃん情報セクション用CSS (統合版) - baby-badgeのみ
========================================================================== */
/* 赤ちゃん情報バッジ - 共通高さで統一 */
.babyinfo {
margin: 8px 0 0 0;
height: 40px; /* 固定高さで統一 */
box-sizing: border-box;
display: flex;
align-items: center;
}
/* baby-badgeのスタイル */
.baby-badge {
color: #ff6b35;
font-weight: bold;
font-size: 13px;
background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%);
padding: 4px 10px; /* paddingを小さくして縦幅を調整 */
border-radius: 20px; /* より丸みのあるデザインに */
display: inline-block;
border-left: 4px solid #ff6b35;
box-shadow: 0 2px 4px rgba(255, 107, 53, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(255, 107, 53, 0.3);
}
/* 表示/非表示制御 - 高さを揃えるために固定高さを維持 */
.babyinfo[data-has-baby="false"] {
/* 非表示でも高さを保持 */
height: 40px;
}
.babyinfo[data-has-baby="false"] .baby-badge {
visibility: hidden;
opacity: 0;
}
.babyinfo[data-has-baby="true"] .baby-badge {
visibility: visible;
opacity: 1;
}
/* ホバー効果は表示時のみ */
.babyinfo[data-has-baby="true"] .baby-badge:hover {
box-shadow: 0 4px 8px rgba(255, 107, 53, 0.15);
transform: translateY(-1px);
}
/* スマートフォン対応 */
@media (max-width: 768px) {
.babyinfo {
height: 36px; /* モバイルでは少し小さく */
margin: 6px 0 0 0; /* 上だけにマージンを統一 */
}
.baby-badge {
font-size: 12px;
padding: 6px 10px;
}
}
/* 赤ちゃん情報セクション */
.baby-info-section {
margin: 30px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.baby-info-title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
text-align: center;
border-bottom: 2px solid #64c9e1;
padding-bottom: 10px;
}
.baby-carousel-container {
margin-bottom: 25px;
}
.carousel-title {
font-size: 16px;
font-weight: bold;
color: #555;
margin-bottom: 15px;
text-align: center;
}
.baby-photo-carousel, .baby-video-carousel {
position: relative;
max-width: 600px;
margin: 0 auto;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.carousel-track {
display: flex;
transition: transform 0.3s ease;
}
.carousel-item {
min-width: 100%;
background: white;
border-radius: 8px;
overflow: hidden;
}
.carousel-item img {
width: 100%;
height: 300px;
object-fit: cover;
}
.video-container {
position: relative;
width: 100%;
height: 400px;
}
.video-container iframe {
width: 100%;
height: 100%;
}
.carousel-content {
padding: 15px;
text-align: center;
}
.carousel-content .date {
font-size: 14px;
font-weight: bold;
color: #64c9e1;
margin-bottom: 8px;
}
.carousel-content .comment {
font-size: 13px;
color: #666;
line-height: 1.5;
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(100, 201, 225, 0.8);
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 18px;
cursor: pointer;
z-index: 10;
transition: background 0.3s ease;
}
.carousel-btn:hover {
background: rgba(100, 201, 225, 1);
}
.carousel-btn.prev {
left: 10px;
}
.carousel-btn.next {
right: 10px;
}
/* 親データセクション */
.parent-info-section {
margin: 30px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.parent-info-title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
text-align: center;
border-bottom: 2px solid #64c9e1;
padding-bottom: 10px;
}
.parent-cards {
display: flex;
flex-direction: column;
gap: 20px;
}
.parent-card {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
border: 1px solid #e9ecef;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
}
/*.parent-card.father {
border-left: 4px solid #007bff;
}
.parent-card.mother {
border-left: 4px solid #e91e63;
}*/
.parent-type {
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
color: #333;
text-align: center;
}
.parent-photo {
flex-shrink: 0;
margin-bottom: 10px;
}
.parent-photo img {
width: 140px;
height: 140px;
/* border-radius: 50%; */
object-fit: cover;
border: 3px solid #64c9e1;
}
.parent-details {
width: 100%;
text-align: center;
}
.detail-item {
margin-bottom: 12px;
font-size: 14px;
line-height: 1.6;
display: block;
width: 100%;
}
.detail-item .label {
font-weight: bold;
color: #555;
}
.detail-item .value {
color: #333;
}
/* ブリーダー紹介セクション */
.breeder-info-section {
margin: 30px 0;
padding: 20px;
background: #fff;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.breeder-info-title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
text-align: center;
border-bottom: 2px solid #64c9e1;
padding-bottom: 10px;
}
.breeder-card {
display: flex;
flex-direction: column;
gap: 15px;
}
.breeder-header {
display: flex;
align-items: center;
gap: 15px;
}
.breeder-photo {
flex-shrink: 0;
}
.breeder-photo img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #64c9e1;
}
.breeder-name {
font-size: 16px;
font-weight: bold;
color: #333;
margin: 0;
}
.breeder-comment {
font-size: 14px;
color: #666;
line-height: 1.7;
margin-top: 5px;
}
.breeder-comment p {
margin-bottom: 12px;
}
/* ドットインジケーター */
.carousel-dots {
display: flex;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
gap: 8px;
}
.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ddd;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.carousel-dot:hover {
background-color: #bbb;
transform: scale(1.1);
}
.carousel-dot.active {
background-color: #64c9e1;
transform: scale(1.2);
}
/* モーダル用スタイル */
.carousel-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 80px;
width: 100%;
height: calc(100% - 80px);
background-color: rgba(0,0,0,0.8);
}
.modal-content {
position: relative;
margin: 5% auto;
width: 80%;
max-width: 800px;
background: white;
border-radius: 8px;
overflow: hidden;
}
.modal-close {
position: absolute;
top: 15px;
right: 25px;
color: white;
font-size: 30px;
font-weight: bold;
cursor: pointer;
z-index: 10001;
}
.modal-carousel {
position: relative;
display: flex;
transition: transform 0.3s ease;
}
.modal-carousel .carousel-item {
min-width: 100%;
}
.modal-carousel img, .modal-carousel iframe {
width: 100%;
height: 400px;
object-fit: cover;
}
.modal-carousel .carousel-content {
padding: 20px;
background: white;
}
/* モーダル内のドットインジケーター */
.modal-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
background: rgba(0,0,0,0.5);
padding: 8px 16px;
border-radius: 20px;
}
.modal-dots .carousel-dot {
background-color: rgba(255,255,255,0.5);
}
.modal-dots .carousel-dot:hover {
background-color: rgba(255,255,255,0.7);
}
.modal-dots .carousel-dot.active {
background-color: #64c9e1;
}
/* モーダル内のカルーセルボタン */
.modal-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(100, 201, 225, 0.9);
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 20px;
cursor: pointer;
z-index: 10;
transition: background 0.3s ease, transform 0.2s ease;
}
.modal-carousel-btn:hover {
background: rgba(100, 201, 225, 1);
transform: translateY(-50%) scale(1.1);
}
.modal-carousel-btn.prev {
left: 20px;
}
.modal-carousel-btn.next {
right: 20px;
}
/* レスポンシブデザイン */
@media (max-width: 768px) {
.parent-cards {
flex-direction: column;
}
.parent-card {
gap: 15px;
padding: 15px;
}
.breeder-header {
flex-direction: column;
text-align: center;
gap: 10px;
}
.breeder-photo img {
width: 70px;
height: 70px;
}
.carousel-btn {
width: 35px;
height: 35px;
font-size: 16px;
}
.modal-carousel-btn {
width: 40px;
height: 40px;
font-size: 18px;
}
.modal-carousel-btn.prev {
left: 10px;
}
.modal-carousel-btn.next {
right: 10px;
}
.parent-photo img {
width: 190px;
height: 145px;
border-radius: 5px;
}
.baby-info-section, .parent-info-section, .breeder-info-section {
margin: 20px 0;
padding: 15px;
}
.carousel-modal {
top: 60px;
height: calc(100% - 60px);
}
.modal-content {
width: 95%;
margin: 2% auto;
}
.modal-close {
top: 10px;
right: 15px;
font-size: 25px;
}
.carousel-dots {
margin-top: 10px;
margin-bottom: 10px;
gap: 6px;
}
.carousel-dot {
width: 10px;
height: 10px;
}
.modal-dots {
bottom: 10px;
padding: 6px 12px;
gap: 8px;
}
/* 生体詳細赤ちゃん情報表示 アコーディオン共通 202603 */
.accordion-trigger {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.accordion-trigger:hover {
opacity: 0.8;
}
.accordion-icon {
font-size: 0.8em;
transition: transform 0.3s ease;
display: inline-block;
}
.accordion-icon.open {
transform: rotate(180deg);
}
.accordion-content {
overflow: hidden;
max-height: 0 !important;
transition: max-height 0.4s ease, opacity 0.4s ease;
opacity: 0;
display: block !important; /* displayの上書きを防ぐ */
}
.accordion-content.open {
max-height: 5000px !important;
opacity: 1;
}