@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */
body {
	min-width: 1200px; min-height: 100vh; background: #fff; color: #242423;
	font-size: 16px; font-weight: normal; line-height: 1.7;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif;
	-webkit-text-size-adjust: 100%;

	display: -webkit-flex; display: -ms-flex; display: flex;
	-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}

input,
select,
textarea { font-size: 13px;}

div { -webkit-box-sizing: border-box; box-sizing: border-box;}

a { color: #242423; text-decoration: none; transition: all .7s; }
a:hover { color: #242423; /*text-decoration: underline;*/}
a:hover img { opacity: 0.75;}

#lineup-font-size-sampler { bottom: 0; left: 0;}
.fixed { width: 100%; position: fixed; top:0; left: 0; z-index: 999;}
iframe[name="google_conversion_frame"] { position: absolute; bottom: 0; left: 0;}

@media screen and (max-width: 600px) {
              body {min-width: 0; width:100%;}
              body,
              input,
              select,
              textarea { font-size: 16px;}
}


/* ---------------------------------------------------
	Base Layout
------------------------------------------------------ */
#contents_wrap,
#footer_wrap {
	padding: 0; margin: 0;
}

#footer {
	width: 1200px; padding: 0; margin: 0 auto;
	-webkit-box-sizing: border-box; box-sizing: border-box;
}

@media screen and (max-width: 600px) {
              #header,
              #gnav ul,
              #contents_wrap,
              #footer { width: 100%;}
}


/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#header { background: #fff; padding:0; width:100%; position: fixed; z-index: 30; top:0;
          -webkit-box-shadow: 0px 6px 3px -3px rgba(0,0,0,0.2); box-shadow: 0px 6px 3px -3px rgba(0,0,0,0.2);
          width:100%; justify-content: center; min-width:1200px;}
#header #logo { float:left; display: block; margin:18px 0 10px 1%; width:420px; }
#header #logo a { display: block; float:left; /*width:140px;*/width:29%; }
#header h1 { color:#444; display: block; font-weight: bold; float:right; /*width:310px;*/ width:68%; }
#header h1 span { font-size: 11px; display: block; }

#h_nav { float: right; display: -webkit-flex; display: -ms-flex; display: flex; height:100%; width: 325px;}
#h_nav li { }
#h_nav .tel-link,
#h_nav .btn { display: block; height:100%; padding: 5px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box;}
#h_nav .tel-link { background: #f8da87; font-size:24px; font-weight: bold; width:200px; }
#h_nav .tel-link span { font-size:12px; display: block;}
#h_nav .btn { background: #f6b809; color:#242423; font-size:17px; font-weight: bold; letter-spacing: -1px; padding: 18px 0; width:125px;}
#h_nav .btn:hover { }
#h_nav .btn:hover img { opacity: 1;}
#h_nav .menu-trigger { display: none;}

@media screen and (max-width: 600px) {
           #header{ position: relative; box-shadow: none; min-width:100%; max-width:100%;}
           #header #logo { display: flex; flex-direction: column; float:none; margin:0 auto; width: 100%; }
           #header #logo a { float:none; margin:10px auto; width:140px; order: 1; }
           #header h1 { float:none; width:100%; text-align: center; order: 2;}
           #header h1 span {  }
           #h_nav { float: none; height:auto; position: fixed; bottom:0; box-shadow: 0 -1px 2px -1px rgba(0,0,0,.2); width:100%; }
           #h_nav li { width:-webkit-calc(100% / 3); width:calc(100% / 3);}
           #h_nav li a,
           #h_nav .tel-link,
           #h_nav .btn,
           #h_nav .menu-trigger { display: block; height:100%; width:100%;}

           #h_nav .tel-link b { background:url(../img/ico_tel.png) no-repeat center center; background-size:25px auto; text-indent:-9999px; display: block;}
           #h_nav .btn { background:url(../../common/img/ico_mail.png) no-repeat center 35% #f6b809; background-size:30px auto;
                         font-size:12px; padding: 40px 0 0 0 ;}
           #h_nav .menu-trigger { background:#635b58; position: relative; transition: all .7s;}
          .menu-trigger span { background:#f4f3f1; display:block; height: 3px; margin:0 calc(50% - 20px); transition: all .7s; position: absolute; width: 40px;
                         box-sizing: border-box; border-radius: 1px;}
          .menu-trigger span:nth-of-type(1) { top: 20px; }
          .menu-trigger span:nth-of-type(2) { top: 27px; }
          .menu-trigger span:nth-of-type(3) { top: 34px; }
          .menu-trigger span:nth-of-type(4) { bottom:0; background: none; }
          .menu-trigger span:nth-of-type(4)::before { content: "MENU"; color:#f4f3f1; font-size: 13px; position: absolute; bottom:2px; }
          .menu-trigger.active span:nth-child(1) { top: 26px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }
          .menu-trigger.active span:nth-child(2) { width: 0; left: 0; opacity: 0; }
          .menu-trigger.active span:nth-child(3) { top: 26px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
          .menu-trigger.active span:nth-of-type(4):before { content: "CLOSE"; font-size: 11px; color:#f4f3f1;letter-spacing: 1px; }
}


/* ---------------------------------------------------
	G-nav
------------------------------------------------------ */
.close_menu { display: none;}

#gnav {float:right; width:420px;}
#gnav ul { display: flex; width:100%;}
#gnav li { width: 33%; /*height: 50px; -*/webkit-box-sizing: border-box; box-sizing: border-box;}
#gnav li:nth-last-child(2) { border-right:0;} /* 最後の閉じるボタンを抜かして一番最後のリスト */
#gnav a { color:#242424; display:block; font-size:15px; font-weight: bold; padding: 18px 0; text-align: center; width:100%; }
#gn_home,
#gn_04,
#gn_05,
#gn_06,
#gn_07{ display: none;}
#gnav a:hover {}
#gnav .nav_logo { display: none; margin:10px 0 0 0; }
#gnav .nav_logo h1 { color:#e5e5e5; float:none; width:100%; text-align: center;}
#gnav .nav_logo a { display: block; margin:10px auto 0 auto; padding:0; width:180px;}

@media screen and (max-width: 600px) {
            #gnav { background:#635b58; height:-webkit-calc(100% - 70px); height:calc(100% - 70px); float:none; overflow: auto; padding: 0;
                            margin:0; position: fixed; top: 0; right: 0;
                            transition: all 0.7s; transform: translateY(100%); visibility: hidden; width:100%; z-index: 29;}
            #gnav ul { flex-direction: column; margin: 30px auto 0; width: 90%; -webkit-box-sizing: border-box; box-sizing: border-box;}
            #gnav li{ font-size:16px; display: block; height:70px; line-height: 70px; width: 100%; }
            #gnav li a { color:#e5e5e5; text-align:left;}
            #gnav li a::before { content: attr(data-en) "";  color:#f6b809; font-size:22px; font-family: Helvetica, Arial, "sans-serif";
                            margin-right:10px; transition: all 0.7s; }
            #gnav .nav_logo { display: block;}
            #gn_home,
            #gn_04,
            #gn_05 { display:block;}
            #gnav.open { height:-webkit-calc(100% - 70px); height:calc(100% - 70px); overflow: auto; position: fixed; top: 0; right: 0;
                             transform: translateY(0); opacity: 1; visibility: visible; width:100%; z-index: 1000;}
}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#main_img { margin: 0 auto; text-align: center; width: 100%;}
#main_img h2 { font-size: 30px; font-weight: bold;}


/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
#contents_wrap { clear: both; padding: 5px 0 55px; flex-grow: 1; width:100%; overflow-x: hidden;}
/* section */
#contents_wrap section { margin: 0 auto;}
section { width:100%; }
section .inner { margin:0 auto; padding:0 20px; width:1200px; box-sizing: border-box;}
section h3 { font-weight: bold; font-size:40px; padding:20px 0;}


@media screen and (max-width: 600px) {
	            #contents_wrap { width: 100%; padding: 0 0 55px;}
              section .inner { padding:0 2%; width:100%;}
              section h3 {font-size:20px;}
}


/*lead_col*/
#lead_col { padding:30px 0; position: relative;　z-index: 3; width:100%; overflow: hidden; }
#lead_col .inner { margin:60px auto; }
#lead_col p.description { margin: 5px 0 0; font-size:18px;}
#lead_col p.description span { background:#f3d16f;  padding:0.4em 3px;}
#lead_col::before { content:"";  top:0; left:0; position: absolute; overflow: hidden;
           -webkit-transform-origin: left center;
          -ms-transform-origin: left center;
          transform-origin: left center;
          -webkit-transform: rotate(-5deg);
          -ms-transform: rotate(-5deg);
          transform: rotate(-5deg);
          background:#f6b809; margin: 0 -10% ; height:445px; width:120%; z-index: -1;}

#lead_col h2{ font-size:60px; font-weight: bold; margin:25px 0 15px;}

/* breadcrumb */
#contents_wrap #breadcrumb { margin: 0 auto 0; width: 100%; font-size: 12px; text-align: right; }
#contents_wrap #breadcrumb li { display: inline-block; line-height: 1.6;}
#contents_wrap #breadcrumb li:before { content: '>'; margin: 0 5px;}
#contents_wrap #breadcrumb li:first-child:before { display: none;}
#contents_wrap #breadcrumb li a { text-decoration: underline;}

@media screen and (max-width: 600px) {
              #lead_col .inner { margin:0 auto 60px auto; }
              #lead_col h2{ font-size:30px; margin:30px 0 0; text-align: center;}
              #lead_col p.description { font-size:14px; line-height: 1.8;}
							#lead_col p.description span { padding: 0.3em 3px;}
	            #contents_wrap #breadcrumb { display: none;}
}






/*一部　トップページ・業務内容ページとも共通につき記述*/
.box1.service>ul li span { background: #FFF; border: solid 1px #242423; display: block; font-size:20px;
            padding: 10px; position: relative; text-align: center; width:8em; z-index: 5; box-sizing: border-box; }
.box1.service>ul li span::before,
.box1.service>ul li span::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.box1.service>ul li span::before { z-index: 6;}
.box1.service>ul li span::after { z-index: -1;}
.box1.service dl { background:#f6b809; border-radius: 30px; padding:20px; position: relative; text-align: center; box-sizing: border-box;}
.box1.service dt { background:url(../../img/staff01.png) no-repeat center center; background-size:90px auto; font-size:26px;
            margin-left:30px; padding-top:40px; width:110px; }
.box1.service dd li { background:#fff; border:3px solid #333; border-radius: 30px; font-size:18px; margin-bottom:10px; padding:10px; }



.box2.service .img { display: block; margin-left:10%; width:36%;}
.box2.service .img * { display: block; text-align: center; box-sizing: border-box; }
.box2.service .img ul { background:#f6b809; border-radius: 50%; font-size: 20px; height:8em; margin: 15px auto 0 auto;
            padding-top:1.5em; width:8em;}
.box2.service .img>span { background:#242423; border-radius: 50%; color:#f6b809; padding-top:2.2em; height:6em; width:6em; position: relative; }
.box2.service .img>span::after { content:""; height:0; width:0; display: block;
            border-top: 10px solid transparent; border-right: 20px solid #242423; border-bottom: 10px solid transparent;
            position: absolute;}
.box2.service .img>span::before { content:""; display: block; height:120px; position: absolute; width:80px;}
.box2.service .img>span:first-of-type { float:left; }
.box2.service .img>span:first-of-type::before { background:url("../../img/staff02.png")no-repeat; background-size:80px auto; right:-60px; top:6em; }
.box2.service .img>span:first-of-type::after { right:0; top:80%; transform: rotate(-135deg);}
.box2.service .img>span:last-of-type { float:right;}
.box2.service .img>span:last-of-type::before { background:url("../../img/staff03.png")no-repeat; background-size:80px auto; left:-60px; top:6em; }
.box2.service .img>span:last-of-type::after { left:0; top:80%; transform: rotate(-45deg);}
/**/



/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
#pagetop { display:block; position: fixed; bottom: 10px; right: 10px; z-index: 99;}
#pagetop a { background:#f6b809; border-radius: 50%;/*color:#fff;*/ display: block; font-size:13px; padding:10px 0 0 0; width: 48px; height: 48px; line-height: 1; text-align: center; box-sizing: border-box;-webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.2); box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.2);}

#footer_wrap { background: #efede1;}
#footer { padding: 25px; line-height: 1.6;}
#footer a:hover { }
#f_nav .acc_tit { display: none;}
#f_nav { margin-bottom:60px; }
#f_nav ul { display:block;}
#f_nav li { display: inline; font-weight: bold; font-size:17px; }
#f_nav ul >div{margin-top: 10px;display: inherit;}
#f_nav .sns img { width:34px;}
#f_nav li:last-of-type img{ width:34px;}
#f_nav li a { padding: 10px 12px;}
#f_nav li a:hover {text-decoration: underline;}
#f_logo { color:#636466; float: left; font-style: normal; width: 450px;}
#f_logo img { display: block; margin: 0 0 10px; width:220px;}
#f_logo address span:not(.wbr) { display: block;}
#f_logo address span.wbr { padding-right:1em;}
#f_logo address span:first-of-type { margin-bottom:30px;}
#copyright { padding: 15px 0 0;}

#footer .contact li a,
#footer .contact li .tel-link{ background:#f6b809; }

.contact { float:right; width:48%; }
.contact li { margin-bottom:20px; }
.contact li a ,
.contact li .tel-link{ display: block; height:100px; width:100%; box-sizing: border-box;}
.contact li:first-of-type { font-size:18px; font-weight: bold; }
.contact li:first-of-type a { padding:38px 0 0 35px; position: relative;}
.contact li:first-of-type span { position: relative;}
.contact li:first-of-type span::after { content:""; display: block; background:url("../../common/img/ico_mail.png") no-repeat; height:22px; width:30px; background-size:30px auto; position: absolute; right:-35px; top:0;}
.contact li .tel-link { padding:20px 0 0 35px;}
.contact li .tel-link b { font-size:30px; font-weight: bold; margin-left:30px; position: relative;}
.contact li .tel-link b::after {content:""; display: block; background:url("../../common/img/ico_tel.png") no-repeat; height:35px; width:28px; background-size:28px auto; position:absolute; left:-30px; top:0; }
.contact li .tel-link span { display: block;}

@media screen and (max-width: 600px) {
              #pagetop { bottom: 80px;}
              #footer { padding: 25px 4% 80px; -webkit-box-sizing: border-box; box-sizing: border-box;}
              #f_logo { width: 100%; float: none; text-align: center;}
              #f_logo img { margin: 0 auto 15px;}
              #f_logo address span.wbr { display: block; padding-left:0;}

              #f_nav { width: 100%; max-width: none; float: none;}
              #f_nav .acc_tit { border:1px solid #bbb; cursor: pointer; display: block; font-size:14px;  padding: 7px 25px; margin: 15px 0 15px;
                          position: relative; text-align: center; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;}
              #f_nav .acc_tit::before { content:""; display: block; background:#635b58; height:14px; width:14px;
                          position: absolute; top: 30%; right:10%; z-index: 5;}
              #f_nav .acc_tit::after { content: ""; height: 0; width: 0;
                          border-style: solid; border-width: 8px 4px ; border-color: #fff transparent transparent transparent;
                          position: absolute; top: 30%; right:10%; margin:3px 3px 0 0 ; z-index: 6;}
              #f_nav .acc_tit.active::after { transform: rotate(180deg); top: 8%; right:10%; margin:3px 3px 0 0 ;}
              #f_nav ul { display: block; padding: 0 10px; text-align: left;}
              #f_nav li { display:block; margin-right: 2%; width: 98%;
                          -webkit-box-sizing: border-box; box-sizing: border-box;}
              #f_nav li a {display:block; margin-bottom:10px; padding: 10px 10px; width:100%;}
              #footer .contact { display: none; }
              #f_nav ul >div{display: flex;width: 150px;}
}



/* ---------------------------------------------------
	clear
------------------------------------------------------ */
section:after,
#header #logo:after,
#header:after,
#nav_wrap:after,
#gnav ul:after,
#contents_wrap:after,
#footer:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}



/* ---------------------------------------------------
	更新履歴
------------------------------------------------------

180205_kamiguchi_更新履歴コメントひな形追加
180228_〇〇_cssを更新したらここに更新履歴を追加していきます。多くなったら上の方は削除。

------------------------------------------------------ */