/*
 * Custom CSS
 */

:root {
  --bs-light: #F0F0F0;
  --bs-primary:#003366;
  --bs-red:#E8323D;
  --dark: #FF6600;
  --serif:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  --vw: 1vw;
}
body,html{
	margin:0;
	padding:0;
	overflow-x: hidden;
}
html {
  font-size: 62.5%; /* 10px基準（1rem=10px） */
  line-height:1.6em;
}
body{
font-size:2rem;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;}
.container{
}
.display-120{
	font-size:120%;
	line-height: normal;
}

.display-140{
	font-size:120%;
	line-height: normal;
}


/*広告部分*/

.sliderArea {
  width: 100%;
  margin: 0 auto;
  padding: 0 25px;
  min-height:500px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}
.slide-arrow{
  position: absolute;
  top: 50%;
  margin-top: -15px;
}
button{
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color:var(--bs-primary);
  width:40px!important;
  height:40px!important;
  border-radius:20px;
  }
.prev-arrow{
  left: 0px;
  width: 0;
  height: 0;
  z-index:98;}
.next-arrow{
  right:0;
    width: 0;
  height: 0;
    z-index:98;}
  
.prev-arrow:before{
position:absolute;
content:"";
top:calc(50% - 13px);
  left: calc(50% - 10px);
background: #ffffff;
  height: calc(tan(60deg) * 26px / 2);
  width: 15px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  z-index:99;

}
.next-arrow:before{
top:calc(50% - 13px);
position:absolute;
content:"";
  right:calc(50% - 10px);
background: #ffffff;
  height: calc(tan(60deg) * 26px / 2);
  width:15px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index:99;
}


.slider .card{
position:relative;}
.slider .card .bn_circle{
color:#fff;
position:absolute;
background-color:var(--bs-red);
width:100px;
height:100px;
border-radius:50px;
display:flex;
justify-content: space-around;
align-items: center;
left:0;
top:0;
text-align:center;
}
.slider .card .bn_circle span{
font-size:1.2em;
line-height:1em;
font-weight:bold!important;
}
.slider .card .bn_circle span.narrow {
    transform: scale(0.8, 1);
}
.slider .card h3{
font-weight:bold;
line-height:1.2em;
font-size: clamp(1.5rem, 4vw, 2.5rem);
}

/*ヘッダー*/

header#head{
	background-color:var(--bs-primary);
	height:400px;
	color:#FFFFFF;
	position:relative;
}
header#head .main_img{
position:absolute;
left:0;
bottom:-7em;}
header#head .main_img img{
	width:100%;
	min-width:300px;
	max-width:85%;
}
header#head .main_title{
  width:27em;
  position:absolute;
  bottom:0;
  lef:0;
}
header#head .catch {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 0.5em 1em;
  min-width: 120px;
  max-width: 100%;
  text-align:1.2em;
  background: #ffff;
  border-radius: 15px;
  color:var(--bs-primary);
  font-weight:bold;
  line-height:1.3em;
  font-size: clamp(1rem, 4vw, 2rem)!important;
}

header#head .catch:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 10px solid transparent;
  border-top: 10px solid #fff;
}

header#head .catch p {
  margin: 0;
  padding: 0;
}
header#head h1{
  font-size: clamp(2rem, 5vw, 3rem);
  line-height:2em;
  position:relative;
  z-index:3;}
header#head h1 span {
  font-family: "Poller One", sans-serif;
  font-weight: 400;
  font-style: normal;
  display:block;
  font-size:280%;
  line-height:1em;
  position:relative;
  z-index:3;}
header#head h1 span:after {
position:absolute;
content:'';
height:3px;
left:0;
bottom:0;
display:block;
background-color:#FFFFFF;
width: 100vw;
margin-right: calc(50% - 50);
}

h2{
background-color:var(--bs-light);
	font-weight:bold;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	text-align:center;
	padding: 0.4em;
	margin-top:3em;
}
.tel{
font-size:clamp(3.5rem, 4vw, 5rem);
	font-family:var(--serif);
	font-weight:bold;
	display: inline-flex;
align-items: center;
}
.tel i{
	font-size:0.6em;
	position:relative;
	color:#FFFFFF;
	z-index:1;
	font-weight:bold;
	margin-right:0.5em;
}
.tel i:after{
background-color:var(--bs-primary);
width:1.6em;
height:1.6em;
border-radius:1em;
content:'';
position:absolute;
left:calc(50% - 0.8em);
top:calc(50% - 0.8em);
z-index:-1;
}


footer{
padding-top:3em;}
footer h3,footer .tel {
font-size:1.5em;
}

.table_com {
border-collapse: collapse;
width: 100%;
}
.table_com th, .table_com td {
border-bottom: 2px solid #ccc;
padding: 0.5em 1em;
}
.table_com th {
border-bottom: 2px solid var(--bs-primary);
font-weight: bold;
text-align: center;
width: 20%;
min-width: 6em;
background-color:var(--bs-light);
}



@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
	header#head{
height:350px;
}
header#head .main_img{
left:auto;
bottom:auto;
z-index:0;}
header#head .main_img img{
opacity:0.5;
max-height:300px;
max-width:auto;
width:auto;
height:100%;
}

header#head .main_title{
  margin-left:auto;
  margin-right:auto;
  padding-top:2em;
  position:static;
  width:100%;
  text-align:center;
  display:block;
z-index:10;
}
header#head h1{
  font-size: clamp(2rem, 5vw, 2.5rem);
}

header#head h1 span:after {
    width: 100%;
    margin-right:auto;
}
.slider .card h3{
font-size: 1.2em;
}


}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
}