/* CSS Document */
html{ height:100%;}
body{ background:#fff; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.2em;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
.wrap{position:relative;}
p{ font-size:1.3rem; line-height:1.6em; margin:10px auto; font-weight:300; letter-spacing:0.1em;}

/* ハンバーガーボタン
==============================　*/
.toggle-btn {
  width: 40px;
  height: 40px;
  position:absolute;
  z-index: 2;
  cursor:pointer;
  top:0; left:0;
}

/*トグルボタン*/
#menubtn{
	width:40px;
	height:41px;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 3;
	font-family:Arial, Helvetica, sans-serif;
	}

#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #333;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span {background: #fff;}

#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}
/* ナビゲーションメニュー
==============================　*/
.global-nav {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index:5;
  color:#fff;
}

.global-nav__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-flow: column;
  text-align:left;
}

.global-nav__inner{
  margin-bottom: 30px;
  font-size:1.6rem;
}
.global-nav__inner ul li{ padding:10px 0;}
.global-nav__inner a {
  color: #fff;
  text-decoration: none;
  transition: 0.5s;
}

.global-nav__inner a:hover {
  opacity: 0.7;
}

.global-nav ul.nav { width:300px; text-align:left;}
.global-nav ul.nav li{ font-size:1.6rem;}

/*ヘッダー*//*フッター*/
.header_nav_wrap{ display:flex; justify-content:left; flex-wrap: wrap;}
#top_wrap header{  width:100%; height:auto;  position:relative;}

header{  width:400px; height:100%;  position: sticky; left:0; top:0;}
header h1.title{ font-size:1.4rem; line-height:1.4em; margin-bottom:130px; padding-left:15px;}
header h1.title span{ font-size:2rem; line-height:1.4em; font-family: 'Montserrat', sans-serif; }
header .logo{ margin-bottom:50px;}
header .nav_btn{ position:fixed; z-index:10; display:none; left:8%;}
header .on{ display:block;}
header .off{ display:none;}
#top_wrap .header_wrap{ width:33%; padding:30px; position: fixed; font-size:1.6rem; line-height:1.2em; text-align:left; box-sizing: border-box;
	left:2%; z-index:1;
  display:flex;
  flex-flow: column;
  justify-content:space-between;
}
.header_wrap{height:100%; padding:50px 30px; font-size:1.6rem; line-height:1.2em; text-align:left; box-sizing: border-box;
	left:2%; z-index:1;
  display:flex;
  flex-flow: column;
  justify-content:space-between;
}
ul.nav li{ font-size:1.2rem; line-height:1.4em; font-weight:300; padding:5px;}
ul.nav li span{ font-family: 'Montserrat', sans-serif; font-size:1.4rem; line-height:1.4em; padding-right:15px;}
ul.nav li.serv_nav{ display:flex; justify-content: start; flex-wrap: wrap; }
ul.nav li.serv_nav span{ width:60px; display:block;}
ul.nav li a:hover{ color:#4F48CA;}
.global-nav　ul.nav li a:hover{ color:#CCCCFF;}

header .tel,header ul.nav li.tel,footer .tel,footer .fax{ padding:10px 10px 5px 30px; position:relative;}
header .tel:before,footer .tel:before{ content:""; background:url(../images/tel_icon.png) no-repeat; background-size:cover; width:26px; height:27px; position:absolute; left:0; top:5px; }
footer .fax:before{ content:""; background:url(../images/fax_icon.png) no-repeat; background-size:cover; width:26px; height:27px; position:absolute; left:0; top:5px; }
header ul.nav .tel:before{ content:""; background:url(../images/tel2_icon.png) no-repeat; background-size:cover; width:26px; height:27px; position:absolute; left:0; top:5px; }

.header_text{ width:300px; max-width:100%; margin-bottom:70px;}

.header_text h1{font-family: 'Hina Mincho', serif; line-height:1.2em; margin:20px 0;
	/* 最小2.4rem | SP:2rem | TB:2.5rem | PC:3rem | 最大5rem */
	font-size: clamp(2.4rem, calc(2.5vw + 1.5rem), 5rem);}

/*　上に上がる動き　*/

.header_wrap.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}

/*　下に下がる動き　*/

.header_wrap.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}



.footer_wrap{ border-top:1px solid #ccc; width:100%;}
footer{ width:1000px; max-width:95%; margin:0 auto;}

footer .footer_nav_wrap{ width:1000px; padding-top:50px; max-width:100%; overflow:hidden; display:flex; justify-content: space-between; flex-wrap: wrap; }

footer .left_box{ width:30%; padding:0; margin:0; line-height:1.4em; text-align:left;}
footer .left_box h1{ font-size:2em; margin-bottom:25px;}
footer .left_box h2{ font-size:1.4em; margin:15px 0 5px;}
footer .left_box p{ font-size:1.4rem; margin:0; line-height:1.4em;}
footer .left_box div{font-size:1.4rem; }
footer .right_box{ width:300px; font-size:1.4rem; line-height:1.2em; padding:0; }
footer .right_box ul li{ padding:5px 10px; text-align:left;}


.copy { width:100%; padding:15px 0; margin-top:30px;}
.copy p{ width:940px; max-width:90%; margin:0 auto; font-size:1.2rem; line-height:1.2em; color:#fff; font-weight:300; text-align:right;}

/*共通*/
#top_wrap .contents{ margin-left:min(34%, 500px) ; max-width:66%; width:1200px;}
#top_wrap .contents2{ margin:0 auto; max-width:95%; width:1500px;}
#top_wrap .wrap{ width:100%;}
 .wrap{ width:calc(100% - 450px); padding-bottom:100px;}
/*矢印が右に移動する*/
.more_btn{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
    display: inline-block;
	padding: 0 30px 0 25px;
	font-size:1.4rem;
	line-height:1em;
    color: #333;
    text-decoration: none;
    outline: none;
	cursor:pointer;
	 font-family: 'Montserrat', sans-serif; 
	margin:15px 0;

}

/*矢印と下線の形状*/
.more_btn::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-4px;
    left:5%;
    /*下線の形状*/    
    width: 95%;
    height: 1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
}

.more_btn::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:1px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.more_btn:hover::before{
    left:10%;
}

.more_btn:hover::after{
    right:-5%;
}

/*トップページ*/
#top .about_list{ display:flex; justify-content:left; flex-wrap: wrap; align-items:flex-end; text-align:left; margin-bottom:100px;}
#top .about_list img{ width: calc(90% - 180px); max-width:760px;}
#top .about_list .text{ width:180px; padding:0 20px;}
#top .about_list .text h1{ font-size:1.4rem;}
#top .about_list .text h1 span{ font-size:1.8rem; font-family: 'Montserrat', sans-serif; padding-right:15px;}


#top .service_list,#top .sec3 div{ display:flex; justify-content:left; align-items:center; flex-wrap: wrap; margin-bottom:120px;}
#top .service_list:nth-of-type(2n){ flex-direction: row-reverse;}
#top .service_list img,#top .sec3 img{ width:50%;}
#top .service_list .text,#top .sec3 p{ width:550px; max-width:50%; padding:60px; box-sizing: border-box;}

#top .sec2,#top .sec3{ text-align:left;}
#top .sec2 h1,#top .sec3 h1{ font-size:1.6rem; margin:20px 0 40px;}
#top .sec2 h1 span ,#top .sec3 h1 span{ font-size:3.6rem; padding-right:15px; font-family: 'Montserrat', sans-serif;}
#top .sec2 h2{ font-size:2.4rem; line-height:1.4em;}
#top .sec2 h2 span{ font-size:1.4rem; display:block; }
#top .sec2 .service_list .text p,#top .sec3 p{ margin:30px 0; font-size:1.4rem; line-height:1.6em;}






/*その他*/

#service h1.title{font-family: 'Hina Mincho', serif; line-height:1.4em; text-align:left; padding:200px 0;
	/* 最小2.4rem | SP:2rem | TB:2.5rem | PC:3rem | 最大5rem */
	font-size: clamp(3.5rem, calc(3.0vw + 1.5rem), 5.5rem);}
#service p{ font-size:1.6rem; line-height:2.2em; text-align:left; padding:25px; box-sizing: border-box;}
#service .service_list_f{ margin-bottom:120px;}
#service .service_list_f img{ width:60%; float:left; margin:0 15px 15px 0; box-sizing: border-box;}
#service .service_list{ display:flex; justify-content:left; align-items:center; flex-wrap: wrap; margin-bottom:120px;}
#service #shop2.service_list{  margin-bottom:20px;}
#service #shop2_2{ text-align:left; margin-bottom:120px;}
#service #shop2_2 h2{ font-size:1.8rem; margin-top:40px;}
#service .service_list:nth-of-type(2n+1){ flex-direction: row-reverse;}
#service .service_list img{ width:55%;}
#service .service_list p{ width:500px; max-width:45%; box-sizing: border-box;}

#recruit{ text-align:left;}
#recruit h1.title{ font-size:3.0rem; line-height:1.6em; padding:200px 0 50px;}
#recruit h2{ font-size:2.4rem; line-height:1.2em; margin:80px 0 50px;}
#recruit h3{ font-size:1.8em; line-height:1.2em; margin:50px 0 30px;}
#recruit dl { width:740px; max-width:100%; display:flex; justify-content:left; align-items:top; flex-wrap: wrap; font-size:1.4rem; line-height:2em;}
#recruit dt { width: 130px; padding:10px; box-sizing: border-box;}
#recruit dd { width:calc(100% - 130px); padding:10px; box-sizing: border-box;}


#feature{ text-align:left;}
#feature h1.title{ font-size:3.0rem; line-height:1.6em; padding:200px 0 100px; font-family: 'Hina Mincho', serif;}
#feature p{ font-size:1.8rem; line-height:2.2em; width:600px; max-width:90%; margin:0 0 80px 50px;}

#philosophy{ text-align:left;}
#philosophy h1.title{ font-size: clamp(3.5rem, calc(3.0vw + 1.5rem), 5rem); line-height:1.6em; padding:200px 0 30px; font-family: 'Hina Mincho', serif;}
#philosophy h2{ font-size:1.8rem; line-height:1.4em; padding:0 0 80px; font-family: 'Hina Mincho', serif;}
#philosophy p{ font-size:1.8rem; line-height:2.2em; width:600px; max-width:90%; margin:0 0 80px 50px;}

#about{ text-align:left;}
#about h1{ font-size:2.4rem; line-height:1.2em; margin:80px 0 50px;}
#about h2{ font-size:1.6rem; line-height:1.6em; margin:80px 0 30px;}
#about dl { width:740px; max-width:100%; display:flex; justify-content:left; align-items:top; flex-wrap: wrap; font-size:1.4rem; line-height:2em;}
#about dt { width: 220px; padding:15px 20px; box-sizing: border-box; border-bottom:1px solid #999999;}
#about dd { width:calc(100% - 220px);  padding:15px 20px; box-sizing: border-box; border-bottom:1px solid #999999;}


#privacy{ text-align:left; padding-top:300px;}
#privacy h1,#privacy h2{ font-size:2rem; line-height:1.2em; margin:50px 0 30px;}
#privacy p{ width:750px; max-width:100%; margin:0; font-size:1.4rem; line-height:1.6em; }
#privacy .tel{ font-size:1.6rem; padding:10px 10px 5px 30px; position:relative;}
#privacy .tel:before{ content:""; background:url(../images/tel_icon.png) no-repeat; background-size:cover; width:26px; height:27px; position:absolute; left:0; top:5px; }

#thanks h1{ font-size:2rem; line-height:1.2em; margin:50px 0 30px;}
#contact,#thanks{ text-align:left; padding-top:300px;}
#contact p,#thanks p{ font-size:1.6rem; line-height:1.6em; width:600px; max-width:100%; margin:20px 0; text-align:left; }
#contact p a{ text-decoration:underline;}






.gmap {
position: relative;
width:960px;
padding-bottom: 50%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}





 
 
 
 
 
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}






/*1192以下 */
@media screen and (max-width: 1192px){
#top .about_list{ display:block; text-align:left; margin:0px 0 100px 0;}
#top .about_list img{ width:90%; max-width:760px;}
#top .about_list .text{ margin:15px 5% 0 auto; text-align:right; padding-right:0px;}
}


/*900以下
 */
@media screen and (max-width: 900px){
.header_nav_wrap{ display:block;}

.wrap{ margin:0 auto 0; width:95%; padding-top:50px;}
header .nav_btn{display:block;}
#top_wrap header{position: relative;}

header{position: relative;}

#top_wrap .header_wrap{ position:relative; height:auto; display:flex; padding-top:60px; width:100%; justify-content: space-between; flex-wrap: wrap; flex-flow:row;  align-items:flex-end;}
#top_wrap .header_wrap div{ width:280px;}
#top_wrap .header_wrap .header_text{ margin-bottom:20px;}
#top_wrap .contents{margin:0 auto 0; width:95%; max-width:95%; padding-top:50px;}
#top .about_list img{ width:100%;}
#top .service_list,#top .sec3 div{ display:block; text-align:center; margin:0px auto 100px auto;}
#top .service_list img,#top .sec3 img{ width:90%; max-width:760px;}
#top .service_list .text,#top .sec3 p{ max-width:90%; text-align:left; margin:15px auto; padding-right:0px; padding:30px; width:90%;}


.contents h1.title{ width:90%; margin:0 auto;}
#service h1.title{ padding:100px 0;}
#philosophy h2{ width:90%; margin:0 auto;}

}
/*870以下
 */
@media screen and (max-width: 880px){


}




/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
.spno{ display:none;}

#service .service_list_f{ margin-bottom:60px;}
#service .service_list_f img{ width:100%; float:none; margin:0 0 15px 0; box-sizing: border-box;}
#service .service_list{ display:block;  margin-bottom:60px;}
#service .service_list img{ width:100%;}
#service .service_list p{ width:auto; max-width:100%;}

#top_wrap .nav_box{ display:none;}
#top_wrap .header_wrap{ position:relative; height:auto; display:block; padding-top:60px; padding-bottom:0;}
}





@media screen and (max-width: 580px){

.header_wrap{ display:none;}

#about dl {display:block;}
#about dt { width: 100%;}
#about dd { width: 100%;}
#privacy{ padding-top:100px;}
#contact,#thanks{ padding-top:100px;}






footer{ display:block; }

footer .left_box{ width:100%; padding:0; margin:0;}
footer .right_box{ width:100%;}
footer .right_box ul{ justify-content:left; margin-top:30px;}
footer .right_box ul li{ padding:5px 15px;}



}

/*560以下 */
@media screen and (max-width: 560px){
#top_wrap .header_wrap{display:block;}
#top_wrap .header_wrap .header_text{ margin-top:40px;}



/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 70%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
	
}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
.spno2{ display:none;}







}