@charset "utf-8";


.top-article{
  text-align: center
}

.bottom-cut{
	margin-bottom: 0;
}

/*ヘッダー*/
@media only screen and (max-width:600px){
  header{
    height:60px;
  }
  #hamburger{
    margin-top: 5px;
  }
}

/*メニュー*/
.topmenu{
	text-align: center;
	margin: 0;
	line-height: 100%;
	position: absolute;
	top: 50%;
  left: 2%;
	transform: translateY(-50%);
}

.topmenu li{
	list-style: none;
  display: inline-block;
  padding: 10px;
}

.topmenu a{
	text-decoration: none;
	color:#000000;
	font-family: "M PLUS Rounded 1c",Georgia,Times New Roman,Courier New ,Arial,Arial Black,Verdana,Trebuchet MS,Comic Sans MS;
}

/*トップ画像*/
.top-image{
  text-align: center;
  padding-top: 1em;
}

.top-image img{
  width:55%;
}

/*以下、インスタTL*/
.insta-box{
	width: 100%;
	margin: auto;
	background-color: #f5f5f5;
	padding: 2% 0 1px;
}

.insta-box h2{
	margin: 0;
}

.insta-box i{
	margin-right:0.3em;
}

@media only screen and (max-width:600px){
  .insta-box{
    width:95%;
  }
}

/*PInterest埋め込み*/
.pinterest-cover {
  padding: 1em;
  padding-bottom: 0;
}

.pinterest-cover > span{
  width:100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

/*SNS*/
.top-SNS{
    margin:  auto;
		padding: 1.7em 0;
    width:96%;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #ffffff;
    text-align: center;
	}


.top-snsicon {
    width: 60%;
    display: flex;
    padding: 0 20%;
    margin: 0 auto 1em;
	}

.top-snsicon a{
	font-size: 3em;
	margin:auto;
	text-decoration: none;
}

@media only screen and (min-width:700px){
  .top-snsicon a{
    font-size: 4em;
  }
}

@media only screen and (max-width:500px){
  .top-snsicon a{
    font-size: 2em;
  }
}

.top-snsicon .fa-facebook-square{
	color:#3b5998;
}
.top-snsicon .fa-twitter-square{
	color: #000000;
}
.top-snsicon .fa-youtube{
	color:#FF0000;
}
.top-snsicon .fa-line{
	color:#06c775;
}

/*Instagramアイコン*/
#top-insta{
  position: relative;
  display: inline-block;
  width: 0.9em;
	height: 0.9em;
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;
  border-radius: 7px;
}

#top-insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;
  top: 23px;
  left: -18px;
  width: 0.9em;
	height:0.9em;
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

#top-insta .fa-instagram {
	color: #FFF;
  position: absolute;
  font-size: 0.7em;
  right: 0;
  left: 0;
  bottom: 0.14em;
}

/*PV*/
#top-pv{
	top: 0;
	left: 0;
	width: 80%;
	aspect-ratio:500/281;
	margin: 0 auto 0.5em;
}

/*Recruit*/
#top-recruit{
    margin:  auto;
    width: 100%;
		padding-top: 1.7em;
    background-color: #8C6239;
    color: #FFFAF0;
    text-align:center;
}

#top-recruit p, #top-recruit h2{
  color: #FFFAF0;
}

#top-recruit h2{
  font-weight: bold;
}

.recruit-wrap{
  display: flex;
  width:92%;
  padding:0 4%;
}

.phone-none .recruit-content{
  width: 26%;
  padding: 0 1%;
  margin: 0.5em 0;
}

.phone-only .recruit-content{
  width:50%;
  padding: 0 1%;
  margin: 0.5em 0;
}

.recruit-content img{
  width: 34%;
  height: auto;
  margin: 0.5em 0;
}

@media only screen and (min-width:700px){
  .recruit-content img{
    width: 34%;
  }
}

.btn-recruit-wrap{
  padding: 1.5em 0 3em;
}

.btn-recruit{
  background-color: #9FF136;
  color:#2d2d2d;
  text-decoration: none;
  padding:1em;
  font-weight: bold;
}

.btn-recruit:hover{
  background-color: #2d2d2d;
  color: #FFFAF0;
}

/*member*/
#member{
  width: 98%;
  padding:1em 1%;
}

.member-wrap{
  width:100%;
}

.top-col4 .member-content{
  width:24%;
  margin: 1%;
}

.top-col2 .member-content{
  width:48%;
  margin: 2%;
}

.top-col2 .member-content{
  width:96%;
  margin: 2%;
}

.member-content img{
  width:40%;
}

.top-member-prof{
  text-align: justify;
}

.member-content strong{
  font-size: 1.3em;
  text-align: center;
}

.member-content strong span{
  font-size: 0.8em;
  color: #8C6239;
  margin-bottom: 1em;
}

.col1-2 strong span{
  margin-bottom: 0.5em;
}

.col2-2, .col1-2{
  margin-top:3em;
}

@media only screen and (min-width:901px){
  .top-col2, .top-col1{
    display: none;
  }
  .top-col4{
    display: flex;
  }
}

@media only screen and (min-width:481px) and (max-width:900px){
  .top-col4, .top-col1{
    display: none;
  }
  .top-col2{
    display: flex;
  }
}

@media only screen and (max-width:480px){
  .top-col4, .top-col2{
    display: none;
  }
  .top-col1{
    display: block;
  }
}

/* 新着情報エリア全体の調整 */
.top-news {
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 0 20px;
}
.news-list {
  list-style: none;
  padding-left: 0;
  text-align: left;
}

.news-list li {
  display: flex; 
  align-items: flex-start; /* 上端で揃える */
  margin-bottom: 15px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  gap: 15px; 
}

/* 日付部分のスタイル */
.news-list .news-date {
  flex-shrink: 0; /* 文字幅が詰まっても日付の幅は縮めない */
  width: 100px; /* 日付の固定幅 */
  font-weight: bold;
  color: #555;
}

/* タイトル（リンク）部分のスタイル */
.news-list a {
  flex-grow: 1; /* 残りの幅をすべてタイトル部分に割り当てる */
  text-decoration: none;
  color: #333;
  line-height: 1.5;
}
.news-list a:hover {
  text-decoration: underline; 
}

/* ===============================================
   スマホ（画面幅480px以下）向けのスタイル（縦並び） 
   =============================================== */
@media screen and (max-width: 480px) {
  .news-list li {
    flex-direction: column; 
    gap: 5px;
  }
  .news-list .news-date {
    width: auto; 
    font-size: 0.9em; 
}

/*コンタクト*/
.top-contact{
  background-color: white;
  padding-top:3%
}

.top-contact h2{
  margin-top:0;
}

@media only screen and (max-width:590px){
  tr label span{
    display: block;
  }
}