@charset "UTF-8";
body {
  background: #EEF2F3; }

/*------------------------------------------------------
 メインビジュアル
-------------------------------------------------------*/
.first_view {
  background: url("../img/top/bg-sky.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }
  .first_view .mainvisual {
    margin-bottom: 30px; }
    @media screen and (max-width: 576px) {
      .first_view .mainvisual {
        margin-bottom: 10px; } }
  .first_view .main-copy {
    font-weight: bold;
    font-size: 28px;
    color: #798A94;
    margin-bottom: 1.5em; }
    .first_view .main-copy span {
      font-size: 34px; }
    @media screen and (max-width: 576px) {
      .first_view .main-copy {
        font-size: 18px; }
        .first_view .main-copy span {
          font-size: 22px; } }
  .first_view .main-txt {
    font-weight: bold;
    font-size: 18px;
    line-height: 2; }
    @media screen and (max-width: 576px) {
      .first_view .main-txt {
        font-size: 14px;
        margin-bottom: 1em; } }
  .first_view img.support {
    margin: -10% 0; }

/*------------------------------------------------------
 service
-------------------------------------------------------*/
.service {
  padding: 50px 0; }
  .service .order-md-2 .inner {
    padding: 20px 0 20px 40px; }
    @media screen and (max-width: 576px) {
      .service .order-md-2 .inner {
        padding: 20px; } }
  .service .order-md-1 .inner {
    padding: 20px 40px 20px 0; }
    @media screen and (max-width: 576px) {
      .service .order-md-1 .inner {
        padding: 20px; } }
  .service .inner .service-copy {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 1em;
    color: #707070;
    line-height: 2; }
    .service .inner .service-copy span {
      background: linear-gradient(transparent 50%, #DEEDBE 50%); }
    @media screen and (max-width: 576px) {
      .service .inner .service-copy {
        font-size: 22px; } }
  .service .inner .service-txt {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 1.5em;
    line-height: 1.7; }
    @media screen and (max-width: 576px) {
      .service .inner .service-txt {
        font-size: 18px; } }
  .service .inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 2;
    font-weight: bold;
    color: #333; }
    .service .inner ul li {
      position: relative;
      padding: 0 0 0 1em; }
      .service .inner ul li:before {
        content: "";
        width: 0.8em;
        height: 0.8em;
        display: inline-block;
        background-color: #7CCB76;
        border-radius: 50%;
        position: absolute;
        margin-top: -0.4em;
        top: 0.9em;
        left: 0; }
  .service .inner a.btn-service {
    display: block;
    max-width: 280px;
    padding: 1.2em 3em 1.2em 1.5em;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    background-image: url("../img/common/arrow.webp");
    background-color: #7CCB76;
    background-repeat: no-repeat;
    background-position: center right 1em;
    background-size: 1em;
    border-radius: 3em;
    margin: 1em 0 1em auto; }
    .service .inner a.btn-service:hover {
      opacity: 0.8; }
  .service .yellow .inner .service-copy span {
    background: linear-gradient(transparent 50%, #FCE09E 50%); }
  .service .yellow .inner ul li:before {
    background-color: #FFB448; }
  .service .yellow .inner a.btn-service {
    background-color: #FFB448; }
  .service .blue .inner .service-copy span {
    background: linear-gradient(transparent 50%, #D3EBFD 50%); }
  .service .blue .inner ul li:before {
    background-color: #6CB5E6; }
  .service .blue .inner a.btn-service {
    background-color: #6CB5E6; }
  .service .pink .inner .service-copy span {
    background: linear-gradient(transparent 50%, #FCDADA 50%); }
  .service .pink .inner ul li:before {
    background-color: #F47475; }
  .service .pink .inner a.btn-service {
    background-color: #F47475; }

/*------------------------------------------------------
 サービス内容
-------------------------------------------------------*/
.service_list {
  position: relative;
  margin-top: 100px; }
  .service_list:before {
    content: "";
    display: block;
    width: 400px;
    height: 400px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 50%;
    top: -100px;
    margin-left: -200px;
    border-radius: 50%;
    z-index: 1; }
    @media screen and (max-width: 576px) {
      .service_list:before {
        top: -80px;
        width: 250px;
        height: 250px;
        margin-left: -125px; } }
  .service_list:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
    top: 0;
    left: 0;
    z-index: 0; }
  .service_list .inner {
    padding-bottom: 100px;
    position: relative;
    background-image: url("../img/top/bg-sky.webp");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #fff;
    z-index: 2; }
    @media screen and (max-width: 576px) {
      .service_list .inner {
        padding-bottom: 50px;
        background-image: url("../img/top/bg-sky.webp");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top; } }
  .service_list h2 {
    padding-top: 2em;
    text-align: center;
    position: relative;
    font-weight: bold;
    color: #798A94; }
    .service_list h2:before {
      content: "";
      display: block;
      width: 3em;
      height: 3em;
      background: url("../img/common/title_icon.svg");
      position: absolute;
      top: -2em;
      left: 50%;
      margin-left: -1.5em;
      background-repeat: no-repeat; }

ul.service_list_btn {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; }
  ul.service_list_btn li {
    list-style: none;
    padding: 10px;
    margin: 0;
    width: 25%; }
    @media screen and (max-width: 576px) {
      ul.service_list_btn li {
        width: 50%; } }
    ul.service_list_btn li a {
      display: block;
      text-align: center;
      text-decoration: none;
      font-weight: bold;
      border: 1px solid #798A94;
      font-size: 20px;
      color: #798A94;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      box-shadow: 7px 7px 0px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
      border-radius: 4px; }
      @media screen and (max-width: 576px) {
        ul.service_list_btn li a {
          font-size: 16px;
          height: 90px; } }
      ul.service_list_btn li a:after {
        content: "";
        display: block;
        background: #798A94;
        width: 100px;
        height: 100px;
        position: absolute;
        bottom: -75px;
        right: -75px;
        transform: rotate(45deg); }
      ul.service_list_btn li a:hover {
        box-shadow: 7px 7px 0px rgba(0, 0, 0, 0);
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
        -o-transition: all 0.25s;
        transition: all  0.25s;
        border: 1px solid #fff; }

/*------------------------------------------------------
 合同経営グループの取り組み
-------------------------------------------------------*/
.torikumi {
  background: linear-gradient(60deg, #3C89AA, #83BCBD, #BFE7CD, #CFE8E0);
  padding: 70px 10px; }
  .torikumi h2 {
    color: #fff;
    text-align: center;
    font-weight: bold; }
    @media screen and (max-width: 576px) {
      .torikumi h2 {
        margin-bottom: 30px; } }
    .torikumi h2 img {
      vertical-align: bottom; }
      @media screen and (max-width: 576px) {
        .torikumi h2 img {
          display: block;
          margin: 0 auto 20px auto; } }
  .torikumi .torikumi-frame {
    padding: 30px;
    background: #fff;
    border-radius: 5px;
    height: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
    .torikumi .torikumi-frame h3 {
      text-align: center;
      color: #56575B;
      font-weight: bold;
      border-bottom: 2px solid  #56575B;
      margin-bottom: 1em; }
    .torikumi .torikumi-frame p {
      margin: 0; }

/*------------------------------------------------------
 メディア
-------------------------------------------------------*/
.media {
  padding: 70px 10px;
  text-align: center; }
  .media img {
    vertical-align: bottom; }
  .media h2 {
    text-align: center;
    font-weight: bold;
    color: #798A94; }
  .media .media-sns {
    position: relative;
    text-align: center;
    /*ul.sns-icon{
    	position: absolute;
    	list-style:none;
    	display: flex;
    	width: 80%;
    	top: 47%;
    	left: 10%;
    	li{
    		width: 100%;
    		font-weight: normal;
    		img{
    			width:55%;
    		}
    	}
    }*/ }
    @media screen and (max-width: 768px) {
      .media .media-sns {
        max-width: 532px;
        margin: auto; } }
    .media .media-sns .sns-inner {
      position: absolute;
      width: 90%;
      top: 20%;
      left: 10%;
      display: flex;
      flex-wrap: wrap; }
      @media screen and (max-width: 576px) {
        .media .media-sns .sns-inner {
          width: 100%;
          top: 23%;
          left: 1%; } }
      .media .media-sns .sns-inner .sns-item {
        width: 50%;
        padding: 5px;
        margin-bottom: 10px; }
        @media screen and (max-width: 576px) {
          .media .media-sns .sns-inner .sns-item {
            margin-bottom: 0; } }
        .media .media-sns .sns-inner .sns-item a {
          text-decoration: none;
          color: #333;
          display: flex;
          align-items: center; }
        @media screen and (max-width: 576px) {
          .media .media-sns .sns-inner .sns-item img {
            width: 27px; } }
        .media .media-sns .sns-inner .sns-item p {
          text-align: left;
          margin-left: 10px;
          font-size: 90%; }
          @media screen and (max-width: 576px) {
            .media .media-sns .sns-inner .sns-item p {
              font-size: 75%;
              margin: 0 0 0 10px; } }
  .media .monthly {
    margin-left: -5%;
    margin-top: -1%; }
  .media .media-youtube {
    max-width: 532px;
    margin: auto;
    background: #FFF;
    padding-bottom: 10px; }
    .media .media-youtube h4 {
      background: #1F4695;
      color: #FFF;
      font-weight: bold;
      padding: 10px 5px;
      font-size: 100%;
      margin-bottom: 10px; }
    .media .media-youtube iframe {
      width: 410px;
      height: 235px; }
      @media screen and (max-width: 576px) {
        .media .media-youtube iframe {
          width: 100%;
          height: 190px; } }

/*------------------------------------------------------
 メディアへの出演
-------------------------------------------------------*/
.app-wrap {
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  /*padding: 40px 20px;*/
  border-radius: 5px;
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto;
  border: solid 11px #6aafc2; }
  .app-wrap .row {
    align-items: center; }
  .app-wrap .inner-box {
    padding: 20px 10px;
    color: #1f4695; }
    .app-wrap .inner-box.bg-wblue {
      background: #daf2f4; }
    .app-wrap .inner-box p {
      max-width: 420px;
      margin: 0 auto 10px; }
  .app-wrap iframe {
    width: 420px;
    height: 245px; }
    @media screen and (max-width: 576px) {
      .app-wrap iframe {
        width: 100%;
        height: 190px; } }

/*------------------------------------------------------
 SNS
-------------------------------------------------------*/
.sns-wrap {
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  /*padding: 40px 20px;*/
  border-radius: 5px;
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto; }
  .sns-wrap h2 {
    color: #FFF;
    background: linear-gradient(0deg, #505a64, #798a94);
    padding: 2px 10px;
    border-radius: 5px 5px 0 0; }
    .sns-wrap h2 span {
      padding: 0 1rem; }
  .sns-wrap a {
    text-decoration: none;
    color: #333; }
  .sns-wrap .row {
    margin: 0 auto 1rem;
    padding: 0 1rem;
    align-items: center;
    text-align: left; }
    .sns-wrap .row img {
      margin-right: 10px; }

/*------------------------------------------------------
 お知らせ
-------------------------------------------------------*/
.news-wrap {
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 40px 20px;
  border-radius: 5px;
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto; }
  .news-wrap ul.news-list {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto; }
  .news-wrap a.btn-news {
    background: url("../img/common/arrow-round.webp");
    background-position: center right;
    background-repeat: no-repeat;
    display: inline-block;
    color: #798A94;
    text-decoration: none;
    font-weight: bold;
    padding: 0.5em 2.5em 0.5em 0.5em; }

/*------------------------------------------------------
 お問い合わせ
-------------------------------------------------------*/
.contact {
  background-image: url(../img/top/bg-sky.webp);
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 70px 0; }

.contact-frame {
  background: #fff;
  border-radius: 20px;
  position: relative;
  margin-top: 100px;
  padding: 0 30px 30px 30px; }
  .contact-frame:before {
    content: "";
    display: block;
    width: 400px;
    height: 400px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    background: #fff;
    position: absolute;
    left: 50%;
    top: -100px;
    margin-left: -200px;
    border-radius: 50%;
    z-index: 1; }
    @media screen and (max-width: 576px) {
      .contact-frame:before {
        top: -80px;
        width: 250px;
        height: 250px;
        margin-left: -125px; } }
  .contact-frame:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    top: 0;
    left: 0;
    z-index: 0; }
  .contact-frame .contact-inner {
    border-radius: 20px;
    position: relative;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #fff;
    z-index: 2; }
  .contact-frame h2 {
    padding-top: 2em;
    text-align: center;
    position: relative;
    font-weight: bold;
    color: #798A94;
    margin-bottom: 1em; }
    .contact-frame h2:before {
      content: "";
      display: block;
      width: 3em;
      height: 3em;
      background: url("../img/common/title_icon.svg");
      position: absolute;
      top: -2em;
      left: 50%;
      margin-left: -1.5em;
      background-repeat: no-repeat; }
  .contact-frame .inner {
    padding: 20px; }
    .contact-frame .inner dl {
      margin-bottom: 1em; }
      .contact-frame .inner dl dt {
        border-top: 1px solid #7CCB76;
        border-bottom: 1px solid #7CCB76;
        color: #7CCB76;
        text-align: center;
        font-weight: bold;
        padding: 0.3em;
        font-size: 27px;
        margin-bottom: 0.7em; }
      .contact-frame .inner dl dd {
        font-size: 24px;
        text-align: center;
        font-weight: bold; }
        .contact-frame .inner dl dd a {
          color: #333;
          text-decoration: none; }
    .contact-frame .inner a.btn-contact {
      text-decoration: none;
      display: block;
      text-align: center;
      font-weight: bold;
      color: #7CCB76; }
      .contact-frame .inner a.btn-contact img {
        border-radius: 50%;
        height: 50px;
        width: 50px;
        object-fit: contain;
        background: #7CCB76; }
    .contact-frame .inner.orange dl dt {
      border-top: 1px solid #FFB448;
      border-bottom: 1px solid #FFB448;
      color: #FFB448; }
    .contact-frame .inner.orange a.btn-contact {
      color: #FFB448; }
      .contact-frame .inner.orange a.btn-contact img {
        background: #FFB448; }
    .contact-frame .inner.blue dl dt {
      border-top: 1px solid #6CB5E6;
      border-bottom: 1px solid #6CB5E6;
      color: #6CB5E6; }
    .contact-frame .inner.blue a.btn-contact {
      color: #6CB5E6; }
      .contact-frame .inner.blue a.btn-contact img {
        background: #6CB5E6; }
    .contact-frame .inner.pink dl dt {
      border-top: 1px solid #F47475;
      border-bottom: 1px solid #F47475;
      color: #F47475; }
    .contact-frame .inner.pink a.btn-contact {
      color: #F47475; }
      .contact-frame .inner.pink a.btn-contact img {
        background: #F47475; }

/*
.contact-frame-other{
	background: #fff;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	padding: 30px;
	border-radius: 20px;
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
	h3{
		text-align: center;
		font-weight: bold;
		color: #F47475;
		margin-bottom: 0.5em;
	}
	dl{
		margin-bottom: 1em;
		dt{
			border-top: 1px solid #F47475;
			border-bottom: 1px solid #F47475;
			color: #F47475;
			text-align: center;
			font-weight: bold;
			padding: 0.3em;
			font-size: 28px;
			margin-bottom: 0.7em;
		}
		dd{
			font-size: 24px;

			text-align: center;
			font-weight: bold;
			a{
				color: #333;
				text-decoration: none;
			}
		}
	}
	a.btn-contact{
		text-decoration: none;
		display: block;
		text-align: center;
		font-weight: bold;
		color: #F47475;
		img{
			border-radius: 50%;
			height: 50px;
			width: 50px;
			object-fit: contain;
			background: #F47475;
		}
	}
}
*/