@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;}
#header{
position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
color:var(--main-bgcolor);
width: 100%;
height:100vh;
overflow: hidden;/*はみ出しているところを隠す*/
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);
}

/* 追記部ここから */
body *{box-sizing: border-box;}
ol,ul {list-style: none;list-style-type: none;}
.ulBox {width:auto;max-width:1000px;margin:0 auto;padding-left:40px;}
.ulBox ul {list-style:disc;list-style-type: disc;}

/* 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;
}
/* ここまで*/

.header-content {
/*天地中央に配置*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;/*#header-imgよりも手前に配置*/
text-align:center;
width:90%;
}
.scrolldown {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
}
.chevron-container {
  position: relative;
  width: 24px;
  height: 24px;
}
.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}
.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}
.chevron:before,.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}
.chevron:before {left: 0;transform: skew(0deg, 30deg);}
.chevron:after {right: 0;width: 50%;transform: skew(0deg, -30deg);}

@keyframes move {
  25% {opacity: 1;}
  33% {opacity: 1;transform: translateY(30px);}
  67% {opacity: 1;transform: translateY(40px);}
  100% {opacity: 0;transform: translateY(55px) scale3d(0.5, 0.5, 0.5);}
}
.scroll {
  display: block;
  margin-top: 70px;
  margin-left: -45px;
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
}
@keyframes pulse {to {opacity: 1;}}
#header h1{
font-size: 3rem;
font-weight: normal;
letter-spacing: var(--wide-letter);
margin: 0;
}
.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);
}
.grandopen {
font-size: 1.3rem;
line-height: 1;
display: inline-block;
padding:0.5em 1em;
border-radius: 6px;
background-color: rgba(200,0,0,1.00);
box-shadow: 0px 0px 10px 2px rgba(0,31,58,0.79);
text-shadow:none;
letter-spacing: var(--wide-letter);
}
#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);}
h2.plan {font-size:2.2rem;}
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;}
#info .flex {flex-wrap: nowrap;}
#info .column, #pet .column {width: 50%;}
/* 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.webp");}
#pet .fit-img {background-image: url("../images/bg-pet.webp");}

/* 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 {border-radius:6px;}
#price .subtitle {margin-top:0.5em; letter-spacing: var(--wide-letter);}
#price .pet {color:#DB6500;}
#price .amount {font-size:1.6rem;margin:0;letter-spacing: 0;}
.amount .number {font-size:4.2rem;line-height: 1.0;color:var(--theme-color); vertical-align: bottom;}
.number small{font-size:1.8rem;}
#price .area_size {position: relative; line-height: 54px;height: 54px; margin: 1em 42px 0.5em;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, #price 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.webp");
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 (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 {margin-top:2em;}
.two .column:nth-child(even){margin-top:3em;}
.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}
h2.plan {font-size:1.6rem;}
.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%;
}
}