*{margin:0;padding:0;}
*, *:after, *:before ,#service ul li img,.browserback,#service{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
ul, ol{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}

/*font*/
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
body{ font-family: メイリオ; font-weight: 300;}
h1{font-size:24px; font-weight:normal;}
h2{font-size:26px; font-weight:normal;}
h3{font-size:28px; font-weight:normal;}
h4{font-size:18px; font-weight:normal;}
p,#thanks h4{font-size:14px; font-weight:normal;}
h6{font-size: 12px; font-weight: normal;}
h5,#footer ul li,footer h3,footer ul li h4,footer p,footer address h4,footer address p{font-size:10px; font-weight:normal;}

#brand { font-family: 'Pacifico', cursive;}

#bigbtn a h4,#bigbtn a h5,#top_bigbtn a h4,#top_bigbtn a h5,.browserback a,#footer_bigbtn a h4,#footer_bigbtn a h5{color:#FFFFFF;}
#brand a,fotter,footer a,nav a{color:#000000;}
#salespoint,#salespoint h4,#salespoint p{font-weight: 600; line-height: 30px;}
.browserback a:hover{color: #5B5B5B}

#service ol li h4{font-wight:900;margin: 5px;line-height: 28px; font-size: 20px;}
#service ol li p{font-wight:300;margin: 5px;line-height: 20px; font-size: 14px;}

/*line-heght*/
nav,nav ul,nav ul li{line-height:100px;}
#brand h5,#mainpage_box h6{line-height:13px;}
#brand h1,#bigbtn a h4,#top_bigbtn a h4,#mainpage_box h3,#thanks h4,#access h4,#footer_bigbtn a h4{line-height: 26px;}
#bigbtn a h5,#top_bigbtn a h5,.browserback a,#footer_bigbtn a h5,footer ul li{line-height: 20px;}

/*text-aligin & color*/
#brand,#bigbtn,#top_bigbtn,#mainpage_box h3,#footer,#box h2,#box h5,#mainpage_box h2,#mainpage_box h5,#salespoint,caption,th,#mainpage_box h6,#top_corporate-philosophy h4,#top_corporate-philosophy h5,.browserback,#portrait h4,.error h4,#footer_bigbtn,footer ul li{	text-align: center;}
.cnt02,#access h4,#access h5{	text-align: left;}
.cnt01{text-align:right;}
.cnt01{vertical-align: top;}


body{color: #000000;}
a, a:hover, .active{color: #E4007F;text-decoration: none;}
a:active, a:focus,input:active, input:focus{outline:0;}

/*background*/
body,header,#bigbtn ol,#footer_bigbtn ol{background: #ffffff;}
#portrait, footer ,.corporate_wrapper,.corporate_text:nth-child(1),.corporate_text:nth-child(2),.corporate_image01,.corporate_image02{background-color: #F6F6F6;}
.browserback a{background-color: #CACACA;}
.browserback a:hover{background-color: #DEDEDE;}
.btn_entry a {background-color: #8FC31F;}
.btn_contact a {background-color: #2EA7E0; }
.btn_entry a:hover {background-color: #8FC31F; opacity: 0.6;}
.btn_contact a:hover {background-color: #2EA7E0; opacity: 0.6; }


#brand{background: url("../images/rogo_FFF.png"); }
#main_view{background: url(../images/img_mainview.jpg);}
.corporate_image01{background-image: url("../images/img_top_corporate01.jpg");}
.corporate_image02{background-image: url("../images/img_top_corporate02.jpg");}
#salespoint{background-image: url("../images/img_top_salespoint01.jpg");}
#ctn01{	background: url("../images/img_service_cnt01.jpg");}
#ctn02{	background: url("../images/img_service_cnt02.jpg");}

#brand{background-position: 20px 10px;}
#brand{background-size:60px;}

#main_view{background-size:100% auto;}
#main_view{background-position: 60%  ;}

#brand,#main_view,#salespoint,.corporate_image01,.corporate_image02,#ctn01,#ctn02{background-repeat: no-repeat;}
#salespoint,.service_outterbox{background-size: cover;}
.firstview{object-fit: cover;}


/*border*/
img,abbr,acronym,fieldset{border:0;}
#brand h1{border-bottom: 1px solid #000000;}
#bigbtn a h4,#top_bigbtn a h4,#footer_bigbtn a h4,#mainpage_box h3,.corporate_text h4{border-bottom: 1px solid #E4007F;}
#access h4,#access h5{border-left: 5px solid #E4007F; padding-left: 10px;}
.browserback{border: 1px solid #7E7E7E; border-radius: 2px;-webkit-border-radius: 2px;/* for Safari and Chrome */-moz-border-radius: 2px; /* for Firefox */-o-border-radius: 2px; /* for opera */}
.cnt02{border-left: #1D2088 7px solid;}


/* clear & overflow */
nav ul li::after,#bigbtn ol li::after{overflow:hidden;}
nav ul li::after,#bigbtn ol li::after{content:"";}
#bigbtn,#top_bigbtn,#footer,nav ul li::after,#bigbtn ol li::after,#top_corporate-philosophy,.corporate_wrapper,#salespoint,#box,#main_view,#access::after,footer h3,#footer_bigbtn::after{clear: both;}
#brand,#portrait img,#portrait section,#bigbtn ol li,#top_bigbtn ol li,#footer_bigbtn ol li,.corporate_image01,.corporate_text:nth-child(2),#access iframe,#access ol,footer ul li,#service ul li{float: left;}
.corporate_image02,.corpo,rate_text:nth-child(1){float: right;}


/*width*/
#company ol,#thanks h4,#access,footer ul{width: auto;}

img,a, a:hover, .active,#box h2,#box h5,corporate_wrapper,header,#bigbtn,#footer_bigbtn,#footer_bigbtn a ol,#main_view,#top_bigbtn,#box,fotter,#bigbtn ul li a,#top_bigbtn ul li a,header img,#salespoint,#top_corporate-philosophy h5,.browserback a,#mainpage_box,#main_view,#portrait,#portrait h4,#service,#service ul,.service_outterbox,.firstview{	width: 100%;}
#access,#mainpage_box h6{width: 70%;}
#bigbtn ol li,#top_bigbtn ol li,.corporate_image01,.corporate_text:nth-child(2),#access iframe,#access ol,.corporate_image02,.corporate_text:nth-child(1),#footer_bigbtn ol li{width: 50%;}
.cnt01{width:40%;}
#service ul li{width: 33%;}
footer ul li{width:20%;}

#bigbtn ol li h4,#top_bigbtn ol li h4,#footer_bigbtn ol li h4{width:10em;}
.browserback{width: 6em;}
#mainpage_box h3{width: 38em;}
#brand h1{width: 15em;}
#brand h5{width: 35em;}
.corporate_text h4{width: 14em;}

.cnt02{width:calc(60% - 87px);}

footer ul{max-width: 1000px;}

/*height*/
a, a:hover, .active,.browserback a,#portrait,#footer_bigbtn ol li a{height: 100%;}

img,header img,#box,.cnt01,.cnt02,#salespoint,.browserback,#top_corporate-philosophy,#service ul li,.firstview,footer{height: auto;}

.service_outterbox{height: 700px;}
#main_view{height: 500px;}
.corporate_wrapper,.corporate_text,.corporate_image01,.corporate_image02{height: 400px;}
#access{height: 390px;}
#toppage{height: 100px;}
#bigbtn,#bigbtn ol,#bigbtn ol li,#bigbtn ul li a,#top_bigbtn,#top_bigbtn ol,#top_bigbtn ol li,#top_bigbtn ul li a,#footer_bigbtn,#footer_bigbtn ol,#footer_bigbtn ol li{height: 80px;}
footer ul{height: 40px;}

/*margin & padding*/
*,#main_view,#company ol{margin:0 ;}
*{padding: 0;}
#bigbtn ol li a,#bigbtn ol li h4,#bigbtn ol li h5,#top_bigbtn ol li a,#top_bigbtn ol li h4,#top_bigbtn ol li h5,#mainpage_box h3,#access ol,#access,#mainpage_box h6,.corporate_text h4,#thanks,#thanks h4,footer ul,#footer_bigbtn ol li h4,#footer_bigbtn ol li h5{margin: auto;}
#portrait{margin:160px auto;}
.inner,#top_corporate-philosophy,#access,.browserback,#thanks{margin: 80px auto;}

#company ol li,#brand ,#service ol li{margin: 20px 0;}
#footer ul{margin: 20px auto;}
#salespoint{margin: 80px 0 0 0;}

.fixed{margin-top: 100px;}
#company ol li:nth-child(1) {margin-top: 0;}
#footer{margin-top:40px; }

#portrait h4{margin-bottom: 40px;}
#access h5{margin-bottom: 20px;}
#bigbtn ol li h5,#top_bigbtn ol li h5,#footer_bigbtn ol li h5{margin-bottom: 12px;}

.corporate_text,#salespoint,#service ul li{padding: 40px;}
#company ol ,#portrait{padding: 80px 0;}
.paddingtop{padding:40px 0; }
#mainpage_box h3,#mainpage_box h6{padding: 10px 0;}
#top_corporate-philosophy h4{padding: 0 0 5px 0;}
#top_corporate-philosophy h5{padding: 5px 0 20px 0;}
#brand h1,#brand h5{padding:5px 0; margin-left: 100px;}
#bigbtn ol li h4,#top_bigbtn ol li h4,browserback,#footer_bigbtn ol li h4{padding-top:20px;}
#top_bigbtn{opacity: 0.9; padding-top: 500px;}
#box{padding-top: 180px;}
#mainpage_box{padding-top: 80px;}
.cnt01,.cnt02{padding-right:40px;}
.cnt02{padding-left:40px;}
#access iframe{padding: 0 0 0  40px;}
#service ul li img{padding: 0 80px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
footer{padding-bottom: 40px;}

/*position*/
.service_outterbox{position: relative;}
header,.fixed{position: fixed;}
#main_view,#salespoint{background-attachment:fixed;}
a.anchor{
    display: block;
    padding-top: 180px;
    margin-top: -180px;
}

/*z-index*/
header{z-index: 100;}
#top_bigbtn a,#top_bigbtn,#main_view,#top_corporate-philosophy,#salespoint{z-index: 1;}
nav ul li a{z-index: 2;}

/*dispray*/
#brand a,nav li a,#brand h1 a,#brand h5 a ,#bigbtn ol li a,#top_bigbtn ol li a,#footer_bigbtn ol li a,.btn_contact h4 a,.btn_entry h4 a,#mainpage_box h3,#mainpage_box h6,.corporate_image01,.corporate_image02,.corporate_text,.corporate_text h4,.corporate_text p,#access ,.browserback a,footer a,#portrait h4{display: block;}
.cnt01,.cnt02{	display: inline-block;}
legend,.nav-unshown {display:none;}/*チェックボックス等は非表示に*/


/*transform*/
a{-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}
nav ul li,nav ul li::after,#bigbtn ol li h4,#bigbtn ol li h5,#bigbtn ol li h4::after,#bigbtn ol li h5::after,nav ul li a,#footer_bigbtn ol li a h4,#footer_bigbtn ol li a h5 {transition:all .5s ease;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;}


/*COMPANY*/
#portrait_inner{ width: 80%; max-width: 1000px; margin:0 auto;  min-height: 300px; display:block;}
#portrait img {width: 30%; max-width: 400px; min-width: 200px; height: auto; padding:0 40px;}
#portrait section{width: 70%;}
#portrait section:after {clear: both;}


/*Service*/
.service_textbox{position: absolute; width: calc(50% - 80px); padding: 40px; height:  calc(100% - 80px); background-color: rgba(255,255,255,.8);top:40px;bottom: 40px;}
#ctn01 .service_textbox{left: 40px;}
#ctn02 .service_textbox{right: 40px;}

.contents_name{	width: 100%;	height: 100px;	padding: 20px;	line-height: 60px;	border-left:5px solid  #E4007F;	background-color: rgba(255,255,255,1);}

.ather_srevice ,.ather_srevice h4,.ather_servicelist strong{width: 100%;}
.ather_srevice h4,.ather_servicelist strong{text-align: center;}
.ather_servicelist strong, .ather_servicelist section{display: block;margin: 40px 0;}
.ather_servicelist p{text-align: left;}

.atherservice_img{width: 100% ;}
.atherservice_img img{width: 100% ; height: auto;	display: block; border-radius:  50% 50%;-webkit-border-radius: 50% 50%;/* for Safari and Chrome */-moz-border-radius: 50% 50%; /* for Firefox */-o-border-radius: 50%  50%; /* for opera */
}

/*------------------ディバイス設定------------------*/
@media only screen and (max-width: 1500px){
#main_view{background-position: 60% 100px}}
@media only screen and (max-width: 1280px){
#access,#access iframe{height: 400px;}
#main_view{background-size:auto 500px ;}
}
@media only screen and (max-width: 1190px){
#ctn01{	background-position:-290px 0 ;}
#mainpage_box h3 {width: 90%;margin: auto;line-height: 36px;}
#service ul li img{padding: 0 20px;}
}
@media only screen and (min-width: 950px){
#brand{	width: 500px;}
#brand h1,#brand h5{	width: 400px;}
nav{	float: right;}
nav{height:100px;}
#brand{height: 60px;}
header{height: 180px;}
nav{width: calc(100% - 500px); height: 100px;}
nav ul{width: 100%;}
nav ul li{	width : 20% ;	float: left;	padding: 0;	text-align: center;height: 100px;line-height: 100px; background-color: #FFFFFF;}
#access ol{padding: 80px 0;}
#thanks{width: 500px;}
#portrait img {padding:0 40px 0 0;}
}
@media only screen and (max-width: 950px){
body{font-size:14px;}
header{height:200px;}
a#menu{		display:none;}	
.panel{		display:block !important;}
#brand,#thanks h4{width: 500px;float: none;font-size: 18px;}
nav{clear: both;}
nav,nav ul{width: 100%;float: none;height: 60px;}
nav ul li{	width : 20% ;	float: left;	padding: 0;	text-align: center;height: 60px;line-height: 60px; background-color: #FFFFFF;}
#box {    padding-top: 220px;}
.cnt02{width: 60%;}
.cnt01{width: 40%;}
.cnt01,.cnt02{padding: 0 10px;}
#portrait{width:100%;position: relative; height: 650px;}
#portrait_inner,#thanks,#contact,#service{ width: 80%; max-width: 1000px; height: auto; display:block;}
#portrait img,#portrait section{float: none;}
#portrait img {position: absolute; width: 300px; height: auto;left: calc(50% - 150px); text-align: center;}
#portrait section{position: absolute; top: 400px; width: 90%; height: auto; left: 5%;right: 5%;}
#portrait section:after {clear: both;}
.corporate_wrapper, .corporate_image01,.corporate_image02, .corporate_text {height:400px; }
.corporate_image01,.corporate_image02{background-size: auto 100%;background-position: center;}
.service_textbox{
	width: calc(100% - 80px);
	height:  calc(100% - 80px);
	}
.contents_name{
	height: 60px;
	padding: 15px;
	line-height: 30px;
	font-size: 20px;
}
#access{height: 240px;}
#access ol{height: 240px; padding:0;}
#access iframe {padding:0 0 0 20px; height: 240px;}
	#service{width: 100%;}
#service ul li img{padding: 0px;}
#service ul li{padding: 20px}

#ctn01{	background-position:-500px 0 ;}
#ctn02{	background-position: left;}
#main_view{ background-position:60% 150px;}
}
@media only screen and (max-width: 800px){
	#access{height: auto; margin: 40px auto;}
	#access iframe{float: none;width: 100%;margin: 0;}
	#access ol{float: none;width: 70%;margin: auto;padding: 20px 0;height: auto;}
	#main_view{background-size: auto 500px; height: 500px;}
	#top_bigbtn{padding-top: 420px;}
}

@media only screen and (max-width: 750px){
.panel{		display:block !important;}
#brand{width: 450px;float: none; background-size: 40px;background-position: 10px;}
#brand h1{line-height:18px; margin-left: 60px;}
#brand h5{line-height:9px; margin-left: 60px;}

nav{clear: both;}
nav,nav ul{width: 100%; float: none; height: 60px;}
nav ul li{	width : 20% ;	float: left;	padding: 0;	text-align: center;height: 60px;line-height: 60px; background-color: #FFFFFF;}
	
#portrait{height: 700px;}
#service ul li{width: 100%;float: none;}
#ctn01{	background-position:-700px 0 ;}
#ctn02{	background-position:-200px 0 ;}
.atherservice_img{width: 100%;margin: auto;}
.atherservice_img img{width: 60%;margin: auto;}
#portrait section{width: 80%; left: 10%;right: 10%;}
	
#main_view{ background-position: 70% auto; height: 450px;background-size: auto 450px;}
#top_bigbtn{padding-top: 450px;}
.corporate_wrapper{height: auto; width: 100%;}
.corporate_image01,.corporate_image02 {float: none;clear: both;width: 100%;height: 400px;}
.corporate_text:nth-child(1), .corporate_text:nth-child(2),.corporate_text{float: none;clear: both;width: 100%;min-height: 300px;height: auto;}
}
@media only screen and (max-width: 600px){
#main_view { height: 350px;background-size: auto 350px;}
#top_bigbtn {padding: 350px 0 0 0 ;}
#mainpage_box {padding-top: 80px;}
}
@media only screen and (max-width: 500px){
header,#toppage {height: 60px;}
.panel{display:block !important;}
h1,h3{font-size:16px;}

#brand{width:  calc(100% - 90px);float: left; background-size: 30px;background-position: 5px; height: 60px;margin: 0;text-align: left;margin-right:0;}
#brand h1{line-height:18px;line-height: 24px;height: auto;width: 15em;text-align: left; margin-left:40px;}
#brand h5{line-height:9px;height: auto; width: 15em;text-align: left;margin-left:40px;margin-right:0;}

#main_view { height: 350px;background-size: auto 350px;background-position: 70% 60px;position: relative;}
#bigbtn,#top_bigbtn{clear:both;position: absolute;}
#footer_bigbtn{clear:both;position: static;}
#bigbtn,#top_bigbtn,#footer_bigbtn{height: 45px;}
#bigbtn{top: 60px;}
#top_bigbtn{top: 0;}
#bigbtn ol,#bigbtn ol li,#top_bigbtn ol,#top_bigbtn ol li,#footer_bigbtn ol,#footer_bigbtn ol li{height: 45px;}
#bigbtn ol li a,#bigbtn ol li h4,#bigbtn ol li h5,#top_bigbtn ol li a,#top_bigbtn ol li h4,#top_bigbtn ol li h5#footer_bigbtn ol li h4 ,#footer_bigbtn ol li h5 ,#footer_bigbtn ol li a{margin: auto;overflow: hidden;}
#bigbtn ol li h4,#top_bigbtn ol li h4,#footer_bigbtn ol li h4{padding-top:7px;line-height: 18px; width: 6em;height: 25px;;overflow: hidden;}
#bigbtn ol li h5,#top_bigbtn ol li h5,#footer_bigbtn ol li h5{margin-bottom: 5px;line-height: 16px;}

nav#nav-drawer{   position: absolute; width: 30px; height: 30px ;right:10px;top:20px;margin-right:0;}
#nav-open{    position: absolute;width: 30px;height: 30px ;right:0;top:0;}
nav ul{width: 100%;height: 60px;}
nav ul li{	width : 100% ;	float: none;	padding: 0;	text-align: center;height: 20vh;line-height: 20vh; background-color: #FFFFFF;}
nav ul li a{position: relative; transition: .3s;}
nav ul li a:hover{background-color: #E4007F; color: #FFFFFF;}
nav ul li a::before {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: -1;  content: ''; transform-origin: right top;  transform: scale(0, 1);  transition: transform .3s;}
nav ul li a:hover::before {  transform-origin: left top;  transform: scale(1, 1);}	

#box{padding-top: 100px;}
#mainpage_box{padding-top: 40px;}
#mainpage_box h3{line-height: 24px;}
.ather_servicelist strong,.ather_servicelist section{margin: 20px 0;}
.cnt02{width: 70%;}
.cnt01{width: 30%;}
.cnt01,.cnt02{padding: 0 10px;}

.inner{margin: 40px auto;}
#box ol{padding: 40px 0;}
#portrait{min-height: 850px; height: auto; margin: 80px auto; padding: 40px 0;}
#nav-drawer { position: relative;}
#ctn01{	background-position:-750px 0 ;}
#ctn02{	background-position: -400px 0;}
#thanks h4{width: 90%; margin: auto;}
#access ol {width: 100%;}
#access iframe{padding: 0 0 0 0 0;}
	
#top_bigbtn {padding: 350px 0 0 0 ;}
/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンCSS*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;-webkit-border-radius: 3px;/* for Safari and Chrome */-moz-border-radius: 3px; /* for Firefox */-o-border-radius: 3px; /* for opera */
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 999;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}}
@media only screen and (max-width: 480px){
.service_outterbox{	height:1000px;}
#thanks h4{width: 90%; margin: auto;}
#ctn01{	background-position:-1200px 0 ;background-size:cover ;}
#ctn02{	background-position: -600px 0;background-size:cover ;}
}
@media all and (-ms-high-contrast: none){
	.atherservice_img img{width: 100% ; height: auto;	display: block; border-radius:  100% 100%;}
}