@charset "utf-8";
/* CSS Document */
#slimmenu{ display:none;}
#navArea{ display:none;}
.pcno { display:none;}
img { max-width:100%;}
#navArea{ display:none;}
.none{ display: none;}
.fixed-link{ display: none;}
/*▼ 初期化 ▼*/
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, ul, li, blockquote, th, td, tr, img { padding:0px; margin:0px; font-size:16px; line-height:1.5em; letter-spacing:1px; color:#333;-webkit-text-size-adjust:100%; font-weight:500; font-family: "Zen Kaku Gothic New", sans-serif;}
table { border-collapse:collapse; }
ul, li { list-style:none; }
h1, h2, h3, h4, h5, h6,.title,.more{ padding:0px; margin:0px; font-family: "Zen Maru Gothic", sans-serif;}
a { overflow:hidden; outline:none; }
img { border:none; vertical-align:bottom; }
table td { border:none; vertical-align:top; }
.text99 { text-indent:-9999px; }
a{-webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; transition:0.5s; }
a:hover { text-decoration:none; }
a:hover { opacity:0.5; filter:alpha(opacity=50);-webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; transition:0.5s; }
.kadomaru{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}

/*
color:227dcfff
*/

/*▲ 初期化 ▲*/
.mb30{ margin-bottom:30px;}
.mb50{ margin-bottom:50px;}


/*▼エリア・背景設定▼*/
body{ min-width:1300px;}
#body-top{}


/*▼ヘッダー▼*/
#header{ background:#fff; height:auto; position:relative; height:120px;}
#header .left{ float:left; margin:20px 0 0 30px;}
#header .left a{ display:block; overflow:inherit;}
#header .left a img{}

#header .right{ width:180px; float:right;}
#header .right .btn{ text-align:center; font-size:18px; font-weight:bold; position: relative;}
#header .right .btn a{ background:#00A3DF; color:#fff; display:block; height:60px; text-decoration:none; border:2px; box-sizing:border-box; border:2px solid #00A3DF;}
#header .right .btn a:hover{ opacity:1; background:#fff;}
#header .right .btn a:hover p{ color:#00A3DF;}
#header .right .btn p { font-size: 15px; font-weight: bold; color:#fff; line-height: 60px; padding-left: 25px;}
#header .right .btn img{ position: absolute; left:20px; top:5px; bottom:0; margin:auto; transition:.5s;}
#header .right .btn a:hover img:nth-child(1){ opacity:0;}
#header .right .btn a:hover img:nth-child(2){ opacity:1;}
#header .right .btn a img:nth-child(2){ opacity:0;}
#header .right .btn:last-child a{ background:#00CE4C; border-color:#00CE4C;}
#header .right .btn:last-child a img{ width: 40px; left: 5px;}
#header .right .btn:last-child a:hover{ opacity:1; background:#fff;}
#header .right .btn:last-child a:hover p{ color:#00CE4C;}

#header .center{ float:right; text-align:center; padding:15px 20px 0px; min-height:120px; box-sizing:border-box; transition:.3s;}
#header .center .p-01{ font-size:15px; font-weight:500; display: inline-block; margin-bottom:10px;}
#header .center .p-tel{ font-size:28px; font-weight:bold; line-height:1em; margin-bottom:10px;}
#header .center .p-tel a{ background:url(../images/common/ico-freedial.png)left 0px no-repeat; color:#00A3DF; display:inline-block; line-height:1em; text-decoration:none; padding-left:35px; background-size:30px auto;}
#header .center .p-01{ font-size:14px; letter-spacing: normal; line-height: 1.5em;}
#header .center .p-01 span{ font-size: 18px; font-weight: bold; color:#EC702E;}


/*▼メインナビゲーション▼*/
/*▼メインナビゲーション▼*/
#navi{
  float:right;
  text-align:center;
  padding:52px 20px 0 0;
  position:relative;
}

#navi .gnav{
  display:inline-block;
}

#navi .gnav > li{
  font-size:16px;
  font-weight:600;
  letter-spacing:1px;
  float:left;
  margin:0 15px;
  text-align:center;
  position:relative; /* ★ submenuの基準 */
}

#navi .gnav > li > a{
  color:#333;
  text-decoration:none;
  display:inline-block;
  padding:0 3px 42px;
  position:relative;
}

/* hoverの下線（既存を維持） */
#navi .gnav > li > a:hover{
  opacity:1;
  color:#2497D3;
  transition:.3s ease-in-out;
}
#navi .gnav > li > a:after{
  content:"";
  position:absolute;
  left:0; right:0; margin:auto;
  bottom:0px;
  height:3px;
  background:linear-gradient(to left, #00acd7 , #007fd7 );
  transform:scale(0,1);
  transition:.3s ease-in-out;
}
#navi .gnav > li > a:hover:after{ transform:scale(1); }
#navi .gnav > li:nth-child(2) > a:after{ display: none;}

/* ▼ドロップダウン▼ */
#navi .submenu{
  position:absolute;
  top:calc(100% + -8px); /* メニューの少し下 */
  left:50%;
  transform:translateX(-50%);
  width:150px;                 /* 画像っぽい幅感 */
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:0 0 10px 10px;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  padding:12px 18px;
  text-align:left;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(6px);
  transition:.2s ease;
}
/* ▼submenu 上のグラデライン（最初は非表示） */
#navi .submenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(to left, #00acd7 , #007fd7 );
  transform:scaleX(0);
  transform-origin:center;
  transition:.3s ease-in-out;
}
/* hoverで表示（既存）に追加するだけ */
#navi .has-sub:hover .submenu::before{
  transform:scaleX(1);
}


/* hoverで表示 */
#navi .has-sub:hover .submenu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* submenuの項目 */
#navi .submenu li{
  float:none;
  margin:0;
}

#navi .submenu li + li{
  border-top:1px solid #ddd; /* 画像の区切り線 */
}

#navi .submenu a{
  display:block;
  padding:12px 6px;
  color:#333;
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  text-decoration: none;
}

/* 左の丸アイコン風（画像の▶っぽい） */
#navi .submenu a{
  position:relative;
  padding-left:28px;
}
#navi .submenu a:before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#00A3DF;
}
#navi .submenu a:after{
  content:"";
  position:absolute;
  left:11px;
  top:50%;
  width:3px;
  height:3px;
  transform:translateY(-50%) rotate(45deg);
  border-right:2px solid #fff;
  border-top:2px solid #fff;
}

/* submenu hover */
#navi .submenu a:hover{
  color:#2497D3;
  opacity:1;
}
#navi .submenu li:last-child a:before{ background:#f29626;}
#navi .submenu li:last-child a:hover{
  color:#f29626;
  opacity:1;
}


@media screen and (max-width: 1380px) {
#header .center{ display: none;}
}





#hmp { height: 700px; position: relative;}
#hmp .mp-img{ background:url(../images/home/mp.png)center top no-repeat; height:540px;}
#hmp .area-01{ width:1200px; position: absolute; bottom:0; left:0; right:0; margin:auto; overflow: hidden;}
#hmp .area-01 .left{ width: 60%; float: left;}
#hmp .area-01 .left .p-01{ font-size: 56px; font-weight: bold; line-height: 1.8em; display: inline-block; font-family: "Zen Maru Gothic", sans-serif;}
#hmp .area-01 .left .p-01 span{ color:#00A3DF;}
#hmp .area-01 .left .p-02{ width: 300px; font-size: 15px; font-weight: 500; display: inline-block; vertical-align: middle; line-height:2em; padding-bottom: 50px;}

#hmp .area-01 .right{ width:38%; float:right; overflow: hidden; vertical-align: bottom; padding-top:230px;}
#hmp .area-01 .right .btn{ width: 220px; float: left; text-align:center; font-size:18px; font-weight:bold; position: relative;}
#hmp .area-01 .right .btn a{ background:#00A3DF; color:#fff; display:block; padding:20px 0; text-decoration:none; border:2px; box-sizing:border-box; border:2px solid #00A3DF; border-radius:50px;}
#hmp .area-01 .right .btn a:hover{ opacity:1; background:#fff;}
#hmp .area-01 .right .btn a:hover p{ color:#00A3DF;}
#hmp .area-01 .right .btn p { font-size: 15px; font-weight: bold; color:#fff; padding-left: 25px;}
#hmp .area-01 .right .btn img{ position: absolute; left:30px; top:5px; bottom:0; margin:auto; transition:.5s;}
#hmp .area-01 .right .btn a:hover img:nth-child(1){ opacity:0;}
#hmp .area-01 .right .btn a:hover img:nth-child(2){ opacity:1;}
#hmp .area-01 .right .btn a img:nth-child(2){ opacity:0;}
#hmp .area-01 .right .btn:last-child{ float: right;}
#hmp .area-01 .right .btn:last-child a{ background:#00CE4C; border-color:#00CE4C;}
#hmp .area-01 .right .btn:last-child a img{ width: 40px; left: 15px;}
#hmp .area-01 .right .btn:last-child a:hover{ opacity:1; background:#fff;}
#hmp .area-01 .right .btn:last-child a:hover p{ color:#00CE4C;}




/*▼フッター▼*/
#footer {}
#footer #fmid{ width: 1200px; margin:auto; overflow: hidden; padding:50px 0 60px;}

#footer #fmid .left{ float: left;}
#footer #fmid .left .logo{ display: inline-block; margin-bottom: 30px;}
#footer #fmid .left .p-01{ font-size: 15px; letter-spacing: normal; margin-bottom: 20px;}
#footer #fmid .left .p-02{ font-size: 30px; font-weight: bold; line-height: 1.8em; display: inline-block; font-family: "Zen Maru Gothic", sans-serif;}
#footer #fmid .left .p-02 span{ color:#00A3DF;}


/*フッターナビ*/
#footer #fmid .right{ float: right; padding-top: 30px;}
#footer #fmid .right ul{ width: 130px; margin-right:10px; display: inline-block; vertical-align: top;}
#footer #fmid .right ul:first-child{ width: 150px;}
#footer #fmid .right ul li{ font-size: 14px; letter-spacing: normal; margin-bottom:3px;}
#footer #fmid .right ul li:last-child{ margin-bottom: 0;}
#footer #fmid .right ul li a{ color:#333; display: inline-block; text-decoration: none; position: relative; padding-left:15px;}
#footer #fmid .right ul li a::before{ content:""; width:6px; height:2px; background:#00A3DF; display: inline-block; position: absolute; left:0; top:10px; transition:.3s;}
#footer #fmid .right ul li a:hover{ opacity:1; color:#00A3DF;}
#footer #fmid .right ul li a:hover::before{ left:3px;}

#footer #fmid .right ul li:first-child{ font-size: 16px; font-weight:500; letter-spacing: 1px;}
#footer #fmid .right ul li:first-child a{ padding-left: 0;}
#footer #fmid .right ul li:first-child a::before{ display: none;}


#footer #copy { clear:both; text-align:center; font-size:10px; padding:20px 0; color:#333;}



.page-top {
	position:fixed;
    bottom:70px;
    right:60px;
	background-image:url(../images/common/totop.png);
	width:100px; height:100px; text-indent:-9999px;
    -ms-filter:"alpha(opacity=80)";
    -moz-opacity:0.8;
    -khtml-opacity:0.8;
    opacity:0.8;
	z-index:10;
	-webkit-transition:0s; -moz-transition:0s; -ms-transition:0s; transition:0s;}



/*▼メインビジュアル▼*/
#mp{ margin:0 30px; border-radius:20px;}
#mp .area-01{ width:1200px; height:300px; margin:auto;}
#mp .area-01 .p-01{ font-size:60px; font-weight:bold; color:#fff; text-align: center; letter-spacing:3px; padding-top:80px; font-family: "Zen Maru Gothic", sans-serif;}
#mp .area-01 .p-01 span{ font-size:24px; font-weight: 500; line-height:2em; letter-spacing:13x; display:block;}

#flow #mp{ background:url(../images/reform/mp.png)center top no-repeat;}
#reform #mp{ background:url(../images/service/mp.png)center top no-repeat;}
#service #mp{ background:url(../images/service/mp.png)center top no-repeat;}
#contact #mp{ background:url(../images/contact/mp.png)center top no-repeat;}
#trouble #mp{ background:url(../images/trouble/mp.png)center top no-repeat;}
#company #mp{ background:url(../images/company/mp.png)center top no-repeat;}





/*▼エリア・共通設定▼*/
#main{}
.box{ width:1200px; margin:auto; padding:70px 0;}

.h2-01{ font-size:36px; font-weight:bold; color:#333; letter-spacing:1px; margin-bottom:50px;}
.h2-01 span{ font-size:18px; color:#00A3DF; line-height:2em; letter-spacing: 2px; display: block; margin:0 0 5px 2px;}
.h2-01.center{ text-align: center;}
.h2-01 span.orange{ color:#F39700;}

.h2-02{ font-size:36px; font-weight:bold; color:#333; letter-spacing:1px; margin-bottom:50px;}
.h2-02 span{ font-size:18px; color:#00A3DF; line-height:2em; letter-spacing: 2px; display: block; margin:0 0 5px 2px;}

.h2-03{ font-size:36px; font-weight:bold; color:#333; text-align: center; letter-spacing:1px; margin-bottom:30px; position: relative;}
.h2-03 .span{ font-size:18px; color:#00A3DF; line-height:3em; letter-spacing: 2px; display: block;}
.h2-03 img{ position: absolute; left:0; right:0; top:-50px; margin:auto; z-index:2;}


.h2-en{ font-size: 36px; font-weight: bold; text-align: center; line-height: 1.8em; margin-bottom:70px; padding-top: 120px; position: relative;}
.h2-en .blue{ color:#00A3DF;}
.h2-en .orange{ color:#F39700;}
.h2-en img{ position: absolute; left:0; right:0; top:-50px; margin:auto; z-index:2;}
.h2-en .en{ font-size: 80px; color:#EBF4F9; position: absolute; left:0; right:0; top:0; margin:auto;}


.h3-01{ font-size:22px; font-weight:500; color:#333; line-height:2em; margin-bottom:30px;}


.more{ font-size:18px; font-weight: bold; text-align: center; margin:50px 0;}
.more a{ background:#00A3DF; border:2px solid #00A3DF; color:#fff; padding:20px 30px; border-radius:50px; text-decoration: none; display:inline-block;}
.more a:hover{ background:#fff; color:#00A3DF; opacity:1;}
.more.orange a{ background:#F39700; border:2px solid #F39700;}
.more.orange a:hover{ background:#fff; color:#F39700;}

.bk-gray{ background:#f8f8f8;}
.bk-blue{ background: linear-gradient(to bottom, #EFF7FF 0%, #F3F6F9 100%);}
.bk-orange{ background:#fff5db;}


/*パンくずリスト*/
.breadcrumb { width:1024px; margin:auto; display: flex; align-items: center; padding-top:30px; font-size: 14px; margin-block-start:0; padding-inline-start:0px; margin-bottom: 50px;}
.breadcrumb li { font-size:15px; font-weight: 500; display: flex; align-items: center;}
.breadcrumb li + li::before { content: "＞"; padding: 0 8px; color: #714d4c;}
.breadcrumb li a { text-decoration: none; color: #714d4c;}
.breadcrumb li a:hover { text-decoration: underline;}


.font-01{ font-family: "Zen Maru Gothic", sans-serif;}




/*----------  ホーム home  ----------*/
/*----------  ホーム home  ----------*/
/*----------  ホーム home  ----------*/
#home .bk-ico-01{ background:url(../images/home/bk-ico-01.png)right top no-repeat;}
#home .bk-ico-02{ background:url(../images/home/bk-ico-02.png)left top no-repeat; padding-top: 100px;}
#home .bk-ico-03{ background:url(../images/home/bk-ico-03.png)right top no-repeat;}
#home .bk-ico-04{ background:url(../images/home/bk-ico-04.png)left bottom no-repeat;}
#home .bg{ background:url(../images/home/bg.png)right 200px no-repeat;}

#home #box-01{ padding:50px 0px; box-sizing:border-box;}
#home #box-01 .area-01{ width: 1200px; margin:0 auto 80px; position: relative; min-height:500px;}
#home #box-01 .area-01 .right{ float: right; text-align: center;}
#home #box-01 .area-01 .right img{ display: block; margin:0 auto 30px;}
#home #box-01 .area-01 .right h2{ font-size: 36px; font-weight: bold; line-height: 1.7em; margin-bottom: 25px;}
#home #box-01 .area-01 .right h2 span{ color:#00A3DF;}
#home #box-01 .area-01 .right p{ line-height: 1.8em;}


/* left：画面左端〜中央 */
#home #box-01 .left{
  position: relative;
  float: left;
  width:60vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;            /* 左エリア内で見切る（必須） */
  padding-right: 24px;
}

/* Swiperの2段間隔 */
#home #box-01 .worrySwiper--top{ margin-bottom: 22px; }

/* Swiper：外に見せたいならvisible、今回は左に収めたいのでhiddenでもOK */
#home #box-01 .worrySwiper{
  overflow: hidden;
}

/* 流れるスライダーは slide 幅を auto にする */
#home #box-01 .worrySwiper .swiper-slide{
  width: auto;}

#home #box-01 .area-01 .left .entry{ width:200px; height:220px; border-radius:40px; background:#fff; border:2px solid #CDE2F8; text-align: center; position: relative;
  pointer-events: auto;}
#home #box-01 .area-01 .left .entry .img{ width: 80px; height: 80px; position: absolute; left:0; right:0; top:40px; margin:auto;}
#home #box-01 .area-01 .left .entry .img img{ position: absolute; left:0; right:0; top:0; bottom:0; margin:auto;}
#home #box-01 .area-01 .left .entry p{ font-size: 15px; line-height: 1.7em; padding:140px 0px 0px; display: inline-block;}



#home .p-entitle{ font-size: 30px; font-weight: bold; text-align: center; margin-bottom: 50px; padding-top: 100px; position: relative; line-height:1.8em;}
#home .p-entitle .blue{ color:#00A3DF;}
#home .p-entitle img{ position: absolute; left:0; right:0; top:-50px; margin:auto; z-index:2;}
#home .p-entitle .en{ font-size: 80px; color:#EBF4F9; position: absolute; left:0; right:0; top:0; margin:auto;}

#home #box-02{ padding-bottom: 50px;}
#home #box-02 h2{ font-size: 40px; margin-bottom:50px;}
#home #box-02 .area-01{ width: 1160px; margin:auto; overflow: hidden;}
/*
#home #box-02 .area-01 .entry{ width: 560px; background:#fff; float: left; border-radius:20px; padding:15px 15px 30px; border:2px solid #CDE2F8; box-sizing:border-box;}*/
#home #box-02 .area-01 .entry{ width: 560px; background:#fff; float: left; border-radius:20px; padding:15px 15px 30px; border:2px solid #e5e5e5; box-sizing:border-box;}
#home #box-02 .area-01 .entry:last-child{ float: right;}
#home #box-02 .area-01 .entry:last-child .inner img{ right:0px; top:-40px; width: 120px;}
#home #box-02 .area-01 .entry a{ display: block; text-decoration: none;}
#home #box-02 .area-01 .entry .inner{ padding:30px 20px 0px; position: relative;}
#home #box-02 .area-01 .entry .inner h3{ font-size: 32px; font-weight: bold; margin-bottom: 20px;}
#home #box-02 .area-01 .entry .inner .p-01{ font-size: 18px; font-weight: bold; color:#00A3DF; margin-bottom: 20px;}
#home #box-02 .area-01 .entry .inner p{ line-height: 1.8em;}
#home #box-02 .area-01 .entry .inner img{ position: absolute; right:20px; top:-40px; width: 120px;}
#home #box-02 .area-01 .entry:last-child .inner .p-01{ color:#f29626;}

.card{
  position: relative;
  width: 320px;
  height: 420px;
  background: #fff;
  border: 2px solid #8fa2ff;
  border-radius: 28px;
}

/* 右下のえぐれ（中を削る） */
.card::after{
  content:"";
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:120px;
  height:120px;
  background:#fff; /* ページ背景色 */
  border-top-left-radius: 999px;
  z-index:2;
}

/* 右下の「えぐれ専用の枠線」 */
.card::before{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:120px;
  height:120px;

  border:2px solid #8fa2ff;
  border-left:0;
  border-top:0;
  border-top-left-radius: 999px;

  z-index:3;
}



#home .bk-back{
background:url(../images/home/bk-back.png);
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  height:500px;}




#home #box-03{ width: 1140px; padding:0px 0 100px;}
#home #box-03 h2{ font-size: 40px; font-weight: bold; text-align: center; margin-bottom:50px;}
#home #box-03 h2 img{ display: block; margin:0 auto 15px;}
#home #box-03 .area-01{ background:rgba(255,255,255,.8); overflow: hidden; border-radius:20px;}
#home #box-03 .area-01 .entry{ width: 190px; float: left;}
#home #box-03 .area-01 .entry a{ padding:120px 0 30px; display:block; text-decoration: none; position: relative; border-radius:15px;}
#home #box-03 .area-01 .entry a .img{ width:100px; height:100px; position: absolute; top:30px; left:0; right:0; margin:auto;}
#home #box-03 .area-01 .entry a .img img{ position: absolute; left:0; right:0; top:0; bottom:0; margin:auto;}
#home #box-03 .area-01 .entry a p{ font-size:16px; font-weight:bold; text-align: center;}
#home #box-03 .area-01 .entry a:hover{ opacity:1; background:#F3F6F9;}
#home #box-03 .area-01 .entry a:hover p{ color:#00A3DF;}


#box-case{ padding:70px 0 50px;}
#box-case .area-01{ width: 1200px; margin:auto; position: relative;}
#box-case .area-01 p{ position: absolute; top:50px; right:0; display: inline-block; line-height: 2em;}
#box-case .area-02{ text-align: center; width: 100%; padding:20px 0;}
#box-case .area-02 .entry{ width: 380px;}
#box-case .area-02 .entry a{ background:#fff; padding:5px 5px 30px; border-radius:15px; display: block; text-decoration: none; border: 1px solid #CDE2F8; box-shadow:10px 10px 20px rgb(0 0 0 / 10%);}
#box-case .area-02 .entry a img{ width: 100%; height:250px; object-fit: cover; margin-bottom: 25px;}
#box-case .area-02 .entry .inner{ padding:0 20px;}
#box-case .area-02 .entry h3{ font-size: 18px; font-weight: bold; text-align: left; margin-bottom: 20px; transition:.5s;}
#box-case .area-02 .entry ul{ overflow: hidden; width: 100%;}
#box-case .area-02 .entry ul li:nth-child(1){ font-size: 13px; float: left; border: 1px solid #E0E0E0; border-radius:50px; padding:5px 10px;}
#box-case .area-02 .entry ul li:nth-child(2){ font-size: 14px; color:#ccc; float: right; letter-spacing: normal;}
#box-case .area-02 .entry a:hover { box-shadow: 2px 2px 8px rgb(0 0 0 / 15%); opacity:1; border:1px solid #00A3DF}
#box-case .area-02 .entry a:hover h3{ color:#00A3DF;}

/* Swiperははみ出し表示を許可（左右チラ見せに必須） */
.case-slider .swiper {
  overflow: visible;
}

/* スライドが見えてない時は薄くしてクリック不可（参考仕様） */
.case-slider .swiper-slide:not(.swiper-slide-visible) .entry,
.case-slider .swiper-slide:not(.swiper-slide-visible) .entry a {
  pointer-events: none;
  opacity: .3;
}

/* .entry に width固定や inline-block が残ってる場合は無効化（Swiper管理にする） */
#box-case .area-02 .entry,
.case-slider .entry {
  width: auto;
  display: block;
}

/* --- 矢印（参考コードの雰囲気） --- */
:root{
  --easing: cubic-bezier(.2, 1, .2, 1);
  --transition: .8s var(--easing);
  --color-gray: #ddd;
  --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(255,255,255,.2);
}

.case-slider .swiper-button-prev,
.case-slider .swiper-button-next {
  display: grid;
  place-content: center;
  width: 6.4rem;
  height: 6.4rem;
  cursor: pointer;
  transition: var(--transition);
}

.case-slider .swiper-button-prev::before,
.case-slider .swiper-button-next::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: var(--box-shadow-dark);
}

.case-slider .swiper-button-prev::after,
.case-slider .swiper-button-next::after {
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  border: solid #fff;
  border-width: 3px 3px 0 0;
}

.case-slider .swiper-button-prev::after {
  margin-left: .4rem;
  transform: rotate(-135deg);
}
.case-slider .swiper-button-next::after {
  margin-right: .4rem;
  transform: rotate(45deg);
}

/* 位置：スライダーの外側に出す（参考の右/左 calc 表現を簡略化） */
.case-slider .swiper-button-prev,
.case-slider .swiper-button-next {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  margin: auto;
}
.case-slider .swiper-button-prev { left: -3.2rem; }
.case-slider .swiper-button-next { right: -3.2rem; }

.case-slider .swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

/* PCのみ hover演出（任意） */
@media (min-width: 1025px){
  .case-slider .swiper-button-prev:hover::before,
  .case-slider .swiper-button-next:hover::before{
    transform: scale(1.2);
  }
}


#home .bk-04{ background:url(../images/home/bk-01.png)center top no-repeat;}
#home #box-04{ padding:480px 0 120px;}
#home #box-04 h2{ text-align: center; margin-bottom:30px;}
#home #box-04 h2 img{ width: 140px; display: block; margin:0 auto 15px;}
#home #box-04 .p-01{ font-size: 24px; font-weight: bold; color:#00A3DF; text-align: center; margin-bottom: 50px;}
#home #box-04 .area-01{ overflow: hidden;}
#home #box-04 .area-01 .entry{ width: 380px; float: left; margin-right:30px;}
#home #box-04 .area-01 .entry:last-child{ margin-right: 0;}
#home #box-04 .area-01 .entry h3{ font-size:20px; font-weight: bold; text-align: center; padding:25px 0 20px;}
#home #box-04 .area-01 .entry h3 span{ color:#f29626;}
#home #box-04 .area-01 .entry p { font-size: 16px; letter-spacing: normal; line-height: 1.8em;}


#home #box-05{ padding:100px 0;}
#home #box-05 .area-01{ overflow: hidden;}
#home #box-05 .area-01 .left{ width: 560px; float: left; position: relative; padding-top: 50px;}
#home #box-05 .area-01 .left dl{ border-top:1px solid #eee;}
#home #box-05 .area-01 .left dl:last-of-type{ border-bottom:1px solid #eee;}
#home #box-05 .area-01 .left dl a{ display:block; text-decoration:none; padding:27px 15px; position:relative;}
#home #box-05 .area-01 .left dl a:hover{ background:#EFF7FF; opacity:1;}
#home #box-05 .area-01 .left dl a:hover dd{ color:#00A3DF;}
#home #box-05 .area-01 .left dl dt{ font-size:14px; display:inline-block; vertical-align: middle;}
#home #box-05 .area-01 .left dl dt span{ background:#dddddd; display:inline-block; width:80px; text-align:center; padding:3px 0; font-size:13px;  font-weight:500; color:#333; border-radius:5px; margin:0 15px 0 15px;}
#home #box-05 .area-01 .left dl dd{ font-size:16px; font-weight:bold; display:inline-block; vertical-align: middle; transition:.3s; max-width:450px;}



#home #box-05 .area-01 .right{ width: 560px; float: right; position: relative; padding-top: 50px;}
#home #box-05 .area-01 .right ul{ border-top: 1px solid #eee;}
#home #box-05 .area-01 .right ul li{ border-bottom: 1px solid #eee;}
#home #box-05 .area-01 .right ul li:last-child{ margin-bottom: 0;}
#home #box-05 .area-01 .right ul li a{ padding:20px 15px; text-decoration:none; display:block; transition: 0.2s;}
#home #box-05 .area-01 .right ul li .img{ width:100px; height:100px; overflow:hidden; box-sizing:border-box; vertical-align: middle; display: inline-block; border-radius:7px; margin-right:20px;}
#home #box-05 .area-01 .right ul li img{ width:100%; height:100%; object-fit:cover; transition: 0.3s;}
#home #box-05 .area-01 .right ul li p{ width:400px; font-size:16px; font-weight:600; color:#333; letter-spacing:normal; display: inline-block; padding-top:2px; vertical-align: middle; transition: 0.3s;}
#home #box-05 .area-01 .right ul li p span{ font-size: 14px; font-weight: 500; color:#ccc; letter-spacing:1px; display: block; line-height: 2em; margin:5px 0 0 2px;}
#home #box-05 .area-01 .right ul li a:hover{ background:#EFF7FF; opacity:1;}
#home #box-05 .area-01 .right ul li a:hover p{ color:#00A3DF;}
#home #box-05 .area-01 .right ul li a:hover img{ -webkit-transform: scale(1.04); transform: scale(1.04); transition: 0.3s;}


#home #box-05 .area-01 .left::before,#home #box-05 .area-01 .right::before{ content:""; background:#00A3DF; width: 40px; height: 2px; display: inline-block; position: absolute; top:0; left:0; z-index:2;}
#home #box-05 .area-01 .left::after,#home #box-05 .area-01 .right::after{ content:""; background:#e0e0e0; width: 100%; height: 1px; display: inline-block; position: absolute; top:0; left:0;}
#home #box-05 .area-01 .more{ position: absolute; top:70px; right:0; margin:0;}
#home #box-05 .area-01 .more a{ padding:10px 30px;}




/*----- お問い合わせ　contact -----*/
#home #box-qa{ width: 1024px; padding-top:80px;}
#home #box-qa h3{ font-size:24px; font-weight:bold; color:#689677; margin-bottom:20px; font-family: 'Zen Old Mincho', serif;}
#home #box-qa .area-01{ margin-bottom:80px;}

/* アコーディオンメニュー */
.accordion { background:#fff; border-radius:15px; margin-bottom:15px; overflow: hidden; transition:.3s;}

/* 質問部分 */
.accordion dt{ padding: 25px 20px 25px 85px; font-size:18px; color:#333; font-weight:bold; position: relative; cursor:pointer; transition:.3s;}
.accordion dt:hover{ background:#cbe7f5;}
/* Qマーク */
.accordion dt::before { content: 'Q'; background:#ddd; width:40px; height:40px; line-height:35px; font-size:24px; color:#fff; text-align:center; position: absolute;  left:25px; top: 50%; transform: translateY(-50%); border-radius:50%;}
  
/* 回答部分は最初非表示 */
.accordion dd{ display: none; padding:15px 20px 30px 85px; font-size:16px; background: #fff; position: relative; letter-spacing:normal;}
/* Aマーク */
.accordion dd::before { content: 'A'; background:#2497D3; width:40px; height:40px; line-height:35px; font-size:24px; color:#fff; text-align:center; position:absolute; left:25px; top:40%; transform:translateY(-50%); border-radius:50%;}

/**/
.accordion dt span::before,
.accordion dt span::after {
  content: '';
  display: block;
  width:25px;
  height:1px;
  border-radius: 5px;
  background:#333;
  position: absolute;
  right:25px;
  top: 50%;
  transform: translateY(-50%);
}
  
.accordion dt span::after {
  background:#333;
  transform: translateY(-50%) rotate(-90deg);
  transition: 0.5s;
}

.accordion dt .active::after {
  transform: rotate(0);
  transition: 0.5s;
}






#box-contact{ background:#EBF4F9; padding:80px 0;}
#box-contact .area-01{ width:1200px; margin:auto; overflow: hidden;}
#box-contact .area-01 .left{ width: 530px; float: left; position: relative;}
#box-contact .area-01 .left .shacho{ width: 130px; position: absolute; top:0; right:0;}
#box-contact .area-01 .left .p-01{ margin-bottom: 30px;}
#box-contact .area-01 .left .inner{ background:#fff; text-align: center; padding:30px 0; border-radius:10px; margin-bottom:30px;}
#box-contact .area-01 .left .inner .p-tel{ font-size:32px; font-weight:bold; line-height:1em; display: inline-block; vertical-align: middle; margin-right:25px;}
#box-contact .area-01 .left .inner .p-tel a{ background:url(../images/contact/ico-free.png)left 8px no-repeat; color:#00A3DF; display:inline-block; line-height:1em; text-decoration:none; padding-left:40px; background-size:35px auto;}
#box-contact .area-01 .left .inner .p-02{ font-size: 13px; letter-spacing: normal; line-height: 1.5em; display: inline-block; vertical-align: middle;}
#box-contact .area-01 .left .inner .p-02 span{ font-size: 18px; font-weight: bold; color:#EC702E;}

#box-contact .area-01 .left .btn-area{ overflow: hidden;}
#box-contact .area-01 .left .btn-area .btn{ width:255px; float: left; text-align:center; font-size:20px; font-weight:bold; position: relative;}
#box-contact .area-01 .left .btn-area .btn a{ background:#00A3DF; color:#fff; display:block; padding:20px 0; text-decoration:none; border:2px; box-sizing:border-box; border:2px solid #00A3DF; border-radius:50px;}
#box-contact .area-01 .left .btn-area .btn a:hover{ opacity:1; background:#fff;}
#box-contact .area-01 .left .btn-area .btn a:hover p{ color:#00A3DF;}
#box-contact .area-01 .left .btn-area .btn p { font-size: 15px; font-weight: bold; color:#fff; padding-left: 25px;}
#box-contact .area-01 .left .btn-area .btn img{ position: absolute; left:50px; top:0px; bottom:0; margin:auto; transition:.5s;}
#box-contact .area-01 .left .btn-area .btn a:hover img:nth-child(1){ opacity:0;}
#box-contact .area-01 .left .btn-area .btn a:hover img:nth-child(2){ opacity:1;}
#box-contact .area-01 .left .btn-area .btn a img:nth-child(2){ opacity:0;}
#box-contact .area-01 .left .btn-area .btn:last-child{ float: right;}
#box-contact .area-01 .left .btn-area .btn:last-child a{ background:#00CE4C; border-color:#00CE4C;}
#box-contact .area-01 .left .btn-area .btn:last-child a img{ width: 40px; left: 30px;}
#box-contact .area-01 .left .btn-area .btn:last-child a:hover{ opacity:1; background:#fff;}
#box-contact .area-01 .left .btn-area .btn:last-child a:hover p{ color:#00CE4C;}


#box-contact .area-01 .right{ width: 530px; float:right;}
#box-contact .area-01 .right .inner{ background:#CDE2F8; padding:30px 30px; border-radius:10px; overflow: hidden;}
#box-contact .area-01 .right .inner p{ font-size: 15px; letter-spacing: normal;}
#box-contact .area-01 .right .inner ul{ padding-top: 25px; margin-bottom: 25px;}
#box-contact .area-01 .right .inner ul li{ line-height: 2em;}
#box-contact .area-01 .right .inner ul li span{ font-weight: bold;}
#box-contact .area-01 .right .inner .more{ float: right; margin:25px 0 0;}








/*----------  サービス案内 service  ----------*/
/*----------  サービス案内 service  ----------*/
/*----------  サービス案内 service  ----------*/
#service .bk-bottom{ background:url(../images/service/bk-bottom.png)left 0 bottom -100px no-repeat;}

#service #box-01{ padding:80px 0 60px;}
#service #box-01 h2{ padding-top: 0;}
#service #box-01 .p-01{ font-size: 16px; text-align: center; line-height: 2em; margin-bottom: 50px;}
#service #box-01 .area-01{ width: 1200px; margin:auto; overflow: hidden; display: none;}
#service #box-01 .area-01 .entry{ background:#fff; width: 370px; float: left; margin-right:45px; border: 1px solid #B4E1FF; border-radius:20px; padding:30px 30px; box-sizing:border-box;}
#service #box-01 .area-01 .entry:last-child{ margin-right: 0;}
#service #box-01 .area-01 .entry h3{ padding-top:40px; background:url(../images/service/ico-check.png)center top no-repeat; font-size:22px; font-weight: bold; color:#00A3DF; text-align: center; margin-bottom: 20px;}
#service #box-01 .area-01 .entry p{ font-size: 16px; line-height: 1.8em;}
#service #box-01 .area-01 .entry .more{ margin:25px auto 10px;}
#service #box-01 .area-01 .entry .more a{ padding:10px 30px;}


#service #box-02{ padding:100px 0 80px;}
#service #box-02 .area-01{ overflow: hidden; position: relative; margin-bottom: 80px;}
#service #box-02 .area-01 .tb{ float: right; width: 500px; padding-top:70px; min-height:380px; box-sizing:border-box;}
#service #box-02 .area-01 .tb h2{ font-size:40px; margin-bottom:35px; position:relative;}
#service #box-02 .area-01 .tb h2 img{ position: absolute; right:35px; top:10px; width: 110px;}
#service #box-02 .area-01 .tb p{ font-size: 17px; line-height: 2em;}
#service #box-02 .area-01 .img{ position: absolute; left:0; top:0;}

#service #box-02 .area-02{ width: 1200px; margin:auto; text-align: center; margin-bottom:30px;}
#service #box-02 .area-02 .entry{ background:#fff; width: 350px; display: inline-block; margin-right:30px; border: 1px solid #e5e5e5; border-radius:20px; padding:30px 30px; box-sizing:border-box; vertical-align: top; box-shadow:0 4px 4px rgba(0,0,0,.03),0 2px 3px -2px rgba(0,0,0,.02);}
#service #box-02 .area-02 .entry:last-child{ margin-right: 0;}
#service #box-02 .area-02 .entry h3{  font-size:20px; font-weight: bold; color:#00A3DF; text-align: center; margin-bottom: 20px;}
#service #box-02 .area-02 .entry h3 img{ display: block; margin:0 auto 15px;}
#service #box-02 .area-02 .entry p{ font-size: 15px; text-align: left; line-height: 1.7em;}
#service #box-02 .inner{ width:600px; margin:auto; overflow: hidden;}
#service #box-02 .inner .more{ width:320px; margin:30px auto 0;}
/*
#service #box-02 .inner .more{ float: left; width: 280px;}
#service #box-02 .inner .more:last-child{ margin-left:30px; float: right;}
*/

#service #box-02 .inner .more a{ font-size:18px; padding:20px 0px; display: block;}


#service #box-03{ padding:100px 0 80px;}
#service #box-03 .area-01{ position: relative; margin-bottom: 80px;}
#service #box-03 .area-01 .tb{ width: 500px; padding-top:50px; min-height:380px; box-sizing:border-box;}
#service #box-03 .area-01 .tb h2{ font-size:42px; margin-bottom:35px; position: relative;}
#service #box-03 .area-01 .tb h2 img{ position: absolute; right:50px; top:-10px; width: 120px;}
#service #box-03 .area-01 .tb p{ font-size:17px; line-height: 2em;}
#service #box-03 .area-01 .img{ position: absolute; right:0; top:0;}

#service #box-03 .area-02{ text-align: center; margin-bottom: 30px;}
#service #box-03 .area-02 .entry{ background:#fff; width:350px; display: inline-block; margin-right:30px; border: 1px solid #e5e5e5; border-radius:20px; padding:30px 30px; box-sizing:border-box; vertical-align:top; box-shadow:0 4px 4px rgba(0,0,0,.03),0 2px 3px -2px rgba(0,0,0,.02);}
#service #box-03 .area-02 .entry:last-child{ margin-right: 0;}
#service #box-03 .area-02 .entry h3{  font-size:20px; font-weight: bold; color:#F39700; text-align: center; margin-bottom: 20px;}
#service #box-03 .area-02 .entry h3 img{ display: block; margin:0 auto 15px;}
#service #box-03 .area-02 .entry p{ font-size: 15px; text-align: left; line-height: 1.7em;}
#service #box-03 .inner{ width:600px; margin:auto; overflow: hidden;}
#service #box-03 .inner .more{ width:320px; margin:30px auto 0;}
/*
#service #box-03 .inner .more{ float: left; width: 280px;}
#service #box-03 .inner .more:last-child{ margin-left:30px; float: right;}
*/

#service #box-03 .inner .more a{ font-size: 18px; padding:20px 0px; display: block;}


/* このSwiperだけに効かせる */
.loop-swiper .swiper {
  overflow: hidden;
}
.loop-swiper .swiper-wrapper {
  transition-timing-function: linear;
}
/* スライド幅は中身基準（重要） */
.loop-swiper .swiper-slide {
  width: auto;
  white-space: nowrap;
}

.loop-swiper .swiper-slide img{
  width:100%;
  height:300px;
  object-fit:cover;
}

#service .bk-left{ background:url(../images/service/bk-left.png)left -50px top 200px no-repeat;}
#service .bk-right{ background:url(../images/service/bk-right.png)right bottom 20px no-repeat;}
#service #box-04{ background:rgba(255,255,255,.9); padding:80px 0 50px; position: relative; top:-100px; z-index:2; border-radius:30px;}
#service #box-04 h2{ font-size: 36px; font-weight: bold; text-align: center; line-height: 1.5em; margin-bottom: 30px;}
#service #box-04 h2 .min{ font-size: 24px; display: block;}
#service #box-04 h2 .blue{ color:#00A3DF;}
#service #box-04 .p-01{ font-size: 16px; text-align: center; line-height: 2em; margin-bottom: 50px;}
#service #box-04 .area-01{ width: 860px; background:#F6F6F6; margin:auto; padding:30px 0 50px; border-radius:30px; text-align: center;}
#service #box-04 .area-01 h3{ font-size:26px; font-weight: bold; text-align: center; margin-bottom:30px;}
#service #box-04 .area-01 ul{ display: inline-block; margin-right: 50px;}
#service #box-04 .area-01 ul:last-child{ margin-right: 0;}
#service #box-04 .area-01 ul li{ background:url(../images/service/ico-check.png)left 6px no-repeat; background-size:20px auto; font-size:17px; font-weight: bold; text-align: left; padding-left:25px; margin-bottom: 20px;}
#service #box-04 .area-01 ul li:last-child{ margin-bottom: 0;}

#service #box-04 .btn-area{ padding:40px 0 0; text-align: center;}
#service #box-04 .btn-area .btn{ width:255px; display: inline-block; text-align:center; font-size:20px; font-weight:bold; position: relative;}
#service #box-04 .btn-area .btn a{ background:#00A3DF; color:#fff; display:block; padding:20px 0; text-decoration:none; border:2px; box-sizing:border-box; border:2px solid #00A3DF; border-radius:50px;}
#service #box-04 .btn-area .btn a:hover{ opacity:1; background:#fff;}
#service #box-04 .btn-area .btn a:hover p{ color:#00A3DF;}
#service #box-04 .btn-area .btn p { font-size: 15px; font-weight: bold; color:#fff; padding-left: 25px;}
#service #box-04 .btn-area .btn img{ position: absolute; left:50px; top:0px; bottom:0; margin:auto; transition:.5s;}
#service #box-04 .btn-area .btn a:hover img:nth-child(1){ opacity:0;}
#service #box-04 .btn-area .btn a:hover img:nth-child(2){ opacity:1;}
#service #box-04 .btn-area .btn a img:nth-child(2){ opacity:0;}
#service #box-04 .btn-area .btn:last-child{ margin-left: 40px;}
#service #box-04 .btn-area .btn:last-child a{ background:#00CE4C; border-color:#00CE4C;}
#service #box-04 .btn-area .btn:last-child a img{ width: 40px; left: 30px;}
#service #box-04 .btn-area .btn:last-child a:hover{ opacity:1; background:#fff;}
#service #box-04 .btn-area .btn:last-child a:hover p{ color:#00CE4C;}




/*----------  トラブル対応一覧 trouble  ----------*/
/*----------  トラブル対応一覧 trouble  ----------*/
/*----------  トラブル対応一覧 trouble  ----------*/
#trouble .bk-bottom{ background:url(../images/service/bk-bottom.png)left 0 bottom -100px no-repeat;}

#trouble #box-01{ padding:100px 0 100px;}
#trouble #box-01 h2{ font-size: 36px; font-weight: bold; text-align: center; margin-bottom: 50px;}
#trouble #box-01 h2 span{ color:#00A3DF;}
#trouble #box-01 .p-01{ font-size: 16px; line-height: 2em; text-align: center;}

#trouble #box-menu{ position: relative;}
#trouble #box-menu h2{ font-size: 36px; font-weight: bold; margin-bottom: 50px;}
#trouble #box-menu h2 span{ color:#00A3DF;}

#trouble #box-menu .area-01{ overflow: hidden;}
#trouble #box-menu .area-01 .btn{ width: 290px; font-size: 18px; font-weight:bold; text-align: center; float: left; margin:0 13px 13px 0; font-family: "Zen Maru Gothic", sans-serif;}
#trouble #box-menu .area-01 .btn:nth-child(4n){ margin-right: 0;}
#trouble #box-menu .area-01 .btn a{ background:#fff; border:2px solid #00A3DF; color:#333; padding:20px 0px; border-radius:15px; text-decoration: none; display:block; position: relative;}
#trouble #box-menu .area-01 .btn a:hover{ background:#00A3DF; color:#fff; opacity:1;}
#trouble #box-menu .area-01 .btn a::after{
  content:"";
  display: block;
  position:absolute;
  right:30px;
  top:48%;
  width:8px;
  height:8px;
  border-right:2px solid #00A3DF;
  border-bottom:2px solid #00A3DF;
  transform:translateY(-50%) rotate(45deg);
  transition:.5s;}
#trouble #box-menu .area-01 .btn a:hover::after{ border-color:#fff;}


#trouble .trouble{}
#trouble .trouble h2{ font-size: 28px; font-weight: bold; padding-bottom: 20px; border-bottom: 1px solid #E0E0E0; margin-bottom: 20px; position: relative;}
#trouble .trouble h2::before{ content:""; background:#00A3DF; width: 80px; height:1px; display: inline-block; position: absolute; bottom:-1px; left:0; z-index:2;}
#trouble .trouble h2 span{ color:#00A3DF;}
#trouble .trouble .area-01{ overflow: hidden;}
#trouble .trouble .area-01 .left{ width:550px; float: left;}
#trouble .trouble .area-01 .left p{ font-size: 16px; line-height: 1.8em;}
#trouble .trouble .area-01 .right{ width: 630px; float: right;}
#trouble .trouble .area-01 .right h3{ font-size:14px; font-weight: bold; color:#00A3DF; display: inline-block; vertical-align: middle; border-right:2px solid #00A3DF; padding:20px 20px 20px 0; margin-right: 20px;}
#trouble .trouble .area-01 .right ul{ width: 400px; padding-top: 10px; display: inline-block; vertical-align: top; overflow: hidden;}
#trouble .trouble .area-01 .right ul li{ width:90px; float: left; font-size:13px; text-align: center; letter-spacing: normal; margin:0 8px 8px 0;}
#trouble .trouble .area-01 .right ul li a{ border:2px solid #00A3DF; color:#333; padding:8px 0; border-radius:30px; display: block; text-decoration: none;}
#trouble .trouble .area-01 .right ul li a:hover{ background:#00A3DF; color:#fff; opacity:1;}

#trouble .bk-blue{ background:#F0F7FF; padding:120px 0 100px;}
#trouble #trouble-08{ background:#fff; border-radius:30px; width:900px; margin:auto; padding:80px 0; position: relative;}
#trouble #trouble-08 h2{ font-size: 28px; font-weight: bold; text-align: center; margin-bottom:30px;}
#trouble #trouble-08 h2 span{ color:#00A3DF;}
#trouble #trouble-08 .img{ width: 80px; position: absolute; left:0; right:0; top:-60px; margin:auto;}
#trouble #trouble-08 .p-01{ font-size:16px; text-align: center; line-height: 2.3em;}
#trouble #trouble-08 .p-01 span{ font-weight: bold; color:#00A3DF;}
#trouble #trouble-08 .btn-area{ padding:40px 0 0; text-align: center;}
#trouble #trouble-08 .btn-area .btn{ width:255px; display: inline-block; text-align:center; font-size:20px; font-weight:bold; position: relative;}
#trouble #trouble-08 .btn-area .btn a{ background:#00A3DF; color:#fff; display:block; padding:20px 0; text-decoration:none; border:2px; box-sizing:border-box; border:2px solid #00A3DF; border-radius:50px;}
#trouble #trouble-08 .btn-area .btn a:hover{ opacity:1; background:#fff;}
#trouble #trouble-08 .btn-area .btn a:hover p{ color:#00A3DF;}
#trouble #trouble-08 .btn-area .btn p { font-size: 15px; font-weight: bold; color:#fff; padding-left: 25px;}
#trouble #trouble-08 .btn-area .btn img{ position: absolute; left:50px; top:0px; bottom:0; margin:auto; transition:.5s;}
#trouble #trouble-08 .btn-area .btn a:hover img:nth-child(1){ opacity:0;}
#trouble #trouble-08 .btn-area .btn a:hover img:nth-child(2){ opacity:1;}
#trouble #trouble-08 .btn-area .btn a img:nth-child(2){ opacity:0;}
#trouble #trouble-08 .btn-area .btn:last-child{ margin-left: 40px;}
#trouble #trouble-08 .btn-area .btn:last-child a{ background:#00CE4C; border-color:#00CE4C;}
#trouble #trouble-08 .btn-area .btn:last-child a img{ width: 40px; left: 30px;}
#trouble #trouble-08 .btn-area .btn:last-child a:hover{ opacity:1; background:#fff;}
#trouble #trouble-08 .btn-area .btn:last-child a:hover p{ color:#00CE4C;}



#trouble .bk-blue.pd0{ padding:0;}
#box-flow{ padding:70px 0 20px;}
#box-flow .area-01{ overflow: hidden; padding-top: 50px;}
#box-flow .area-01 .entry{ background:#fff; width: 280px; float: left; margin-right: 20px; border-radius:15px; position: relative; padding:30px 0 30px;}
#box-flow .area-01 .entry .no{ background:#00A3DF; width:65px; height: 65px; font-size:13px; font-weight: 500; color:#fff; text-align: center; display: inline-block; position: absolute; top:-35px; left:0; right:0; border-radius:50%; margin:auto; box-sizing:border-box; padding-top:10px;}
#box-flow .area-01 .entry .no span{ font-size:28px; font-weight: bold; line-height:0.9em; display: block;}
#box-flow .area-01 .entry h3{ font-size:18px; font-weight: bold; color:#00A3DF; text-align: center; margin-bottom: 20px; padding-top:20px;}
#box-flow .area-01 .entry img{ display: block; margin:0 auto 15px;}
#box-flow .area-01 .entry p{ font-size:14px; letter-spacing: normal; line-height: 1.7em; padding:0 25px;}
/* 右端の青い三角 */
#box-flow .area-01 .entry::after { content: ""; position: absolute; top: 50%; right: -16px; transform: translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #00A3DF;}
#box-flow .area-01 .entry:last-child::after{ display: none;}



/*----- よくある質問 -----*/
#trouble #box-qa{ display: none;}
#box-qa{ padding-top:80px;}
#box-qa h3{ font-size:24px; font-weight:bold; color:#689677; margin-bottom:20px; font-family: 'Zen Old Mincho', serif;}
#box-qa .area-01{ width: 1100px; margin:0 auto 80px;}

/* アコーディオンメニュー */
.accordion { background:#fff; margin-bottom:15px; overflow: hidden; transition:.3s;}

/* 質問部分 */
.accordion dt{ background: #F8F8F8; padding: 25px 20px 25px 85px; font-size:18px; color:#333; font-weight:bold; position: relative; cursor:pointer; transition:.3s; border-radius:15px;}
.accordion dt:hover{ background:#dff0f9; color:#00A3DF;}
/* Qマーク */
.accordion dt::before { content: 'Q'; background:#00A3DF; width:40px; height:40px; line-height:35px; font-size:24px; color:#fff; text-align:center; position: absolute;  left:25px; top: 50%; transform: translateY(-50%); border-radius:50%;}
  
/* 回答部分は最初非表示 */
.accordion dd{ display: none; padding:15px 20px 30px 85px; font-size:16px; background: #fff; position: relative; letter-spacing:normal;}
/* Aマーク */
.accordion dd::before { content: 'A'; background:#fff; width:40px; height:40px; line-height:30px; font-size:24px; color:#00A3DF; text-align:center; position:absolute; left:25px; top:40%; transform:translateY(-50%); border-radius:50%; border:2px solid #00A3DF; box-sizing:border-box;}

/**/
.accordion dt span::before,
.accordion dt span::after {
  content: '';
  display: block;
  width:25px;
  height:1px;
  border-radius: 5px;
  background:#333;
  position: absolute;
  right:25px;
  top: 50%;
  transform: translateY(-50%);
}
  
.accordion dt span::after {
  background:#333;
  transform: translateY(-50%) rotate(-90deg);
  transition: 0.5s;
}

.accordion dt .active::after {
  transform: rotate(0);
  transition: 0.5s;
}


#main .none{ display: none;}



/*----------  リフォーム一覧 reform  ----------*/
/*----------  リフォーム一覧 reform  ----------*/
/*----------  リフォーム一覧 reform  ----------*/
#reform .bk-bottom{ background:url(../images/service/bk-bottom.png)left 0 bottom -100px no-repeat;}

#reform #box-01{ padding:100px 0 100px;}
#reform #box-01 h2{ font-size:40px; font-weight: bold; text-align: center; line-height: 1.8em; margin-bottom:40px;}
#reform #box-01 h2 span{ color:#f29626;}
#reform #box-01 .p-01{ font-size: 16px; line-height: 2em; text-align: center;}

#reform #box-menu{ position: relative;}
#reform #box-menu h2{ font-size: 36px; font-weight: bold; margin-bottom: 50px;}
#reform #box-menu h2 span{ color:#f29626;}

#reform #box-menu .area-01{ overflow: hidden;}
#reform #box-menu .area-01 .btn{ width: 290px; font-size: 18px; font-weight:bold; text-align: center; float: left; margin:0 13px 13px 0; font-family: "Zen Maru Gothic", sans-serif;}
#reform #box-menu .area-01 .btn:nth-child(4n){ margin-right: 0;}
#reform #box-menu .area-01 .btn a{ background:#fff; border:2px solid #f29626; color:#333; padding:20px 0px; border-radius:15px; text-decoration: none; display:block; position: relative;}
#reform #box-menu .area-01 .btn a:hover{ background:#f29626; color:#fff; opacity:1;}
#reform #box-menu .area-01 .btn a::after{
  content:"";
  display: block;
  position:absolute;
  right:30px;
  top:48%;
  width:8px;
  height:8px;
  border-right:2px solid #f29626;
  border-bottom:2px solid #f29626;
  transform:translateY(-50%) rotate(45deg);
  transition:.5s;}
#reform #box-menu .area-01 .btn a:hover::after{ border-color:#fff;}


#reform .reform{ padding-bottom: 20px;}
#reform .pb100{ padding-bottom: 100px;}
#reform .pd100{ padding: 120px 0 100px;}
#reform .reform h2{ font-size: 28px; font-weight: bold; padding-bottom: 20px; border-bottom: 1px solid #E0E0E0; margin-bottom: 20px; position: relative;}
#reform .reform h2::before{ content:""; background:#f29626; width: 80px; height:1px; display: inline-block; position: absolute; bottom:-1px; left:0; z-index:2;}
#reform .reform h2 span{ font-size: 32px; color:#f29626; display: inline-block; margin-right: 5px;}
#reform .reform .area-01{ display:flex; justify-content:space-between; gap:30px; justify-content:flex-start;}
#reform .reform .area-01 .entry{ max-width: 280px; flex:1; border-radius:10px 10px 10px 10px; padding:0px 0px 30px; border:1px solid #e5e5e5; box-sizing:border-box; overflow: hidden; box-shadow:0 4px 4px rgba(0,0,0,.03),0 2px 3px -2px rgba(0,0,0,.02); transition:.3s;}
#reform .reform .area-01 .entry:hover{ box-shadow:rgba(0,0,0,.1) 0 4px 4px,rgba(0,0,0,.09) 0 2px 3px -2px;}
#reform .reform .area-01 .entry h3{ font-size:21px; font-weight: bold; text-align: center; padding:25px 0 22px; letter-spacing: 3px;}
#reform .reform .area-01 .entry .more{ margin:0 70px; font-size:14px; font-weight: 500;}
#reform .reform .area-01 .entry .more a{ background:#f29626; border-color: #f29626; padding:7px 0; display: block;}
#reform .reform .area-01 .entry .more a:hover{ background:#fff; color:#f29626;}
/*
#reform .reform .area-01 .entry .more:last-child a{ background:#3eadc4; border-color: #3eadc4;}
#reform .reform .area-01 .entry .more:last-child a:hover{ background:#fff; color:#3eadc4;}
*/


#reform .bk-blue{ background:#F0F7FF;}
#reform #reform-08{ background:#fff; border-radius:30px; width:900px; margin:auto; padding:80px 0; position: relative;}
#reform #reform-08 h2{ font-size: 28px; font-weight: bold; text-align: center; margin-bottom:30px;}
#reform #reform-08 h2 span{ color:#f29626;}
#reform #reform-08 .img{ width:70px; position: absolute; left:0; right:0; top:-60px; margin:auto;}
#reform #reform-08 .p-01{ font-size:16px; text-align: center; line-height: 2.3em;}
#reform #reform-08 .btn-area{ padding:40px 0 0; text-align: center;}
#reform #reform-08 .btn-area .btn{ width:255px; display: inline-block; text-align:center; font-size:20px; font-weight:bold; position: relative;}
#reform #reform-08 .btn-area .btn a{ background:#00A3DF; color:#fff; display:block; padding:20px 0; text-decoration:none; border:2px; box-sizing:border-box; border:2px solid #00A3DF; border-radius:50px;}
#reform #reform-08 .btn-area .btn a:hover{ opacity:1; background:#fff;}
#reform #reform-08 .btn-area .btn a:hover p{ color:#00A3DF;}
#reform #reform-08 .btn-area .btn p { font-size: 15px; font-weight: bold; color:#fff; padding-left: 25px;}
#reform #reform-08 .btn-area .btn img{ position: absolute; left:50px; top:0px; bottom:0; margin:auto; transition:.5s;}
#reform #reform-08 .btn-area .btn a:hover img:nth-child(1){ opacity:0;}
#reform #reform-08 .btn-area .btn a:hover img:nth-child(2){ opacity:1;}
#reform #reform-08 .btn-area .btn a img:nth-child(2){ opacity:0;}
#reform #reform-08 .btn-area .btn:last-child{ margin-left: 40px;}
#reform #reform-08 .btn-area .btn:last-child a{ background:#00CE4C; border-color:#00CE4C;}
#reform #reform-08 .btn-area .btn:last-child a img{ width: 40px; left: 30px;}
#reform #reform-08 .btn-area .btn:last-child a:hover{ opacity:1; background:#fff;}
#reform #reform-08 .btn-area .btn:last-child a:hover p{ color:#00CE4C;}



/*----------  サービス共通ページ service  ----------*/
/*----------  サービス共通ページ service  ----------*/
/*----------  サービス共通ページ service  ----------*/


/* メインビジュアル */
#service-mp{ background:url(../images/common/bk-mp.png)left 50px no-repeat; margin-bottom:130px;}
#service-mp .area-01{ width: 1200px; margin:auto; min-height:600px; position: relative;}
#service-mp .area-01 .tb{ width: 640px; padding-top:110px;}
#service-mp .area-01 .tb h1{ font-size:60px; font-weight:bold; color:#333; letter-spacing:2px; margin-bottom:30px;}
#service-mp .area-01 .tb h1 span{ font-size:18px; color:#00A3DF; line-height:2.3em; display: block;}
#service-mp .area-01 .tb .title{ font-size:28px; font-weight: bold; line-height: 1.8em; margin-bottom:20px;}
#service-mp .area-01 .tb .title span{ color:#00A3DF;}
#service-mp .area-01 .tb .p-01{ font-size: 16px; line-height: 1.8em; margin-bottom: 20px;}
#service-mp .area-01 img{ position: absolute; right:0; top:30px;}


.service #box-01{ background:#EFF7FF; padding:60px 0 50px; border-radius:30px; margin-bottom: 100px;}
.service #box-01 .h2-03{}
.service #box-01 .h2-03 img{ width:100px; top:-100px;}
.service #box-01 .area-01{ width: 820px; margin:auto;}
.service #box-01 .area-01 ul{ overflow: hidden;}
.service #box-01 .area-01 ul li{ width: 400px; background:#fff; float: left; padding:12px 0px 12px 20px; box-sizing:border-box; border-radius:10px; margin-bottom:13px;}
.service #box-01 .area-01 ul li:nth-child(2n){ float: right;}
.service #box-01 .area-01 ul li span{ background:url(../images/common/ico-check.png)left 3px no-repeat; background-size:25px auto; font-size: 16px; line-height:30px; padding-left:35px; display: inline-block;}


.service #box-02{ padding:70px 0 70px;}
.service #box-02 .area-01{ overflow: hidden;}
.service #box-02 .area-01 .entry{ background:#fff; width:380px; float: left; margin-right:30px; border-radius:20px; overflow: hidden; padding:20px; box-sizing:border-box;}
.service #box-02 .area-01 .entry:last-child{ margin-right:0;}
.service #box-02 .area-01 .entry .img{ position: relative;}
.service #box-02 .area-01 .entry .img .ico{ background:#fff; width: 80px; height: 80px; border-radius:50%; display: inline-block; position: absolute; left:0; right:0; bottom:-40px; margin:auto;}
.service #box-02 .area-01 .entry .img .ico img{ width:45px; position: absolute; left:0; right:0; top:0; bottom:0; margin:auto;}
.service #box-02 .area-01 .entry:nth-child(2) .img .ico img{ width:52px;}
.service #box-02 .area-01 .entry:nth-child(3) .img .ico img{ width: 60px;}
.service #box-02 .area-01 .entry .inner{ text-align: center;}
.service #box-02 .area-01 .entry h3{ font-size: 24px; font-weight: bold; text-align: center; padding:40px 0 15px;}
.service #box-02 .area-01 .entry .p-01{ background:#00A3DF; font-size:13px; font-weight:500; color:#fff; text-align: center; padding:3px 15px; display: inline-block; border-radius:30px; letter-spacing: normal; margin-bottom:20px;}
.service #box-02 .area-01 .entry:nth-child(2) .p-01{ background:#6ec300;}
.service #box-02 .area-01 .entry:nth-child(3) .p-01{ background:#F39700;}
.service #box-02 .area-01 .entry .p-02{ font-size: 14px; letter-spacing: normal; text-align: left; line-height: 1.7em; margin-bottom: 25px; padding:0 10px;}
.service #box-02 .area-01 .entry ul{ background:#e8f2ff; padding:20px 20px 20px; border-radius:10px;}
.service #box-02 .area-01 .entry ul li{ font-size: 14px; letter-spacing: normal; line-height: 1.8em;}
.service #box-02 .area-01 .entry ul li:first-child{ font-weight: bold; margin-bottom:3px;}
.service #box-02 .area-01 .entry ul li:nth-child(n+2){ padding-left: 1em;}
.service #box-02 .area-01 .entry:nth-child(2) ul{ background:#eaf3e8;}
.service #box-02 .area-01 .entry:nth-child(3) ul{ background:#fff5db;}






/*----------  施工までの流れ flow  ----------*/
/*----------  施工までの流れ flow  ----------*/
/*----------  施工までの流れ flow  ----------*/

.box-flow{ background: linear-gradient(to bottom, #EFF7FF 0%, #F3F6F9 100%); border-radius:30px; padding:100px 0; margin-bottom:50px;}
.box-flow .step{ width: 850px; min-height:220px; margin:auto; overflow: hidden; position: relative; padding:0 0 50px 260px; box-sizing:border-box; margin-bottom: 50px;}
.box-flow .step::after { content: ""; position: absolute; bottom: 0; left:0px; right:0; margin:auto; width: 0; height: 0; border-left:15px solid transparent; border-right:15px solid transparent; border-top:15px solid #00A3DF;}
.box-flow .step:last-child{ margin-bottom: 0;}
.box-flow .step:last-child::after { display: none;}
.box-flow .step img{ position: absolute; left:0; top:0;}
.box-flow .step h2{ font-size: 22px; font-weight: bold; margin-bottom: 20px;}
.box-flow .step h2 span{ font-size: 16px; font-weight: 500; color:#00A3DF; display: block; line-height: 1.8em;}
.box-flow .step p{ line-height: 1.8em;}
.box-flow .step .inner{ background:#fff; padding:30px 30px; overflow: hidden; display: inline-block; border-radius:20px; margin-top: 30px;}
.box-flow .step .inner .btn{ width: 220px; float: left; text-align:center; font-size:18px; font-weight:bold;}
.box-flow .step .inner .btn a{ background:#00A3DF; color:#fff; display:block; padding:20px 0; text-decoration:none; border:2px; box-sizing:border-box; border:2px solid #00A3DF; border-radius:50px; position: relative;}
.box-flow .step .inner .btn a:hover{ opacity:1; background:#fff;}
.box-flow .step .inner .btn a:hover p{ color:#00A3DF;}
.box-flow .step .inner .btn p { font-size: 15px; font-weight: bold; color:#fff; padding-left: 25px;}
.box-flow .step .inner .btn img{ position: absolute; left:30px; top:5px; bottom:0; margin:auto; transition:.5s;}
.box-flow .step .inner .btn a:hover img:nth-child(1){ opacity:0;}
.box-flow .step .inner .btn a:hover img:nth-child(2){ opacity:1;}
.box-flow .step .inner .btn a img:nth-child(2){ opacity:0;}
.box-flow .step .inner .btn:last-child{ float: right; margin-left: 30px;}
.box-flow .step .inner .btn:last-child a{ background:#00CE4C; border-color:#00CE4C;}
.box-flow .step .inner .btn:last-child a img{ width: 40px; left: 15px;}
.box-flow .step .inner .btn:last-child a:hover{ opacity:1; background:#fff;}
.box-flow .step .inner .btn:last-child a:hover p{ color:#00CE4C;}
.box-flow .step .inner .btn .p-01{ font-size: 15px; font-weight: normal; color:#333; padding:0 0 5px; text-align: center; letter-spacing: normal;}
.box-flow .step .inner .btn .p-01 span{ font-size:16px; font-weight: bold;}
.box-flow .step .inner .btn .p-01 span.red{ color:#EA2929;}
.box-flow .step .inner .btn .p-01 span.blue{ color:#00A3DF;}




/*----------  会社案内 company  ----------*/
/*----------  会社案内 company  ----------*/
/*----------  会社案内 company  ----------*/
#company #box-01{ width: 1100px;}
#company #box-01 .area-01{ margin:auto; overflow: hidden;}
#company #box-01 .area-01 img{ float: right; width: 350px; border-radius:20px;}
#company #box-01 .area-01 .tb{ width: 650px; float: left;}
#company #box-01 .area-01 .tb h3{ font-size:18px; font-weight: bold; color:#f29626; line-height: 1.7em; padding:50px 0 15px;}
#company #box-01 .area-01 .tb p{ font-size: 15px; line-height: 1.8em;}


#company #box-02{}
#company #box-02 .area-01{ overflow: hidden; padding:0 130px;}
#company #box-02 .area-01 table{ width: 100%; background:#fff; margin-bottom: 50px;}
#company #box-02 .area-01 table th{ background:#CDE2F8; width:300px; padding:20px 30px; font-size: 16px; text-align: left; border: 1px solid #00A3DF; box-sizing:border-box; vertical-align: middle;}
#company #box-02 .area-01 table td{ padding:20px 30px; font-size: 16px; border: 1px solid #00A3DF;}
#company #box-02 .area-01 table td span{ font-weight: bold;}


#company #box-03{ padding:0 0 100px;}
#company #box-03 .area-01{ overflow: hidden;}
#company #box-03 .area-01 .entry{ padding-top:80px; width: 48%; float: left;}
#company #box-03 .area-01 .entry:last-child{ float: right;}
#company #box-03 .area-01 .entry p{ text-align: center;}
#company #box-03 .area-01 .entry p img{ height: 140px; display: block; margin:0 auto 15px;}





/*----------  ご予約・お問い合わせ contact  ----------*/
/*----------  ご予約・お問い合わせ contact  ----------*/
/*----------  ご予約・お問い合わせ contact  ----------*/

#contact #box-01{ width: 1200px; margin:auto; padding:100px 0 20px;}
#contact #box-01 .p-title{ font-size:26px; font-weight: bold; text-align: center; line-height:2em; margin-bottom:80px;}
#contact #box-01 .p-title span{ color:#00A3DF;}

#contact #box-01 .area-01{ overflow: hidden; margin:0 auto 40px;}
#contact #box-01 .area-01 .entry{ width: 480px; float: left; background:#fff; padding:40px 50px 30px; border-radius:20px; margin-bottom:0px; border:1px solid #e5e5e5; box-shadow:0 4px 4px rgba(0,0,0,.03),0 2px 3px -2px rgba(0,0,0,.02);}
#contact #box-01 .area-01 .entry:last-child{ float: right;}
#contact #box-01 .area-01 h2{ font-size: 26px; font-weight: bold; text-align: center; border-bottom: 1px solid #2497D3; padding-bottom:10px; margin-bottom: 20px;}
#contact #box-01 .area-01 .tb{ text-align: center;}
#contact #box-01 .area-01 .tb .p-tel{ font-size: 48px; font-weight: bold; line-height: 1em; display: inline-block; margin-bottom:5px;}
#contact #box-01 .area-01 .tb .p-tel a{ color:#00A3DF; background:url(../images/contact/ico-free.png)left 8px no-repeat; padding-left:70px; background-size:auto 36px; display: block; text-decoration: none; margin:10px 0 10px;}
#contact #box-01 .area-01 .tb .p-01{ font-size:18px; font-weight: 500; margin:0 0;}
#contact #box-01 .area-01 .tb .p-02{ font-size:16px; margin-left:15px;}

#contact #box-01 .area-01 .tb a{ display: inline-block; vertical-align: middle;}
#contact #box-01 .area-01 .tb img{ height: 125px;}
#contact #box-01 .area-01 .tb p{ display: inline-block; text-align: left; vertical-align: middle; margin-left:10px;}
#contact #box-01 .area-01 .tb p span{ font-weight: bold; color:#00CE4C;}
#contact #box-01 .area-01 .tb p span.orange{ color:#f29626;}

#contact #box-01 .area-02{ background:#f7f7f7; padding:40px 150px 50px; border-radius:20px; margin-bottom: 50px;}
#contact #box-01 .area-02 h2{ font-size:24px; font-weight: bold; text-align: center; margin-bottom:30px;}
#contact #box-01 .area-02 h2 span{ font-size: 24px;}
#contact #box-01 .area-02 h2 img{ height:40px; margin-right:3px;}
#contact #box-01 .area-02 .inner{ overflow: hidden;}
#contact #box-01 .area-02 .left{ float: left;}
#contact #box-01 .area-02 .right{ float: right;}
#contact #box-01 .area-02 p{ font-size: 15px; line-height: 1.7em; margin-bottom:30px;}
#contact #box-01 .area-02 p:last-child{ margin-bottom: 0;}
#contact #box-01 .area-02 p .span{ font-weight: bold;}
#contact #box-01 .area-02 p .large{ font-size: 16px;}
#contact #box-01 .area-02 p .orange{ color:#f29626;}
#contact #box-01 .area-02 p .min{ font-size: 14px; letter-spacing: normal; display: inline-block; padding-top:2px;}
#contact #box-01 .area-02 p .marker{ background:linear-gradient(transparent 60%, #00CE4C 60%);}





#contact #box-02{ width:1200px; margin:auto; padding:100px 100px 120px; background:#F5F9FC; border-radius:30px; box-sizing:border-box;}
#contact #box-02 .area-01{ padding:30px 0; text-align: center; margin-bottom:30px;}
#contact #box-02 .area-01 ul{ display: inline-block; text-align: left;}
#contact #box-02 .area-01 li{ font-size:16px; line-height: 1.7em; text-indent:-1em; padding-left:1em; margin-bottom:10px;}
#contact #box-02 .chui{ font-weight:bold; color: #fff; background:#00A3DF; font-size:11px; padding:0px 7px; margin-right:7px; position:relative; bottom:3px;position:relative; top:0px;}
#contact #box-02 table .chui{ float:right;}
#contact #box-02 .area-02 h3{ font-size:26px; text-align:center; padding-bottom:0; margin-bottom:15px; clear:both;}

#contact #box-02 .area-02{ background:#fff; padding:50px 50px; border-radius:50px;}
#contact #box-02 .area-02 .area-mailform table{ width:100%; margin-bottom:50px;}
#contact #box-02 .area-02 .area-mailform table tr{ border-bottom:1px dotted #ccc;}
#contact #box-02 .area-02 .area-mailform table td{ padding:20px 10px;}
#contact #box-02 .area-02 .area-mailform table td.td-01{ width:220px; font-weight:bold;}
#contact #box-02 .area-02 .area-mailform table ul li{ margin-bottom:7px;}
#contact #box-02 .area-02 .area-mailform table ul li:last-of-type{ margin-bottom:0px;}
#contact #box-02 .area-02 .area-mailform table ul.ul-01 li{ margin-bottom:0px;}
#contact #box-02 .area-02 .area-mailform table select{ padding:3px; font-size:15px;}
#contact #box-02 .area-02 .area-mailform table input{ padding:3px; font-size:15px;}
#contact #box-02 .area-02 .area-mailform table button{}
#contact #box-02 .area-02 .area-mailform .p-01{ margin-top:5px;}
#contact #box-02 .area-02 .area-mailform .autotext{ margin-bottom:30px;}
#contact #box-02 .area-02 .area-mailform .p-02{ font-weight:bold;}
#contact #box-02 .area-02 .area-mailform .w01{width:99%;}
#contact #box-02 .area-02 .area-mailform .w02{width:40%;}


#contact #box-02 .area-02 .area-mailform .kakunin{ background:#F0F7FC; overflow:hidden; padding:5px 5px;margin-bottom:40px; text-align:center;}
#contact #box-02 .area-02 .area-mailform .tb-01{}
#contact #box-02 .area-02 .area-mailform .tb-03{ text-align:center; position:relative; left:-30px;}
#contact #box-02 .area-02 .area-mailform .tb-02{ text-align:center;}
#contact #box-02 .area-02 .area-mailform .tb-04{ height:200px;overflow-y:scroll;padding:20px; border:#999 solid 1px; background:#FFF;margin:auto; margin-bottom:50px; }
#contact #box-02 .area-02 .area-mailform .btn{ display:block; margin:auto; font-size:18px; padding:20px 50px; background:#00A3DF; border:none; color:#fff; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s;font-family:'futura-pt', 'Noto Sans JP', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; letter-spacing:1px; font-weight:bold; border-radius:50px;}
#contact #box-02 .area-02 .area-mailform .btn:hover{opacity: 0.5; filter: alpha(opacity=50);-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;cursor: pointer;}
#contact #box-02 .area-02 .area-mailform .p-03{ font-weight:bold; margin-bottom:10px; font-family: 'Kosugi Maru', sans-serif;}
#contact #box-02 .area-02 .area-mailform .p-04{ font-weight:bold; font-family: 'Kosugi Maru', sans-serif;}
#contact #box-02 .area-02 .area-mailform .p-05{margin-bottom:15px;}
#contact #box-02 .area-02 .area-mailform .ul-01{margin-bottom:15px;}

#contact #box-02 .area-02 .area-mailform p{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", ns-serif;}








/*▼▼▼スクロールでふわっと表示▼▼▼*/

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition-timing-function:cubic-bezier(.64,.04,.35,1);
  transition:0.9s ease-in-out;
  transform:translateY(30px);
  opacity:0;
}

.scroll_up.on {
  transform:translateY(0);
  transition:0.9s ease-in-out;
  opacity:1.0;
}
.scroll_on {
  transition-timing-function:cubic-bezier(.64,.04,.35,1);
  transition:0.9s ease-in-out;
  opacity:0;
}

.scroll_on.on {
  opacity:1.0;
}

.scroll_right.on {
    opacity:1.0;
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
}



/*ズラして表示する*/
.on.time02{transition-delay: .2s;}
.on.time03 {transition-delay: .4s;}
.on.time04 {transition-delay: .6s;}
.on.time05 {transition-delay: .8s;}



/* 矢印ボタン共通 */
#main .swiper-button-prev{ left:50px;}
#main .swiper-button-next { right:50px;}
#main .swiper-button-prev,
#main .swiper-button-next {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #00A3DF;              /* 通常：青 */
  transition: all .3s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  border: 2px solid #00A3DF;
}

/* デフォルト矢印を消す */
.swiper-button-prev::after,
.swiper-button-next::after {
display: none;}

/* 矢印をCSSで描画 */
#main .swiper-button-prev::before,
#main .swiper-button-next::before {
  content: "";
  width: 14px;
  height: 14px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  position: absolute;
  font-size:14px;
  left:0;
  right:0;
  margin:auto;
}
#main .swiper-button-prev::before{ right:-5px;}
#main .swiper-button-next::before{ left:-5px;}

/* 向き調整 */
#main .swiper-button-prev::before {
  transform: rotate(-135deg);
}

#main .swiper-button-next::before {
  transform: rotate(45deg);
}

/* hover時 */
#main .swiper-button-prev:hover,
#main .swiper-button-next:hover {
  background: #fff;
  border: 2px solid #00A3DF;
}

/* hover時の矢印色 */
#main .swiper-button-prev:hover::before,
#main .swiper-button-next:hover::before {
  border-color: #00A3DF;
}