@charset "UTF-8";
/*
** import core file
*/
/*
** -- two point
*/
/*---------------
  subnav
----------------*/
/*
** -- three point
@mixin break-pc {//pcのみ
	@media screen and (min-width:961px) {
		@content;
	}
}
@mixin break-pc-tab {//pcとtab共通
	@media screen and (min-width:768px) {
		@content;
	}
}
@mixin break-tab-sp {//tabとsp共通
	@media screen and (max-width:960px) {
		@content;
	}
}
@mixin break-tab {//tabのみ
	@media screen and (max-width:960px) and (min-width:768px) {
		@content;
	}
}
@mixin break-sp {//spのみ
	@media screen and (max-width:767px) {
		@content;
	}
}
@mixin break-sps {//iphone5/SE
	@media screen and (max-width:374px) { @content; }
}
*/
/*
** -- two point
*/
/*---------------
  subnav
----------------*/
/*
** -- three point
@mixin break-pc {//pcのみ
	@media screen and (min-width:961px) {
		@content;
	}
}
@mixin break-pc-tab {//pcとtab共通
	@media screen and (min-width:768px) {
		@content;
	}
}
@mixin break-tab-sp {//tabとsp共通
	@media screen and (max-width:960px) {
		@content;
	}
}
@mixin break-tab {//tabのみ
	@media screen and (max-width:960px) and (min-width:768px) {
		@content;
	}
}
@mixin break-sp {//spのみ
	@media screen and (max-width:767px) {
		@content;
	}
}
@mixin break-sps {//iphone5/SE
	@media screen and (max-width:374px) { @content; }
}
*/
/*
@include animation(scrollpoint,2.5,ease,0,infinite,normal,forwards);
<div class="scroll">
	<a href="#indexSolving">scroll</a>
	<span class="bar"></span>
</div>
*/
/*
&:before {
	content:'';
	@include sizes(1px,50px);
	display: block;
	background: #333;
	position: absolute;
	top:0;left:0;right:0;
	margin:auto;
	@include animation ( down-border, 2, ease, 0, infinite,normal,forwards);
	@include transform( translate3d(0,0,0) );
}
*/
#mgContent .moviebox {
  width: 800px;
  margin: 50px auto 0; }
  #mgContent .moviebox .movie {
    aspect-ratio: 16/9; }
    #mgContent .moviebox .movie iframe {
      width: 100%;
      height: 100%; }

#mgFeatures {
  background: url("../img/management/management_features_bg_img_pc.jpg") no-repeat center center/cover;
  background-attachment: fixed;
  margin-top: 120px;
  padding: 80px 100px;
  text-align: center; }
  #mgFeatures .wrap {
    background: rgba(255, 255, 255, 0.9);
    padding: 60px 20px; }
  #mgFeatures h2 {
    margin-top: 0; }

#mgFlow .flowlist {
  margin-top: 80px; }
  #mgFlow .flowlist li:after {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 32px 80px 0 80px;
    border-color: #ccc transparent transparent transparent;
    margin: 56px auto 0; }
  #mgFlow .flowlist li + li {
    margin-top: 40px; }
  #mgFlow .flowlist li:last-of-type:after {
    display: none; }
  #mgFlow .flowlist .item1 .ttl:before {
    background-image: url("../img/management/management_flow_flowlist_ico_sun.svg"); }
  #mgFlow .flowlist .item2 .ttl:before {
    background-image: url("../img/management/management_flow_flowlist_ico_cup.svg"); }
  #mgFlow .flowlist .item3 .ttl:before {
    background-image: url("../img/management/management_flow_flowlist_ico_bath.svg"); }
  #mgFlow .flowlist .item4 .ttl:before {
    background-image: url("../img/management/management_flow_flowlist_ico_bowl.svg"); }
  #mgFlow .flowlist .item5 .ttl:before {
    background-image: url("../img/management/management_flow_flowlist_ico_stethoscope.svg"); }
  #mgFlow .flowlist .item6 .ttl:before {
    background-image: url("../img/management/management_flow_flowlist_ico_microphone.svg"); }
  #mgFlow .flowlist .item7 .ttl:before {
    background-image: url("../img/management/management_flow_flowlist_ico_soup.svg"); }
  #mgFlow .flowlist .item8 .ttl:before {
    background-image: url("../img/management/management_flow_flowlist_ico_moon.svg"); }
  #mgFlow .flowlist .ttl {
    padding-left: 150px;
    position: relative;
    margin-top: 0;
    text-align: left; }
    #mgFlow .flowlist .ttl:before {
      content: '';
      display: block;
      width: 120px;
      height: 120px;
      background: no-repeat center center/contain;
      position: absolute;
      top: 0;
      left: 0; }
  #mgFlow .flowlist .txtbox {
    margin-top: 18px;
    padding-left: 150px; }

#mgService .servicebox {
  margin-top: 80px; }
  #mgService .servicebox .phtbox {
    width: 640px; }
  #mgService .servicebox .txtbox {
    width: 512px; }
  #mgService .servicebox h3 {
    text-align: left; }

@media screen and (max-width: 600px) {
  #mgContent h2 {
    margin-top: 80px; }
  #mgContent .moviebox {
    width: 100%;
    margin-top: 40px; }

  #mgFeatures {
    background-image: url("../img/management/management_features_bg_img_sp.jpg");
    background-attachment: scroll;
    margin-top: 80px;
    padding: 80px 0;
    text-align: left; }
    #mgFeatures .wrap {
      padding: 60px 5%; }

  #mgFlow .flowlist {
    margin-top: 60px; }
    #mgFlow .flowlist li:after {
      border-width: 24px 60px 0 60px;
      margin: 35px auto 0; }
    #mgFlow .flowlist li + li {
      margin-top: 35px; }
    #mgFlow .flowlist .item4 .txtbox p + P, #mgFlow .flowlist .item8 .txtbox p + P {
      margin-top: 0; }
    #mgFlow .flowlist .ttl {
      min-height: 80px;
      padding-left: 95px; }
      #mgFlow .flowlist .ttl:before {
        width: 80px;
        height: 80px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
    #mgFlow .flowlist .txtbox {
      margin-top: 20px;
      padding-left: 0; }

  #mgService .servicebox {
    margin-top: 60px; }
    #mgService .servicebox .phtbox {
      width: 100%; }
    #mgService .servicebox .txtbox {
      width: 100%;
      margin-top: 40px; } }