@charset "UTF-8";
/* CSS Document */
html{
	height: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

body{
    font-family: Futura, 'Century Gothic','Arial','Noto Sans JP', "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    margin: 0;
	height: 100%;
    text-align: center;
    overflow-x: hidden;
}
a {color: #666;}
a:hover {color: #00A79B;}

a {transition-duration: .5s; opacity: 1;}
a:hover {opacity: .5 }

img{
	width: 100%;
	height: auto;
    vertical-align: bottom;
}

#wrap{
    overflow: hidden;
 }

/*heaedr
header nav
---------------------------- */ 
.inner{
	width: 1080px;
	margin: 0 auto;
}
header{
	padding: 0;
    transition: .3s;
    background: rgb(255,255,255);
    background: rgba(0,0,0,0.4);
	   /* background: rgba(255,255,255,0);*/
    display: flex;
    position: fixed;
    justify-content: space-between;
    width: 100%;
    z-index: 99;
    /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);*/
}

.header.change-color {
    background-color: #000000;/*#00A79B; //スクロールしたあとのヘッダー背景色*/
    transition: 0.3s;
    box-shadow:0 2px 8px rgba(30,30,80,.3);
}

.header_other {
    background: rgba(255,255,255,1);  
}

.headinner{
    width: 96%;
    margin: 0 auto;
}

header .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
    line-height: 3.2em;
}

.header{
  /*box-shadow:0 2px 8px rgba(30,30,80,.3);*/
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:24;
}

h1#logo{
	width: 468px;/*584px*/
	margin-right: auto;
    padding: 1.5em 0;/*0 0 1.0em 0;*/
}

        #top_navi  {
        display: flex;
        /*float:right;*/
        /*width: 39%;*/
        }

    /* ==============
        #top_navi:Menu
       ============== */

    #top_navi ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        /*font-size:70%;*/
    }

    #top_navi a {
        display: block;
        margin: 0;
        padding: 1.8em;
        text-align: center;
        text-decoration: none;
        color: #FFF;
        /*border: 1px solid #FFF;*/
        font-size:90%;
        font-weight: 900;
    }

    #top_navi .estimate a {
        background: #000;
    }

    #top_navi .inq a {
        background: #00A79B;
    }


header nav {
	margin-left: 0.6em;
    
}
header nav ul{
	display: flex;
    align-items: center;
    }
header nav ul li{
    position: relative;
}
header nav ul li a{
	color: #fff;/*#000*/
    font-weight: 600;
	text-decoration: none;
    padding: 1.0em 1.6em ;
    letter-spacing: 0.1em;
    /*border-right: 1px dotted #666;*/
}
header nav li:first-child a{
    /*border-left: 1px dotted #666;*/
 }
#nav_toggle{
	display: none;
}



	    /* ---------------------------------- */
		/* ▼サブメニューがある場合に開く処理 */	/* ※サブメニューが1階層しか存在しない場合の記述 */
		/* ---------------------------------- */
		header nav ul li:hover ul {
			display: block;		/* マウスポインタが載っている項目の内部にあるリストを表示する */
            z-index: 9999;
		}

		/* -------------------- */
		/* ▼サブメニューの装飾 */
		/* -------------------- */
		header nav ul ul {
			margin: 0px;			/* サブメニュー外側の余白(ゼロ) */
			padding: 0px;			/* サブメニュー内側の余白(ゼロ) */
			display: none;			/* 標準では非表示にする */
			position: absolute;		/* 絶対配置にする */
		}

		/* ------------------------ */
		/* ▼サブメニュー項目の装飾 */
		/* ------------------------ */
		header nav ul ul li {
			width: 11.0em;				/* サブメニュー1項目の横幅 */
            background: #ff921d;
			border-top: 1px solid #FF8000;		/* 項目上側の枠線 */
		}
		header nav ul ul li a {
			line-height: 1.0em;		/* サブメニュー1項目の高さ */
			text-align: center;		/* 文字列の配置 */
			padding: 0;*/		/* 文字列の余白 */
			font-weight: normal;	/* 太字にはしない */
            font-size: 84%;
            border-style: none;
		}
        header nav ul ul li:first-child a{
            border-style: none;
        }
		/*header nav ul ul li a:hover {
			background: #ffff80;	/* サブメニュー項目にマウスが載ったときの背景色 */
		}*/



/*グリッド全体*/
* html .gridWrapper{height:1%;}


.wrapper-heroarea {
    position: absolute;
    top: 5%;
    width: 100%;
    height: 68vh;/*100vh;*/
    background: #F3F7F9;/*#d3dddf;/*#F5F5F5;*/
    z-index: -1;
}

/*slider
---------------------------------------------------------------*/ 
/*　slider囲み */
.hero{
    position:relative;
    padding-top: 0;/*100px;*/
    /*margin-left: 18.6%;/*10%;*/
}
.hero__copy{
    position: absolute;
    z-index: 10;
    left: 2.0em;
    top: 40%;/*36%;48.6%;*/
    /*margin-left: -23%;/*-12%;*/
}
.hero__copy .herocopy {
    font-size: 2.8em;
    font-weight: 700;/*700;*/
    padding: 0.2em 0.6em;
    margin: 0.6em 0.28em;
    color: #fff;
    /*background-color: rgba(255,255,255,0.7);*/
    line-height: 1.4;
    letter-spacing: 1.5px;
	text-align: left;
}


.swiperWrapper {
    padding: 5.0em 0;
}
/* 全体のスタイル */
.swiper-container{
    position: relative;
}
.swiper-wrapper {
	width: 100%;
	height: 360px;
}
/* 全スライド共通スタイル */
.swiper-slide {
	width: 100%;
	height: 100%;
}

/*ページネーション*/
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  color: #000;
}



@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}

/*imgタグだと下に隙間ができるのでblockに*/
.slide-img img{
  display: block;
}


/*main
---------------------------------------------------------------*/
main {
    display:block; /* IE対策に追加 */
    position: relative;
}


/*worksエリア
---------------------------------------------------------------*/ 
#wrapper-worksarea {
    clear:both;
    overflow:hidden;
    background: #fff;/*#d3dddf;*/
	padding: 2.0em 0 6.0em 0;
    margin-top: 3.0em;
}
.worksgridWrapper{
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}
    /* グリッド共通 ベース:トップページ2カラム */
    .square2c{
        position: relative;
        width:48%;
        display:inline-flex;
        text-align: center;
        margin: 0.4em auto;
        padding: 1.4em;
    }


    .square2c h2 {
        position: absolute;
        z-index: 10;
        left:1.0em;
        top:50%;
        margin-left: -5%;
        padding:10px;/*0.3em 0.5em;*/
        background: rgba(255,255,255,0.8);
        font-size: 2.0em;
        font-weight:600;
        text-align: left;
    }
    .square2c_notes{
        position: absolute;
        z-index: 10;
        left:1.0em;
        top:75%;
        margin-left: -2.5%;
        padding:10px;/*0.3em 0.5em;*/
        background: #fff;
        font-size: 1.2em;
        font-weight:600;
        text-align: left;
    }
    .square2c2r_notes{
        position: absolute;
        z-index: 10;
        left:1.0em;
        top:90%;
        margin-left: -2.5%;
        padding:10px;/*0.3em 0.5em;*/
        background: #fff;
        font-size: 1.2em;
        font-weight:600;
        text-align: left;
    }
    .square2c a{
        color:#000;
        transition: 1.0s;
    }
    .square2c a:hover{
        /*display: block;*/
        top:0;
        left:0;
        opacity: 1;
        background-color:#F2F2F2;
    }
.square2c img{
    max-width: 496px;
    filter: contrast(110%) saturate(170%) brightness(112%);
}
.workarea img{
    filter: contrast(110%) saturate(170%) brightness(112%);
}
.rec_nav_par{
    display: flex;
	justify-content: space-around;
    /*justify-content: space-between;*/
}
.rec_nav{
    width: 100%;
    max-width: 258px;
    padding: 0;
    box-sizing: border-box;
    display: block;
    width: 260px;
    margin: 0;
    padding: 18px 10px;
    background-color: #00A79B;/*#a1b6ba;/*#00A79B;/*#0cb59b;*/
    border-radius: 3px;
    color: #fff;
    font-size: 1.0rem;
    text-align: center;
    transition: all .2s;
}

@media screen and (max-width:767px) {
    .rec_nav_par{
    display: block; /*横並び（flex解除）*/
    width: 100%;
    }
    .rec_nav{
    max-width: 100%;
    width: 100%;
    margin: 0.5em 0;
    }
}

    .square2c_innerbotton{
        position: absolute;
        top:70%;
        left:61%;
        max-width: 258px;
        padding: 0;
            box-sizing: border-box;
            display: block;
            width: 260px;
            margin: 0;
            padding: 18px 10px;
            background-color: #00A79B;/*#a1b6ba;/*#00A79B;/*#0cb59b;*/
            border-radius: 3px;
            color: #fff;
            font-size: 1.0rem;
            text-align: center;
            transition: all .2s;
        }
    .square2c h3 {
        position: absolute;
        top:18%;
        left:60%;
        padding: 0;
        padding:10px;
        background: rgba(255,255,255,0.8);
        font-size: 3.2em;
        font-weight:600;
        letter-spacing: 4px;
        text-align: left;
    }
    .square2c_catch {
        position: absolute;
        top:43%;
        left:60%;
        padding: 0;
        padding:10px;
        background: rgba(255,255,255,0.8);
        font-size: 1.5em;
        font-weight: 600;
        color: #00A79B;
    }
    .square2c_catch2col {
        position: absolute;
        top:54%;
        left:60%;
        padding: 0;
        padding:10px;
        background: rgba(255,255,255,0.8);
        font-size: 1.5em;
        font-weight: 600;
        color: #00A79B;
    }
    .square2c_botton{
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 600;
        font-size: 100%;
        color: #fff;
        padding: 1.0em 1.8em;
        margin: 0;
        background: #00A79B;*/
    }


    /*.worksWrapper
    ---------------------------- */
    .worksWrapper{
        padding: 2.0em 0;
    }





/*newsエリア
---------------------------------------------------------------*/ 
#wrapper-newsarea {
    clear:both;
    overflow:hidden;
    background: #f5f5f5;
	padding: 8.0em 0;
}
/*news(.update)
---------------------------- */
div.update {
width: 97%; /* 新着情報エリアの幅 */
font-size: 90%;
padding:30px 10px;
margin:10px 0 20px 0;/* エリア余白 */
background-color: #F5F5F5;
}

/* --- 見出し --- */
div.update h3 {
margin: 0 0 5px; /* 見出しのマージン（上、左右、下） */
font-size: 100%;
}

/* --- 新着リスト --- */
div.update dl {
width: 90%; /* 新着リストの幅 */
margin: 0 auto;
/*border-top: 1px #fff dotted; /* 新着リストの上境界線 */
}

/* --- 日付エリア --- */
div.update dt {
display: block;
width: 6.7em; /* 日付エリアの幅 */
float: left;
padding: 10px 0 9px 3px; /* 日付エリアのパディング */
line-height: 200%;
color: #666;
/*border-left: 2px #f90000 solid;*/
}

/* --- 本文エリア --- */
div.update dd {
margin: 0;
text-align: left;
padding: 10px 3px 9px 8em; /* 本文エリアのパディング */
border-bottom: 1px #999 dotted; /* 本文エリア下境界線 */
line-height: 200%;
color: #000;
}

div.update dd.shin:before {
	content: "新着" ;
	color: #fff;
	background-color: #00A79B;
	font-size: 0.76em;
    font-weight: bold;
    letter-spacing: 1.5px;
	padding: 6px;/*0 10px;*/
	margin-right: 1.0em;
}

div.update dd.jyuyou:before {
	content: "重要" ;
	color: #fff;
	background-color: #FF4D4D;
	font-size: 0.76em;
    font-weight: bold;
    letter-spacing: 1.5px;
	padding: 0 10px;
	margin-right: 1.0em;
}


/*.more_kiji
---------------------------- */
.morekiji a {
	width: 325px;/*50%;*/
	display: inline-block;
	color: #fff;
    margin: 1.0em 0;/*1.0em 0 3.0em 0;*/
	height: 3.0em;
	line-height: 3.0em;
	background-color: #00A79B;
	/*border: 1px solid #fff;*/
    border-radius: 3px;
	text-align: center;
    font-size: 1.5em;/*40px;*/
	outline: none;
	text-decoration: none;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	position: relative;
    transition: 1.0s;
}
.morekiji a:hover,
.morekiji a:active {
    color: #fff;
    background-color: #999; 
    border-color: #fff; 
}
.morekiji a:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 0;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
.morekiji a:hover::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 0;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

/*RECRUITエリア
---------------------------------------------------------------*/ 
#wrapper-recruitarea {
    clear:both;
    position: relative;
    height: 70vh;
	padding: 60px 0;
    /*z-index: -1;*/
    background: #f5f5f5;
}
    .recruit_box{
        display: block;
        position: absolute;
        z-index: 10;
        font-size: 12.0em;
        font-weight: 800;
        color: #fff;
        top: 75%;
        left: 50%;
    }
    .recruit_view_box{
        display: block;
        position: absolute;
        top:50%;
        left:10;
        height: 100%;
        z-index: 2;
    }

#bg_dark_recruit {
    width: 100%;
    height: 70vh;
	margin:0 auto;
	position: relative;
	background: rgba(0,0,0,.8);
}

.bg_dark_recruit img{
    width: 100%;
    height: 70vh;
    object-fit: cover;
	opacity: 0.9;
}

.left_pickup_container{
    display: block;
    position: absolute;
    top: 5%;/*0;*/
    left: 10;
    height: 100%;
    z-index: 1;
}
.recruitarea_txt{
	position: absolute;
	top: 10%;
    z-index: 1;
	width: 50%;
    color: #fff;
    margin: 0;
    text-align: left;
    line-height: 1.5;
}

    .recruittxt_box{
        display: block;
        position: absolute;
        z-index: 10;
        font-size: 12.0em;
        font-weight: 800;
        color: #fff;
        top: 75%;
        left: 50%;
    }



/*youtube用
---------------------------------------------------------------*/
    .youtube{
    margin: 0 auto;
    text-align: center;
    padding-bottom:1.6em;
    }

    .douga{
    padding: 1.0em;
    height: auto;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    }

    .topdouga{
    padding: 0;
    height: auto;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    }

    .underdouga{
    padding: 0;
    height: auto;
    width: 100%;
    }


/*共通grid～
---------------------------------------------------------------*/ 

     /* グリッド共通 ベース:トップページ1カラム */
    .grid1c{
        width:80%;
        display:inline-flex;
        text-align: center;
    }/* grid1cのイメージ */
     /* グリッド共通 ベース:トップページ2カラム */
    .grid2c{
        width:50%;
        display:flex;
        text-align: left;
    }
    .grid2c_right{
        width:40%;
        display:inline-flex;
        text-align: right;
        margin-right: -600px; /* ネガティブマージンを指定。右に100pxずらす。 */
    }
 


/*historyエリア
---------------------------------------------------------------*/ 
#wrapper-historyarea {
    clear:both;
    overflow:hidden;
    background: #f5f5f5;
	padding: 8.0em 0 0 0;
}

.historyplace_iori {
	width: 100vw;
	margin: 30px calc(50% - 50vw);
	padding: 120px 2.5vw 120px;
	text-align: left;
	/*background-color: rgba(211,221,223,0.5);*/
}
.historyplace_iori p {
	margin: 0;
	color: #0071bc;
	margin-left: 1.5vw;
	font-size: 1.5vw;
}
.historyplace_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.historyplace_iori img {
	display: inline-block;
	width: 30% !important;/*30vw;*/
	margin-bottom: 25px;
	margin-top: 25px;
}

    .history_box{
        display: block;
        position: absolute;
        z-index: 10;
        font-size: 12.0em;
        font-weight: 800;
        color: #00A79B;
        top: 5%;
        left: 5%;
    }

/*messageエリア
---------------------------------------------------------------*/ 
#wrapper-messagearea {
    clear:both;
    width:100%;
    height: auto;
    overflow:hidden;
	/*padding: 40px 0 0 0;*/
}

#bg_dark {
    width: 100%;
    height: 60vh;
	margin:0 auto;
	position: relative;
	background: rgba(0,0,0,.8);
}
.bg_dark img{
    width: 100%;
    height: 70vh;
    object-fit: cover;
	opacity: 0.9;
}

.messagearea_txt{
	position: absolute;
	top: 10%;
    z-index: 1;
	width: 50%;
    color: #fff;
    margin: 0;
    text-align: left;
    line-height: 1.5;
}

.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
}

    .messagearea_view_box{
        display: block;
        position: absolute;
        top:70%;
        left:10;
        height: 100%;
        z-index: 2;
    }

/*introエリア
---------------------------------------------------------------*/ 
#wrapper-introarea {
    clear:both;
    width:100%;
    height: auto;
    overflow:hidden;
	/*padding: 40px 0 0 0;*/
}

#bg_dark_intro {
    width: 100%;
    /*height: 60vh;*/
	margin:0 auto;
	position: relative;
	background: rgba(0,0,0,.5);
}
.bg_dark img{
    width: 100%;
    height: 60vh;
    object-fit: cover;
}

.introarea_txt{
	position: absolute;
	top: 23%;
    z-index: 1;
	width: 50%;
    color: #fff;
    margin: 0;
    text-align: left;
    line-height: 1.5;
}

.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
}


/*.title_all(h2)
---------------------------- */
.title_all {
    display: inline-block;
    position: relative;
    font-weight: 800;
    font-size: 2.8em;
    text-align: left;
    letter-spacing: 0.2em;
    z-index: 10;
	padding: 0.5em 0;
}
/*.title_all::before {
    content:'';
    width: 1.0em;
    height: 6px;
    position: absolute;
    left:0;
    bottom: -16px;
    background: #00A79B;
}*/
.title_all_subtitle{
		display: block;       /* 下の行に表示する */
	    font-size: 0.6em;
}

.title_all_notes{
    display: table;
    /*position: relative;
    left:-2%;/*調整はずした220711*/
    text-align: left;
    padding: 4.0em 1.0em 1.0em ;
    margin: 0 auto;
    line-height: 1.5;
    letter-spacing: 1.2px;/*微調整*/
    font-size: 0.86em;
    font-weight: normal;
    color: #666;
}

.title_all_color {
    display: inline-block;
    position: relative;
    font-weight: 800;
    font-size: 2.8em;
    text-align: left;
    letter-spacing: 0.2em;
    z-index: 10;
	padding: 0.5em 0;
	color:#00a79b;
}

        .title_all_siro  {
            position: relative;
            width:100%;
            padding: 0.3em 0 1.0em 0; 
            font-size: 4.0em;
            font-weight:100;
            color: #fff;
            line-height: 1.0;
        }


/*-------------------------------------------------------------下層ページ*/
/*-------------------------------------------------------------PIC梱包ボックス(下層)*/
#toppicWrap {
    width:100%;
    margin:0 auto;
    background-color:#eee;
    padding-top: 100px;/*100px;1px重ねる？？*/
	transform:translateX(-1px) translateY(-1px);
}

#toppic {
    width:100%;
    /*max-width: 1200px;*/
	margin:0 auto;
	position: relative;
	background: rgba(0,0,0,.3);
}


.toppic_txt{
	position: absolute;
	bottom: 30px;
	color: #fff;
    z-index: 1;
	width: 100%;
	/*max-width: 1200px;*/
	padding: 0.7em 0;
    margin: 0;
    font-size: 4.2em;/*300%;*/
    font-weight: 100;
    text-align: center;
    letter-spacing: 0.05em;
}

#toppic img {
	width:100%;
	padding:0;
}
.toppicimg{
    height: 328px;
    object-fit: cover; 
}
.toppic_history{
    object-position: 70% top;
}

.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}


/*allエリア
---------------------------------------------------------------*/
#wrapper-allarea {
    clear:both;
    overflow:hidden;
    background: #F3F7F9;/*#fff;*/
	padding: 20px 0;
}

.long_sentence {
    line-height: 18px;
    margin-top: 7px;
    margin-bottom: 7px;
}




/*PLAN
---------------------------------------------------------------*/
.plan_box{
    display: flex; /*横並び*/
    background:#ffffff;
    padding: 1.8em;
    margin-bottom: 3.0em
}
.plan_box .image img {
    width: 100%;
    height: auto;
    /*padding-right: 1.0em;*/
}
.plan_box .right {
    margin: 0 0 0 10px;
    padding: 0;
    width: 60%;
}
.plan_box .title {
    position: relative;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 2.3em;
}
.plan_box .subtitle{
    display: block;
    margin: 0;
    padding-top: 0;
    padding-bottom: 1.4em;
    font-weight: normal;
    font-size:0.4em;
}
.plan_box h3{
    font-size: 1.4em;
}
.plan_box .text {
    margin: 10px 0 0;
    padding: 0;
}
.plan_box .price{
    color:#00A79B;
    font-size:2.2em;
    font-weight: 600;
}
.plan_box .icon_waku{
    line-height: 1.5;
    color: #fff;
    background-color:  #00A79B;
    border-radius: 5px;
    font-size:0.8em;
    padding: 0.8em;
    margin:0.2em 0.4em 0.2em 0;
    display: inline-block;
}

.plan_box .icon_merit{
    line-height: 1.5;
    color: #fff;
    background-color:  #80859E;/*#97C04F;*/
    border-radius: 5px;
    font-size:0.8em;
    padding: 0.8em;
    margin:0.2em 0.4em 0.2em 0;
    display: inline-block;
}
.plan_box .sankou{
    font-size: 0.8em;
}


/*---------------sitemap*/
ul.ryokositemap {
    list-style-type: none;
    width: 90%;
    margin: 0 0 0 1.4em;
    padding: 12px 0 1px 0;
}

ul.ryokositemap li {
    position: relative;
    z-index: 1;
    margin: 0 0 3px 0;
    padding: 0 0 1px 0;
    zoom: 1;
}
 
ul.ryokositemap li a {
    display: block;
    position: relative;
    z-index: 2;
    margin: -0.6em 0 1.0em 0.5em;
    padding: 0 0 0 8px;
    border: 1px solid #DDDDDD;
    background-color: #FAFAFA;
    color: #00A79B;
    font-size: 1.1em;
    line-height: 1.8;/*1.5;*/
    text-decoration: none;
    zoom: 1;
}
 
ul.ryokositemap li a:hover,
ul.ryokositemap li a:active {
    color: #80BCF5;
    background-color: #f5f5f5;
}
 
ul.ryokositemap ul {
    width: auto;
    margin: 15px 0 10px 20px;
}

ul.ryokositemap ul li a,
ul.ryokositemap ul li a:hover,
ul.ryokositemap ul li a:active {
    color: #999;
    border: none;
}



/*basetable
---------------------------------------------------------------*/ 
.basetable{
    border-collapse:collapse;
    margin:2.0em auto;
    width: 90%;
    text-align: left;
}
.basetable td,.basetable th{
    border-top:1px solid #ccc;
    padding:20px;
}
.basetable tr:last-child td,
.basetable tr:last-child th{
    border-bottom:1px solid #ccc;
}
.basetable th:nth-child(1) {
    width:23%;
}


/* atable設定
----------------------------------------------------------- */
.atable	{
	border-collapse: separate;
	margin:10px 0 30px 0;
	width: 100%;
	text-align:center;
    font-size:0.9em;
    border: 1px solid #f5f5f5;
}
.atable p{
    margin: 0;
}
.atable th	{
	padding: 0.5em;
	background-color:#e1f2d0;
	border-bottom: 1px dotted #DDD;
    border-left: 1px dotted #DDD;
    vertical-align: middle;
    font-weight: 600;
}
.atable td	{
    padding: 0.5em;
    background-color: #fff;
	border-bottom: 1px dotted #DDD;
    border-right: 1px dotted #DDD;
    vertical-align: middle;
    text-align: center;
}



/* btable設定
----------------------------------------------------------- */
.btable{
    border-collapse:collapse;
    margin:2.0em auto;
    width: 90%;
    text-align: left;
    background: #fff;
}
.btable td,.btable th{
    border-top:1px solid #ccc;
    padding:20px;
}
.btable tr:last-child td,
.btable tr:last-child th{
    border-bottom:1px solid #ccc;
}
.btable th:nth-child(1) {
    width:23%;
}


/*mainbox
---------------------------------------------------------------*/ 
.mainbox {
	text-align: left;
    padding-bottom: 100px;
}
.mainbox p{
    line-height: 2.0;
}
.mainbox h2{
    clear: both;
    text-align: center;
    padding: 1.0em 0 1.0em 0;
    margin: 1.0em 0 2.0em 0;
    letter-spacing: 0.2em;
    font-weight: 800;
}
.mainbox h3{
    clear: both;
    padding: 1.4em 0 0.8em 0;
    font-size: 200%;
    /*font-weight: bold;*/
    color: #00A79B;
    letter-spacing: 0.15em;    
}
.mainbox h4{
    clear: both;
    padding: 2.0em 0 1.0em 0;
    font-size:120%;
    font-weight: normal;
    color: #00A79B;
}
.mainbox img{
    padding: 0.5em 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.sp_br {
    display: none;
}


/*work
---------------------------------------------------------------*/ 
.workplace_iori {
	width: 100vw;
	   margin: 0 calc(50% - 50vw);
	/*margin: 30px calc(50% - 50vw);*/
	padding: 0 2.5vw 120px;
	/*text-align: left;*/
	/*background-color: rgba(211,221,223,0.5);*/
}
.workplace_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.work_box {
  zoom: 1;
  display: flex;
  flex-wrap: wrap;
}
.workarea {
  position: relative;
  display: block;
  margin: 9px;
  float: left;
  max-width: 100vw;
	background: #fff;
}

.workarea img {
  padding: 0 0 0.5em 0;
  width: 360px;/*250px;*/
  border: none;
  margin-bottom: 5px;
	vertical-align: bottom;
}
.workarea h2 {
  color: #334b48;
  font-size: 1.0em;
  margin: 0 5px 15px 5px;
  line-height: 2em;
  letter-spacing: 1.5px;
  font-weight: 600;
}



/*company
---------------------------------------------------------------*/ 
.other_img_cover{
    margin: 0 calc(50% - 50vw);
}
.other_img_cover img{
    height: 70vh;
    width: 100%;
    object-position : 50% 75%;
    object-fit: cover;
}

/*recruit
---------------------------------------------------------------*/ 
.recruit_img_cover{
	padding-top: 8.0em;
    margin: 0 calc(50% - 50vw);
}
.recruit_img_cover img{
    height: 70vh;
    width: 100%;
    object-position : 50% 10%;
    object-fit: cover;
}


/*h2（mainbox内）
---------------------------- */
.h2like{
    position: relative;
    font-size: 2.6em;/*2.8em;*/
    font-weight: bold;
    color: #000;
}
.h2like::before{
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 8px;
    background-color: #00A79B;
}



@media screen and (max-width:767px) {
    .mainbox img {
    max-width: 100%;
    height: auto;
    }
  
    .plan_box .image {
    width:auto;
    }
    .plan_box{
    display: block; /*横並び（flex解除）*/
    }
    
}






/*(.menu_list)
---------------------------- */
.menu_list{
    clear: both;
    padding:1.5em 1.0em;
}
.menu_list li {
    margin: 10px;
    padding: 0;
    position:relative;
    font-size: 1.4em;
    text-align: center;
    background: #fffaee;
    border-bottom: 2px solid #663300;
    border-top: 2px solid #663300;
}
.menu_list li:before {
    font-family: FontAwesome;
    content: "\f054";
    position: absolute;
    right: 0.3em;
    color: #663300;
    font-size: 1.2em;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}



/*iro_box
---------------------------- */
.iro_box {
    background-color: #FCFCFB;/*#fffaee;*/
    margin: .5em 1.5em;
    padding: 2em;
    overflow: auto;
}

/*iro_dark_box
---------------------------- */
.iro_dark_box{
    margin:2em 0;
    position: relative;
    padding: 1.0em 2.0em;
    border-top: solid 2px #663300;
    border-bottom: solid 2px #663300;
}
.iro_dark_box:before, .iro_dark_box:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #663300;
}
.iro_dark_box:before {left: 10px;}
.iro_dark_box:after {right: 10px;}
.iro_dark_box p {
    margin: 0; 
    padding: 0;
}

/* マーカー線・赤 */
.markernews{
 background:linear-gradient(transparent 75%, #ff7f7f 75%);
}

/* 赤・太字 */
.redtextnews{
    color: #d90000;
    font-size: 124%;
}

/* 赤 */
.redtext{
    color: #d90000;
}

/*breadcrumbs
---------------------------------------------------------------*/ 
.breadcrumbs {
    text-align:left;
    padding:10px 20px 10px 10px;
    background: #F3F7F9;
}
.breadcrumbs ol li {
    display: inline;
    list-style-type: none;
    font-size:70%;
    color:#999999;
}
.breadcrumbs ol li:before {
    content: " > ";
}
.breadcrumbs ol li:first-child:before {
    content:"";
}
.breadcrumbs ol li span {
	/*display: block;*/
	color: #1f1f1f;
	font-size: 11px;
	line-height: 120%;
	letter-spacing: 0.1em;
}
.breadcrumbs ol li a:hover span,
.breadcrumbs ol li a:active span {
	text-decoration: underline;
}

/* #page_top
---------------------------- */
#page_top{
  width: 80px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #00A79B;
  opacity: 0.6;
  /*border-radius: 50%;*/
  z-index: 999;/*footer < 前面*/
}
#page_top a{
  position: relative;
  display: block;
  width: 80px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: FontAwesome;
  content: '\f0d8';
  font-size: 18px;
  color: #fff;
  position: absolute;
  width: 18px;
  height: 18px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 10px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*opacity
---------------------------- */
.hover a:hover img{ 
    opacity: 0.75;
     -moz-opacity: 0.75; /* Firefox */    
 filter: alpha(opacity=75); /* IE6/7 */ 
 -ms-filter: "alpha(opacity=75)"; /* IE8 */
 } 
.hover a img{
    transition: 1.0s;
}

/*fadein
---------------------------- */
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 300ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}



/*---------------sitemap*/
ul.okamotositemap {
    list-style-type: none;
    width: 90%;
    margin: 0 0 0 1.4em;
    padding: 12px 0 1px 0;
}

ul.okamotositemap li {
    position: relative;
    z-index: 1;
    margin: 0 0 3px 0;
    padding: 0 0 1px 0;
    zoom: 1;
}
 
ul.okamotositemap li a {
    display: block;
    position: relative;
    z-index: 2;
    margin: -0.6em 0 9px 5px;
    /*margin: -0.6em 0 10px 5px;*/
    padding: 0 0 0 8px;
    border: 1px solid #DDDDDD;
    background-color: #FAFAFA;
    color: #0072DD;
    font-size: 1.1em;
    line-height: 1.8;/*1.5;*/
    text-decoration: none;
    zoom: 1;
}
 
ul.okamotositemap li a:hover,
ul.okamotositemap li a:active {
    color: #80BCF5;
    background-color: #f5f5f5;
}
 
ul.okamotositemap ul {
    width: auto;
    margin: 15px 0 10px 20px;
}

ul.okamotositemap ul li a,
ul.okamotositemap ul li a:hover,
ul.okamotositemap ul li a:active {
    color: #999;
    border: none;
}

/* footer_navi
-------------------------------------------------------------all_page(footer/footer_navi)*/
#footer_navi{
    clear:both;
    overflow:hidden;
    padding: 6.8em 1.0em;
    background: #000;
    font-size: 0.9em;
    color: #fff;
    line-height: 2;
    background-attachment: fixed;
    background-image: url(../images/footer.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 50vh;/*60vh*/
}

#footer_navi::before {
    content: '';
    background-color: rgba(0,0,0,.7);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.footinner{
    width: 78%;
    margin: 0 auto;
}
.foottext{
    z-index: 10;
    display: flex;
    /*align-items: center;*/
    justify-content:space-between;
}
.footmenutext{
    z-index: 10;
    display: flex
}

* html #footer_navi{height:1%;}

#footer_navi #info{display:flex;z-index:10;width:60%;}
/*#footer_navi #info .info{float:left;}*/
#footer_navi #info .logo{float:left;}
#footer_navi #info .info{
    clear:both;
    padding:0 0 0 1.0em;
    text-align:left;
    /*line-height: 1.5;*/
    font-size: 1.1em;
}

#footer_navi .logo {
    width: 148px;
    max-width: 100%;
    font-size: 1.3em;
    padding: 10px 0 0 0;
}


#footer_navi .info .tel ,#footer_navi .info .tel span,#footer_navi #info .open {
    color:#FFF;
    margin-top:0;
}
#footer_navi .corp {
    font-size: 128%;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}

#footer_menunavi{
    color: #FFF;
    z-index: 10;
    width:60%;
    max-width: 780px; 
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff; 
    padding: 1.0em;   
}

ul.footnav{
    clear: both;
    position: relative;
    display: grid;
    width: 50%;
    float: none;
    padding:10px 0 0 10px;
}

ul.footnav li{
    position: relative;
    text-align: left;
    height: 2.0em;
    /* left: -50%; */
    float: left;
    margin-bottom: 10px;
    padding: 0 1em 0 1em;
    /*border-right: 1px dotted #fff;*/
}

#footer_navi a{color:#fff;}
#footer_navi a:hover{color:#fff;}

/*footer_cr
---------------------------- */
#footer_cr {
	width: 100%;
	margin: 0;
	padding: 18px 0;
	/*text-align: left;*/
	clear:both;
	background: #000;
}

#fwrap {
	max-width: 1200px;
    line-height: 1;
	width: 100%;
	margin: 0 auto;
}

/*#flogo {
	float: left;
	width: 30%;
}*/

#cr {
	float: right;
	text-align: center;
	width: 100%;
	font-size: 0.9em;
	color: #fff;
}


/*.clearfix
------------------------------------------------------------ */
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

/*スマホ・タブレット用の設定*/
@media screen and (max-width:767px){
    
    /*#top_navi  {
    display: block;
    width: 100%;
    }
    #top_navi a{
        margin: 0;
        padding: 0.3em;
    }*/
    h1#logo {width: 80%;}
    .grid2c{width: 100%;display: block;}
    .square2c{width: 100%;display: block;}
	.worksWrapper{
		width: 100%;
		margin: 10px auto;
        padding: 0;
	}
    /*#footer_navi {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }*/
    #footer_navi{height: 100vh;}
    #footer_navi #info .info{float:none;}
    #footer_navi #info .logo{
        float: none;
        width: 70%;/*20220523*/
        margin: 0 auto;
    }
    #footer_navi #info .info{
        font-size: 1.0em;
        text-align: center;
    }
   
    ul.footnav{
        width: 100%;
        margin: 0 auto;
        padding: 0;
        left:50%;
    }
    .inner {width: 100%;}
    ul.footnav li{
        float: none;
        border-right: none;
        border-bottom: 1px dotted #fff;
        margin: 1.0em 0;
        font-size: 110%;
    }
    ul.footnav li:last-child{
        border-bottom: 1px dotted #fff;
    }
    .toppic_txt{font-size: 180%;}

    .btn_betu a{width: 84%;padding: 1em 0.5em;font-size: 1.3em;}
    .box_linkarea{padding: 0;}
    /* 横並びに3等分-->1等分 */
    .box_linkarea ul.linkarea_menu li {
        width: 93%;
        padding: 0.5em auto;
        margin-right: 0.6%;
        margin-left: 0.6%;
        font-size: 70%;
    }
    .title_all  { font-size: 2.0em;}


    

    #wrapper-newsarea {
        padding: 1.0em 0;
    }
    #wrapper-historyarea{
        padding: 3em 0 0 0;
    }

    #wrapper-recruitarea{
        height: 80vh;
        padding: 2em 0 0 0;
    }
    #wrapper-messagearea{
        /*height: 80vh;*/
        padding: 2em 0 0 0;
    }
	.messagearea_txt_in{
		display: none;
	}

   
    
    /*---------------スクロール時*/
    .scroll-table {
    overflow: auto;
        -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    }
    .scroll-table::-webkit-scrollbar {
    height: 10px;
    }
    .scroll-table::-webkit-scrollbar-thumb{
    background: #999;
    border-radius: 5px;
    }
    .scroll-table::-webkit-scrollbar-track-piece {
    background: #efefef;
    }
    
}



/*スマホ・タブレット用の設定*/
@media screen and (max-width:960px){
	header{
		/*padding: 16px 0;*/
        position: fixed;
       
	}
    header .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 1.0em;
    }
	.inner{
		width: 90%;
	}
	
	/*メニュー部分*/
    header nav {
        margin: 0;
    }
	nav{
		display:none;
		position: absolute;
		top:0;
		width: 100%;
		height: 100vh;
        /*background:rgba(238,220,179,0.9);*/
        background:rgba(165,214,233,0.8);
		left: 0;
        z-index: 99;
	}
	header nav ul{
		display: block;
		width: 90%;
		height: 350px;
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		margin: auto;
	}
	header nav ul li{
		margin: 0 auto;
		text-align: center;
        border-bottom: 1px solid #fff;
	}
	header nav ul li:last-child{
		border: none;
	}
	header nav ul li a{
		display: block;
        color: #000;
        font-weight: bold;
        font-size: 120%;
	}
	

	/*開閉ボタン*/
	#nav_toggle{
        float: right;
		display: block;
		width: 40px;
		height: 40px;
		position: relative;
		top: 4px;
        right: 4px;
		z-index: 100;
	}
	#nav_toggle div {
		position: relative;
	}
	#nav_toggle span{
		display: block;
		height: 3px;
		background: #fff;/*#000*/
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:12px;
	}
	#nav_toggle span:nth-child(3){
		top:24px;
	}
	
	/*開閉ボタンopen時*/
	.open #nav_toggle span{
        background: #00A79B;/*#000*/
	}
	.open #nav_toggle span:nth-child(1) {
			top: 12px;
		   -webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			transform: rotate(135deg);
		}
		.open #nav_toggle span:nth-child(2) {
			width: 0;
			left: 50%;
		}
		.open #nav_toggle span:nth-child(3) {
			top: 12px;
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}
    
    header nav ul li:hover ul{
        display: none;
    }
    
    /*footercopyright*/
    #cr {
	text-align: center;
	width: 100%;
	font-size: 0.9em;
	color: #FFF;
    }
    /*footermenu*/
    #footer_navi #info{
        display: inline-block;
        width:100%;}
    .basetable { margin: 0 auto;font-size: 80%; }
    .basetable th,
    .basetable td{
    width: 100%;
    display: block;
    /*border-top: none;*/
    }
    .basetable th:nth-child(1) {
    width:100%;
    }
    .btable { margin: 0 auto;font-size: 80%; }
    .btable th,
    .btable td{
    width: 100%;
    display: block;
    /*border-top: none;*/
    }
    .btable th:nth-child(1) {
    width:100%;
    }
    .hero__copy .herocopy {
        display: none;}
    .btn_top_inq a{
        font-size:150%;}
    #footer_navi{
        height: 70vh;}
    #top_navi{
        display: none;}
    
    .bg_dark img{
    height: 60vh;/*100vh;*/
    object-fit: cover;
    object-position: 50% 50%;
    }
    .messagearea_txt{
    top: 5%;
	width: 90%;
    font-size:86%;
    padding-bottom: 2.0em;
    }

    
    .plan_box .right{
        width: 100%;
    }
    .logoicon{
    margin: 0 2.0em 0;
    }
    .recruit_box{
        display: none;
    }
    #footer_menunavi{
        display: none;
    }
    .grid2c{width: 100%;display: block;}
    .grid2c_right{
        width:40%;
        display:flex;
        text-align: right;
        margin-right: 0px; /* ネガティブマージン指定後ずらしをRESET。 */
    }
    .square2c_notes,.square2c2r_notes{
        margin-left: -1.7%;
    }
    
    
	.historyplace_iori {
		display: block;
		height: 90vh;
		overflow-y: auto;
	}
	.historyplace_iori p {
		margin: 0;
		color: #0071bc;
		margin-left: 2.8vw;
	}
	.historyplace_iori img {
		display: inline-block;
		width:  100% !important;
	}
    
    .before_after img{/*調整table.css*/
        width: 37vw;
    }
    img.album_c{/*調整table.css*/
        width: 100%;
    }
    .work_box,.img_box2 {/*調整table.css*/
        padding: 2.0em;
    }
    .workarea img{/*調整table.css*/
        width: 100% !important;
    }
    .pickup_box img{
        padding-left: 25.0em;
    }

	.recruitarea_txt{
		display: none;
	}
	

}


/*header（nav_menu）
---------------------------------------------------------------*/ 
/*PC*/
.pc { display: block; }
.sp { display: none; }
/* インライン要素の時 */
.pcinline { display: inline; }
.spinline { display: none; }

/*SP*/
@media screen and (max-width:960px) {
  .pc { display: none; }
  .sp { display: block; }
  /* インライン要素の時 */
  .pcinline{ display: none; }
  .spinline{ display: inline; }
}


/*google map
---------------------------------------------------------------*/ 
@media (max-width: 980px) {
    .google-maps {
    position: relative;
    padding-bottom: 60%; // 縦横比
    height: 0;
    display:block;
    overflow: hidden;
    margin:0 10px;
    }
    .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }
}

/*inview
---------------------------------------------------------------*/ 
.fadeIn {
	opacity: 0;
	transition: 2s;
}
.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
  /*transition-delay: .5s;*/
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_right {
  opacity: 0;
  transform: translate(50%, 0);
  transition: 2s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


/*物件内Youtube
---------------------------------------------------------------*/ 
.video {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}