@charset "utf-8";
/* 共通部分 */
body,div,h1,h2,p,figure,figcaption{
	margin:0;
	padding:0;
}
p {
	font-family: 'Noto Sans JP', sans-serif;
}
html{
	font-size:100%;
}
body{
	color:#333;
	line-height:1.8;
	font-size:100%;
}
.nav li{
	list-style-type:none;
	padding-left:0;
}
img{
	max-width:100%;
	height:auto;
	vertical-align:bottom;
}
a{
	color:inherit;
	text-decoration:none;
}
.title_h2 {
	color:#0CF;
}

/* wbox */
.wbox{
	display:flex;
	justify-content:space-between;
}
.wbox_left{
	width:45%;
	height:500px;
}
.wbox_right{
	width:45%;
	box-sizing:border-box;
}
/* dbox */
.dbox{
	display:flex;
	justify-content:space-between;
	margin-bottom:25px;
	flex-wrap:wrap;
}
.dbox_in{
	width:30%;
}

/* 全体の幅の指定 */
.wrap{
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
}
/*ヘッダー*/
.header {
	display:flex;
	justify-content:space-between;
	margin-top:20px;
}
/*　ヘッダー固定　追加　*/
.header_all{
	/*position:fixed;*/
	/*width:100%;*/
	/*height:80px;*/	
	background-color:rgba(255,255,255,0);
	/*opacity:0.4;*/
}
.clone-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width:100%;
	transition: .3s;
	transform: translateY(-100%);
	background-color:rgba(255,255,255,1);
	box-shadow:0px 1px 3px #666;
	backdrop-filter: saturate(180%) blur(20px); /*アップルさんの美しいデザインらしい・・・?!*/;
	
}
.is-show {
	transform: translateY(0);
}

/* ナビゲーション */
.nav{
	display:flex;
	justify-content:space-between;
	padding-left:0;
}
.nav li {
	border-right: 1px solid #ddd;
}
.nav li a {
	/*display:inline-block;*/
	height:50px;
	padding-right:37px;
	padding-left:37px;
	line-height:50px;
}
.nav li:first-child {
	border-left: 1px solid #ddd;
}
/* アンカータグにホバーしたときにアニメーション */
.nav a {
  position: relative;
  text-decoration: none;
}
.nav a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #0CF;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.nav a:hover::after {
  transform: scale(1, 1);
}
.mini_navi a {
  position: relative;
  text-decoration: none;
}
.mini_navi a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #0CF;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.mini_navi a:hover::after {
  transform: scale(1, 1);
}

/* index html 領域*/

/* メイン画像 */
.mainimg{
	/*background-image:url(../images/main.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	height:50vw;
	background-position:80% center;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:20px;*/
	position:relative;	
}
/*変更*/
.slick-box{
	padding:0;
}
.slick-box li{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	height:44.8vw;
}
.slick-box li.img01{
	background-image:url(../images/main.jpg);
}
.slick-box li.img02{
	background-image:url(../images/image2.jpeg);
}
.slick-box li.img03{
	background-image:url(../images/image11.jpeg);
}
.slick-box{
	margin-top:0;
}

.title_box{
	position:absolute;
	top:40%;
	left:20%;
	z-index:5;
	color:#fff;
	background-color:rgba(0,0,0,0.3);
	padding:10px;
	font-size:2.2vw;
}


section{
	margin-bottom:50px;
}
.section01 .wbox_left{
	height: 300px;
	background-color:#FFF;
	margin-bottom:50px;
}
.section01 .wbox_left h2{
	font-size:150%;
	margin-top: 200px;
}
.section01 .wbox_right {
	height: 300px;
	border:none;
}
.section01 .wbox_right p{
	font-size:120%;
	margin-top: 130px;
}

.section02 {
	padding-top:50px;
	padding-bottom:50px;
	background-color:rgba(255, 255, 240, 0.6);
}
.section02 h2 {
	text-align:center;
	border-bottom: 1px solid #3FF;
	padding-bottom:5px;
}
.p_center {
	text-align:center;
	width:55%;
	margin: 0 auto;
	padding-top:15px;
	margin-bottom:15px;
}

.section02 .wbox_left{
	height:350px;
}
.section02 .wbox_left h3{
	color:#333;
	text-align:center;
	margin-top: 50px;
}
.section02 .wbox_left_ul{
	background-color:#f0ffff;
	padding:20px;
	border: 1px solid #3FF;
}
	
.section02 .wbox_right {
	height: 350px;
	border: none;
}
.section02 .wbox_right h3{
	color:#333;
	text-align: center;
	margin-top: 50px;
}
.section02 .wbox_right_ul{
	background-color: #f0f8ff;
	padding: 20px;
	border: 1px solid #3FF;
}

.section03 .title_h2 {
	margin-bottom:20px;
}
.section03 h3 {
	text-align:center;
	color:#666;
	border-bottom: 1px solid #ddd;
}

/* 別ページにいくボタン */
.btn{
	text-align:center;
}
.btn a{
	display:block;
	width:100%;
	height:50px;
	line-height:50px;
	margin-top:15px;
	background-color:#FFF;
	border:1px solid gray;
}
.btn a:hover {
	background-color:#0CF;
}
/*
/.section04 {
	padding-top:50px;
	padding-bottom:50px;
	background-color:rgba(255, 255, 240, 0.6);
.section04 h2{
	padding-bottom:20px;
}

.abox{
	display:flex;
	justify-content:space-between;
}
.abox_left{
	width:45%;
	height:500px;
	background-image:url(../images/profile_1.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	box-sizing:border-box;
}*/
.abox_right{
	width:50%;
	box-sizing:border-box;
	
}

.section_eria {
	padding-top:50px;
	padding-bottom:50px;
}
.section_eria p{
	padding-bottom:30px;
}
.section_eria h2 {
	text-align:center;
	border-bottom: 1px solid #3FF;
	padding-bottom:5px;
}
.section_eria .eria_img {
	object-fit:cover;
	width:100%;
	height:200px;
}
	
/* index html ここまで*/

/* price htmlここから */
.page-header {
	background-color:#0CF;
	height:100px;
}
.page-header-title {
	color:#FFF;
	text-align:center;
	line-height: 100px;
}
.mini_navi ul{
	display:flex;
	justify-content: start;
}
.mini_navi li{
	list-style-type:none;
	padding-left:15px;
}
	
.price-first {
	text-align:center;
	font-size:120%;
	width:600px;
	margin: 0 auto;
	border: 2px solid #999;
	margin-bottom:50px;
	box-sizing:border-box;
}
.price-first span{
	color:#0CF;
	font-size:150%;
}
.price-first .price-text {
	color:#F00;
}
.price-first h2 {
	padding-top:20px;
}
.price-first h3 {
	margin:0px;
	padding-top:20px;
	border-top:2px solid #999;
}
.price-first .padding_bottom {
	padding-bottom:20px;
}
/* その他料金 ここから↓ */

table {
	width: 600px;
	margin: 0 auto;
	margin-bottom: 20px;
	border-collapse: collapse;
	box-sizing:border-box;
}
table td,table th {
	padding: 20px;
	border: 2px solid #999;
	text-align: center;
}
.td_text {
	width:35%;
	font-size:120%;
	background-color:rgba(0, 204, 255, 0.1);
}
#price_p {
	text-align:center;
}

/* price htmlここまで */

/* tukisoi htmlここから */
.tukisoi01 h2{
	margin-top:20px;
	margin-bottom:20px;
}
.tukisoi01 .abox{
	display:flex;
	justify-content:space-between;
}

.tukisoi_mainimg{
	background-image:url(../images/tukisoi2.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	height:35vw;
	background-position:center;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:20px;
	position:relative;	
}
.tukisoi_title_box{
	position:absolute;
	top:10%;
	z-index:5;
	color:#fff;
	background-color:rgba(255,255,255,0.3);
	padding:10px;
	font-size:1vw;
}
.service_info h2{
	margin-bottom:20px;
}

.service_info .dbox_in img{
	width:600px;
	height:250px;
	object-fit:cover;
	object-position:center top;
	padding-bottom:5px;
}
.service_info .dbox_in figure {
	padding-bottom:10px;
}
.example ul{
	padding-left:0px;
}
.example ul li{
	list-style-type:none;
}


/* tukisoi htmlここまで */

/* service htmlここから↓ */
.service .abox_left {
	width:45%;
	background-image:url(../images/helper_img.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	box-sizing:border-box;
}
.service .abox_right h2 {
	margin-top:30px;
	margin-bottom:20px;
}
.service .abox_right ul {
	margin: 5px 0 10px 0;
}

/* service htmlここまで */

/* company htmlここから↓ */

.company th,.company td{
	border:none;
    border-bottom: 1px solid #0CF;
	padding-top:40px;
	padding-bottom:40px;
	text-align:left;
}
.company th{
	color:#333;
}
.company table,.company tbody{
	width:900px;
}

/* company htmlここまで */

/*  contact htmlここから↓ */
input[type="text"] {
	width:200px;
}
input[type="tel"] {
	width: 200px;
}
input[type="email"] {
	width: 300px;
}
input[type="submit"] {
	color:#333;
	width:100px;
	height:50px;
	border-radius:0;
	border: 1px solid gray;
	background:#ddd;
}
textarea{
	width: 300px;
	height:150px;
	resize:vertical;
}
.tel_img {
	margin-top:20px;
	margin-bottom:20px;
}
/* contact html ここまで↑ */

/* footer領域 ここから*/
footer{
	background-color:#0CF;
	text-align:center;
	color:#fff;
	padding-top:10px;
	padding-bottom:10px;
}
footer .dbox_in p{
	text-align:left;
}
footer h4{
	text-align:left;
	margin-left:10px;
	margin-top:30px;
}

footer ul li{
	text-align:left;
	margin-bottom:10px;
}
.list_triangle {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.list_triangle > li {
    position: relative;
    padding: 0px 0px 0px 1em;
}
.list_triangle > li::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border: 0.3em solid transparent;
    border-left: 0.4em solid #fff;
    content: "";
}
.list_triangle a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.list_triangle a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.list_triangle a:hover::after {
  transform: scale(1, 1);
}

/* footer領域 ここまで*/


/* ウィンドウの幅が1150px以下の場合 */
@media (max-width:1150px){
  .header{
	text-align:center;
}
  .header,.nav {
	flex-direction:column;
}
.nav li {
	border-right: none;
}
.nav li a {
	display:inline-block;
	height:50px;
	padding-right:37px;
	padding-left:37px;
	line-height:50px;
}
.nav li:first-child {
	border-left: none;
}
.nav{
	display:none;
	margin-top: 0;
	padding-left:0;	
}
.tukisoi_mainimg{
	height:50vw;
}
/* ハンバーガーボタンを追加 */
/*３本線を囲む枠組み（グループ化）*/
.btn-gnavi{
	position:absolute;
	top:20px;
	right:20px;
	width:20px;
	height:20px;
	cursor:pointer;
	/*background-color:#ccc;*/
}
/*３本線を上下中央に配置（３本重なっている）*/
.btn-gnavi span{
	position:absolute;
	width:20px;
	height:2px;
	background-color:#666;
	border-radius:10px;
	transition:all 0.5s;
	top:9px;
	left:0;
}
.btn-gnavi span:nth-child(1){
	transform:translateY(-9px);
}
.btn-gnavi span:nth-child(2){
	transform:translateY(0);
}
.btn-gnavi span:nth-child(3){
	transform:translateY(9px);
}
/*クリックしたら追加されるスタイル（.openがつくスタイル）*/
.btn-gnavi.open span:nth-child(1){
	transform:rotate(-45deg);
}
.btn-gnavi.open span:nth-child(2){
	background-color:transparent;
}
.btn-gnavi.open span:nth-child(3){
	transform:rotate(-135deg);
}
}


/* ウィンドウの幅が600px以下の場合 */
@media (max-width:600px){
.wrap {
	padding-left:10px;
	padding-right:10px;
}
.wbox,.dbox,.abox{
	flex-direction:column;
}
.wbox_left,
.wbox_right,
.dbox_in,
.abox_left,
.abox_right,
.wbox_left_ul,
.wbox_right_ul,
.service .abox_left{
	width:100%;
	box-sizing:border-box;
}
.dbox_in{
	margin-bottom:30px;
}
.section01 .wbox_left h2{
	font-size:5vw;
	text-align:center;
}
.section01 .wbox_left {
	height:100px
}	
.section01 .wbox_right {
	height:200px;
}
.section01 .wbox_left h2{
	margin-top: 50px;
}
.section01 .wbox_right p{
	text-align:center;
	font-size:100%;
	margin-top: 0px;
}
.p_center {
	width:100%;
}
.section03 .dbox_in {
	margin-bottom:50px;
}
.section_eria .eria_img {
	height:300px;
}	
.price-first,table {
	width:100%;
}
.price_option .td_text{
	width:40%;
	font-size:100%;
}
.example .wbox_left {
	margin-bottom:25px;
}
.tukisoi_mainimg{
	height:250px;
}
.mainimg .title_box p{
	font-size:20px;
}
.mainimg .title_box {
	top:25%;
	left:15%;
}
.tukisoi_title_box{
	font-size:10px;
	top:0%;
}
.mini_navi ul,.mini_navi ul li{
	padding-left:0px;
	margin-left:0px;
	padding-right:10px;
}
.service .abox_right h2 {
	font-size:110%;
}
.company table,.company tbody{
	width:100%;
}
	
}