@charset "UTF-8";
:root{
--main-bgcolor: #fff;
--section-bgcolor: #EDF9FB;
--parts-color: #3998C6;
--parts-subcolor:#8BCBDE;
--theme-color: #3786c7;
--title-color:#2E70A7;
--wide-letter:0.1em;
}

/* Body */
body {font-family: 'Noto Serif JP', serif; color:#333;background-color: #C1DCE5;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;}
body * {}
.en {font-family: 'Parisienne', 'Noto Serif JP', serif; letter-spacing: normal;}

/* 追記部ここから */
body *{box-sizing: border-box;}
ol,ul {list-style: none;list-style-type: none;}

/* Navigation */
.hamburger ul li a {color: #ffffff;font-size: 16px;text-decoration: none;padding: 0 0.8em;}
.hamburger ul li:hover a {color: #FFD600;}
.hamburger {
padding: 0 20px;
display: flex;
justify-content: space-between;
background-repeat: repeat;
/*background-image: url(../images/pattern.png);*/
background-color: rgb(55,134,199,0.9);
z-index: 99;
}
.fixed {position: fixed;top: 0;width: 100%;background-color: rgb(55,134,199,1.0);}
.logo {padding:5px;}
.svg {vertical-align: bottom;width: auto;height:100%;}
.hamburger .btn-gNav {
margin-block-start:0;
margin-block-end:0;
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 44px;
z-index: 12;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 400ms;
transition: all 400ms;
padding: 10px;
background-color: var(--theme-color);
border-radius:6px;
}
.hamburger .btn-gNav span {
position: absolute;
width: 30px;
height: 4px;
background: #ffffff;
border-radius: 10px;
-webkit-transition: all 400ms;
transition: all 400ms;
}
.hamburger .btn-gNav span:nth-child(1) {top: 10px;}
.hamburger .btn-gNav span:nth-child(2) {top: 20px;}
.hamburger .btn-gNav span:nth-child(3) {top: 30px;}
.hamburger .btn-gNav.open {background-color: rgba(255,255,255,0.30);}
.hamburger .btn-gNav.open span:nth-child(1) {
background: #ffffff;
top: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hamburger .btn-gNav.open span:nth-child(2),
.hamburger .btn-gNav.open span:nth-child(3) {
top: 20px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

.btn-gNav {display: none;}
.gNav .gNav-menu {
    display: flex;
    justify-content: space-between;
    padding-inline-start:0;
}

.gNav .gNav-menu li {
    margin: 0 auto;
}
/* ここまで*/

.tagline {
font-size: 1.3rem;
margin: 0;
letter-spacing: var(--wide-letter);
text-shadow: 0px 0px 10px rgba(0,149,212,1.00), 0px 0px 10px rgba(0,149,212,1.00), 0px 0px 10px rgba(0,149,212,1.00), 0px 0px 10px rgba(0,149,212,1.00), 0px 0px 10px rgba(0,149,212,1.00), 0px 0px 10px rgba(0,149,212,1.00), 0px 0px 10px rgba(0,149,212,1.00);
}
#container,
#footer{
position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
z-index: 2;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}
.container h1 {margin-top:0; padding-top:0;}

/* section */
section {  padding:100px 0; background-color:#fff;}
section h1, section h2, section h3, section h4, section h5 {color:#000;font-weight: normal;}
section h1 {
text-align: center;
font-size:3rem;
color:var(--theme-color);
margin-bottom: 50px;
}
section h1, #thanks h1 {
padding-bottom: 0.3em;
margin-bottom: 0;
letter-spacing: var(--wide-letter);
background: linear-gradient(90deg, var(--parts-color) 0% 50%, #ebe69f 50%);
background-repeat: no-repeat;
background-size: 12rem 0.4rem;
background-position: bottom;
}
h1 + .en {font-size:1.8rem; color:var(--theme-color); text-align: center; margin:0.3em 0 50px;}
section h2 {text-align: center; font-size:1.8rem;letter-spacing: var(--wide-letter);}
section p {letter-spacing: var(--wide-letter);}

/* flex */
.flex {display: flex;align-items: center; justify-content: space-between;margin-top: 0px; flex-wrap: wrap;}
.flex.three {align-items: stretch;}

/* Container */
.container {max-width:1400px;margin: auto;padding: 0 20px;}

.hero_header {
	color: #FFFFFF;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	letter-spacing: 4px;
}

.bgcolored {background-color: var(--section-bgcolor);}
.center {text-align: center;}

/* Vertical Section */

.vertical-text {display: flex;justify-content: center;}
.vertical-text h2 {padding-left: 1em;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;line-height: 2.3;margin: 0;text-align: left;}
.vertical-text p {-ms-writing-mode: tb-rl;writing-mode: vertical-rl;line-height: 2.3;letter-spacing: var(--wide-letter);padding:50px 0 0 1.5em;margin: 0;}

p.text-link {text-align: right; }
.text-link * {font-size:1.1rem;color: var(--theme-color);text-decoration: none;}

.fit-img {min-height: 400px;background-repeat: no-repeat;background-position: center;background-size: cover;}
#info .fit-img {background-image: url(../images/bg-2.jpg);}
#pet .fit-img {background-image: url(../images/bg-pet.jpg);}

/* effect */
.fade {opacity: 0;visibility: hidden;transform: translateY(50px);transition: opacity 1s,visibility 1s, transform 1s;}
.fadein {opacity: 1;visibility: visible;transform: translateY(0px);}

/* table */
#price table {border-collapse: collapse; margin: 0 auto;padding: 0; width: auto; table-layout: fixed;}
table.priceList tr, table.fee tr {background-color: #e6f2f5; padding: .35em; border-bottom: 2px solid #fff;}
#price table th,
#price table td {padding: 1em;border-right: 2px solid #fff;}
#price table th {font-weight: normal;}
table.priceList thead tr{background-color: var(--parts-color);color:#fff;}
table.priceList tbody th {background: var(--parts-subcolor);color: #fff;}

/* banner */
section#banner {padding-top:0;}
#banner .contaier {max-width: auto;}
#banner .swiper {max-width:1400px;}
.swiper-pagination-bullet-active{background-color: rgba(255,107,80,1.00)!important;}

/* price */
#price .column {text-align: center;}
.card {padding:20px; background-color:#fff; border-radius: 12px;}
.card img:first-child {border-radius:6px 6px 0 0;}
#price .subtitle {margin-top:0.5em; letter-spacing: var(--wide-letter);}
#price .pet {color:#DB6500;}
#price .amount {font-size:1.6rem;margin-bottom: 0;letter-spacing: 0;}
.amount .number {font-size:4.2rem;line-height: 1.0;color:var(--theme-color); vertical-align: bottom;}
#price .area_size {position: relative; line-height: 54px;height: 54px; margin: 1em 42px 1em;padding: 0; color:#fff; background-color: var(--parts-color); font-size:1.5rem;letter-spacing: 0;}
#price .area_size:before,
#price .area_size:after {position: absolute; top: 0;display: block;content: '';border: 27px solid var(--parts-color);z-index: 5;}
#price .area_size:before {left: -40px;border-left-width: 15px;border-left-color: transparent;}
#price .area_size:after {right: -40px;border-right-width: 15px;border-right-color: transparent;}
#price .area_size span {position: relative;display: block;}
table.priceList td {font-size:113%;}
table.fee caption {font-size:1.2rem;text-align:left;padding:1.5em 0 1.0em;font-weight: bold;letter-spacing: 2px;}
.price{color: var(--theme-color);}
details {max-width: 900px;margin:3em auto 2em;}
#price details table {table-layout:auto;}
#price details table tbody th {background: var(--parts-subcolor);color:#fff;}
summary {font-size: 1.2rem;padding: 1em;color: #fff;background-color: var(--parts-color);cursor: pointer;text-align: center;letter-spacing:var(--wide-letter);}
#price details table {width:100%;}

/* facility */
#facility h3 {text-align:center;font-size:1.4rem;}
.summary {margin:50px auto 0; padding:20px;border:2px solid #ccc;border-radius:10px;max-width:1000px;}
.summary p {margin-bottom:0; line-height: 1.8;}

/* pet */

#pet .bg {
background-image: url(../images/bg-circle.png);
background-repeat: no-repeat;
background-position: 10% bottom;
background-size: 40% auto;
}
#pet details {background-color:#fff;}
#pet details > div {padding: 1em;}
#pet ul {list-style-type: disc;text-align: left;}
#pet li {margin-top: 1em;}

/* campaign */
#campaign {text-align:center;}
#campaign .card {display:inline-block;}

/* Parallax Section */
.banner {
position: relative;
background-color: #C1DCE5;
background-image: url(../images/bg02.jpg);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
}

.parallax {
color: #FFFFFF;
text-align: right;
padding-right: 100px;
padding-top: 0;
margin-top: 0px;
}
.parallax_description {
color: #FFFFFF;
text-align: right;
padding-right: 100px;
line-height: 23px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
/*text-shadow: 0px 0px 6px rgba(0,149,212,1.00),0px 0px 6px rgba(0,149,212,1.00),0px 0px 6px rgba(0,149,212,1.00),0px 0px 6px rgba(0,149,212,1.00),0px 0px 6px rgba(0,149,212,1.00),0px 0px 6px rgba(0,149,212,1.00),0px 0px 6px rgba(0,149,212,1.00);*/
}

.parallax_description,.parallax {text-shadow: 0px 0px 7px rgba(3, 60, 124, 1),0px 0px 7px rgba(3, 60, 124, 1),0px 0px 7px rgba(3, 60, 124, 1),0px 0px 7px rgba(3, 60, 124, 1),0px 0px 7px rgba(3, 60, 124, 1),0px 0px 7px rgba(3, 60, 124, 1),0px 0px 7px rgba(3, 60, 124, 1);}
/* More info */
footer {background-color: var(--parts-color);padding-bottom: 35px; padding:20px;color:#fff;text-align: center;}
.footlogo {max-width:300px; width:auto;margin: auto;}
footer p {margin-top:0;}
footer a {color:#fff; text-decoration: none;}
.footer_column > div {padding:0.5em;}
.hidden {
	display: none;
}
section img {height: auto; max-width:100%;display:block;margin: 0 auto;}
.row-reverse {flex-direction: row-reverse;}

.group {margin-top:100px;}

/* contact */
.contact {display:inline-block;padding:10px;background-color: #fff;margin: 0 auto 50px;}
.border {border: 1px solid var(--parts-color); padding: 20px;}
.contact > * {text-align:center;}
.contact h2 { margin: 0;}
.contact a {color: var(--theme-color);text-decoration: none;outline: none;}
.contact .tel {font-size:2.8rem; margin:0;}
.contact .open {margin:1em 0 0;}

/* form --*/
.mfp_element_all:focus {
outline: none;
border-color:var(--theme-color);
}
.button {min-width: 240px;}
#mfp_button_send, #mfp_button_cancel {min-width: 140px;}
#mfp_button_send {min-width: 140px;}
.button, #mfp_button_send {
display: inline-block;
margin: 20px auto;
padding: 20px;
text-align: center;
vertical-align: middle;
font-weight: bold;
letter-spacing: 1px;
border: 3px solid var(--theme-color);
border-radius: 10px;
color: var(--theme-color);
transition: all 0.3s linear;
background-color: #fff;
font-family: 'Noto Serif JP', serif!important;
font-size:1.1rem;
line-height: 1;
}
#mfp_button_cancel {
display: inline-block;
margin: 20px auto;
padding: 20px;
text-align: center;
vertical-align: middle;
font-weight: bold;
letter-spacing: 1px;
border: 3px solid #999;
border-radius: 10px;
color: #999;
transition: all 0.3s linear;
background-color: #fff;
font-family: 'Noto Serif JP', serif!important;
font-size:1.1rem;
line-height: 1;
}
.button:hover, #mfp_button_send:hover, #mfp_button_send:active {
background-color: #218FCC;
color: #fff;
cursor: pointer;
border-color: #8DCAEC;
}
#mfp_button_cancel:hover, #mfp_button_cancel:active  {
background-color: #999;
color: #fff;
cursor: pointer;
border-color: #ccc;
}
a.button {text-decoration:none; color:var(--title-color);}
a.button:hover, a.button:active {color:#fff;}

#formContainer {max-width:900px;margin: 2em auto 0;}
#formContainer textarea {width:calc(100% - 10px)!important;line-height: 1.5em}
select {color: #333;}
.required {background: #FF0168;color:#fff;padding:2px 5px;font-size: .8em;border-radius: 4px;vertical-align: middle;}
#contact td span {display: inline-block;}
#contact td span:first-child {padding-right: 15px;}

.boxShadow {box-shadow: 8px 8px 0 #CEEDF8;border: 1px solid #CEEDF8;}
.dropShadow {box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.20);}
.goform {padding-top:40px;}

.map {position: relative;width: 100%;height: 0;}
.map iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

@media screen and (min-width: 1025px) {
#header-img{
position: fixed;/*背景を固定するためfixedをかける*/
z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
top: 0;/*topの位置がJSで変化*/
/*以下画面で背景画像を表示させるための指定*/
width: 100%;
height:100vh;
background: url("../images/main-pc.jpg") no-repeat;/*背景画像の設定*/
background-size:cover;
transform-origin:center;/*変化する基点を中心からに設定*/
}
}
@media screen and (max-width: 1024px) {
#header-img{
position: fixed;/*背景を固定するためfixedをかける*/
z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
top: 0;/*topの位置がJSで変化*/
/*以下画面で背景画像を表示させるための指定*/
width: 100%;
height:100vh;
background: url("../images/main-sp.jpg") no-repeat;/*背景画像の設定*/
background-size:cover;
transform-origin:center;/*変化する基点を中心からに設定*/
}
}

@media (min-width: 767px) and (max-width: 1024px) {
#info .column:nth-child(1),#pet .column:nth-child(1) {width:40%;}
#info .column:nth-child(2),#pet .column:nth-child(2) {width:60%;}
}

@media screen and (min-width: 901px) {
.logo-sp {display:none;}
.map {padding-top: 50%; }
}

@media screen and (max-width: 900px) {
.btn-gNav {display: block;}
.gNav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        font-size: 16px;
        box-sizing: border-box;
        z-index: 1;
        padding-top: 50px;
        transition: .3s;
}
.logo {display:none;}
.logo-sp {width:865; max-width:300px;margin: auto;padding:0 20px;}
    .gNav.open {
        right: 0;
    }

    .gNav .gNav-menu {
        padding: 0;
        width: 100%;
        height: 100%;
        display: block;
        flex-direction: column;
        text-align: center;
        /*justify-content: center;*/
    }

    .gNav .gNav-menu li {
        width: 86%;
        padding: 15px;
        border-bottom: #525252 1px solid;
    }

}

@media (min-width: 768px) and (max-width: 900px) {
.map {padding-top: 75%; }
}

@media (min-width:768px){
.two .column {width: 48.5%;}
.three .column {width:30%;}
/* effect */
.slidein {transition: 1s cubic-bezier(0.75, 0, 0.25, 1);}
.slide_left{transform: translateX(calc(-50vw - 50%));}
.slide_right{transform: translateX(calc(50vw + 50%));}
.show{transform: translateX(0);}
#price details table tr th {width:28%;}
#price details table.threeClm tr td:nth-child(2) {width:20%;}
}


/* Small Tablets */
@media (max-width: 767px) {
#header h1{
letter-spacing: 0;
}
.column.fit-img, .two .column:nth-child(even){margin-top:2em;}
.tagline {letter-spacing: 0;}
p.text-link {padding-left: 0;}

.column-reverse {flex-direction: column-reverse;}
.vertical-text {padding-bottom: 2em;}
/* table */
#price table {border: 0;width:100%}
#price table th{background-color: var(--parts-color);display: block;border-right: none;}
#price table thead {border: none;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
#price table tr {display: block;margin-bottom: .3em;}
#price table td {border-bottom: 1px solid #fff;display: block;font-size: 1em;text-align: right;position: relative;padding: .625em .625em .625em 8em;border-right: none;}
#price details table.fee td {padding-left:3em;}
  
#price table td::before {content: attr(data-label);position: absolute;left: 10px;}
#price table td:last-child {border-bottom: 0;}
#price table tbody th {color: #fff;}
#price ul {padding:0;}

/* form */
#contact dl{margin:0 auto;}
#contact table td, #contact table th {text-align:center;}
#contact dl span {display:inline-block;}

.column, #info .column, #pet .column {width: 100%;text-align: left;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}
#info .column, #pet .column {white-space: nowrap;}
.three .column {width:48%;}

.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 30%;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.parallax_description {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	padding-top: 30px;
}
.banner {
	padding-left: 20px;
	padding-right: 20px;
}
.map {padding-top: 100%; }
.break {display:block!important;}
}
@media (min-width: 601px) {
.sp {display:none;}
}
@media (max-width: 600px) {
#header h1 {font-size:2rem;}
section h1 {font-size:2.3rem;}
section h2 {font-size:1.5rem}
.tagline {font-size:1.2rem;}
h1 + .en {font-size:1.6rem}
#price .amount {font-size: 1.4rem;}
.amount .number {font-size: 3.2rem;}
#price .area_size {font-size:1.3rem}
.vertical-text {flex-wrap:wrap;}
.vertical-text h2, .vertical-text p {line-height:1.8;}
p.text-link {width:100%;text-align: center; -ms-writing-mode: horizontal-tb;writing-mode: horizontal-tb;padding: 2em; white-space:normal;}
.parallax {padding-top:10%;}
.three .column {width:100%;}
.contact .tel {font-size: 2.0rem;}
.pc {display:none;}
}

@media (min-width: 461px) {
.footer_column {display:  flex;justify-content: center;}
}
@media (max-width: 460px) {
.footer_column {display: block;}
.footer_column > div:nth-child(2) {padding-top:0;}
}

@media (min-width: 261px){
form#mailformpro label {min-width:12em;}
}
/* Mobile */
@media (max-width: 380px) {
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	display: none;
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
}
.column {
	width: 100%;
	text-align: justify;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0!important;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 90%;
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 12px;
	float: none;
	text-align: center;
}
.tagline {
	margin-top: 20px;
	line-height: 22px;
}
.hero_header {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 22px;
	text-align: center;
}
.mfp_element_all {
width: 100%;
}
}