/********************************************************/
/* アコーディオンメニュー */
/********************************************************/
/* 矢印を消す */
/* Chrome、Safari以外 */
summary {
  display: block;
}

/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}


/********************************************************/
/* ハンバーガーメニュー  */
/********************************************************/
.hamburger {
    display: block;
    position: fixed;
    top: .5rem;
    right: 1rem;
    background-color: #fff;
    border-color: transparent;
    z-index: 5555;
    border: #000 solid 1px;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    padding:1rem .8rem;
}

/* ハンバーガーメニューの線 */
.hamburger span {
  background-color: #000; /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
  display: block;
  height: 1px;
  position: relative;
  -webkit-transition: ease 0.5s;
  transition: ease 0.5s;
  width: 100%;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 6px 0;
  width: 80%;
}

.hamburger span:nth-child(3) {
  margin: 8px 0;
}

.hambuger__text {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 10px;
  /*アニメーションの指定*/
  transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
  display: block;
  white-space: nowrap;
  color: #fff;
}

.hambuger__text:nth-of-type(2) {
  opacity:0;/*透過0に*/
}

/* ハンバーガーメニュークリック後のスタイル */

.hamburger.active span:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  display: none;
}

.hamburger.active span:nth-child(3) {
  top: -1px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/*hoverするとテキストが入れ替わる設定*/
.hamburger.active  .hambuger__text:nth-of-type(1){
  opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.hamburger.active  .hambuger__text:nth-of-type(2){
  opacity:1;/*不透明に*/
}




/********************************************************/
/* ドロワーメニュー */
/********************************************************/
.drawer__nav {
  transition: all .5s;
  visibility: hidden;
	 -webkit-transform: translate3d(0, 0, 0) !important;
  content: "";
  height: 95%;
  top: 0;
  right: 0;
  position: fixed;
	 transform: translate3d(0, 0, 0) !important;
  width: 40%;
  z-index: 255;
  opacity: 0;
	background: linear-gradient(90deg, rgba(218,208,233,0.95) 0%, rgba(235,211,225,0.95) 50%, rgba(254,215,233,0.95) 100%);
  padding: 4em 1rem　2em;
	overflow: scroll;
	@media screen and (max-width: 768px) {
    width: 100%;
		height: 100%;
    padding: 1rem;
  }
}
.drawer__nav.active {
  transition: all .5s; /* トランジションにはopacityを使用 */
  visibility: visible;
  opacity: 1;
}
.drawer__container　{
  width: 100%;
}
.drawer__menu {
  width: 100%;
}
.drawer__menu li a{
  display: block;
	text-decoration: none;
	padding: 7px 20px ;
	color: #333;
	font-size: 18px;
	font-weight: 700;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	@media screen and (max-width: 768px) {
    font-size: 16px;
	}
}
.drawer__menu li a:hover {
	color: #999;
}
.drawer__menu li li a {
    display: block;
	text-decoration: none;
	padding: 5px 0 5px 60px;
	color: #333;
	font-size: 16px;
	font-weight: 700;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	@media screen and (max-width: 768px) {
    font-size: 14px;
	}
}
.drawer__menu li li a:before {
    font-family: "Font Awesome 5 Free";
	content: '\f105';/*アイコン種類*/
	font-weight: 900;
	position:relative;
	left: -5px;
}
.drawer__menu__list {
	  width: 100%;
  }
}

.drawer__menu__list__link {
  border-bottom: #fff solid 1px;
	width: 100%;
}

.drawer__menu__arrow {
  vertical-align: text-top;
	display: inline-block;
	width: 15px;
	height: 15px;
}

.drawer__menu__btn-box {
  margin-top: 1rem;
  padding-bottom: 1rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: #fff solid 1px;
}

.drawer__menu__btn {

}

.contact__btn-box {
	width: 80%;
	margin: 0 auto;
}
.contact__btn-box img{
	width: 100%;
}
.contact__btn {
	margin: 7px 0;
}
.contact__btn-box01 {
	width: 80%;
	margin: 0 auto;
}
.contact__btn-box01 img{
	width: 100%;
}
.contact__btn01 {
	margin: 7px 0;
}

.contact__btn__link {
	margin: 0;
}
.overlay {
  display: none;
}
.overlay .active {
    position: fixed;
    top: 0;
    right: 0;
    display: block;
    background-color: #fff;
    width: 40%;
    height: 90%;
    z-index: 254;
    @media screen and (max-width: 768px) {
      width: 100%;
    }
}
/********************************************************/
/* side__text */
/********************************************************/
.side__text {
	width: 100%;
	max-width: 15px;
	position: fixed;
	top: 50%;
	left: 1rem;
	transform: translateY(-50%);
	z-index: 999;
}
@media screen and (max-width: 768px) {
	.side__text {
		display: none;
	}
	}
/********************************************************/
/* cv__btn */
/********************************************************/
.cv__btn {
	width: 100%;
	max-width: 200px;
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 200;
}
@media screen and (max-width: 768px) {
	.cv__btn {
		bottom: 4rem;
		right: 1rem;
		width: 33%;
		max-width: 170px;
	}
}
/********************************************************/
/* header */
/********************************************************/
.headernew {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	padding: 1rem;
	z-index: 250;
	background-color: #fff;
}

.header__logo {
	width: 30%;
	max-width: 170px;
	margin-inline: auto;
}
@media screen and (max-width: 768px) {
	.header__logo {
		width: 45%;
		max-width: 250px;
	}
	}