@charset "utf-8";
/* CSS Document */
body{
	font-family: 'Barlow',"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
	color: #333;
	font-size: 16px;
	margin: 0;
}
ul li{
	list-style: none;
}
ul,dl,ol{
	padding: 0;
}
dd{
	margin: 0;
}
a{
	text-decoration: none;
	color: #333;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
img{
	width: 100%;
}
em{
	font-style: normal;
}
@media all and (max-width: 768px) {
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
}

/**************************************************
  Layout
***************************************************/
.body {
  width: 100%;
  overflow-x: hidden; }
  .body .wrap {
    position: relative; }

.inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative; }
  @media all and (max-width: 1199px) {
    .inner {
      padding: 0 20px; } }

.x-small{ font-size: 78% !important; }
.small{ font-size: 87% !important; }
.large{ font-size: 120% !important; }
.x-large{ font-size: 130% !important; }

.textl{ text-align: left;}
.textr{ text-align: right;}
.textc{ text-align: center;}
/* -----------------------------------------------
  Mixins
--------------------------------------------------*/
.mt100 {
  margin-top: 100px !important; }

.pt100 {
  padding-top: 100px !important; }

.mt90 {
  margin-top: 90px !important; }

.pt90 {
  padding-top: 90px !important; }

.mt80 {
  margin-top: 80px !important; }

.pt80 {
  padding-top: 80px !important; }

.mt70 {
  margin-top: 70px !important; }

.pt70 {
  padding-top: 70px !important; }

.mt60 {
  margin-top: 60px !important; }

.pt60 {
  padding-top: 60px !important; }

.mt50 {
  margin-top: 50px !important; }

.pt50 {
  padding-top: 50px !important; }

.mt40 {
  margin-top: 40px !important; }

.pt40 {
  padding-top: 40px !important; }

.mt30 {
  margin-top: 30px !important; }

.pt30 {
  padding-top: 30px !important; }

.mt20 {
  margin-top: 20px !important; }

.pt20 {
  padding-top: 20px !important; }

.mt10 {
  margin-top: 10px !important; }

.pt10 {
  padding-top: 10px !important; }


/* ---------------------------------------
header
-----------------------------------------*/
.header{
    width: 100%;
    height: 68px;
    margin: 0 auto;
    padding: 0 0 12px;
    background: #fff;
    border-bottom: solid 1px #ddd;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
.header .inner{
	position: relative;
}
.header .logo{
	position: absolute;
	left: 0;
	top: 2px;
	width: 240px;
}
@media all and (max-width: 768px) {
	.header .logo{
		position: static;
		margin: 21px auto 0;
		width: 12rem;
	}
}
.header .logo img{
	width: 100%;
}
.header .global-navigation{
	font-weight: 600;
	position: absolute;
	top: 8px;
	right: 0;
}
.header .global-navigation ul{
	display: flex;
	gap:40px;
}
.header .global-navigation ul a:hover{
	color: #00a1e9;
}

.container{
	margin-top: 70px;
}
/* -----------------------------------------------
	GOFIELD Marketing
--------------------------------------------------*/
.gm .bg{
	background: url("../images/bg_001.png") #60c2ed;
	background-size: 50%;
}

/* mv */
.gm .mv{
	position: relative;
	padding-top: 4rem;
}
.gm h1{
	width: 50%;
	margin: 0 auto;
}
.gm .mv .mv-l{
	position: absolute;
	width: 18%;
	top: 3rem;
	left: 3rem;
}
.gm .mv .mv-r{
	position: absolute;
	width: 20%;
	top: 3rem;
	right: 2rem;
}
.gm .mv .mv-block {
	background: #fff;
	border-radius: 50% 50% 20px 20px / 25% 25% 20px 20px ;
	padding-top: 5px;
	margin-top: 35px;
}
.gm .mv .mv-block h2{
	font-size: 2rem;
	color: #0097e7;
	position: relative;
	display: flex;
	justify-content: center;
	text-align: center;
}
.gm .mv .mv-block h2::before,
.gm .mv .mv-block h2::after{
	background-color: #0097e7; /* 線の色 */
	content: "";
	height: 3px; /* 線の高さ */
	width: 40px; /* 線の長さ */
	position: absolute;
	bottom: 1.8rem;
}
.gm .mv .mv-block h2::before{
	margin-right: 20px;
	transform: rotate(60deg); 
	left: 28%;
}
.gm .mv .mv-block h2::after{
	margin-left: 20px;
	transform: rotate(-60deg); 
	right: 28%;
}
.gm .mv .mv-block ul{
	display: flex;
	justify-content: space-between;
	padding: 20px 30px 30px;
}
.gm .mv .mv-block ul li{
	width: 18%;
}
.gm .mv .mv-block ul dt{
	position: relative;
}
.gm .mv .mv-block ul dt::after{
	border: 10px solid hsla(0, 0%, 100%, 0);
    border-top-color: #fff;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    width: 0;
	z-index: 1;
}
.gm .mv .mv-block ul dd{
	background: #ff9000;
	border-radius: 10px;
	padding: 30px 15px 15px;
	color: #fff;
	font-weight: bold;
	position: relative;
	margin: 0;
	text-align: center;
	height: 100px;
	display: grid;
	place-content:center;
}
@media all and (max-width: 768px) {
	.gm .mv{
		padding-top: 2rem;
	}
	.gm h1{
		width: 85%;
	}
	.gm .mv .mv-l{
		width: 30%;
		left: 0;
		top: 0;
	}
	.gm .mv .mv-r{
		position: static;
		width: 90%;
		margin: 20px auto 0;
	}
	.gm .mv .mv-block{
		margin-top: -15px;
		border-radius: 50% 50% 20px 20px / 3% 3% 20px 20px;
	}
	.gm .mv .mv-block h2{
		font-size: 1.5rem;
		line-height: 1.3;
		margin-top: 30px;
	}
	.gm .mv .mv-block h2::before,
	.gm .mv .mv-block h2::after{
		width: 30px;
		height: 3px;
		bottom: 0.8rem;
	}
	.gm .mv .mv-block h2::before{
		left: 7%;
	}
	.gm .mv .mv-block h2::after{
		right: 7%;
	}
	.gm .mv .mv-block ul{
		flex-wrap: wrap;
		row-gap:30px;
		padding-top: 15px;
	}
	.gm .mv .mv-block li{
		width: 100% !important;
	}
	.gm .mv .mv-block ul dt{
		width: 70%;
		margin: 0 auto;
	}
	.gm .mv .mv-block ul dd{
		height: auto;
		font-size: 1.3rem;
	}
}

/* 斜線付きh2 */
h2.line-o{
	color: #fff;
	text-align: center;
	margin-top: 5rem;
	display: flex;
	justify-content: center;
	position: relative;
	font-size: 2.5rem;
}
h2.line-o::before,
h2.line-o::after{
	background-color: #ffffff; /* 線の色 */
	content: "";
	height: 4px; /* 線の高さ */
	width: 80px; /* 線の長さ */
	position: absolute;
	bottom: 2rem;
}
h2.line-o::before{
	margin-right: 20px;
	transform: rotate(60deg); 
	left: 0;
}
h2.line-o::after{
	margin-left: 20px;
	transform: rotate(-60deg); 
	right: 0;
}
@media all and (max-width: 768px) {
	h2.line-o{
		font-size: 1.7rem;
		margin-top: 4rem;
	}
	h2.line-o::before,
	h2.line-o::after{
		width: 35px;
		height: 3px;
		bottom: 1rem;
	}
}

/* お問い合わせボタン */
.cta_btn{
	width: 40%;
	margin: 6rem auto;
}
.cta_btn a{
	background: #ffe938;
	border-radius: 50px;
	border: 4px solid #fff;
	padding: 30px;
	display: block;
	position: relative;
	font-weight: bold;
	font-size: 1.5rem;
	text-align: center;
}
.cta_btn a::before,
.cta_btn a::after{
	content: "";
	position: absolute;
	top: calc(50% - 2px);
	left: 2rem;
	width: 15px;
	height: 2px;
	border-radius: 9999px;
	background-color: #000000;
	transform-origin: calc(100% - 1px) 50%;
}
.cta_btn a::before{
	transform: rotate(45deg);
}
.cta_btn a::after{
	transform: rotate(-45deg);
}
.cta_btn a:hover{
	opacity: 0.8;
}

/* ボタン：オレンジ */
.cta_btn_o a{
	background: #ff6b11;
	color: #fff;
}
.cta_btn_o a::before,
.cta_btn_o a::after{
	background-color: #fff;
}
/* ボタン：オレンジ 2 */
.cta_btn_o2 a{
	background: #eb6347;
	color: #fff;
}

@media all and (max-width: 768px) {
	.cta_btn{
		width: 100%;
		margin: 3rem auto;
	}
	.cta_btn a{
		width: auto;
		padding:20px;
		font-size: 1.3rem;
	}

}

/* リンクエリア */
.gm .link-area ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:70px;
	row-gap: 0;
}
.gm .link-area ul li{
	width: 20%;
}
.gm .link-area ul li .number{
	display: block;
	font-weight: bold;
	font-size: 1.3rem;
}
.gm .link-area ul li a:hover{
	opacity: 0.8;
}
.gm .present{
	width: 90%;
	margin: 0 auto;
}
@media all and (max-width: 768px) {
	.gm .link-area ul{
		padding: 0;
		gap: 27px;
		row-gap: 8px;
	}
	.gm .link-area ul li{
		width: 45%;
	}
}

/* plan */
.gm .plan{
	position: relative;
	padding-bottom: 5rem;
}
.gm .plan h2{
	color: #fff;
	font-size: 2.7rem;
	text-align: center;
	margin: 7rem auto 1rem;
}
.gm .plan h2 span{
	display: block;
	font-size: 2rem;
}
.gm .plan .txt{
	color: #fff;
	font-weight: bold;
	text-align: center;
	font-size: 1.2rem;
	border: 3px solid #fff;
	padding: 10px;
	border-radius: 50px;
	width: 50%;
	margin: 0 auto;
}
.gm .plan .illust{
	position: absolute;
	width: 18%;
	top: 0;
	left: 2rem;
}
.gm .plan ul{
	display: flex;
	position: relative;
	padding: 0;
	gap: 30px;
	margin-top: 4rem;
}
@media all and (max-width: 768px) {
	.gm .plan h2 span{
		font-size: 1.5rem;
	}
	.gm .plan h2{
		font-size: 2.5rem;
		line-height: 1.5;
		margin-top: 4rem;
	}
	.gm .plan .txt{
		width: auto;
		line-height: 1.4;
	}
	.gm .plan .illust{
		width: 34%;
		top: 236px;
		left: 0;
	}
	.gm .plan ul{
		margin-top: 3rem;
		flex-wrap: wrap;
	}
	.gm .plan ul li{
		width: 90%;
		margin: 0 auto;
	}
}

/* point */
.gm .point h2{
	color: #ff9000;
	margin-bottom: 5rem;
}
.gm .point h2::before,
.gm .point h2::after{
	background: #ff9000;
}
.gm .point h2 span{
	background: #ff9000;
    color: #fff;
    padding: 0 8px;
    margin-right: 5px;
}
.gm .point ul{
	display: flex;
	padding: 0;
	gap: 50px;
}
.gm .point ul li{
	border-right: 1px dashed #00a1e9;
	padding: 0 50px 0 0;
}
.gm .point ul li:last-child{
	border: none;
	padding-right: 0;
}
.gm .point ul li dt{
	width: 85%;
	margin: 0 auto 2rem;
}
.gm .point ul li dd{
	margin: 0;
}
@media all and (max-width: 768px) {
	.gm .point h2{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 2rem;
	}
	.gm .point h2 span{
		margin: 0 0 8px 0;
	}
	.gm .point ul{
		flex-direction: column;
	}
	.gm .point ul li{
		border-bottom: 1px dashed #00a1e9;
		border-right: 0;
		padding: 0 0 50px 0;
	}
	.gm .point ul li:last-child{
		padding-bottom: 0;
	}
}

/* case */
.gm .case h2{
	color: #0097e7;
	text-align: center;
	font-size: 2.5rem;
	position: relative;
	margin: 9rem auto 6rem;
}
.gm .case h2 span{
	background: #0097e7;
	border-radius: 50px;
	color: #fff;
	font-size: 1.3rem;
	padding: 4px 40px;
}
.gm .case h2::before{
	position: absolute;
	content: "";
	background: #0097e7;
	width: 2px;
	height: 40px;
	left: 50%;
	top: -40px;
}
.gm .case ul{
	display: flex;
	justify-content: space-between;
	padding: 0;
	flex-wrap: wrap;
	row-gap: 40px;
}
.gm .case ul li{
	width: 47%;
}
.gm .case ul li dt{
	text-align: center;
	color: #0097e7;
	font-weight: bold;
	font-size: 1.3rem;
}
.gm .case ul li dd{
	padding: 0;
	margin: 20px 0 30px;
}
.gm .case ul li dd img{
	height: 319px;
	width: auto;
	display: block;
	margin: 0 auto;
}
@media all and (max-width: 768px) {
	.gm .case h2{
		margin: 6rem auto 3rem;
	}
	.gm .case ul li{
		width: 100%;
	}
	.gm .case ul li dd img{
		height: auto;
		width: 100%;
	}
	.gm .case ul li:nth-child(3) dd img{
		width: 85%;
	}
	.gm .case ul li:nth-child(5) dd img{
		width: 70%;
	}
}

/* -----------------------------------------------
  footer
-------------------------------------------------- */
.footer{
	margin-top: 100px;
}
.footer .f-navi{
	background: #00a1e9;
	padding: 20px 0;
}
.footer .f-navi .inner{
	display: block;
}
.footer .f-navi .inner div{
	width: 270px;
	margin: 20px auto;
}
.footer .f-navi .inner p{
	color: #fff;
	font-weight: bold;
	font-size: 1.3rem;
	text-align: center;
	margin-bottom: 40px;
}
.footer .f-navi .inner div img{
	width: 100%;
}
.footer .f-navi .inner ul{
	padding: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 20px;
}
.footer .f-navi .inner ul li{
	width: 24%;
	text-align: center;
	display: flex;
}

.footer .f-navi .inner ul::after {
	width: 49.5%;
	content:"";
	display: block;
}

.footer .f-navi .inner ul li a{
	display: grid;
	border: 3px solid #fff;
	color: #fff;
	border-radius: 10px;
	/*flex-direction: column;*/
	padding: 15px;
	flex-grow: 1;
	place-content:center;
}
.footer .f-navi .inner ul li a:hover{
	opacity: 0.7;
}
.footer .f-navi .inner ul li a span{
	font-weight: bold;
	font-size: 1.2rem;
}
@media all and (max-width: 768px) {
	.footer .f-navi .inner ul li{
		width: 48%;
	}

}

.footer .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px 0; }
  @media screen and (min-width: 1200px) {
    .footer .inner {
      padding-bottom: 70px; } }
  @media all and (min-width: 769px) and (max-width: 1199px) {
    .footer .inner {
      padding: 20px 20px;
      flex-direction: column; } }
  @media all and (max-width: 768px) {
    .footer .inner {
      padding :20px; } }
.footer__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap; }
  .footer__link__img {
    width: 135px; }
    @media screen and (max-width: 360px) {
      .footer__link__img {
        width: 105px; } }
    .footer__link__img img {
      width: 100%;
      opacity: 1 !important;
      min-width: 135px; }
      @media screen and (max-width: 360px) {
        .footer__link__img img {
          min-width: auto; } }
  .footer__link__txt {
    color: #000;
    font-weight: bold;
    text-align: left; }
    @media all and (max-width: 768px) {
      .footer__link__txt {
        font-size: 1.5rem; } }
    @media screen and (max-width: 385px) {
      .footer__link__txt {
        font-size: 1.4rem;
        font-feature-settings: "palt"; } }
    @media screen and (max-width: 360px) {
      .footer__link__txt {
        font-size: 1.3rem; } }
  .footer__link:hover {
    text-decoration: none; }
@media all and (max-width: 768px) {
  .footer__logo {
    margin: 0 auto; } }
.footer__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-end; }
  @media all and (max-width: 1199px) {
    .footer__txt {
      padding-top: 10px;
      align-items: center;
	  width: 100%;} }
  @media all and (min-width: 769px) {
    .footer__txt {
      padding-left: 10px; } }
  .footer__txt__set {
    display: flex;
    flex-direction: row;
    align-items: flex-end; }
    @media all and (max-width: 1199px) {
      .footer__txt__set {
        flex-wrap: wrap; } }
.footer .set--01 {
  margin: 0 20px 0 0;
  font-weight: 700; }
  @media all and (max-width: 1199px) {
    .footer .set--01 {
      text-align: center;
      margin: 0 auto 5px; } }
  @media all and (max-width: 768px) {
    .footer .set--01 {
      display: flex;
      flex-direction: column; } }
  .footer .set--01 span {
    margin-left: 10px;
    font-size: 0.9rem; }
.footer .set--02, .footer .set--03 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: bold; }
  @media all and (min-width: 769px) {
    .footer .set--02, .footer .set--03 {
      text-decoration: none; } }
  .footer .set--02::before, .footer .set--03::before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    width: 18px;
    height: 18px; }
@media all and (max-width: 1199px) {
  .footer .set--02 {
    width: calc(50% - 7px);
    text-align: right; } }
@media all and (max-width: 768px) {
  .footer .set--02 {
    text-decoration: underline !important; } }
.footer .set--02::before {
  margin-right: 4px;
  background-image: url(../images/icon_tel.png);
  transform: rotate(335deg) translateY(3px); }
.footer .set--03 {
  margin-left: 14px; }
  @media all and (max-width: 1199px) {
    .footer .set--03 {
      width: calc(50% - 7px);
      text-align: left; } }
  .footer .set--03::before {
    margin-right: 5px;
    background-image: url(../images/icon_fax.png);
    transform: translateY(2px); }

.copyright {
  color: #000;
  font-size: 0.7rem;
  font-weight: bold; }
  @media all and (max-width: 1199px) {
    .copyright {
      margin-top: 10px; } }
  @media all and (max-width: 768px) {
    .copyright {
      padding-bottom: 15px;
      width: 100%;
      text-align: center; } }

.pagetop{
	width: 30px;
	position: absolute;
	right: 3rem;
	top: -3.5rem;
}
/* -----------------------------------------------
  contact
-------------------------------------------------- */
.cta3 .inner{
	display: block;
	padding-bottom: 0;
}
.cta3 {
  padding: 50px 0 60px;
  background-color: #26b28e;
  background-image: url( "/themes/main/recruit-support/images/bg_cta.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
  @media all and (max-width: 768px) {
    .cta {
      padding: 35px 0 45px; } }
  .cta__txt {
    margin: 0 0 40px;
    color: #fff;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.4;
    text-align: center; }
    @media all and (max-width: 768px) {
      .cta__txt {
        font-size: 1.5rem; } }
  .cta3 ul{
  	display: flex;
	justify-content: space-between;
  }
  @media all and (max-width: 768px) {
  	.cta3 ul{
		flex-wrap: wrap;
		margin: 0;
		padding: 0;}
  }
  .cta3 ul li{
  	width: 30%;
  }
  @media all and (max-width: 768px) {
  	.cta3 ul li{
  		width: 100%;
		margin-bottom: 20px; }
	.cta3 ul li:last-child{
		margin-bottom: 0; }
  }
   .cta3 ul li a{
  	display: flex;  }
  .cta3 ul li:last-child a{
  flex-direction: column;
  line-height: 1.3; 
  /*
  padding-top: 11px;
  background:rgb(255 156 33);
  box-shadow: none;*/ }
  @media all and (max-width: 768px) {
  	.cta3 ul li:last-child a{
  	background-image: linear-gradient(0deg, rgb(247 118 12) 10%, rgb(247 162 35) 90%);
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);}
  	.cta3 ul li:last-child a:hover{
  	background-image: linear-gradient(180deg, rgb(247 118 12) 10%, rgb(247 162 35) 90%);
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);}
  }
  .cta__btn {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 620px;
    height: 80px;
    background-image: linear-gradient(0deg, rgb(247 118 12) 10%, rgb(247 162 35) 90%);
    border: 3px solid #fff;
    border-radius: 45px;
    color: #fff !important;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.6;
    text-decoration: none; 
	text-align: center;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);}
  .cta__btn span{
  }
    .cta__btn__txt {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
      .cta__btn__txt span {
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 1; }
      @media all and (max-width: 768px) {
        .cta__btn__txt {
          font-size: 1.8rem; }
          .cta__btn__txt span {
            font-size: 1.5rem;
            line-height: 1.4; } }
    .cta__btn__img {
      margin-right: 14px; }
      @media all and (max-width: 768px) {
        .cta__btn__img {
          margin-right: 8px;
          width: 42px;
          height: 42px; } }
    .cta__btn:hover {
      background-image: linear-gradient(180deg, rgb(247 118 12) 10%, rgb(247 162 35) 90%);
      color: #fff !important; }
      .cta__btn:hover .icon-object {
        fill: #ff8712; }
  .cta__tel {
    display: block;
    color: #fff !important;
    font-size: 6rem;
    font-weight: bold;
    line-height: 1;
    text-align: center; }
	a[href*="tel:"]{
		pointer-events: none;
	}
    @media all and (max-width: 768px) {
      .cta__tel {
        font-size: 3.9rem;
        text-decoration: underline !important; }
		a[href*="tel:"]{
			pointer-events: auto;}}
  .cta__time {
    margin: 7px 0 20px;
    color: #fff;
    font-weight: bold;
    font-feature-settings: "palt";
    text-align: center;
	display: block; }
    @media all and (max-width: 768px) {
      .cta__time {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 1rem;
        line-height: 1.4; }
        .cta__time span {
          display: block; }
        .cta__time .space {
          display: none; } }


/* SP：ハンバーガーメニュー */
@media all and (max-width: 768px) {
.drawer-open {
  overflow: hidden !important
}

.drawer-nav {
  position: fixed;
  z-index: 2;
  top: 0;
  overflow: hidden;
  width: 16.25rem;
  height: 100%;
  color: #222;
  background-color: #fff
}

.drawer-brand {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 3.75rem;
  display: block;
  padding-right: .75rem;
  padding-left: .75rem;
  text-decoration: none;
  color: #222
}

.drawer-menu {
  margin: 0;
  padding: 0;
  list-style: none
}

.drawer-menu-item {
  font-size: 1rem;
  display: block;
  padding: .75rem;
  text-decoration: none;
  color: #222
}

.drawer-menu-item:hover {
  text-decoration: underline;
  color: #555;
  background-color: transparent
}

.drawer-overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2)
}

.drawer-open .drawer-overlay {
  display: block
}

.drawer--top .drawer-nav {
  top: -100%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  -webkit-transition: top .6s cubic-bezier(.19, 1, .22, 1);
  transition: top .6s cubic-bezier(.19, 1, .22, 1)
}

.drawer--top.drawer-open .drawer-nav {
  top: 70px;
}

.drawer--top .drawer-hamburger,
.drawer--top.drawer-open .drawer-hamburger {
  right: 0;
}

.drawer--left .drawer-nav {
  left: -16.25rem;
  -webkit-transition: left .6s cubic-bezier(.19, 1, .22, 1);
  transition: left .6s cubic-bezier(.19, 1, .22, 1)
}

.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-nav,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
  left: 0;
}

.drawer--left.drawer-open .drawer-hamburger {
  left: 16.25rem;
}

.drawer--right .drawer-nav {
  right: -16.25rem;
  -webkit-transition: right .6s cubic-bezier(.19, 1, .22, 1);
  transition: right .6s cubic-bezier(.19, 1, .22, 1)
}

.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-nav,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0
}

.drawer--right.drawer-open .drawer-hamburger {
  right: 16.25rem
}

.drawer-hamburger {
  position: fixed;
  z-index: 4;
  top: 3px;
  display: block;
  box-sizing: content-box;
  width: 1.5rem;
  padding: 18px .75rem 30px;
  -webkit-transition: all .6s cubic-bezier(.19, 1, .22, 1);
  transition: all .6s cubic-bezier(.19, 1, .22, 1);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  border: 0;
  outline: 0;
  background-color: transparent
}

.drawer-hamburger:hover {
  cursor: pointer;
  background-color: transparent
}

.drawer-hamburger-icon {
  position: relative;
  display: block;
  margin-top: 10px
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
  width: 100%;
  height: 2px;
  -webkit-transition: all .6s cubic-bezier(.19, 1, .22, 1);
  transition: all .6s cubic-bezier(.19, 1, .22, 1);
  background-color: #222
}

.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
  position: absolute;
  top: -10px;
  left: 0;
  content: " "
}

.drawer-hamburger-icon:after {
  top: 10px
}

.drawer-open .drawer-hamburger-icon {
  background-color: transparent
}

.drawer-open .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger-icon:before {
  top: 0
}

.drawer-open .drawer-hamburger-icon:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.drawer-open .drawer-hamburger-icon:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0
}

.drawer--sidebar,
.drawer--sidebar .drawer-contents {
  background-color: #fff
}

.drawer-menu ul {
	padding: 0;
	margin: 0;
}
.drawer-menu ul li {
  border-bottom: 1px solid #ccc;
  padding: 20px;
}
.drawer-menu ul li a{
	position: relative;
	display: block;
}
.drawer-menu ul li a::after{
	content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -3px;
    transform: rotate(45deg);
}
.drawer-nav .close{
	width: 100%;
    height: 40px;
    line-height: 40px;
    background: #333;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

}
@media (min-width:64em) {
  .drawer--sidebar .drawer-hamburger {
    display: none;
    visibility: hidden
  }
 }
 
/*----------------------------------
	制作実績
------------------------------------*/
.site{
	margin-top: 5rem;
}
.site h2{
	font-size: 2.2rem;
}
.site ul{
	display: flex;
	justify-content: space-between;
	gap: 30px; 
}
@media all and (max-width: 768px) {
	.site ul{
		flex-wrap: wrap;
	}
	.site li{
		width: 100% !important;
	}
}