@charset "utf-8";

body	{
    width: 100%;
    text-align: center;
    font-size: 20px;
    line-height:220%;
    font-family: source-han-sans-japanese, "源ノ角ゴシック", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",メイリオ, Meiryo, sans-serif;
    font-family: "Sawarabi Gothic", sans-serif;
    color: #574132;
}
* {
    padding: 0; /* Reset `padding` and `margin` of all elements */
    margin: 0;
}
ul {
    margin:0;
    padding:0
}
@font-face {
    font-family:'SourceHanSansJPR';
    font-style:normal;
    src: url('SourceHanSansJP-Regular.otf') format('opentype') ;
}
#wrapper	{
    width:100%;
    margin:0 auto;
    text-align: center;
    display: block;
}
img {
    padding: 0px;
    margin: 0px;
    vertical-align:top;
}
a {
    color: #56bcb6;
    text-decoration: none;
}
a:hover {
    color: #85d2cd;
    text-decoration: none;
}
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f20 { font-size: 20px; }
.f25 { font-size: 25px; }

.h10 { height: 10px; }
.h20 { height: 20px; }
.h30 { height: 30px; }
.h50 { height: 50px; }
.h60 { height: 60px; }
.h80 { height: 80px; }
.h100 { height: 110px; }

#feed, #feed_phone { line-height: 210%; }

/*==================================================
サイトタイトル
===================================*/
.header {
    background:url('header_back.gif')no-repeat;
    width: 1260px;
    height: 190px;
    text-align: left;
    margin:0 auto;
}
.header_inner {
    margin-left: 300px;
    padding-top: 50px;
}
.header_title a {
    color: #a88300;
    font-size: 25px;
    text-decoration: none;
}
.header_sub {
    color: #263763;
    font-size: 18px;
}

/*==================================================
追従バナー
===================================*/
.btn_floating {
    position:fixed;
    top:250px;
    right:0px;
}
.btn_floating2 {
    position:fixed;
    top:567px;
    right:0px;
}

/*==================================================
====================================================
パソコン
====================================================
====================================================*/
@media print, screen and (min-width: 768px) {

#for_PC	{display: inherit;}
#for_Phone {display: none;}

.right {
    width:1000px;
    text-align: right;
}

/*==================================================
メニュー（PC）
===================================*/

/*==================================================
トップイメージ＆グロナビ
===================================*/

.menu_back {
    width:1000px;
    height:135px;
    position: relative;
    z-index:0;
    text-align:center;
    margin:0 auto;
}
.menu_back_under {
    width:1000px;
    height:135px;
    position: relative;
    z-index:0;
    text-align:center;
    margin:0 auto;
}

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 auto;
    list-style: none;
    width:1000px;
}

.gnavi li a{
    display: block;
    padding:20px 25px;
    text-decoration: none;
    color: #786151;
    font-size:18px;
    line-height: 150%;
}

.gnavi li{
    margin-bottom:0px;
}

.menu1 {
    width:200px;
    height:135px;
　　font-family: source-han-sans-japanese, "源ノ角ゴシック", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",メイリオ, Meiryo, sans-serif;
}

.menu2 {
    width:200px;
    height:135px;
}

.menu3 {
    width:200px;
    height:135px;
}

.menu4 {
    width:200px;
    height:135px;
}

.menu5 {
    width:200px;
    height:135px;
}


/*==================================================
　グロナビの動き
===================================*/

/*背景の設定*/

.gnavi li a{
    /*背景色の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li a::after {
  content: '';
    /*絶対配置で線の位置を決める*/
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
    /*背景の形状*/
  width: 0;
  height:100%;
  background:#EFEFEF;
    /*アニメーションの指定*/
  transition:all .5s;
  opacity: 0;/*はじめは透過0*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    /*背景の形状*/
  width: 100%;/*横幅を伸ばす*/
  opacity: 1;/*不透明に*/
}

.gnavi li.current a,
.gnavi li a:hover{
    color: #786151;
}

/*==================================================
業務内容（PC）
===================================*/

.top_bis {
	width:1000px;
	padding: 0px;
	margin: 0 auto;
	margin-top: 0px;
}

.top_bis:after {
	content: "";
	display: block;
	clear: both
}

.top_bis_left {
	float: left;
	width: 320px;
	height: 650px;
	background:#f7f7e3;
	text-align: left;
	margin-right: 20px;
}
.top_bis_right {
	float: left;
	width: 320px;
	height: 650px;
	background:#f7f7e3;
	text-align: left;
}
.bis_ttl {
	text-align: center;
	font-size: 24px;
	line-height: 170%;
	color: #574132;
	height: 80px;
}
.bis_txt {
	margin: 0 auto;
	padding: 20px 0px;
	line-height: 200%;
	width: 270px;
	height: 300px;
	text-align: left;
	font-size: 16px;
	color: #574132;
}
#contents_bis {
	text-align: left;
	width:1000px;
	margin: 0 auto;
	font-size: 16px;
	line-height:200%;
}
.bus_green {
	font-size: 22px;
	color: #609cbe;
	margin-bottom: 20px;
}
.go_bus_m {
  padding:20px;
  margin-bottom:15px;
  border:dashed 1px #85b6d1;
  color:#786151;
  line-height:170%;
}
.go_bus_arrow {
  background:#a5c8de;
  color:#FFF;
  float:left;
  width:30px;
  text-align:center;
}
.mid_bis {
	width:1000px;
	padding: 0px;
	margin: 0 auto;
	margin-top: 0px;
}

.mid_bis:after {
	content: "";
	display: block;
	clear: both
}

.mid_bis_left {
	float: left;
	width: 150px;
	height: 142px;
	text-align: left;
	margin-right: 20px;
}
.mid_bis_right {
	float: left;
	width: 800px;
	height: 142px;
	text-align: left;
	padding-top: 40px;
	font-size: 30px;
	line-height: 170%;
	color: #574132;
}
ol.bus_list {
  counter-reset:list;
  list-style-type:none;
  font: 15px/1.6;
  padding:0;
}
ol.bus_list li{
  position:relative;
  padding: 0 0 10px 20px;
  margin: 10px 0 10px 0px;
  font-size:15px;
  line-height: 170%;
  border-bottom: dashed 1px #73beb7;
}
ol.bus_list li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #73beb7;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: top;
}

/*==================================================
目指す世界（PC）
===================================*/

.top_vision {
	width:1000px;
	height: 309px;
	background: url('../images/back_vision.gif') no-repeat;
	padding: 0px;
	margin: 0 auto;
}
.top_vision_left {
	float: left;
	width: 320px;
	margin-left: 100px;
	text-align: left;
}
.vision_ttl {
	text-align: left;
	font-size: 28px;
	line-height: 170%;
	color: #574132;
	margin-top: 20px;
	height: 60px;
}
.vision_txt {
	margin: 0 auto;
	width: 380px;
	line-height: 200%;
	text-align: left;
	font-size: 16px;
	color: #574132;
}
.back_vision_lead {
	width:1000px;
	height: 664px;
	background: url('../images/vision/back_lead.gif') no-repeat;
	padding: 0px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 200%;
	text-align: center;
}
#contents_center {
	text-align: center;
	width:1000px;
	margin: 0 auto;
}
.vision_mid {
	color: #80ac59;
	font-size: 33px;
	line-height: 200%;
}
.vision_mid2 {
	color: #574132;
	font-size: 25px;
}
.vision_mid3 {
	color: #574132;
	font-size: 20px;
	line-height: 200%;
}
.vision_sdgs {
	border: solid 1px #85b05f;
	width:1000px;
	margin: 0 auto;
}
.vision_sdgs_inner {
	width:920px;
	margin: 40px auto;
	color: #574132;
	font-size: 16px;
	line-height: 200%;
}
.sdgs_table {
	border-top: solid 1px #85b05f;
	margin-top: 30px;
}
.vision_option {
	color: #7a7a7a;
	font-size: 15px;
}

/*==================================================
ダイバな人々（PC）
===================================*/

.top_blog_all {
	width:1000px;
	padding: 0px;
	margin: 0 auto;
}
.top_blog {
	width:432px;
	height: 580px;
	background: url('../images/back_blog.gif') no-repeat;
	padding: 0px;
	margin: 0 auto;
	vertical-align: top;
}
.top_bloglist {
	width:568px;
	height: 580px;
	background: url('../images/back_bloglist.gif') no-repeat;
	padding: 0px;
	margin: 0 auto;
	text-align: left;
	font-size: 15px;
	vertical-align: top;
}

.top_bloglist_inner {
	vertical-align: top;
	width: 380px;
	height: 420px;
	margin: 0 auto;
	margin-top: 80px;
}
.top_blog_left {
	float: left;
	width: 320px;
	margin-left: 100px;
	text-align: left;
}
.blog_ttl {
	text-align: left;
	font-size: 28px;
	line-height: 170%;
	color: #574132;
	margin-top: 30px;
	margin-left: 100px;
	height: 110px;
}
.blog_txt {
	margin-left: 100px;
	line-height: 200%;
	text-align: left;
	font-size: 16px;
	color: #574132;
}

/*==================================================
お問い合わせ（PC）
===================================*/
.contact_lead {
	width:1000px;
	padding: 0px;
	margin: 0 auto;
	margin-top: 0px;
}

.contact_lead:after {
	content: "";
	display: block;
	clear: both
}

.contact_lead_left {
	float: left;
	width: 580px;
	height: 223px;
	font-size: 17px;
	line-height: 220%;
	text-align: left;
	margin-right: 20px;
	color: #574132;
}
.contact_lead_right {
	float: left;
	width: 355px;
	height: 223px;
	text-align: left;
}

/*==================================================
枠
===================================*/
.title06 {
    width:100%;
    position: relative;
    display: block;
    text-align:center;
}
.title06_content {
    width:100%;
    height:850px;
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
    background: #93c486;
}
.title06_content_inner {
    width:1100px;
    height:850px;
    margin: 0 auto;
    text-align:center;
}
.title06_content_inner .pic01 .text_area {
		line-height: 2.1;
		text-align: center;
		margin: 50px 0px 0px 0px;
		background: #fff;
		width: 1100px;
}
.title06_content_inner .pic01 .text_area:after {
		clear: both;
}
.btn_title06 .btn a {
	display: block;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%, 0 0;
	color: #72beb6;
	text-align: center;
	margin: 0 auto;
	letter-spacing: 0.04em;
	transition: unset;
	text-decoration: none;
}
.btn_title06 .btn a {
	padding: 20px 80px 50px 40px;
	font-size: 24px;
}
.btn_title06.btn_title06_1 .btn {
	width: 366px;
	height: 115px;
	margin: 0 auto;
}
.btn_title06.btn_title06_1 .btn a {
	background-image: url(btn_news01_off.gif), url(btn_news01_on.gif);
	color: #72beb6;
}
	/* hover */
.btn_title06 .btn a:hover {
	background-size: 0 0, 100%;
	color: #fff;
}

/*==================================================
フッタ（PC）
===================================*/
#footer {
    left: 0;
    bottom: 0;
    width: 100%;
    height:320px;
    margin-top: 150px;
    background: #73beb7;
}
#footer_inner {
    width:1000px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width:1000px;
}
#footer:after {
    content: "";
    display: block;
    clear: both
}
.footer_corp {
    color: #f5f5e5;
    font-size: 17px;
    line-height: 170%;
}
.footer_title a {
    color: #ffffff;
    text-decoration: none;
    font-size:28px;
}

.footer_left {
	float: left;
	width: 200px;
	padding-top: 30px;
	text-align: left;
	font-size: 17px;
	line-height: 220%;
}
.footer_left a {
	text-decoration: none;
	color: #452f1f;
}
.footer_left a:hover {
	text-decoration: none;
	color: #f5f5e5;
}
.footer_middle {
	float: left;
	width: 600px;
	text-align: center;
	font-size: 17px;
	line-height: 170%;
}
.footer_right {
	float: left;
	width: 200px;
	text-align: left;
}

/*==================================================
ページトップ（PC）
===================================*/

#pagetop{
	position:fixed;
	right: 20px;
	bottom: 20px;
	cursor:pointer;
        }

#pagetop:hover {
	opacity: 0.8; }

}

/*==================================================
====================================================
モバイル
====================================================
====================================================*/
@media print, screen and (max-width: 768px) {

/*==================================================
メニュー（モバイル）
===================================*/

#for_PC	{display: none;}
#for_Phone {display: inherit;}

.center {
    width:90%;
    text-align: center;
}

.phone_head {
	width:100%;
	padding: 0px;
}
	
.phone_head_member {
	width:100%;
	padding: 0px;
	background: #a7dcd7;
}

.phone_head:after {
	content: "";
	display: block;
	clear: both;
}
.phone_head_01 {
	float: left;
	width: 85%;
	font-size: 15px;
}

.phone_head_02 {
	float: left;
	width: 10%;
	text-align: right;
	margin-right: 10px;	
}
	
.phone_head_01_member {
	float: left;
	width: 100%;
	font-size: 15px;
}
	
.phone_head_02_member {
	float: left;
	width: 0%;
	text-align: right;
	margin-right: 0px;
	background: #a7dcd7;
}
	
.pan {
	padding-left:20px;
	padding-top:50px;
	color: #a7dcd7;
	font-size: 14px;
}
	
.ul_open_h,
.ul_open_v{
    background: #EFEFEF;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    list-style: none;
    position: fixed;
    top: 0;
    z-index:100;
    text-align:　cetner;
}

.ul_open_h { 
    height: 100%;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .25s ease-in-out;
    overflow-y: scroll;
    padding: 5px;
    text-align: left;
}

.ul_open_h {
    padding: 15px 20px 15px 0px;
    width: 60%;
    font-size:17px;
    color: #694c39;
    line-height:250%;
    display: inline;
    text-align: left;
}
.ul_open_h a{
	color: #694c39;
}

.ul_open_h:after {
	content: "";
	display: block;
	clear: both;
}

.ul_open_h ul {
	list-style-type: none;
	margin-bottom: 7px;
}

.ul_open_h li {
	font-size: 10px;
	color: #694c39;
	display: inline;
	display: inline-block;
	margin-bottom: 10px;
}
.menu1 {
	width: 20%;
	float: left;
	font-size: 16px;
	margin-bottom: 6px;
	vertical-align: top;
}
.menu2 {
	width: 80%;
	float: left;
	font-size: 16px;
	margin-bottom: 6px;
	margin-left: 25px;
	vertical-align: top;
	text-align: left;
}
	
.menu2 a {
	font-size: 16px;
	margin-bottom: 6px;
	vertical-align: top;
	text-decoration: none;
}

.menu_line{
    border-top: solid thin #8a756a;
    padding: 20px 30px 10px 30px;
    width: 80%;
    text-align:left;
    line-height:170%;
    position:relative;
    z-index:1000;
}
.btn{
    width: 50px;
    height: 50px;
    position: absolute;
    right :15px;
    top: 7px;
    background: #fff;
	z-index:500;
}
.btn:before,
.btn:after,
.btn span{
    display: block;
    width: 80%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.btn span{
    height: 3px;
    background-color: #694c39;
    top: calc(50% - 1.5px);
}

.btn:before{
    content: "";
    top: calc(25% - 3px);
    border-top: 3px solid #694c39;
}
.btn:after{
    content: "";
    bottom: calc(25% - 3px);
    border-bottom: 3px solid #694c39;
}
.btn.on span{
    display: none;
}

.btn.on:before{
    top: calc(50% - 1.5px);
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}
.btn.on:after{
    bottom: calc(50% - 1.5px);
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}

.btnlink{
    width: 90%;
    display: block;
    margin: auto;
    border: 1px solid #0060ff;
    border-radius: 5px;
    background: #4285F4;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-bottom: 35px;
    color: #fff;
}
.linkbox a{
    text-decoration: none;
}

.open-1{
    right : -100%;
}
.open-1.active{
    right : 0px;
}

.move-1.on.btn{
    position: fixed;
    right: 25px;
    top: 10px;
}

.outer{
  display: table;
  width: 100%;

}
.inner{
  display: table-cell;
  vertical-align: middle;
    width: 90%;
    height:300px;
    border: solid 1px #a0d0ca;
    margin:0 auto;
}

/*==================================================
業務内容（Phone）
===================================*/

.top_bis {
	width: 90%;
	padding: 0px;
	margin: 0 auto;
	margin-top: 0px;
}

.top_bis:after {
	content: "";
	display: block;
	clear: both
}

.top_bis_left {
	float: left;
	width: 100%;
	background:#f7f7e3;
	text-align: left;
	margin-bottom: 30px;
}
.top_bis_right {
	float: left;
	width: 100%;
	background:#f7f7e3;
	text-align: left;
}
.bis_ttl {
	text-align: center;
	font-size: 24px;
	line-height: 170%;
	color: #574132;
	height: 80px;
}
.bis_txt {
	margin: 0 auto;
	padding: 20px 0px;
	line-height: 200%;
	width: 80%;
	text-align: left;
	font-size: 15px;
	color: #574132;
}
#contents_bis {
	text-align: left;
	width:90%;
	margin: 0 auto;
	font-size: 16px;
	line-height:200%;
}
.mid_dis {
	text-align: center;
	font-size: 28px;
	line-height: 160%;
	color: #73beb7;
	height: 80px;
}
.mid_dis2 {
	text-align: center;
	font-size: 28px;
	line-height: 160%;
	color: #73beb7;
	height: 130px;
}
.bus_green {
	font-size: 22px;
	color: #609cbe;
	margin-bottom: 20px;
}
.go_bus_m {
  padding:20px;
  margin-bottom:15px;
  border:dashed 1px #85b6d1;
  color:#786151;
  line-height:170%;
}
.go_bus_arrow {
  background:#a5c8de;
  color:#FFF;
  float:left;
  width:30px;
  text-align:center;
}
ol.bus_list {
  counter-reset:list;
  list-style-type:none;
  font: 15px/1.6;
  padding:0;
}
ol.bus_list li{
  position:relative;
  padding: 0 0 10px 20px;
  margin: 10px 0 10px 0px;
  font-size:15px;
  line-height: 170%;
  border-bottom: dashed 1px #73beb7;
}
ol.bus_list li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #73beb7;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: top;
}

/*==================================================
目指す世界（Phone）
===================================*/
.top_vision_over {
	width: 90%;
	margin: 0 auto;
}

.vision_layer {
  position: relative;
  margin: 0 auto;
  text-align: center;
}

/* 背景画像の読み込み */
.vision_layer-bg{
  background: url(../images/phone/back_vision_m.gif) no-repeat 0 0;
  padding-top: 103.255208%;
  background-size: 100%;
}

/* 重ねるボックスの設定 */
.vision_layer-in{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 55px 55px 0px 30px;
}

.vision_ttl {
	text-align: left;
	font-size: 28px;
	line-height: 170%;
	color: #574132;
	margin-top: 20px;
	height: 60px;
}
.vision_txt {
	margin: 0 auto;
	line-height: 200%;
	text-align: left;
	font-size: 15px;
	color: #574132;
}
.back_vision_m_lead {
	width:100%;
	height: 664px;
	background: url('../images/phone/back_vision_lead.gif') no-repeat;
	padding: 0px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 200%;
	text-align: center;
}
#contents_center {
	text-align: center;
	width:90%;
	margin: 0 auto;
}
.vision_mid {
	color: #80ac59;
	font-size: 30px;
	line-height: 170%;
	width:100%;
	margin: 0 auto;
}
.vision_mid2 {
	color: #574132;
	font-size: 18px;
	width:100%;
	margin: 0 auto;
}
.vision_mid3 {
	color: #574132;
	font-size: 15px;
	line-height: 170%;
	margin: 0 auto;
}
.vision_sdgs {
	border: solid 1px #85b05f;
	width:90%;
	margin: 0 auto;
}
.vision_sdgs_inner {
	width:85%;
	margin: 40px auto;
	color: #574132;
	font-size: 16px;
	line-height: 200%;
	text-align: left;
}
.sdgs_table {
	border-top: solid 1px #85b05f;
	margin-top: 30px;
}

.vision_under_layer {
  position: relative;
  margin: 0 auto;
  text-align: center;
}

/* 背景画像の読み込み */
.vision_under_layer-bg {
  background: url(../images/phone/back_vision_lead.gif) no-repeat 0 0;
  padding-top: 221.354167%;
  background-size: 100%;
}

/* 重ねるボックスの設定 */
.vision_under_layer-in {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 35px 30px 0px 30px;
  font-size: 16px;
  line-height: 180%;
  text-align: left;
}
.sdgs_line {
	border-top: solid 1px #85b05f;
	margin: 50px 0px;

}
.vision_option {
	color: #7a7a7a;
	font-size: 15px;
}


/*==================================================
お問い合わせ（Phone）
===================================*/
.contact_lead {
	width:90%;
	padding: 0px;
	margin: 0 auto;
	margin-top: 0px;
}

.contact_lead:after {
	content: "";
	display: block;
	clear: both
}

.contact_lead_left {
	float: left;
	width:100%;
	height: 223px;
	font-size: 17px;
	line-height: 200%;
	text-align: center;
	color: #574132;
}
.contact_lead_right {
	float: left;
	width:100%;
	height: 223px;
	text-align: center;
}

/*==================================================
ダイバな人々（Phone）
===================================*/

.top_blog_over {
	width: 90%;
	margin: 0 auto;
}

.blog_layer {
  position: relative;
  margin: 0 auto;
  text-align: center;
}

/* 背景画像の読み込み */
.blog_layer-bg{
  background: url('../images/phone/back_blog1_m.gif') no-repeat 0 0;
  padding-top: 88.411458%;
  background-size: 100%;
}

/* 背景画像の読み込み */
.blog_layer-bg2{
  background: url('../images/phone/back_blog2_m.gif') no-repeat 0 0;
  padding-top: 102.112676%;
  background-size: 100%;
}

/* 重ねるボックスの設定 */
.blog_layer-in {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  margin: 45px 55px 0px 0px;
}
.blog_ttl {
	width: 300px;
	text-align: left;
	font-size: 26px;
	line-height: 160%;
	color: #574132;
	margin-top: 30px;
	margin-left: 30px;
	height: 80px;
}
.blog_txt {
	width: 300px;
	margin-left: 30px;
	line-height: 200%;
	text-align: left;
	font-size: 15px;
	color: #574132;
}

/* 重ねるボックスの設定 */
.blog_layer-in2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 40px;
}

.top_bloglist_inner {
	width:100%;
	text-align: left;
	font-size: 15px;
	vertical-align: top;
}

/*==================================================
フッタ（モバイル）
===================================*/
/* ubtn1,ubtn2を横に並べる設定 */

.ubtn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	display: block;
	background: #73beb7;
}

.ubtn {
	width:100%;
	padding: 0px;
}

.ubtn:after {
	content: "";
	display: block;
	clear: both;
}
.ubtn1 {
	float: left;
	width: 38%;
	text-align: left;
}
.ubtn2 {
	float: left;
	width: 38%;
	text-align: left;
}
.ubtn3 {
	float: left;
	width: 24%;
	text-align: left;
}

/*==================================================
　グロナビの動き（モバイル）
===================================*/

/*背景の設定*/

.gnavi a{
    /*背景色の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi a::after {
  content: '';
    /*絶対配置で線の位置を決める*/
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
    /*背景の形状*/
  width: 0;
  height:100%;
  background:#a0d0ca;
    /*アニメーションの指定*/
  transition:all .5s;
  opacity: 0;/*はじめは透過0*/
}

/*現在地とhoverの設定*/
.gnavi .current a::after,
.gnavi a:hover::after {
    /*背景の形状*/
  width: 100%;/*横幅を伸ばす*/
  opacity: 1;/*不透明に*/
}

.gnavi .current a,
.gnavi a:hover{
    color: #fff;
}


}

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/*========= レイアウトのためのCSS ===============*/

p{
  margin:10px 0;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  width: 240px;
  padding: 0px;
  margin: 0px 20px 10px 0px;
  box-sizing:border-box;
  list-style: none;
}
.box2{
  width: 240px;
  padding: 0px;
  margin: 0px 0px 10px 0px;
  box-sizing:border-box;
  list-style: none;
}

/* -----------------------------------------------

= 写真表示

----------------------------------------------- */
.img_area .img { /* 角丸枠ではみ出たところを隠す */
	position: relative;
	/* border-radius: 1rem; 円形にしたい場合*/
	border-radius: 50%;
	overflow: hidden;
	will-change: transform;
}
.img_area .img img { /* 拡大するときの柔らかい動き */
	transition: all 0.5s ease 0s;
}
.img_area {
	width:100%;
	text-align:center;
	background:#EFEFEF;
}
.img_area_inner {
	margin:0 auto;
	text-align: center;
	padding-top: 10px;
	display: inline-block;
}
.img_area .img a:hover img { /* マウスオーバーで拡大する */
	transform: scale(1.1);
}
.img_area .img { /* 外側の枠 */
	width: 240px;
	height: 240px;
}
.img_area .img img { /* 画像サイズと配置 */
	width: 240px;
	height: 240px;
	object-fit: cover;
	object-position: 50% 70%;
}
.pic01 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}

/* -----------------------------------------------

= program

----------------------------------------------- */
/* program_list */
ol, ul {
	list-style: none;
}
.program_list {
	display: flex;
	justify-content: space-between;
}
.program_list li {
	position: relative;
	opacity: 100;
	bottom: 0rem;
}
.program_list li a {
	display: block;
	position: relative;
	text-align: center;
}