@charset "utf-8";

img {
	-webkit-backface-visibility: hidden;
}
main {
    display: block;
}
.fax a{
	pointer-events: none;
    text-decoration: none;
}
.wpcf7-list-item {
	display: inline-block;
	white-space: nowrap;
}

/*===============================================
●画面の横幅が769px以上
===============================================*/
@media screen and (min-width : 769px ){
#pc------------------------------------------- {
}
.sp {
	display: none;
}
a img {
  transition: 0.5s;
}
a img:hover {
  opacity: 0.6;
}
header {
	background-color: #fff;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 9999;
	height: 110px;
}
header .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}
header .inner h1,
header .inner .logo
{
	margin-right: 20px;
	margin-left: 20px;
	margin-right: 20px;
}
header .inner nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}
header .inner nav ul {
	display: flex;
	flex-wrap: wrap;
}
header .inner nav ul li a {
	color: #192D64;
	text-decoration: none;
	font-size: 16px;
	transition: 0.3s;
}
header .inner nav ul li a:hover {
	color: #ee4309;
	transition: 0.3s;
}
header .inner nav ul li {
	margin-right: 20px;
}
header .inner nav p {
	margin-right: 20px;
}
header .inner nav p+p {
	margin-top: 0px;
	margin-right: 20px;
}





main {
	padding-top: 120px;
}

h2.ttl {
	position: relative;
	font-family: "Noto Serif JP";
	font-weight: 500;
	line-height: 1.8em;
	font-size: 20px;
}
h2.ttl span {
	display: block;
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 0px;
}
h2.ttl::before {
	content: "";
	background-image: url("../images/pc/ttl-line01-1.png");
	width: 20px;
	height: 20px;
	background-size: cover;
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
}
h2.ttl::after {
	content: "";
	background-image: url("../images/pc/ttl-line02-1.png");
	width: 20px;
	height: 20px;
	background-size: cover;
	display: block;
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.ctabanner {
	margin-top: 100px;
	margin-bottom: 100px;
}



#helos {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 250px;
	background-color: #F6F6F6;
	margin-bottom: 100px;
}
#helos div {
	width: 50%;
}
#helos figure {
	width: 50%;
	background-image: url("../images/pc/price/price.jpg");
	height: 250px;
	background-size: cover;
}
h1.ttl {
	font-size: 40px;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 999;
}
.title-bar{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0px 15px;
  margin: 0;
  font-style: normal;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: #555;
  margin-top: 25px;
}

/* 背景：平行四角形 */
.title-bar::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #E8E8E8;
  transform: skewX(-50deg);
  transform-origin: left center;
  z-index: -1;
}

/* 文字は傾けない */
.title-bar__label{
  transform: skewX(0deg);
  white-space: nowrap;
}

/* 右側のライン */
.title-bar__line{
  flex: 1;
  height: 1px;
  background: #777;
}


#linereserve {
	background-image: url("../images/pc/index/line.jpg");
	background-position: center right;
	background-size: cover;
	margin-top: 150px;
	padding-top: 150px;
	padding-bottom: 150px;
}
#linereserve .inner {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	max-width: 1300px;
	text-align: right;
}
#linereserve .inner::after {
	content: "";
	clear: both;
	display: block;
}
#linereserve .inner .box {
	width: 400px;
	text-align: center;
	float: right;
}
#linereserve .inner .box h2 span {
	font-size: 13px;
	margin-bottom: 1px;
}
#linereserve .inner .box h2+p {
	text-align: left;
	margin-top: 20px;
	margin-bottom: 40px;
}
#linereserve .inner .box ul li {
	background-color: #fff;
	padding: 10px;
	text-align: left;
	border-radius: 8px;
	margin-bottom: 20px;
	box-shadow: 1px 1px 3px #eee;
}
#linereserve .inner .box p a {
	display: block;
	background-color: #26C65E;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	height: 60px;
	line-height: 60px;
	color: #fff;
	font-weight:500;
	font-size: 18px;
	text-decoration: none;
	margin-top: 50px;
	border: 1px solid #fff;
	transition: 0.3s;
}
#linereserve .inner .box p a:hover {
	opacity: 0.7;
	transition: 0.3s;
}





#flow h2 {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	margin-top: 150px;
}
#flow .flex {
	display: flex;
	justify-content: space-between;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	flex-direction: row-reverse;
	background-image: url("../images/pc/index/concept-bg.jpg");
	background-position: center center;
	background-size: cover;
	padding: 40px;
	margin-bottom: 80px;
	position: relative;
}
#flow .flex::after {
	content: "";
	background-image: url("../images/pc/index/flow.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: -70px;
}
#flow .flex:last-child::after {
	background-image: none;
}
#flow .flex figure {
	width: 40%;
}
#flow .flex figure img {
	width: 100%;
	height: auto;
}
#flow .flex div {
	text-align: left;
	width: 56%;
}
#flow .flex div h3 {
	font-size: 20px;
	font-family: "Noto Serif JP";
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 20px;
}
#flow .flex div h3 span {
	border-radius: 100px;
	background-color: #fff;
	display: inline-block;
	font-size: 26px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin-right: 15px;
}









footer {
	background-color: #fff;
	margin-top: 150px;
}
footer .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}
footer .inner .logo {
	margin-right: 20px;
}
footer .inner nav {
	margin-top: 0px;
}
footer .inner nav ul {
	display: flex;
	flex-wrap: wrap;
}
footer .inner nav ul li a {
	color: #192D64;
	text-decoration: none;
	font-size: 16px;
	transition: 0.3s;
}
footer .inner nav ul li a:hover {
	color: #ee4309;
	transition: 0.3s;
}
footer .inner nav ul li {
	margin-right: 20px;
}
footer .inner nav+p {
	margin-right: 20px;
	margin-top: 0px;
}
footer small {
	display: block;
	margin-top: 70px;
	padding-bottom: 20px;
	font-size: 12px;
}
}



/*===============================================
●画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
	
/*===============================================
●sp-tablet
===============================================*/
#sptablet------------------------------------------- {
}
img {
	max-width: 100%;
	height: auto;
	width: 100%;
}
.pc {
	display: none;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
header {
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	width: 100%;
	z-index: 9999;
	background-color: #fff;
	padding-bottom: 2vw;
}
header h1,
header .logo
{
	width: 40vw;
	padding-top: 0px;
	padding-left: 3vw;
}
#gnav {
	padding-top: 2vw;
	height: 100vh;
	overflow-y: scroll;
	transform: translateX(100%); /* 右外 */
    transition: transform 0.3s ease;
	width: 100vw;
	pointer-events: none;
	position: absolute; 
	top: 20vw;
	right: 0;
	background-color: #fff;
}
#gnav.on {
    transform: translateX(0);
	pointer-events: auto;
}
header nav ul {
	border-bottom: 1px solid #ccc;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
header nav ul li a {
	color: #333;
	text-decoration: none;
	font-size: 4vw;
	padding-top: 1vw;
	padding-bottom: 1vw;
	border-top: 1px solid #ccc;
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
header nav ul+p {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5vw;
}
header nav ul+p+p {
	width: 10vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5vw;
}
header .inner {
	position: relative;
}
  .hamburger{
    width: 12.8vw;       /* 48px */
    height: 12.8vw;      /* 48px */
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    position: absolute;
    display: grid;
    place-items: center;
	right: 3vw;
	top: 3vw;
  }

  /* 3本線 */
  .hamburger span{
    position: absolute;
    width: 7.47vw;       /* 28px */
    height: 0.53vw;      /* 2px */
    background: currentColor;
    border-radius: 266vw; /* 999px相当 */
    transition:
      transform .25s ease,
      opacity  .18s ease,
      top      .25s ease;
  }

  /* 位置：16 / 23 / 30px */
  .hamburger span:nth-child(1){ top: 4.27vw; }
  .hamburger span:nth-child(2){ top: 6.13vw; }
  .hamburger span:nth-child(3){ top: 8vw; }

  /* OPEN → × */
  .hamburger.is-open span:nth-child(1){
    top: 6.13vw;
    transform: rotate(45deg);
  }
  .hamburger.is-open span:nth-child(2){
    opacity: 0;
    transform: scaleX(0.2);
  }
  .hamburger.is-open span:nth-child(3){
    top: 6.13vw;
    transform: rotate(-45deg);
  }

  /* タップ時の視認性 */
  .hamburger:focus-visible{
    outline: 0.53vw solid currentColor; /* 2px */
    outline-offset: 1.07vw;            /* 4px */
    border-radius: 2.67vw;              /* 10px */
  }






main {
	padding-top: 20vw;
}

h2.ttl {
	position: relative;
	font-family: "Noto Serif JP";
	font-weight: 500;
	line-height: 1.8em;
	font-size: 5vw;
}
h2.ttl span {
	display: block;
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 4vw;
	margin-bottom: 1vw;
}
h2.ttl::before {
	content: "";
	background-image: url("../images/pc/ttl-line01-1.png");
	width: 4vw;
	height: 4vw;
	background-size: cover;
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
}
h2.ttl::after {
	content: "";
	background-image: url("../images/pc/ttl-line02-1.png");
	width: 4vw;
	height: 4vw;
	background-size: cover;
	display: block;
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.ctabanner {
	margin-top: 15vw;
	margin-bottom: 15vw;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}


#helos {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #F6F6F6;
	height: 40vw;
}
#helos div {
	width: 50%;
}
#helos figure {
	width: 50%;
	background-image: url("../images/pc/price/price.jpg");
	height: 35vw;
	background-size: cover;
}
h1.ttl {
	font-size: 5vw;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	margin-left: auto;
	margin-right: auto;
}
.title-bar{
  position: relative;
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 0px 2vw;
  margin: 0;
  margin-left: 10vw;
  margin-right: 10vw;
  font-style: normal;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  height: 4vw;
  color: #555;
  margin-top: 1vw;
}

/* 背景：平行四角形 */
.title-bar::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #eee;

  transform: skewX(-50deg);
  transform-origin: left center;
  z-index: -1;
}

/* 文字は傾けない */
.title-bar__label{
  transform: skewX(0deg);
  white-space: nowrap;
}

/* 右側のライン */
.title-bar__line{
  flex: 1;
  height: 1px;
  background: #777;
}


#linereserve {
	background-image: url("../images/pc/index/line.jpg");
	background-position: center center;
	background-size: cover;
	margin-top: 15vw;
	padding-top: 15vw;
	padding-bottom: 15vw;
}
#linereserve .inner {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: right;
}
#linereserve .inner::after {
	content: "";
	clear: both;
	display: block;
}
#linereserve .inner .box {
	text-align: center;
	float: right;
}
#linereserve .inner .box h2 span {
	font-size: 3vw;
	margin-bottom: 0px;
}
#linereserve .inner .box h2+p {
	text-align: left;
	margin-top: 5vw;
	margin-bottom: 5vw;
}
#linereserve .inner .box ul li {
	background-color: #fff;
	padding: 3vw;
	text-align: left;
	border-radius: 2vw;
	margin-bottom: 5vw;
	box-shadow: 1px 1px 3px #eee;
}
#linereserve .inner .box p a {
	display: block;
	background-color: #26C65E;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	height: 15vw;
	line-height: 15vw;
	color: #fff;
	font-weight:500;
	font-size: 5vw;
	text-decoration: none;
	margin-top: 50px;
	border: 1px solid #fff;
	transition: 0.3s;
}
#linereserve .inner .box p a:hover {
	opacity: 0.7;
	transition: 0.3s;
}


#flow {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15vw;
}
#flow h2 {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5vw;
}
#flow .flex {
	margin-left: auto;
	margin-right: auto;
	background-image: url("../images/pc/index/concept-bg.jpg");
	background-position: center center;
	background-size: cover;
	padding: 5vw;
	margin-bottom: 10vw;
	position: relative;
}
#flow .flex::after {
	content: "";
	background-image: url("../images/pc/index/flow.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 10vw;
	height: 10vw;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: -10vw;
}
#flow .flex:last-child::after {
	background-image: none;
}
#flow .flex figure {
	margin-top: 3vw;
}
#flow .flex figure img {
	width: 100%;
	height: auto;
}
#flow .flex div {
	text-align: left;
}
#flow .flex div h3 {
	font-size: 5vw;
	font-family: "Noto Serif JP";
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 20px;
}
#flow .flex div h3 span {
	border-radius: 100px;
	background-color: #fff;
	display: inline-block;
	font-size: 6vw;
	width: 10vw;
	height: 10vw;
	line-height: 10vw;
	text-align: center;
	margin-right: 3vw;
}












footer .logo,
footer nav,
footer nav+p
{
	display: none;
}
footer small {
	display: block;
	margin-top: 60px;
	padding-bottom: 10px;
	font-size: 12px;
}
}



/*===============================================
●画面の横幅が400pxまで
===============================================*/
@media screen and (max-width:400px){
/*===============================================
●sp400
===============================================*/
#sp400------------------------------------------- {
}
}



/*===============================================
●画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){
/*===============================================
●sp320
===============================================*/
#sp320------------------------------------------- {
}
}



/*===============================================
●画面の横幅が481pxから768pxまで
===============================================*/
@media (min-width: 768px) and (max-width: 1024px) {
img {
	max-width: 100%;
	height: auto;
	width: 100%;
}
header .inner nav ul+p {
	display: none;
}
header .inner nav+p+p {
	margin-right: 20px;
}
}