*{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;}
#footer h2,#footer h4{font-size:14px; font-weight:normal;}
p,#thanks h4,#salespoint h4{font-size:14px; font-weight:normal;}
h6,.corporate_wrapper ul li sapn,footer ol{font-size: 12px; font-weight: normal;}
h5,footer p,footer p,footer ol span{font-size:10px; font-weight:normal;}

#brand,nav { font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}

.browserback a,#brand h1 a,nav ul li a{color:#FFFFFF;}
fotter,footer a,#salespoint{color:#000000;}
#brand h1,nav{font-weight: 300; line-height: 40px; text-shadow: 0 0 40px #000000;}
#navber_wrapper.fixed #brand h1,#navber_wrapper.fixed nav{text-shadow: none;}
.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;}
#brand h1 a,nav ul li a{font-weight: 700;}
#brand h1{font-size: 48px;}

/*line-heght*/
#brand,#brand h1,#brand h1a,nav,nav ul,nav ul li{line-height:100px;}
footer h2,#salespoint h4{line-height: 40px}
#mainpage_box h3,#thanks h4{line-height: 26px;}
.browserback a{line-height: 20px;}

/*text-aligin & color*/
#brand,#mainpage_box h3,#footer,#box h2,#box h5,#mainpage_box h2,#mainpage_box h5,caption,th,#mainpage_box h6,#top_corporate-philosophy h4,#top_corporate-philosophy h5,.browserback,#portrait h4,.error h4,#salespoint,#commodity,#service p,nav,.thanks p{	text-align: center;}
.cnt02,footer ol{	text-align: left;}
.cnt01{text-align:right;}
.cnt01{vertical-align: top;}


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

/*background*/
body,header{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;}
#salespoint h4,#commodity ol li .mask_commodity{background-color: rgba(246,246,246,.8)}

#brand{background: url("../images/rogo_FFF.png") cover; }
header{background:no-repeat; background-position: center;}
header.top{background: url("images/img_ct00mainview.jpg");}
header.company{background-image: url("images/img_ct00company.jpg");}
header.store{background-image: url("images/img_ct00store.jpg");}
header.contact{background-image: url("images/img_ct00contact.jpg");}
header.commodity{background-image: url("images/img_ct00commo.jpg");}
header.error{background-image: url("images/img_ct00404.jpg");}
header.thanks{background-image: url("images/img_ct00thanks.jpg");}
#salespoint{background-image: url("images/img_ct02.jpg");background-size: cover;background-position: right;}

#toppage,#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;}
.corporate_text h4{border-bottom: 1px solid #0000FF;}
.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;}
footer h2{border-bottom: 1px dashed #7E7E7E;}


/* clear & overflow */
nav ul li::after,#bigbtn ol li::after{overflow:hidden;}
nav ul li::after,#bigbtn ol li::after{content:"";}
footer,nav ul li::after,#top_corporate-philosophy,.corporate_wrapper,#salespoint,#box,#toppage,footer p,footer ol:nth-child(1),.season,footer,inner{clear: both;}
#brand,#portrait img,#portrait section,.corporate_image02,.leftbox,footer ul li,#service ul li,footer ol,footer h2,.season ul li,#commodity ol li,nav li{float: left;}
.corporate_image01,.corpo,.rightbox,nav{float: right;}

.season ul li a {display: block;}


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

thml,body,img,a, a:hover, .active,#box h2,#box h5,.corporate_wrapper,header,header img,#salespoint,#top_corporate-philosophy h5,.browserback a,#mainpage_box,#portrait,#portrait h4,#service,#service ul,.service_outterbox,.firstview,#navber_wrapper,#toppage,footer h2,#commodity ol,#commodity ol li .mask_commodity,footer h2{	width: 100%;}
#mainpage_box h6,#business{width: 70%;}
nav,.corporate_image01,.corporate_text:nth-child(2),.corporate_image02,.corporate_text:nth-child(1),#commodity h2,#commodity p,.season ul{width: 50%;}
.cnt01,#salespoint h4{width:40%;}
#service ul li{width: 33%;}
#commodity ol li{width: calc(50% - 160px);}
nav ul li,.season ul li{width:25%;}
#brand{width: auto;}

.browserback{width: 6em;}
#mainpage_box h3{width:100%;}
.corporate_wrapper ul{width: 18em;}
footer ol,#business ol{width: 25em;}
#footer_storinfo{width: calc(33em + 80px);}

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

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

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

.service_outterbox{height: 700px;}
#toppage{height: 80vh;}
#salespoint h4,header{height: 400px;}

.corporate_wrapper,.corporate_text,.corporate_image01,.corporate_image02{height: 400px;}
footer h2{height: 40px;}
.corporate_text ul{height:192px; }

#salespoint{min-height: 500px;}

/*margin & padding*/
*,#toppage,#company ol{margin:0 ;}
*{padding: 0;}
#mainpage_box h3,#mainpage_box h6,#thanks,#thanks h4,.corporate_wrapper ul,#footer_storinfo,#business ol,#commodity h2,#commodity p,.season ul,#footer_storinfo{margin: auto;}
#portrait{margin:160px auto;}
.inner,#top_corporate-philosophy,#access,.browserback,#thanks,#business,#commodity{margin: 80px auto;}
#commodity,.season{margin:40px 0;}
#commodity ol li{margin: 80px 80px 0 0;}
#commodity ol li:nth-child(1),#commodity ol li:nth-child(3),#commodity ol li:nth-child(5),#commodity ol li:nth-child(7),#commodity ol li:nth-child(9){margin:80px 80px 0 120px;}

#company ol li,#service ol li{margin: 20px 0;}

#company ol li:nth-child(1) {margin-top: 0;}
footer{margin-top:40px; }
#portrait h4,#mainpage_box h2{margin-bottom: 40px;}
#commodity h2,#commodity ol li strong{margin-bottom: 20px;}

#salespoint h4{margin: 0;}
#salespoint {padding: 100px 80px 0 80px;}

#service ul li{padding: 10px 20px 5px 20px;}
#company ol ,#portrait,#salespoint h4{padding: 80px 0;}
.paddingtop,footer,footer ol{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;}
#box{padding-top: 180px;}
.cnt01,.cnt02{padding-right:40px;}
.cnt02,#commodity ol li:hover .mask_commodity{padding-left:40px;}
#service ul li img,#navber_wrapper{padding: 0 20px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#commodity ol li .mask_commodity{padding:40px 40px 40px 0 ;}
#commodity ol li:nth-child(1), #commodity ol li:nth-child(3), #commodity ol li:nth-child(5), #commodity ol li:nth-child(7), #commodity ol li:nth-child(9){margin: 0;}

/*position*/
.service_outterbox,header,.corporate_text,#commodity ol li{position: relative;}
.corporate_text ul,#commodity ol li .mask_commodity{position: absolute;}
.corporate_text ul{top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;}
#commodity ol li .mask_commodity{top: 0; left: 0; }


/*スクロールで固定するヘッダー*/
nav ul li a{position: relative;position: relative;}
nav ul li a:hover{color: #FFFFFF;}
nav ul li a::after {position: absolute;bottom: 4px;  left: 0;content: '';width: 100%;height: 10px;  background: rgba(23,73,157,0.5);  transform: scale(0, 1);  transform-origin: center top;  transition: transform .3s;}
nav ul li a:hover::after {  transform: scale(1, 1);}

#navber_wrapper{position: absolute;bottom:0;}
#navber_wrapper.fixed{top:0;position: fixed;height: 100px;width: 100%;line-height: 100px; background-color: #FFFFFF;border-bottom: 1px solid #A7A7A7;}
#navber_wrapper.fixed #brand h1 a,#navber_wrapper.fixed nav ul li a{color: #000000;line-height: 100px;}
#navber_wrapper.fixed #brand h1{font-size: 28px;}
#navber_wrapper.fixed nav ul li a{font-size: 20px;font-weight: 300;  position: relative;  display: inline-block;text-decoration: none;}
#navber_wrapper.fixed nav ul li a::after {position: absolute;bottom: 45px;  left: 0;content: '';width: 100%;height: 10px;  background: rgba(23,73,157,0.5);  transform: scale(0, 1);  transform-origin: center top;  transition: transform .3s;}
#navber_wrapper.fixed nav ul li a:hover::after {  transform: scale(1, 1);}



#toppage,#salespoint{background-attachment:fixed;}

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

/*opacity*/
#commodity ol li .mask_commodity{opacity: 0;}
#commodity ol li:hover .mask_commodity{	opacity:		1;}
/*dispray*/
#mainpage_box h6,.corporate_image01,.corporate_image02,.corporate_text,.corporate_text h4,.corporate_text p,.browserback a,footer a,#portrait h4,#salespoint h4,.corporate_text ul,footer h2 a{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;}

#commodity ol li .mask_commodity{
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;}
.effect-fade {
　opacity : 0;
　transform : translate(0, 45px);
　transition : all 300ms;
}

.effect-fade.effect-scroll {
　opacity : 1;
　transform : translate(0, 0);
}


/*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  #0000FF;	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 (min-width: 960px){
	header{background-size: cover;}
}
@media only screen and (max-width: 960px){
	#brand, nav{float: none;}
	nav{width: 100%;}
	#navber_wrapper.fixed #brand h1 a,#navber_wrapper.fixed #brand h1{font-size: 24px;line-height: 50px;}
	#navber_wrapper.fixed #brand, #navber_wrapper.fixed nav,#navber_wrapper nav ul, #navber_wrapper.fixed nav ul li,#navber_wrapper fixed nav ul li a,#navber_wrapper.fixed nav ul li a {font-size:18px;line-height: 50px;}
	#navber_wrapper.fixed{line-height: 50px;}
	#navber_wrapper.fixed nav ul li a::after {bottom: 20px;}
	#service ul li img{padding: 0;}
}

@media only screen and (max-width: 660px){
	.ather_servicelist section,.ather_servicelist strong,.ather_servicelist{text-align: center;}
	.corporate_image01,.corporate_image02,.corporate_text,.corporate_text:nth-child(2),.corporate_text:nth-child(1){width: 100%;float: none;height: 400px;overflow: hidden;}
	.corporate_wrapper{width: 100%;float: none;height: 800px;}
	.corporate_wrapper:nth-child(1){margin-bottom: 40px;}
	#salespoint h4{width: auto;}
	#footer_storinfo{width: 45%; margin: auto;font-size: 1em;}
	footer a{ display: block;}
	footer a,footer h2{ width: 100%; padding: 0 15%; margin: auto;}
	footer ol,#footer ol{width: 100%; margin: auto;font-size: 1em;display: block;float: none;padding-top:0;}
	footer ol li,#footer ol li{width: 100%;font-size: 14px;}
	footer ol h4{font-size: 16px;}
	footer h2{display: block;margin-bottom: 40px;}
	#commodity ol li,#commodity ol li:nth-child(1), #commodity ol li:nth-child(3), #commodity ol li:nth-child(5),#commodity ol li:nth-child(7),#commodity ol li:nth-child(9){ width: calc(100% - 80px); margin: none;float: none;clear: both;}
	#commodity p{width: 100%;padding: 0 40px 40px;}
	#commodity ol li:nth-child(1), #commodity ol li:nth-child(3), #commodity ol li:nth-child(5), #commodity ol li:nth-child(7) , #commodity ol li:nth-child(9){margin: 0;}
	#commodity ol li { margin: 20px ;}
header.top{background-size: cover;}
	header.company,header.store,header.contact,header.commodity,header.error,header.thanks{background-size: 100% auto;}
#salespoint{background-image: url("images/img_ct02.jpg");background-size: cover;background-position: right;}
	#commodity h3{font-size: 16px;font-weight: 700;}
}

@media only screen and (min-width: 570px){
	.smp_img{display: none;}
}
@media only screen and (max-width: 570px){
	#navber_wrapper #brand h1 a,#navber_wrapper.fixed #brand h1,#navber_wrapper.fixed #brand h1 a,#navber_wrapper.fixed #brand h1{font-size: 18px;line-height: 50px;}
	#navber_wrapper.fixed #brand, #navber_wrapper.fixed nav,#navber_wrapper nav ul, #navber_wrapper.fixed nav ul li,#navber_wrapper fixed nav ul li a,#navber_wrapper.fixed nav ul li a {font-size:14px;line-height: 50px;}
	#navber_wrapper.fixed{line-height: 50px;}
	#navber_wrapper.fixed nav ul li a::after {bottom: 20px;}

	#service ul li {padding: 40px 20px;width: 100%;float: none;}
	#footer_storinfo{width: 70%; margin: auto;font-size: 1em;}
	footer a{ display: block;}
	footer a,footer h2{ width: 100%; padding: 0 5%;box-sizing: border-box; margin: auto;}
	footer ol,#footer ol{width: 100%; margin: auto;font-size: 1em;display: block;float: none;padding-top:0;clear: both;}
	footer ol li,#footer ol li{width: 100%;font-size: 14px;}
	footer ol h4{font-size: 16px;}
	footer h2{display: block;margin-bottom: 40px;font-size: 14px;}
	body{font-size: 12px;width: 100%;}
	header.top{background-size:100% auto ;}
	#navber_wrapper,#navber_wrapper.fixed {padding: 0 20px;}
	.corporate_wrapper h4 span,.season{display: none;}
	.cnt02 {width: calc(100% - 10px);border-left: none ;margin-left:10px;}
	.cnt01 {width: calc(100% - 90px); margin: 0 40px 5px 40px; text-align: left;border-left: #1D2088 5px solid;padding-left: 5px;font-size: 13px;font-weight: 700;}
/*	#salespoint {padding: 100px 5% 0 5%;}
*/	#business ol{width: 100%;}
	footer h2{margin-bottom: 20px;}
	#mainpage_box h2{margin-bottom:0;}
header.top{background: url("images/img_ct00mainview_smp.jpg");background-size: cover; background-position: top center;}
header.company{background-image: url("images/img_ct00company_smp.jpg");background-size: cover;background-position: top center;}
header.store{background-image: url("images/img_ct00store_smp.jpg");background-size: cover;background-position: top center;}
header.contact{background-image: url("images/img_ct00contact_smp.jpg");background-size: cover;background-position: top  center;}
header.commodity{background-image: url("images/img_ct00commo_smp.jpg");background-size: cover;background-position: top center;}
header.error{background-image: url("images/img_ct00404_smp.jpg");background-size: cover;background-position: top center;}
header.thanks{background-image: url("images/img_ct00thanks_smp.jpg");background-size: cover;background-position: top center;}
#salespoint,_::-webkit-full-page-media, _:future, :root #salespoint {overflow-y:hidden;text-align: center;background-image: url("images/img_ct02_smp.jpg");background-size:auto 100%;background-position: top;}
/*.smp_img{display: block;width: auto; height: 500px;position: absolute;top:0;}
*/
#salespoint h4{width:100%;height: 500px;}	
#salespoint h4{/*width: auto;*/}
}