@charset "UTF-8";
/*******************************************************************************
	サイト名：松山市青少年育成市民会議
	作成会社：Fellow System
--------------------------------------------------------------------------------
 No.│   日付   │区分│						内  容
━━┿━━━━━┿━━┿━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 001│2020.05│新規│[V1.00] 山本
*******************************************************************************/

/*******************************************************************************
	共通部
--------------------------------------------------------------------------------
	適応：全部
*******************************************************************************/
/* ボタンのデフォルト */
.common_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.anm_btn {
  max-width: 175px;
  width: 90%;
  height: 40px;
  border: 1px solid #707070;
  border-radius: 37px;
  color: #000000;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.05em;
  position: relative;
  transition: ease .2s;
  overflow: hidden;
}

.anm_btn:hover span{
  color:#fff;
}

.anm_btn {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#000000;
}

.anm_btn:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 37px;
  top: 0;
  left: 0;
  z-index: -1;
  background: #606060;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.2s;
  overflow: hidden;
}

.anm_btn:hover:before{
	transform-origin: 0% 50%;
  border-radius: 37px;
  	transform: scaleX(1);
}

.anm_btn_white {
  max-width: 175px;
  width: 90%;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 37px;
  color: #000000;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.05em;
  position: relative;
  transition: ease .2s;
  overflow: hidden;
}

.anm_btn_white:hover span{
  color:#606060;
}

.anm_btn_white {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#000000;
}

.anm_btn_white:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 37px;
  top: 0;
  left: 0;
  z-index: -1;
  background: #fff;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.2s;
  overflow: hidden;
}

.anm_btn_white:hover:before{
	transform-origin: 0% 50%;
  border-radius: 37px;
  	transform: scaleX(1);
}


/* .about_link a {
	max-width: 205px;
	width: 90%;
	height: 45px;
	border: 1px solid #ffffff;
	border-radius: 22px;
	font-weight: bold;
	font-size: 17px;
	letter-spacing: 0.2999vw;
	letter-spacing: 0.05em;
	overflow: hidden;
} */

.about_btn {
  max-width: 205px;
  width: 90%;
  height: 45px;
  border: 1px solid #fff;
  border-radius: 22px;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 0.05em;
  position: relative;
  transition: ease .2s;
  overflow: hidden;
}

.about_btn:hover span{
  color:#606060;
}

.about_btn {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#000000;
}

.about_btn:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 22px;
  top: 0;
  left: 0;
  z-index: -1;
  background: #fff;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.2s;
  overflow: hidden;
}

.about_btn:hover:before{
	transform-origin: 0% 50%;
  border-radius: 22px;
  transform: scaleX(1);
}

/* 末端に...を付ける */
.text_ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.home_icon {
  width: 30px;
  height: 30px;
  border-color: #008ac6;
  font-size: 1.25em;
  color: #008ac6;
}
.common_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.circle_icon {
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
}