/****共通****/

:root{
  --maincolor:#faf0e2;
  --backcolor:#ffffff;
  --headcolor:#ffffff;
  --footcolor:#e7d0a9;
  --hoverchange:#d0ffd0;
  --greenstr:#006c36;
  --greenbtn:#1e9b87;
  --boxcolor:#e0e0e0;
}

/*--maincolor:#f4e0c4;*/


/************************ヘッダーのデザイン***************************/

/* 共通フォント指定 */
html {
  font-family: YakuHanJP, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif;
}

/* ヘッダーを画面上部に固定 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background:rgb(255 255 255 / 80%);
  /*background-color: none;        /* 必要に応じて 背景色なしの場合 */
  z-index: 1000;           /* 他要素より前面に表示 */
  display: flex; /*display: none;*/
  align-items: center;
  padding: 0.5em 1em;      /* 上下左右の余白 */
  margin:0;
  box-sizing: border-box;
  transition: background-color 0.5s ease; /* 背景色の変化を滑らかにする */
}
.header:hover {
  background: var(--headcolor);
}

/*スクロール中に背景変化する場合
.header.scrolled {
  background:var(--maincolor); 
}/* スクロール後の背景色 */

/* ロゴ画像を高さ 80px で表示、比率を維持 */
.header > a img {
  height: 80px;
  width: auto;
  display: block;
}

/* ロゴリンクとメニューを分離（ロゴを左、メニューを右） */
.header > a {
  margin-right: auto;
}

/* メニュー項目の右寄せ＆隙間調整 */
.header p {
  margin: 0 0 0 1.5em;       /* 左側に 1.5em のスペース */
}

/* 最後の項目の余白をリセット（不要なら省略可） */
.header p:last-child {
  margin-right: 0;
}

/* メニューリンクの基本スタイル */
.header p a {
  text-decoration: none;
  color: #222;             /* リンク色はお好みで */
  font-size: 1.125rem;
  font-weight: bold;
}
.header p a:hover {
  text-decoration: underline 2px;
}

/************************フッターのデザイン***************************/

/* フッター全体を横並びにして左右半分に分割 */
footer{
  background: var(--footcolor);
  transition: background-color 0.5s ease; /* アニメーション */
}
footer:hover {
  background: var(--hoverchange);
}

.footer {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

/* 左右それぞれを縦並びかつ横中央寄せ */
.footer-left {
  flex: 1;                         /* 左右それぞれ幅50% */
  display: flex;
  flex-direction: column;          /* 縦方向に要素を並べる */
  align-items: center;             /* 横方向中央揃え */
  padding: 1em;                    /* 任意で上下左右の余白 */
  font-size: 1.25em;
}
.footer-right {
  flex: 1;                         /* 左右それぞれ幅50% */
  display: flex;
  flex-direction: column;          /* 縦方向に要素を並べる */
  align-items: center;             /* 横方向中央揃え */
  padding: 1em;                    /* 任意で上下左右の余白 */
}

/* footer-left のロゴ画像 80pxで比率維持 */
.footer-left a img {
  height: 80px;                    /* 高さを60pxに固定 */
  width: auto;                     /* 比率を維持 */
  display: block;
  margin-bottom: 10px;              /* ロゴと住所テキストの間隔 */
}

/* footer-left の住所などのテキスト余白 */
.footer-left p {
  text-align: center;              /* 改行を含むテキストを中央揃え */
  margin: 0;
  line-height: 1.5;
}

/* footer-right のリンク項目間隔 */
.footer-right p {
  margin: 0.5em 0;                 /* 上下に0.5emずつ */
}

/* footer-right のリンク基本スタイル（必要に応じて調整） */
.footer-right p a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  font-weight: bold;
}

.footer-right p a:hover {
  text-decoration: underline;
}

/* 著作権表記を画面中央かつ上下50pxマージン */
.footer-copyright {
  text-align: center;              /* 画面幅全体の中央に配置 */
  padding: 20px 0;                  /* 上下に20pxの余白 */
  font-size: 1.125rem;             /* お好みでサイズ調整 */
  color: #777;                     /* お好みで色調整 */
  margin:0;
}


/************************ホームのデザイン***************************/

body{
  margin:0;
}

/* ===== 【main】 ===== */
.main {
  /*position: relative;        /* ヘッダー背景に色ある場合 下に隠れないように */
  padding-top: 50px;        /* header の高さ分だけ余白を空ける */
  background: linear-gradient(to bottom, var(--maincolor) 0%, var(--backcolor) 100%);
}

/* ===== 【topimage】 ===== */
.topimage {
  position: relative;
  width: 100%;
  height: 1000px;
  /*background-color: var(--maincolor);*/
  overflow: hidden;          /* 流れる画像を隠す */
}

/* ===== 【slide】 ===== */
.slide {
  position: absolute;
  top: 0;                    /* JS 側でランダムに top を振る */
  will-change: transform;
  animation-name: fadeIn;
  animation-duration: 6s; /* アニメーション時間 */
  animation-delay: 0s; /* 遅延時間 */
}
.slide img {
  border-radius: 15px;
  opacity: 0.75;
}
.res_slide {
  display: none;
}

/* ===== 【wrap】 ===== */
.wrap {
  width: 1300px;
  max-width: 100%;
  margin: 0 auto;            /* 横中央寄せ */
  box-sizing: border-box;
}

/* ===== 【slogan】 ===== */
.slogan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;               /* slide より手前 */
  text-align: center;
  margin:0;
  color: var(--greenstr);
  text-shadow: 0 5px 5px #fff;
  font-family: Zen Maru Gothic, serif;
  font-size: 5rem;
  line-height: 1.4;
  white-space: nowrap; /*文字の改行を防ぐ*/
  animation-name: fadeIn;
  animation-duration: 2s; /* アニメーション時間 */
  animation-delay: 0s; /* 遅延時間 */
}

/* ===== 【introduction】 ===== */
.introduction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8em 0;
  text-decoration: none;
  color: #222;
  overflow: hidden; /* はみ出しを隠す */
  border-radius: 30px; 
}
.introduction > ul {
  order: 2;
  max-width: 50%;
  height: auto;
  padding:0;
  margin:0;
  border-radius: 30px; 
}
.introduction > ul > img {
  order: 2;
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* アニメーション */
  border-radius: 30px; 
}
.introduction > div {
  order: 1;
  flex-grow: 1;
  max-width: 50%;
  margin: 0 auto;
}
.introduction > div > h2 {
  font-size: 2.5rem; 
  font-weight: bold;
}
.introduction > div > p {
  margin-left:2em;
  font-size: 1.25rem; 
}
.introduction img:hover {
  transform: scale(1.05);
}
.introduction:hover {
  color:var(--greenstr);
}

/* ===== 【attempt】 ===== */
.attempt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 12em 0 6em 0;
}
.attempt h2 {
  font-size: 3rem; 
}
.attempt > h2 > span {
  display: inline-block;
}
.attempt p {
  font-size: 1.25rem; 
}
.attempt > p > span {
  display: inline-block;
}
.attempt > div {
  display: flex;
  gap: 1em;
  margin: 1em 0;
}
.attempt > div img {
  border-radius: 30px; /*画像の角丸め*/
  max-width: 350px;
  height: auto;
}

/* ===== 【button】 ===== */
.button {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: var(--greenbtn);
  color: #fff;
  font-size: 1.5em;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  transition: filter 0.3s;
  margin: 1.5em auto;
}
.button:hover {
  filter: brightness(1.2);
}

/* ===== 【news】 ===== */
.news {
  display: flex;
  margin: 16em 0 4em 0;
}
.news > h2 {
  text-align: left;
  font-size: 2.5em;
  margin: 0 3em;
}
.news > div {
  flex-grow: 1;
  display: block;
  align-items: flex-start;
  gap: 2em;
}

/* ===== 【news_top】 ===== */
.news_top {
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.news_top li {
  list-style: none;          /* ● を消す */
  border-top: 1px solid #ccc;
  padding: 0.5em 0;
  font-size: 1.25em;
}
.news_top li a {
  text-decoration: none;
  color: #222;
}
.news_top li a:hover {
  text-decoration: underline;
}

/* ===== 【news-view】 ===== */
.news-view {
  align-self: center;
  text-align: right;
}
.news-view a {
  font-size: 1.125em;
  text-decoration: none;
  color: #222;
}
.news-view a:hover {
  text-decoration: underline;
}

/* ===== 【twitter】 ===== */
#block-7 {
  display: flex;
  flex-wrap: wrap;
  gap:2%;
  justify-content:center;
}
.twitter-tweet {
  width: 30% !important;
  max-width: 30% !important;
}

/* ===== 【profile】 ===== */
.profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8em 0 4em 0;
  text-decoration: none;
  color: #222;
  overflow: hidden; /* はみ出しを隠す */
  border-radius: 30px; 
}
.profile > ul {
  max-width: 50%;
  height: auto;
  transition: transform 0.3s ease; /* アニメーション */
  border-radius: 30px; 
  padding:0;
  margin:0;
}
.profile > ul > div {
  max-width: 100%;
  border-radius: 30px; 
}
.profile > ul > div > img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* アニメーション */
  border-radius: 30px; 
}
.profile > div {
  flex-grow: 1;
  max-width: 45%;
}
.profile > div > h2 {
  font-size: 2em;
}
.profile > div > p {
  font-size: 1.25em;
}
.profile > div > p > span {
  display: inline-block;
}

.profile img:hover {
  transform: scale(1.05);
}
.profile:hover {
  color:var(--greenstr);
}

/* ===== 【recruit】 ===== */
.recruit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10em 0;
  text-decoration: none;
  color: #222;
  overflow: hidden; /* はみ出しを隠す */
  border-radius: 30px; 
}
.recruit > ul {
  order: 2;
  max-width: 50%;
  height: auto;
  transition: transform 0.3s ease; /* アニメーション */
  border-radius: 30px; 
  padding:0;
  margin:0;
}
.recruit > ul > div {
  max-width: 100%;
  border-radius: 30px; 
}
.recruit > ul > div > img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* アニメーション */
  border-radius: 30px; 
}
.recruit > div {
  order: 1;
  flex-grow: 1;
  max-width: 45%;
  margin: 0 auto; 
}
.recruit > div > h2 {
  font-size: 2em;
}
.recruit > div > p {
  font-size: 1.25em;
}
.recruit > div > p > span {
  display: inline-block;
}

.recruit img:hover {
  transform: scale(1.05);
}
.recruit:hover {
  color:var(--greenstr);
}

/* ===== 【permission】 ===== */
.permission {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.permission h2{
  font-size: 2.5em;
}
.permission-block {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 4em;
}
.permission-block div {
  flex: 1;
  font-size: 1.5em;
}
.permission-block div img{
  width:450px;
  max-height:650px;
}
.permission-block div iframe{
  width:400px;
  height:650px;
}

/*問い合わせボタン*/
.inquiry{
  text-align: center;
  padding-bottom:8em;
}


/************************固定ページのデザイン***************************/

/*レスポンシブ用のアイテムを非表示*/
.res_header {
  display: none;
}
.res_img {
  display: none;
}
.res_p {
  display: none;
}

.normalpage {
  margin-top:80px;
  margin-bottom:100px;
}
.normalpage > h1 {
  text-align: center;
  font-size: 2.5em;
  margin-bottom:75px;
}
.normalpage > h2 {
  text-align: center;
  font-size: 2em;
  margin-top:70px;
}
.normalpage > p {
  text-align: center;
  font-size: 1.25em;
}
.normalpage > span > p {
  text-align: center;
  font-size: 1.25em;
  width: 50%;
  height: 30px;
  padding: 15px 0 45px 0;
  margin: auto;
  background-color: var(--boxcolor);
}

/* ===== 【c_info】 ===== */
.c_info {
  display: flex;
  align-items: center;
  margin: 4em 0;
}
.c_info > img {
  width: 21%;
  height: auto;
  margin: 1%;
  border-radius: 30px; /*画像の角丸め*/
}
.c_info > div > img {
  width: 21%;
  height: auto;
  margin: 1%;
  border-radius: 30px; /*画像の角丸め*/
}
.c_info > div {
  width: 100%;
  text-align: center;
}
.c_info_p {
  margin:0.5em 0 0 0;
}
.c_info_p > p {
  font-size: 1.5em;
  margin:1.5em 0 0 1.5em ;
}
.c_info_p > p > span {
  margin: 0;
  display: inline-block;
}
.enkaku > div {
  margin: 0 auto;
  font-size: 1.25em;
  width: 1000px;
  border-top: 1px solid #ccc;
}
.enkaku > div > p {
  margin: 0;
  padding:  0.75em 0.5em 0.75em 0.5em;
  border-bottom: 1px solid #ccc;
}

/* ===== 【flex_img】 ===== */
.flex_img {
  display: flex;
  gap: 1em;
  margin: 0;
  padding:0;
}
.flex_img li {
  list-style: none;          /* ● を消す */
}
.flex_img img {
  max-width: 100%;
  height: auto;
}

/* ===== 【commentary】 ===== */
.commentary p {
  text-align: center;
  font-size: 1.75em;
}
.commentary > p > span {
  display: inline-block;
}

/* ===== 【news_page】 ===== */
.news_page {
  margin-top:80px;
}
.news_page > h1 {
  text-align: center;
  font-size: 2.5em;
  margin:0 0 2.5em 0;
}
.news_page > p {
  flex-grow: 1;
  display: block;
  gap: 2em;
}

/* ===== 【aisatu】 ===== */
.aisatu {
  display: flex;
  gap: 1em;
  margin: 50px 0 0 0;
  padding:0;
}
.aisatu img {
  width: 100%;
  height: auto;
}
.aisatu div {
  width: 50%;
}
.aisatu > div > p {
  padding:0 0 0 0;
  font-size: 1.5em;
  margin: 0 0 0.75em 0.75em;
}
.aisatu > div > p > span {
  display: inline-block;
}
.aisatu > div > iframe {
  width: 100%;
  height: 400px;
  border: 0;
}

/* ===== 【post_align】 ===== */
.post_align{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: clamp(44.53125px, 4.6875vw, 75px) clamp(29.6875px, 3.125vw, 50px);
  margin-bottom: 5em;
}

/* ===== 【news_item】 ===== */
.news_item {
  display: block;
  border-radius: 30px;
  text-align: center;
}
.news_item:hover {
  color:var(--greenstr);
}
.news_item a {
  text-decoration: none;
}
.news_item img {
  width: auto;
  height: 250px;
  border-radius: 30px; 
  transition: transform 0.3s ease;
}
.news_item img:hover {
  transform: scale(1.05);
}
.news_item p {
  font-size: 1.25em;
  font-weight: bold;
  color:#222;
}

/* ===== 【guideline】 ===== */
.guideline {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 3em 0 10em 0;
}
.guideline > div {
  margin: 0 auto;
}
.guideline > div > h1 {
  width: 100% ;
  font-size: 3.5em ;
}
.guideline > div > h2 {
  width: 100% ;
  font-size: 2.5em ;
}
.guideline > div > p {
  width: 100% ;
  font-size: 1.5em ;
}
.guideline > div > img {
  height: 600px;
  text-align: right;
}
.guideline > div > h1 > span {
  display: inline-block;
}
.guideline > div > h2 > span {
  display: inline-block;
}


/* ===== 【wrap_r】 ===== */
.wrap_r {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;            /* 横中央寄せ */
  box-sizing: border-box;
}
.wrap_post {
  width: 950px;
  max-width: 100%;
  margin: 0 auto;            /* 横中央寄せ */
  box-sizing: border-box;
}
.wrap_post > article > a > img {
  max-width: 100%;
  height: auto;
}

/* ===== 【recruit_page】 ===== */
.recruit_3col {
  display: flex;
  gap:0 1em;
}
.recruit_item_img {
  flex:1;
}
.recruit_item_img > ul {
  margin: 0;
  padding: 0;
}
.recruit_item_img > ul > img {
  width: 100%;
  height: auto;
  margin: 0 0 1em 0;
}
.recruit_item_p {
  flex:2;
  text-align: center;
  margin:0em 0 0 0;
}
.recruit_page {
  display: block;
  border-top: 2px solid #ccc;
}
.recruit_page > div {
  padding:0 1em 1.5em 1em;
  border-bottom: 2px solid #ccc;
}
.recruit_page > div > h4 {
  padding: 0 0 0 0.75em;
  margin: 1em 0 0 0;
  text-align: left;
  font-size: 1.5em;
}
.recruit_page > div > p {
  padding: 0.5em 0 1em 1.5em;
  margin: 0;
  text-align: left;
  font-size: 1.1em;
}

/* ===== 【inquiry_page】 ===== */
.inquiry_3col {
  display: flex;
  gap:0 1.5em;
}
.inquiry_item_img {
  flex:1;
}
.inquiry_item_img > ul {
  margin: 0;
  padding: 0;
}
.inquiry_item_img > ul > img {
  width: 100%;
  height: auto;
  margin: 0 0 1em 0;
}
.inquiry_item_p {
  flex:1.5;
  text-align: center;
  margin:0em 0 0 0;
}
.inquiry_page {
  display: block;
  border-top: 1px solid #ccc;
}
.inquiry_page > div {
  padding:0 1em 1em 1em;
  border-bottom: 1px solid #ccc;
}
.inquiry_page > div > h4 {
  padding: 0 0 0 0.75em;
  margin: 0.5em 0 0 0;
  text-align: center;
  font-size: 1.75em;
}
.inquiry_page > div > p {
  padding: 0.5em 0 0.5em 1.5em;
  margin: 0;
  text-align: center;
  font-size: 1.35em;
}
.inquiry_page > div > p > a {
  text-decoration: none;
  color: #333;
}
.inquiry_page > div > p > a:hover {
  text-decoration: underline;
  color: #111;
  font-weight: bold;
}


/************************投稿ページのデザイン***************************/
.postpage-title {
  margin: 100px 0 0 0 ;
  text-decoration: none;
}
.postpage-title a{
  color: #222;
  text-decoration: none;
}
.postpage-title h1 {
  margin: 0 ;
  font-size: 2.5em;
}
.postpage-title li {
  list-style: none;          /* ● を消す */
}
.post-category {
  padding: 0;
}
.post-category li {
  list-style: none;
  border-bottom: 1px solid #222;
}
.post-link {
  margin: 12.5em 0 1.5em 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.post-link > li {
  list-style: none;
  text-align: center;
}
.post-link > li:hover {
  color:var(--greenstr);
}
.post-link > li > a {
  color:#222;
  text-decoration: none;
  font-weight: bold;
}
.text {
  font-size: 1.25em;
}



/*レスポンシブのブレークポイントは900指定--------------------------------*/

@media screen and (max-width: 900px) {
  .wrap{
    display: block;
    width: 100%;
    margin: 0 0;
  }
  .wrap_r {
    display: block;
    width: 100%;
    margin: 0 0;
  }
  .wrap_post {
    display: block;
    width: 100%;
    margin: 0 0;
  }
  p {
    line-height:1.5em; /* 行間高さの調整*/
  }

  /********************* ヘッダー調整 *********************/
  .header {
    display: none; /*PC用ヘッダーは非表示*/
  }
  .res_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 1000;           /* 他要素より前面に表示 */
    display: flex;
    align-items: center;
    padding: 0;      /* 上下左右の余白 */
    margin:0;
    box-sizing: border-box;
    /*transition: background-color 0.5s ease; /* 背景色の変化を滑らかにする */
  }
  .res_header > a {
    margin-right: auto; /*ヘッダー真ん中の間隔を開ける*/
  }
  .res_header > a img {
    height: auto;
    width: 250px;
    display: block;
  }
  #menu {
    position: absolute;
    top: 10px;
    left: 0;
    background-color: orange;
  }
  #check {
    display: none; /* checkbox の非表示 */
  }
  #close {
    display: none; /* 初期画面 close の非表示 */
  }
  #menu {
    display: none; /* 初期画面 menu の非表示 */
  }
  #check:checked ~ #open {
    display: none; /* チェックついたら open の非表示 */
  }
  #check:checked ~ #close {
    display: block; /* チェックついたら close の表示 */
  }
  #check:checked ~ #menu {
    display: block; /* チェックついたら close の表示 */
  }
  .head_btn {
    /* クリック領域のデザイン */
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 0.5em;
    background-color: var(--maincolor);
  }
  #open .menu,
  #open .menu::before,
  #open .menu::after,
  #close .menu::before,
  #close .menu::after {
    /* 横棒のデザイン */
    content: "";
    display: block;
    position: absolute;
    width: 28px;
    height: 2px;
    background-color: #333;
  }
  #open .menu {
    top: 50%;
    margin: -1px 5px 0;
  }
  #open .menu::before {
    top: -7px;
  }
  #open .menu::after {
    top: 7px;
  }
  #close .menu::before {
    top: 19px;
    left: 6px;
    transform: rotate(45deg);
  }
  #close .menu::after {
    top: 19px;
    left: 6px;
    transform: rotate(-45deg);
  }
  #menu {
    position: absolute;
    top: 40px;
    left: auto;
    right: 3px;
    list-style: none;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    animation: fadeIn .2s linear;
  }
  #menu li {
    margin: 10px;
  }
  #menu li a {
    text-decoration: none;
    color: #222;             /* リンク色はお好みで */
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 0.5em;
  }
  
  /********************* フッター調整 *********************/
  .footer {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /********************* ホーム調整 *********************/

  .topimage {
    position: relative;
    width: 100%;
    height: 750px;
    /*background-color: var(--maincolor);*/
    overflow: hidden;          /* 流れる画像を隠す */
  }
  .res_slide {
    display:block;
    position: absolute;
    top: 0;                    /* JS 側でランダムに top を振る */
    will-change: transform;
    animation-name: fadeIn;
    animation-duration: 6s; /* アニメーション時間 */
    animation-delay: 0s; /* 遅延時間 */
  }
  .res_slide img {
    border-radius: 15px;
    opacity: 0.6;
  }
  .slide {
    display: none;
  }
  .slogan {
    writing-mode: vertical-rl;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;               /* slide より手前 */
    text-align: left;
    margin:0;
    color: var(--greenstr);
    text-shadow: 0 5px 5px #fff;
    font-family: Zen Maru Gothic, serif;
    font-size: 3.5rem;
    line-height: 1.4;
    white-space: nowrap; /*文字の改行を防ぐ*/
    animation-name: fadeIn;
    animation-duration: 2s; /* アニメーション時間 */
    animation-delay: 0s; /* 遅延時間 */
  }
  .introduction {
    display: block;
    align-items: center;
    justify-content: space-between;
    margin: 8em 0;
    text-decoration: none;
    color: #222;
    overflow: hidden; /* はみ出しを隠す */
    border-radius: 30px; 
  }
  .introduction > ul {
    order: 2;
    max-width: 100%;
    height: auto;
    padding:0;
    margin:0;
    border-radius: 30px; 
  }
  .introduction > div {
    order: 1;
    flex-grow: 1;
    max-width: 100%;
    margin: 0 auto;
  }
  .introduction > div > h2 {
    font-size: 1.5rem; 
    text-align: center;
    font-weight: bold;
    line-height:1.75em;
  }
  .introduction > div > p {
    margin-left:0;
    margin-right:1.5em;
    font-size: 1rem; 
    text-align: right;
  }
  .attempt {
    display: block;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 12em 0 6em 0;
  }
  .attempt h2{
    font-size: 2rem; 
    text-align: center;
    line-height:2.75rem; /* 行間高さの調整*/
  }
  .attempt > div {
    display: block;
    gap: 1em;
    margin: 1em 0;
  }
  .attempt > div img {
    border-radius: 30px; /*画像の角丸め*/
    margin: 1em 0;
    max-width: 100%;
    height: auto;
  }
  .button {
    display: inline-block;
    padding: 0.5em 1em;
    background-color: var(--greenbtn);
    color: #fff;
    font-size: 1.25em;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    transition: filter 0.3s;
    margin: 1.5em auto;
  }
  .news {
    display: block;
    margin: 10em 0 2em 0;
  }
  .news > h2 {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em 0;
  }
  .news_top li a {
    text-decoration: none;
    color: #222;
  }
  .news_top li {
    list-style: none;          /* ● を消す */
    border-top: 1px solid #ccc;
    padding: 0.5em 0;
    font-size: 1.25em;
    margin: 0 0.5em;
  }
  .news-view {
    margin: 0.5em 0.5em 0 0;
  }
  .profile {
    display: block;
    align-items: center;
    justify-content: space-between;
    margin: 4em 0;
    text-decoration: none;
    color: #222;
    overflow: hidden; /* はみ出しを隠す */
    border-radius: 30px; 
  }
  .profile > ul {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* アニメーション */
    border-radius: 30px; 
    padding:0;
    margin:0;
  }
  .profile > div {
    flex-grow: 1;
    max-width: 100%;
  }
  .profile > div > h2 {
    font-size: 2em;
    text-align: center;
  }
  .profile > div > p {
    font-size: 1.25em;
    margin-left: 1em;
    display: inline-block;
  }
  .recruit {
    display: block;
    align-items: center;
    justify-content: space-between;
    margin: 10em 0 5em 0;
    text-decoration: none;
    color: #222;
    overflow: hidden; /* はみ出しを隠す */
    border-radius: 30px; 
  }
  .recruit > ul {
    order: 1;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* アニメーション */
    border-radius: 30px; 
    padding:0;
    margin:0;
  }
  .recruit > div {
    flex-grow: 1;
    max-width: 100%;
  }
  .recruit > div > h2 {
    font-size: 2em;
    text-align: center;
  }
  .recruit > div > p {
    font-size: 1.25em;
    margin-left: 1em;
  }
  .permission-block {
    display: block;
    align-items: center;
    text-align: center;
    margin-bottom: 4em;
  }
  .permission-block div {
    flex: 1;
    font-size: 1em;
    margin-bottom: 1.5em;
  }
  .permission-block div p {
    margin: 0;
  }
  .permission-block div img{
    width:100%;
    max-height:auto;
  }

  /************************固定ページのレスポンシブ***************************/
  .nores_img {
    display: none;
  }
  .nores_p {
    display: none;
  }
  .res_img {
    display: block;
    height: auto;
    width: 100%;
    text-align: right;
    margin: 1.5em 0 0 0;
  }
  .res_p {
    display: block;
    margin: 0;
  }
  .normalpage {
    margin-top:80px;
    margin-bottom:80px;
  }
  .normalpage > h1 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom:25px;
  }
  .guideline {
    display: block;
    align-items: center;
    justify-content: space-around;
    margin: 3em 0 10em 0;
  }
  .guideline > div {
    text-align: center;
  }
  .guideline > div > h1 {
    line-height:3.75rem; /* 行間高さの調整*/
  }
  .guideline > div > h2 {
    line-height:2.75rem; /* 行間高さの調整*/
  }
  .guideline > div > p {
    font-size: 1.25em;
  }
  .guideline > div > img {
    height: auto;
    width: 100%;
    text-align: right;
  }
  .c_info {
    display: block;
    align-items: center;
    margin: 4em 0;
  }
  .c_info > img {
    width: 45%;
    height: auto;
    margin: 1%;
    border-radius: 30px; /*画像の角丸め*/
  }
  .c_info > div {
    width: 100%;
  }
  .c_info > div > img {
    width: 45%;
    height: auto;
    margin: 1%;
    border-radius: 30px; /*画像の角丸め*/
  }
  .c_info_p > p {
    font-size: 1.25em;
    margin: 1em 0;
  }
  .c_info_p > p > span {
    margin: 0;
    display: inline-block;
  }
  .commentary p {
    font-size: 1.25em;
  }
  .post_align{
    display:block;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: clamp(44.53125px, 4.6875vw, 75px) clamp(29.6875px, 3.125vw, 50px);
    margin-bottom: 5em;
  }
  .news_item {
    display: block;
    border-radius: 30px;
    text-align: center;
    margin-bottom: 3em;
  }
  .news_item:hover {
    color:var(--greenstr);
  }
  .news_item a {
    text-decoration: none;
  }
  .news_item img {
    width: 100%;
    height: auto;
    border-radius: 30px; 
    transition: transform 0.3s ease;
  }
  .news_item img:hover {
    transform: none;
  }
  .news_item p {
    font-size: 1.25em;
    font-weight: bold;
    color:#222;
  }
  #block-7 {
    display: block;
  }
  .twitter-tweet {
    width: 100% !important;
    max-width: 100% !important;
  }
  .aisatu {
    display: block;
    gap: 1em;
    margin: 50px 0 0 0;
    padding:0;
  }
  .aisatu img {
    width: 100%;
    height: auto;
  }
  .aisatu div {
    width: 100%;
  }
  .aisatu > div > p {
    padding:0 0.5em 0 0.5em;
    font-size: 1.25em;
    margin: 1em 0;
  }
  .aisatu > div > iframe {
    width: 100%;
    height: 400px;
    border: 0;
  }
  .enkaku > div{
    margin: 0;
    font-size: 1.25em;
    width: 100%;
  }
  .recruit_item_img {
    display: none;
  }
  .recruit_page > div {
    padding:1em 0.5em 0.25em 0.5em;
    border-bottom: 2px solid #ccc;
  }
  .recruit_page > div > h4 {
    padding: 0 0 0 0em;
    margin: 0;
    text-align: left;
    font-size: 1.2em;
  }
  .recruit_page > div > p {
    padding: 0.5em 0 1em 0.85em;
    margin: 0;
    text-align: left;
    font-size: 1em;
  }
  .inquiry_item_img {
    display: none;
  }
  .inquiry_page > div > h4 {
    padding: 0 0 0 0em;
    margin: 1em 0 0 0;
    text-align: center;
    font-size: 1.35em;
  }
  .inquiry_page > div > p {
    padding: 0.5em 0 0.75em 0;
    margin: 0;
    text-align: center;
    font-size: 1.1em;
  }

  /************************投稿ページの レスポンシブ***************************/
  
  .post-link > li {
    width: 45%;
    list-style: none;
    text-align: center;
  }
  .post-link img {
    max-width: 100%;
    height: auto;
  }

  /*レスポンシブアニメーション*/
  .sentinel_res {
    width: 1px;
    height: 1px;
    visibility: hidden;
    /*
    width: 100%;
    height: 350px;
    */
  }
  .img_animate_res {
    display: block;
    width: 100% ;
    height: 350px ;
    /*画像が下からスクロール*/
    opacity: 0;
    transform: translate(0,50px);
    transition: all 1000ms;
  }
  section:has(.is-visible_res) .img_animate_res {
    opacity: 1;
    transform: translate(0);
  }
}





/********************* アニメーション定義 *********************/

/*下からスクロールする画像1*/
.img_animate {
  /*画像が下からスクロール*/
  opacity: 0;
  transform: translate(0,50px);
  transition: all 1000ms;
}
section:has(.is-visible) .img_animate {
  opacity: 1;
  transform: translate(0);
}
/*下からスクロールする画像2*/
.img_animate2 {
  /*画像が下からスクロール*/
  opacity: 0;
  transform: translate(0,50px);
  transition: all 1000ms;
}
section:has(.is-visible2) .img_animate2 {
  opacity: 1;
  transform: translate(0);
}
/*下からスクロールする画像3*/
.img_animate3 {
  /*画像が下からスクロール*/
  opacity: 0;
  transform: translate(0,50px);
  transition: all 1000ms;
}
section:has(.is-visible3) .img_animate3 {
  opacity: 1;
  transform: translate(0);
}
/*下からスクロールする画像4*/
.img_animate4 {
  /*画像が下からスクロール*/
  opacity: 0;
  transform: translate(0,50px);
  transition: all 1000ms;
}
section:has(.is-visible4) .img_animate4 {
  opacity: 1;
  transform: translate(0);
}
/*下からスクロールする画像_res*/
.img_animate_res {
  display: none;
  opacity: 0;
  transform: translate(0,50px);
  transition: all 1000ms;
}
section:has(.is-visible_res) .img_animate_res {
  opacity: 1;
  transform: translate(0);
}

/* sentinel は目印 */
.sentinel {
  width: 1px;
  height: 1px;
  visibility: hidden;
}


/*フェードアウト表示のアニメーションを定義*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}