@charset "utf-8";

html {
overflow:auto;
}

body {
min-width: 1080px;
overflow: hidden;
font-family: 'Noto Sans JP', sans-serif;
}

.mincho{font-family: 'Noto Serif JP', serif;}

#contents{
line-height:1.7;
color:#333;
/* overflow:hidden; */
}

.anker {
    padding-top: 100px;
    margin-top:-100px;
}


/*
-----------------------------------------------
TAB 横
----------------------------------------------- */
@media (orientation: landscape) and (max-device-width: 1024px){
body {
min-width: 100%;
overflow: hidden;
}

}

/*
-----------------------------------------------
SP
----------------------------------------------- */
@media screen and (max-width: 768px) {
body {
min-width: 100%;
overflow: hidden;
}

}



/*
-----------------------------------------------
PC用ナビゲーション
----------------------------------------------- */
.main-navi{
position:absolute;
top:30px;
right:20px;
z-index:100;
}

.navi{
position:relative;
z-index:100;
}

.navi > li{
display:inline-block;
position:relative;
margin-left:0px;
}

.navi li a{
display:block;
padding:5px 18px;
color:#444;
font-size:15px;
}

.navi li a:hover{
text-decoration:none;
}


/* ドロップダウンメニュー */
.navi li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0px;
  margin: 0;
  padding: 0;
  width:142px;
}
.navi li ul li{
  width: 100%;
}
.navi li ul li a{
  padding: 10px;
  border-bottom: 1px solid #ccc;
  background-color: rgba(216,214,213,0.9);
  text-align: left;
  color:#333;
  font-size:15px;
}

.navi ul li a:hover{
  background-color: rgba(0,160,233,0.8);
  color:#fff;
}

.navi li ul li{
  overflow: hidden;
  height: 0;
  transition: .2s;
}
.navi li:hover ul li{
  overflow: visible;
  height: 43px;
}

.navi-span{
font-size:1.2rem;
margin-right:6px;
vertical-align:middle;
}

.navi li a:hover{
color:#999;
}

.page-template-page_okanoie .navi01{
border-bottom: solid 1px #3399ff;
}

.page-template-page_works .navi02{
border-bottom: solid 1px #3399ff;
}

.page-template-page_online .navi03,
.page-template-page_online_new .navi03{
border-bottom: solid 1px #3399ff;
}

.page-template-page_flow .navi04{
border-bottom: solid 1px #3399ff;
}

.page-template-page_company .navi05{
border-bottom: solid 1px #3399ff;
}

.page-template-page_contact .navi06{
border-bottom: solid 1px #3399ff;
}

/*
-----------------------------------------------
SP用ナビゲーション
----------------------------------------------- */
@media screen and (max-width: 768px) {
.navi{
display:none;
}

.fixed {
    overflow: auto;
    height: 100%;
}

.drawer-open #contents{
}

.drawer-dropdown-menu-item{
font-size:1.7rem !important;
padding:0.6em 0 0.6em 2em !important;
line-height:1.0 !important;
}

/* ハンバーガーメニューのMENUの文字 */
.nav-menu{
position:absolute;
top:68%;
left:6px;
font-size:1rem;
color:#fff;
}
}

/*
-----------------------------------------------
ヘッダ
----------------------------------------------- */
#head-in{
width:100%;
position:fixed;
background:rgba(255,255,255,0.9);
z-index:1000;
}

#head-box{
width:1080px;
position:relative;
margin-left:auto;
margin-right:auto;
z-index:1000;
}


header{
width:100%;
position:static;
z-index:100;
top: 0; 
left: 0;
right: 0;
}

header h1{
position:relative;
width:184px;
z-index:1000;
padding-top:35px;
padding-bottom:30px;
}

header h1 img{
z-index:1000;
width:100%;
height:auto;
}

/*
-----------------------------------------------
TAB 横
----------------------------------------------- */
@media (orientation: landscape) and (max-device-width: 1024px){
#head-box{
width:100%;
padding-left:15px;
padding-right:15px;
}

.head-contact{
right:75px;
}


.head-fb{
right:20px;
}

.main-navi{
right:135px;
}


}

/*
-----------------------------------------------
ヘッダ　TAB
----------------------------------------------- */
@media screen and (max-width: 768px) {
#head-box{
width:100%;
padding-left:20px;
padding-right:20px;
}

header h1{
width:280px;
padding-top:10px;
padding-bottom:10px;
}

#head-box{
width:100%;
}

#head-in{
width:100%;
}

.head-contact,
.head-fb{
display:none;
}
}

/*
-----------------------------------------------
ヘッダ　TAB SP
----------------------------------------------- */
@media screen and (max-width: 767px) {
header{
padding-bottom:60px;
}

.first-block{
padding-top:64px;
}

.sp-ver{
padding-top:65px;
}

header h1{
position:relative;
width:170px;
padding-top:14px;
padding-bottom:14px;
padding-left:0px
}

header h1 img{
width:100%;
height:auto;
}
}

/*
-----------------------------------------------
コンテンツ幅
----------------------------------------------- */
#wrap{
/* padding-top:96px; */
padding-top:146px;
}

#contents{
background:#fff;
width:1240px;
margin-left:auto;
margin-right:auto;
margin-top:22px;
}

#contents-top{
background:#DFE0E0;
width:1240px;
margin-left:auto;
margin-right:auto;
margin-top:-30px;
}

.in-box01{
position:relative;
width:1080px;
margin-left:auto;
margin-right:auto;
}

.in-box02{
position:relative;
width:1000px;
margin-left:auto;
margin-right:auto;
}

.in-box03{
position:relative;
width:980px;
margin-left:auto;
margin-right:auto;
}

.in-box04{
position:relative;
width:700px;
margin-left:auto;
margin-right:auto;
}

.in-box05{
position:relative;
width:860px;
margin-left:auto;
margin-right:auto;
}

.in-box06{
position:relative;
width:1000px;
margin-left:auto;
margin-right:auto;
}

.in-box07{
position:relative;
width:740px;
margin-left:auto;
margin-right:auto;
}

.in-box08{
position:relative;
width:650px;
margin-left:auto;
margin-right:auto;
}

/*
-----------------------------------------------
TAB 横
----------------------------------------------- */
@media (orientation: landscape) and (max-device-width: 1024px){
.in-box00,
.in-box01,
.in-box01b,
.in-box02,
.in-box03,
.in-box04,
.in-box05,
.in-box06{
width:100%;
padding-left:30px;
padding-right:30px;
}



}

/*
-----------------------------------------------
コンテンツ幅 TAB
----------------------------------------------- */
@media screen and (max-width: 768px) {
.in-box00,
.in-box01,
.in-box02,
.in-box03,
.in-box04,
.in-box05,
.in-box06{
width:100%;
padding-left:20px;
padding-right:20px;
}


#contents-top,
#contents{
width:94%;
margin-left:3%;
margin-right:3%;
}

.in-box02{
padding-left:20px;
padding-right:20px;
}


}

/*
-----------------------------------------------
コンテンツ幅 SP
----------------------------------------------- */
@media screen and (max-width: 767px) {
.in-box00,
.in-box01,
.in-box02,
.in-box03,
.in-box04,
.in-box05,
.in-box07,
.in-box08,
.in-box06{
width:100%;
padding-left:15px;
padding-right:15px;
}

.in-box01{
padding-top:0;
}

#contents{
margin-top:0px !important;
padding-top:0px !important;
}

#wrap{
padding-top:10px;
}
}


/*
-----------------------------------------------
TOP要素
----------------------------------------------- */

.hamidashi01{
margin: 0 0 0 250px;
z-index:20;
}

.hamidashi01 img{
width:1040px;
height:auto;
}

.hamidashi02{
margin: 0 0 0 -100px;
z-index:20;
}

.hamidashi02 img{
width:750px;
height:auto;
}

.hamidashi03{
margin: 0 -100px;
z-index:20;
}

.hamidashi03 img{
width:1280px;
height:auto;
}


.top-catch01{
position:absolute;
top:100px;
left:200px;
}

.top-catch02{
position:absolute;
top:145px;
left:490px;
}


.top-catch02b{
position:relative;
margin-left:590px;
}

.top-catch03{
position:relative;
margin-top:-115px;
margin-left:200px;
}

.top-catch03b{
position:relative;
margin-top:-115px;
margin-left:200px;
}

.top-catch01 h2,
.top-catch02 h2,
.top-catch02b h2,
.top-catch03b h2,
.top-catch03 h2{
margin-bottom:30px;
/* font-weight:500;
font-size:26px; */
font-size:23px;
font-weight:400;
letter-spacing:6px;
line-height:2.0;
}



.sub{
font-size:16px;
line-height:2.6;
letter-spacing:5px;
font-weight:300;
}

.top-en01{
position:absolute;
top:100px;
left:45px;
}

.top-en01 img{
width:145px;
height:auto;
}

.img-mgn01{
margin-top:240px;
}

.img-mgn01b{
margin-top:-40px;
}

.top-box01 img{
width:100%;
height:auto;
}


/*
-----------------------------------------------
TOP要素 TAB
----------------------------------------------- */
@media screen and (max-width: 768px) {
.hamidashi01{
margin: 0 0 0 100px;
z-index:20;
}

.hamidashi01 img{
width:980px;
height:auto;
}

.hamidashi02{
margin: 0 0 0 -100px;
z-index:20;
}

.hamidashi02 img{
width:680px;
height:auto;
}

.hamidashi03{
margin: 0 -100px;
z-index:20;
}

.hamidashi03 img{
width:1080px;
height:auto;
}


.top-catch01{
position:absolute;
top:100px;
left:50px;
}

.top-catch02{
position:absolute;
top:125px;
left:235px;
}

.top-catch03{
position:relative;
margin-top:-115px;
margin-left:50px;
}

.top-catch01 h2,
.top-catch02 h2,
.top-catch03 h2{
margin-bottom:30px;
font-size:24px;
}

}

/*
-----------------------------------------------
TOP要素 SP
----------------------------------------------- */
@media screen and (max-width: 767px) {
.hamidashi01{
margin: 0 0 0 0;
z-index:20;
}

.hamidashi01 img{
width:130%;
height:auto;
}


.hamidashi02{
margin: 0 0 0 -20px;
z-index:20;
}

.hamidashi02 img{
width:90%;
height:auto;
}



.top-catch01{
position:relative;
top:auto;
left:auto;
margin-top:20px;
}

.top-catch02{
position:relative;
top:auto;
left:auto;
margin-top:20px;
}

.top-catch02b{
position:relative;
margin-left:0px;
margin-top:40px;
}

.top-catch01 h2,
.top-catch02 h2,
.top-catch02b h2,
.top-catch03b h2,
.top-catch03 h2{
margin-bottom:18px;
font-size:21px;
line-height:1.8 !important;
letter-spacing:0.2rem;
}

.img-mgn01{
margin-top:80px;
}

.img-mgn01b{
margin-top:0px;
padding-bottom:40px !important;
}

.top-en01{
position:absolute;
top:10px;
left:100px;
}

.top-en01 img{
width:80px;
height:auto;
}


.hamidashi03{
margin: 0 -15%;
z-index:20;
}

.hamidashi03 img{
width:130%;
height:auto;
}

.top-catch03{
position:relative;
margin-top:-80px;
margin-left:0px;
}

.top-catch03 h2{
letter-spacing:2px;
}

.sub{
font-size:14px;
line-height:2.6;
letter-spacing:2px;
font-weight:300;
}

}


/*
-----------------------------------------------
FOOTER
----------------------------------------------- */
footer{
background:#bfb2a2;
margin-top:140px;
padding:90px 0 30px 0;
}

.foot-p{
color:#504741;
font-size:18px;
letter-spacing:2px;
line-height:2.4;
}

.copyright{
color:#fff;
}

.sns-icn{
margin:40px 0 90px 0;
}

.sns-icn li img{
height:34px;
width:auto;
}

.sns-icn li{
display:inline-block;
margin-left:14px;
margin-right:14px;
}


/*
-----------------------------------------------
FOOTER SP
----------------------------------------------- */
@media screen and (max-width: 767px) {
footer{
margin-top:60px;
padding:30px 0 30px 0;
}

.foot-p{
font-size:15px;
letter-spacing:1px;
line-height:1.8;
}

.sns-icn{
margin:20px 0 20px 0;
}

.sns-icn li img{
height:30px;
width:auto;
}
.sns-icn li{
display:inline-block;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
}

}

/*
-----------------------------------------------
丘の家
----------------------------------------------- */
.okanoie-catch01{
position:absolute;
top:20px;
left:140px;
}

.okanoie-catch01 h2{
/* font-size:26px;
color:#008DD2;
font-weight:500; */
font-size:23px;
color:#0072bb;
font-weight:400;
letter-spacing:3px;
line-height:2.0;
}

.okanoie-p01{
font-size:16px;
margin-left:100px;
line-height:2.6;
font-weight:300;
letter-spacing:5px;
}

.okanoie-box01{
position:relative;
font-size:20px;
margin-top:140px;
}

.okanoie-p02{
position:absolute;
font-size:16px;
top:280px;
left:100px;
line-height:2.6;
letter-spacing:5px;
font-weight:300;
}


.okanoie-p03{
font-size:20px;
}

.okanoie-p03 span{
margin-left:20px;
font-weight:300;
}


.hamidashi04{
position:absolute;
margin: 0 0 0 -180px;
z-index:20;
bottom:-100px;
}

.hamidashi04 img{
width:809px;
height:auto;
}

.a-type01{
color:#4D4D4D !important;
text-decoration:underline !important;
}

.a-type01:hover{
color:#888 !important;
text-decoration:none !important;
}

/*
-----------------------------------------------
丘の家 TAB
----------------------------------------------- */
@media screen and (max-width: 768px) {
.okanoie-p02{
top:280px;
left:10px;
}

}

/*
-----------------------------------------------
丘の家 SP
----------------------------------------------- */
@media screen and (max-width: 767px) {

.okanoie-catch01{
position:relative;
top:auto;
left:auto;
margin-top:15px;
}

.okanoie-catch01 h2{
font-size:20px;
letter-spacing:0px;
line-height:1.7 !important;
}

.okanoie-p01{
font-size:14px;
margin-left:0px;
letter-spacing:2px;
}


.okanoie-box01{
position:relative;
font-size:14px;
margin-top:40px;
}

.okanoie-box01 img{
width:100%;
height:auto;
}

.okanoie-p02{
position:relative;
font-size:14px;
letter-spacing:2px;
top:auto;
left:auto;
margin:30px 0;
}

.hamidashi04{
position:relative;
margin: auto
z-index:20;
bottom:auto;
}

.hamidashi04 img{
width:110%;
height:auto;
}

.okanoie-p03{
font-size:18px;
padding-top:0px;
line-height:2.0 !important;
}
.okanoie-p03 span{
margin-left:0px;
display:block;
}

}


/*
-----------------------------------------------
FLOW
----------------------------------------------- */
.flow-top .hamidashi01{
margin: 0 0 0 180px;
z-index:20;
}

.flow-top .hamidashi01 img{
width:1000px;
height:auto;
}

.flow-h{
padding-bottom:80px;
}

.flow-p01{
font-size:20px;
font-weight:500;
/* color:#0072BC;
letter-spacing:2px; */
color:#0072BB;
letter-spacing:6px;
padding:100px 0 120px 0;
}

.flow-h img{
height:40px;
width:auto;
}

.container01{
margin-top:-100px;
display:flex;
justify-content:space-between;
}

.flow-in{
width:30%;
}

.flow-txt01 dt{
font-size:20px;
font-weight:500;
margin-bottom:24px;
display:block;
position:relative;
}

.flow-txt01 dt:after{
position:absolute;
content: '';/*何も入れない*/
display: block;/*忘れずに！*/
width: 40px;/*画像の幅*/
height: 40px;/*画像の高さ*/
background-image: url(../img/flow_ya.png);
background-size: contain;
background-repeat:no-repeat;
right:5px;
top:0;
}

.flow-txt01 dd{
display:block;
font-size:16px;
}

.flowimg{
margin-top:8px;
display:block;
width:100%;
height:auto;
}

.flow-box01{
margin-top:100px;
background-image:url(../img/flow_bg_img.jpg);
background-repeat:repeat-x;
margin-bottom:140px;
}

.flow-txt02{
font-size:20px;
margin-bottom:30px;
}

.flow-txt02:after{
content: '';/*何も入れない*/
display: inline-block;/*忘れずに！*/
width: 40px;/*画像の幅*/
height: 40px;/*画像の高さ*/
background-image: url(../img/flow_ya.png);
background-size: contain;
background-repeat:no-repeat;
vertical-align:middle;
margin-left:15px;
}

.flow-box02{
background-color:#f1f1ee;
padding:45px;
}

.flow-box02 h3{
/* font-size:22px; */
font-size:20px;
letter-spacing:2px;
font-weight:500;
margin-bottom:15px;
}

.flow-box02 .f-left{
width:155px;
}

.flow-box02 .f-right{
width:710px;
}
.flow-box02 .f-right p{
font-size:16px;
}

/*
-----------------------------------------------
FLOW TAB
----------------------------------------------- */
@media screen and (max-width: 768px) {

.flow-txt01 dt{
font-size:18px;
font-weight:500;
margin-bottom:24px;
display:block;
position:relative;
}

.flow-txt01 dt:after{
width: 20px;/*画像の幅*/
height: 20px;/*画像の高さ*/
right:0px;
top:4px;
}

.flow-txt02:after{
width: 20px;/*画像の幅*/
height: 20px;/*画像の高さ*/
vertical-align:middle;
margin-left:15px;
}


.flow-box02{
padding:20px;
}

.flow-box02 h3{
font-size:20px;
margin-bottom:15px;
}

.flow-box02 .f-left{
width:28%;
}

.flow-box02 .f-right{
width:68%;
}


}


/*
-----------------------------------------------
FLOW SP
----------------------------------------------- */
@media screen and (max-width: 767px) {
.flow-top .hamidashi01{
margin: 0 -20px 0 0px;
z-index:20;
}

.flow-top .hamidashi01 img{
width:100%;
height:auto;
}


.flow-h{
padding-bottom:30px;
}

.flow-h img{
height:26px;
width:auto;
}

.flow-p01{
font-size:20px;
font-weight:500;
color:#0072BC;
padding:30px 0;
letter-spacing:2px;
}

.container01{
margin-top:0px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

.flow-in{
width:100%;
padding-left:8%;
padding-right:8%;
margin-bottom:45px;
}



.flow-txt01 dt{
font-size:19px;
font-weight:500;
margin-bottom:24px;
display:block;
position:relative;
}

.flow-txt01 dt:after{
position:absolute;
content: '';/*何も入れない*/
display: block;/*忘れずに！*/
width: 34px;/*画像の幅*/
height: 34px;/*画像の高さ*/
background-image: url(../img/flow_ya.png);
background-size: contain;
background-repeat:no-repeat;
right:0px;
top:0;
}

.flow-box01{
margin-top:0px;
background-image:none;
background-color:#e4edef;
margin-bottom:50px;
}

.flow-txt02:after{
content: '';/*何も入れない*/
display: inline-block;/*忘れずに！*/
width: 34px;/*画像の幅*/
height: 34px;/*画像の高さ*/
background-image: url(../img/flow_ya.png);
background-size: contain;
background-repeat:no-repeat;
vertical-align:middle;
margin-left:15px;
}

.flow-box02{
background-color:#f1f1ee;
padding:25px 15px;
}

.flow-box02 h3{
font-size:18px;
margin-bottom:10px;
}

.flow-box02 .f-left{
width:100%;
padding-left:20%;
padding-right:20%;
margin-bottom:15px;
}

.flow-box02 .f-right{
width:100%;
}
.flow-box02 .f-right p{
font-size:14px;
}




}


/*
-----------------------------------------------
会社概要
----------------------------------------------- */
.hamidashi05{
margin: 0 0 0 -130px;
z-index:20;
position:relative;
}

.hamidashi05 img{
width:750px;
height:auto;
z-index:10;
}

.hamidashi05 h2{
position:absolute;
width:366px;
z-index:40;
right:200px;
top:150px;
}

.hamidashi05 h2 img{
width:100%;
height:auto;
}

.company-dl{
margin-bottom:22px;
letter-spacing:1px;
}

.company-dl dt{
width:175px;
display:inline-block;
vertical-align:top;
}
.company-dl dd{
width:510px;
display:inline-block;
vertical-align:top;
}

.company-mgn01{
margin-top:150px;
}

.company-h{
border-bottom:solid 1px #444;
font-size:16px;
font-weight:500;
letter-spacing:1em;
padding-bottom:15px;
margin-bottom:60px;
}

/*
-----------------------------------------------
会社概要 TAB
----------------------------------------------- */
@media screen and (max-width: 768px) {

.hamidashi05 h2{
right:10px;
}

.company-mgn01{
margin-top:100px;
}

.company-dl{
width:100%;
padding-left:15px;
padding-right:15px;
}


}


/*
-----------------------------------------------
会社概要 SP
----------------------------------------------- */

@media screen and (max-width: 767px) {
.hamidashi05{
margin: 0 0 0 -20px;
z-index:20;
}

.hamidashi05 img{
width:100%;
height:auto;
}

.hamidashi05 h2{
position:absolute;
width:200px;
z-index:40;
right:-10px;
top:60px;
}

.company-mgn01{
margin-top:50px;
}

.company-dl span{
display:block;
}

.company-dl dt{
width:100%;
display:block;
}

.company-dl dd{
width:100%;
display:block;
}

.company-dl{
border-bottom:dotted 1px #ccc;
margin-bottom:15px;
padding-bottom:15px;
}

.company-h{
border-bottom:solid 1px #444;
font-size:16px;
font-weight:500;
letter-spacing:1em;
padding-bottom:15px;
margin-bottom:20px;
}

}




/*
-----------------------------------------------
WORKS
----------------------------------------------- */

.works-h{
font-size:24px;
margin:60px 0;
}
.add-img {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.add-img-box{
width:218px;
height:218px;
display:inline-block;
vertical-align:top;
text-align:center;
position:relative;
/* margin-right:42px; */
margin-bottom:30px;
}

.add-img-box a:hover img{
opacity:0.7;
}

/* .add-img-box:nth-of-type(4n) {margin-right:0;}  */

.inner-img{
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

.page-template-page_works{
padding-bottom:100px;
}

.seko-ul li{
line-height:1.5;
border-bottom:solid 1px #666;
padding-bottom:4px;
}

.seko-ul li a{
text-decoration:none;
color:#494949;
display:block;
padding:5px 10px;
height:100%;
}

.seko-ul li a:hover{
background:#e5f3fb;
}

.page-id-46 .wk01{
border-bottom:solid 4px #1a8ccd !important;
}
.page-id-95 .wk02{
border-bottom:solid 4px #1a8ccd !important;
}
.page-id-98 .wk03{
border-bottom:solid 4px #1a8ccd !important;
}
.page-id-101 .wk04{
border-bottom:solid 4px #1a8ccd !important;
}

.seko-ul{
float:right;
}

.seko-ul li{
vertical-align:top;
display:inline-block;
margin-left:50px;
}

.fancybox-toolbar .fancybox-navigation {
  display: block !important; /* ナビゲーションボタンを強制的に表示 */
}

/*
-----------------------------------------------
TAB 横
----------------------------------------------- */
@media (orientation: landscape) and (max-device-width: 1024px){

.add-img-box{
width:218px;
height:218px;
display:inline-block;
vertical-align:top;
text-align:center;
position:relative;
margin-right:30px;
margin-bottom:30px;
}

}



/*
-----------------------------------------------
WORKS TAB
----------------------------------------------- */
@media screen and (max-width: 768px) {
.add-img-box{
width:218px;
height:218px;
display:inline-block;
vertical-align:top;
text-align:center;
position:relative;
margin-right:28px;
margin-bottom:30px;
}

.add-img-box:nth-of-type(4n) {margin-right:24px !important;}
.add-img-box:nth-of-type(3n) {margin-right:0 !important;}

}


/*
-----------------------------------------------
WORKS SP
----------------------------------------------- */
@media screen and (max-width: 767px) {
.works-h{
font-size:20px;
margin:30px 0;
}

.add-img{
display:flex;
flex-wrap:wrap;
}

.add-img-box:nth-of-type(3n) {margin-right:3% !important;}
.add-img-box:nth-of-type(4n) {margin-right:3% !important;}

.add-img-box{
width:48.5%;
max-height:140px;
display:block;
vertical-align:top;
text-align:center;
position:relative;
margin-right:3% !important;
margin-bottom:20px;
}

.add-img-box img{
max-height:100%;
max-width:100%;
}


.add-img-box:nth-of-type(2n) {margin-right:0 !important;}

.page-template-page_works{
padding-bottom:30px;
}

.seko-ul{
float:none;
}

.seko-ul li{
vertical-align:top;
display:inline-block;
margin-left:0px;
margin-right:12px;
font-size:14px;
margin-bottom:10px;
}


}



/*
-----------------------------------------------
フェードイン
----------------------------------------------- */

.css-fade4 {
    animation-name: fade-in4;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }

  @keyframes fade-in4 {
    0% {
      opacity: 0;
      transform: translate3d(60px, 0, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }


.css-fade5 {
    animation-name: fade-in5;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }

  @keyframes fade-in5 {
    0% {
      opacity: 0;
      transform: translate3d(-60px, 0, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }


/*左から右にフェードイン*/
.left-to-right {
  opacity: 0.1;
  transform: translateX(-40px);
  transition: all 2s;
}
.left-to-right.scrollin {
  opacity: 1;
  transform: translate(0);
}

/*下から上にフェードイン*/
.down-to-top {
  opacity: 0.1;
  transform: translateY(40px);
  transition: all 2s;
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}


/*
-----------------------------------------------
お問い合わせ
----------------------------------------------- */
.kiboubi{
width:200px;
}

.tel-box{
margin-top:60px;
border:solid 1px #333;
padding:30px 50px;
}
.tel-box p{
font-size:22px;
display:inline-block;
width:50%;
}

.tel-nbr{
vertical-align:top;
display:inline-block;
width:42%;
font-size:40px;
font-weight:500;
}

.tel-nbr:before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 50px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-image: url(../img/tel.png);
  background-size: contain;
  vertical-align: middle;
}

.contact-page{
margin-top:100px;
background:#E4E4DE;
padding:70px 70px 20px 70px;
margin-bottom:30px;
}

.contact-page02{
margin-top:50px;
background:#E4E4DE;
padding:70px 70px 20px 70px;
margin-bottom:30px;
}

.contact-h{
font-size:24px;
margin-bottom:60px;
}

.kome{
padding-left:1.5em;
position:relative;
}

.kome:before{
content:"※";
position:absolute;
left:0;
top:0;
}

.color03{
color:red;
}

.f-d:before{
content: url(/img/fd.png);
position:relative;
margin-left:12px;
margin-right:3px;
display:inline-block;
margin-top:0px;
}

.contact-dl{
font-size:16px;
font-size:1.6rem;
padding-top:20px;
padding-bottom:20px;
}

.contact-dl dt{
vertical-align:top;
width:255px;
display:inline-block;
margin-right:15px;
text-align:right;
}
.contact-dl dd{
width:550px;
display:inline-block;
}

.radio-span{
display:block;
margin-bottom:10px;
}

.radio-span input{
vertical-align:middle;
margin-right:6px;
}

.komoku{
display:inline-block;
}

.must{
display:inline-block;
color:#be3832;
width:24px;
text-align:center;
}

input[type="text"],
input[type="email"],
textarea {
padding: 0.6em;
outline: none;
border: 1px solid #DDD;
font-size: 15px;
background:#fff;
}

.input-box01{
width:550px;
}

.input-box01c{
width:550px !important;
margin-bottom:8px !important;
}

.zip{
width:150px;
border:solid 1px #ccc !important;
padding:7px 6px;
background:#eeeeee;
}

.add-txt{
display:inline-block;
width:9.4em;
}

.ml5{
margin-left:5px;
}

.input-box02{
width:550px;
height:300px;
}

.input-box03{
margin-top:-25px;
}

.input-btn01{
font-size:16px;
display:inline-block;
padding:1.0em 2.0em;
color:#fff;
background:#008DCD;
border-radius:4px !important;
}

.input-btn01:hover{
background:#30BDEF;
}

.input-btn02{
font-size:16px;
display:inline-block;
padding:1.0em 2.0em;
color:#fff;
background:#888;
margin-right:10px;
border-radius:4px !important;
}

.confirm-p{
font-size:18px;
font-weight:bold;
text-align:center;
padding:20px;
}

.cr02{color:#ff0000;}

/* エラー吹き出し */
.error{
  font-weight:bold;
  display:inline-block;
  position: relative;
  padding: 0.5em 1.5em;
  color:#fff !important;
  border-radius:6px;
  background:#ff0000;
  font-size:1.4rem;
  margin-top:12px;
  width:200px;
  text-align:center;
}

.error::before{
  content: '';
  position: absolute;
  left: 64px;
  top: -15px;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 25px solid #ff0000;
  border-left: 15px solid transparent;
  }

.input-box01b{
width:5em;
}

.pv-komoku{
width:470px;
}

.pv-box{
border:solid 1px #1a8ccd;
padding:30px;
margin-top:40px;
}


.pv-box h2{
border-bottom:solid 1px #1a8ccd;
padding-bottom:10px;
font-weight:bold;
margin-bottom:10px;
font-size:18px;
padding-top:10px;
}

.pv-box p{
font-size:15px;
margin-bottom:15px;
}

.cp_ipselect {
	overflow: hidden;
        width: 200px !important;
	text-align: center;
}
.cp_ipselect select {
	width: 200px;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl01 {
	position: relative;
        /* 	border: 1px solid #ccc; */
	background: #ffffff;
        font-size:16px;
        padding:0.3em 0 0.6em 0;
        line-height:1.0;
        
}
.cp_ipselect.cp_sl01::before {
	position: absolute;
	top: 0.8em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.cp_ipselect.cp_sl01 select {
	padding: 8px 38px 8px 8px;
	color: #666666;
}

.pv-ol{
list-style-type:decimal;
margin-left:20px;
}



.contact-page02 .contact-dl dt{
vertical-align:top;
width:160px;
display:inline-block;
margin-right:15px;
text-align:right;
}

.contact-page02 .contact-dl dd{
width:520px;
display:inline-block;
}

.contact-page02 .input-box01{
width:520px;
}

.contact-page02 .input-box02{
width:520px;
}

.contact-page02 .input-box01c{
width:520px !important;
margin-bottom:8px !important;
}

.contact-info{
border:solid 1px #ccc;
padding:30px 60px;
margin-bottom:30px;

}

.contact-info-p{
font-size:18px;
line-height:1.9;
}

.fd{
font-size:24px;
font-weight:500;
color:#1a8ccd;
}



/*
-----------------------------------------------
お問い合わせ TAB 横
----------------------------------------------- */
@media (orientation: landscape) and (max-device-width: 1024px){
.contact-wrap01{
padding-left:60px;
padding-right:60px;
}

.contact-box01{
border:solid 1px #ccc;
padding:20px 5px;
margin:50px;
background:#fcfafa;
}

}


/*
-----------------------------------------------
お問い合わせ TAB
----------------------------------------------- */
@media screen and (max-width: 768px) {
.contact-wrap01{
padding-left:40px;
padding-right:40px;
}

.contact-box01{
border:solid 1px #ccc;
padding:20px 5px;
margin:50px;
background:#fcfafa;
}

.contact-dl{
width:100%;
padding-top:30px;
padding-bottom:30px;
padding-left:20px;
padding-right:20px;
}

.contact-dl dt{
vertical-align:top;
width:100%;
display:inline-block;
margin-right:0px;
margin-bottom:10px;
text-align:left;
}
.contact-dl dd{
width:100%;
display:inline-block;
}

.komoku{
float:none;
width:auto;
display:inline-block;
margin-top:0;
margin-right:10px;
}

.must{
float:none;
}

.yoken{
border:solid 1px #ccc;
}

.input-box01{
width:100%;
}

.input-box01c{
width:90% !important;
}

.input-box02{
width:100%;
height:200px;
}

.cp_ipselect {
width:100% !important;
}


.tel-box{
margin-top:60px;
border:solid 1px #333;
padding:30px;
}
.tel-box p{
font-size:22px;
display:inline-block;
width:40%;
}

.tel-nbr{
vertical-align:top;
display:inline-block;
width:56%;
font-size:40px;
font-weight:500;
}


.contact-page02 .contact-dl dt{
vertical-align:top;
width:100%;
display:block;
margin-right:0px;
text-align:left;
}

.contact-page02 .contact-dl dd{
width:100%;
display:block;
}

.contact-page02 .input-box01{
width:100%;
}

.contact-page02 .input-box02{
width:100%;
}

.contact-page02 .input-box01c{
width:100% !important;
margin-bottom:8px !important;
}

}

/*
-----------------------------------------------
お問い合わせ SP
----------------------------------------------- */
@media screen and (max-width: 767px) {
.kiboubi{
margin-bottom:10px;
}


.tel-box{
margin-top:30px;
border:solid 1px #333;
padding:15px;
}
.tel-box p{
font-size:20px;
display:block;
width:100%;
margin-bottom:10px;
}

.tel-nbr{
vertical-align:top;
display:inline-block;
width:100%;
font-size:28px;
font-weight:500;
}

.tel-nbr:before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 35px;/*画像の幅*/
  height: 35px;/*画像の高さ*/
  background-image: url(../img/tel.png);
  background-size: contain;
  vertical-align: middle;
}



.contact-page{
margin-top:40px;
background:#E4E4DE;
padding:20px;
margin-bottom:30px;
}

.contact-page02{
margin-top:30px;
background:#E4E4DE;
padding:20px;
margin-bottom:30px;
}

.contact-h{
font-size:18px;
margin-bottom:10px;
}

.contact-dl dt{
width:100%;
display:block;
margin-right:0px;
text-align:left !important;
}

.must{
width:18px;
text-align:center;
}




.contact-wrap01{
padding-left:20px;
padding-right:20px;
padding-top:20px;
}

.spmg001{
margin-top:-20px;
}

.contact-box01{
padding:10px 10px;
margin:30px 0;
}

.contact-box{
font-weight:bold;
border:solid 1px #777;
width:100%;
margin-left:auto;
margin-right:auto;
padding:15px;
margin-bottom:30px;
}

.f-d:before{
margin-left:0px;
}
.f-d{
display:block;
}

.contact-dl{
width:100%;
padding-top:16px;
padding-bottom:16px;
padding-left:0px;
padding-right:0px;
}

.input-btn01{
font-size:1.8rem;
padding:0.4em 1.5em;
}

.input-box01-tel{
font-size:1.8rem;
padding:0.4em 1.5em;
}

.input-btn02{
font-size:1.8rem;
padding:0.4em 1.5em;
margin-right:3px;
}

input[type="radio"],
input[type="checkbox"]{
border:solid 1px #888;
}

.contact-info{
border:solid 1px #ccc;
padding:15px;
margin-bottom:30px;
margin-top:-30px;
}

.contact-info-p{
font-size:15px;
line-height:1.6;
}



.contact-page02 .contact-dl dt{
vertical-align:top;
width:100%;
display:block;
margin-right:0px;
}

.contact-page02 .contact-dl dd{
width:100%;
display:block;
}

.contact-page02 .input-box01{
width:100%;
}

.contact-page02 .input-box02{
width:100%;
}

.contact-page02 .input-box01c{
width:100% !important;
margin-bottom:8px !important;
}

.pv-box{
border:solid 1px #1a8ccd;
padding:15px;
margin-top:40px;
}
}

/*
-----------------------------------------------
調整用スタイル
----------------------------------------------- */
.chui01{
padding:15px 20px;
background:#fff;
margin-bottom:20px;
background:#fcf2f2;
color:red;
}

.chui02{
padding:15px 20px;
background:#fff;
margin-bottom:20px;
color:#006699;
}

.lh01{
line-height:1.9;
}

#confirm-page .cp_ipselect{
background:#E4E4DE;
}

#confirm-page .cp_ipselect.cp_sl01::before {
display:none;
}

#confirm-page .hissu{
display:none;
}

/*
-----------------------------------------------
動画
----------------------------------------------- */

video{
width:100%;
}

.video-box{
padding-top:210px;
position:relative;
width:720px;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-bottom:90px;
}

/*
-----------------------------------------------
動画 SP
----------------------------------------------- */
@media screen and (max-width: 767px) {
.video-box{
padding-top:40px;
position:relative;
width:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-bottom:40px;
}
}

/*
-----------------------------------------------
オンライン
----------------------------------------------- */
.online-ttl{
position:absolute;
width:613px !important;
z-index:40;
left:120px;
top:77px;
}

.online-ttl img{
width:100% !important;
height:auto !important;
}

.sub02{
position:absolute;
z-index:40;
top:202px;
left:120px;
font-size:16px;
line-height:2.6;
letter-spacing:4px;
font-weight:300;
}

.flowimg02{
margin-top:40px;
display:block;
width:100%;
height:auto;
padding-left:50px;
padding-right:50px;
}

.online-dd{
margin-right:42px;
}

.ng-mg{
margin-top:-5px;
}

.ng-mg02{
margin-top:-100px;
}


.online-btn{
display:inline-block;
}

.online-btn a{
display:block;
color:#333333;
background:#e3e0d7;
font-size:22px;
line-height:1.1;
padding:2.4em 3.8em;
letter-spacing:2px;
}

.online-btn a:hover{
text-decoration:none;
background:#f5f2ea;
}


.online-p{
padding:0 120px 80px;
line-height:1.8;
font-size:16px;
}

.flow-p01-v2{
font-size:20px;
font-weight:500;
color:#0072BB;
letter-spacing:6px;
padding:100px 0 60px 0;
}

.online-box{
margin-bottom:100px;
background:#e5edf0;
padding:40px 120px;
}

.online-box p{
margin-bottom:20px;
}

.online-box p:before{
content:"● ";
}

.online-container{
display:flex;
justify-content:space-between;
}

.online-in{
width:30%;
background:#e5edf0;
padding:35px 40px 35px 45px;
letter-spacing:1px;
}

.top60{
padding-top:60px;
}

.top100{
padding-top:100px;
}

/*
-----------------------------------------------
オンライン SP
----------------------------------------------- */
@media screen and (max-width: 767px) {
.online-ttl{
position:absolute;
width:300px !important;
z-index:40;
left:5px;
top:10px;
}


.sub02{
position:relative;
top:auto;
left:auto;
font-size:14px;
line-height:1.8;
letter-spacing:2px;
font-weight:300;
padding:10px 15px 0 0;
}

.flowimg02{
margin-top:15px;
padding-left:30px;
padding-right:30px;
}


.ng-mg02{
margin-top:0px;
}

.online-btn{
display:block;
}

.online-btn a{
display:block;
color:#333333;
background:#e3e0d7;
font-size:17px;
line-height:1.5;
padding:1.2em 0.5em;
letter-spacing:1px;
}

.top60{
padding-top:0px;
}


.online-p{
padding:0 0 30px 0;
}

.top-up{
}


.online-box{
margin-bottom:30px;
background:#e5edf0;
padding:20px;
}

.online-box p{
margin-bottom:20px;
}

.top100{
padding-top:0px;
}


.flow-p01-v2{
font-size:20px;
font-weight:500;
color:#0072BB;
letter-spacing:6px;
padding:60px 0 20px 0;
}

.online-in{
width:100%;
background:#e5edf0;
padding:15px;
letter-spacing:0px;
margin-bottom:20px;
}

.online-container{
flex-wrap:wrap;
display:flex;
justify-content:space-between;
}

}