@charset "utf-8";

/**
 * ***************************************
 * ページ全体に関わるCSSの設定
 * ***************************************
 */
html *,
::before,
::after {
  box-sizing: border-box;
}
/* フォント */
html {
  font-size: 14px;
  scroll-behavior: smooth;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}
/* おもな太字タグのフォントウェイト設定 */
h1,h2,h3,h4,h5,h6,th,strong{
  font-weight: 700;
}
/* ベースのリンクカラー */
a {
  color: #f30;
}

/* レスポンシブイメージと画像下スペース防止 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}
/**
 * ***************************************
 * ヘッダー
 * ***************************************
 * 
 * ヘッダーコンテナ
 */
 .page-header{
   background: url(../images/header-topline.svg) repeat-x;
   border-bottom: 1px solid #d8d8d8;
 }
@media (min-width: 768px) {
  .header-container{
    max-width: 1040px;
    margin:0 auto;
    padding: 0 20px;
  }
}
/**
 * ***************************************
 * ヘッダーモジュール
 */

 /* ヘッダーロゴとモバイルナビボタン */
.sitetitle{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media(min-width:768px){
  .sitetitle{
  display:block;
  padding: 30px 0 0 0;
  }
}
 /* ヘッダーロゴ */
 .header-logo{
  margin: 0;
  padding-left: 15px;
  font-size: 0;
  line-height: 0;
}
.header-logo img{
  width: 130px;
}
@media(min-width:768px){
 .header-logo{
   padding: 0;
 }
 .header-logo img{
   width: 180px;
 }
}
 /* モバイル向けボタン */
 .navbtn{
  display: block;
  width: 60px;
  height: 60px;
 background-image: url(../images/nav-mobile-open.svg);
 background-repeat: no-repeat;
 background-position: center center;
}
.navbtn.close{
  background-image: url(../images/nav-mobile-close.svg);
}
@media(min-width:768px){
  .navbtn{
  display:none;
  }
}
/* ヘッダーナビゲーション */
.header-nav{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-nav.collapse{
  display: none;
}
.header-nav li a{
  display: block;
  padding: 20px 30px;
  border-top: 1px solid #d8d8d8;
  background-color: #efefef;
  color: #000;
  text-decoration: none;
}
.header-nav li a:hover{
  background: #b8e5ea;
}
@media (min-width: 768px){
  /* PC向けレイアウト */
  .header-nav{
    display: flex !important;
    flex-direction: row;
    justify-content: flex-end;
  }
  .header-nav li a{
    padding: 6px 20px 2px 20px;
    border-top: none;
    border-bottom: 4px solid transparent;
    background: none;
  }
  .header-nav li a:hover{
    border-bottom: 4px solid #73cbd6;
    background: none;
    }
}


/**
 * ***************************************
 * パンくずリスト
 * ***************************************
 * 
 * パンくずリストコンテナ
 */
@media (min-width: 768px) {
  .bc-container{
    max-width: 1040px;
    margin:0 auto;
    padding: 12px 20px;
  }
}
.breadcrumb{
  display: none;
}
@media (min-width: 768px) {
  /* PCだけスタイル適用 */
  .breadcrumb{
    display: block;
    background: #efefef;
  }
/**
 * ***************************************
 * パンくずリストモジュール
 */
.bc-nav{
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bc-nav li{
  font-size: .75rem;
  color: #747474;
}
.bc-nav li::after{
  padding: 0 5px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content:"\f054"
}
.bc-nav li:last-child::after{
  content: "";
}
.bc-nav li a{
  color: #474747;
}
.bc-nav li a:hover{
  opacity:.8
}
}

/**
 * ***************************************
 * ページ下部
 * ***************************************
 * 
 * ページ下部コンテナ
 */
 .page-bottom{
  background-image: url(../images/bottom-bg.svg);
}
.bottom-container{
 padding: 60px 4% 0 4%;
}
@media (min-width: 768px) {
 .bottom-container{
   max-width: 1040px;
   margin:0 auto;
   padding: 60px 20px 0 20px;
 }
}
/**
 * ----------------------------------------
 * ページ下部モジュール
 */
/* 複数のバナーを並べる */
.banner{
 display: flex;
 flex-direction: column;
 margin-bottom: 30px;
}
@media (min-width: 768px) {
 .banner{
 flex-direction: row;
 }
 .banner div{
   margin: 0 10px;
 }
}

.followus{
 margin: 0 0 15px 0;
 font-family: 'Croissant One', cursive;
 font-weight: 400;
 font-size: 1.875em;
 text-align: center;
}
.sns{
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.sns div{
  margin: 0 10px;
}
.sns div a{
  display: block;
  width: 70px;
  height: 70px;
  background: #ffc3ba;
  border-radius: 50%;
  font-size: 30px;
  line-height: 70px;
  text-align: center;
  color: #ffffff;
}
.sns div a:hover{
  opacity: .8;
}
/* ページトップへ戻るボタン */
.gotop{
  text-align: center;
}
.gotop a{
  display: inline-block;
  padding: 1rem 4rem;
  background: #000;
  border-radius: 20px 20px 0 0;
  font-size: 1.25rem;
  text-align: center;
  color: #fff;
  opacity: .6;
}
.gotop a:hover{
  opacity: .8;
}



/**
 * ***************************************
 * フッター
 * ***************************************
 * 
 * フッターコンテナ
 */
 .page-footer{
   background: #ffc3ba;
   color: gray;
 }
 .footer-container{
  padding: 10px 4%;
}
@media (min-width: 768px) {
  .footer-container{
    max-width: 1040px;
    margin:0 auto;
    padding: 10px 20px;
  }
}
/**
 * ----------------------------------------
 * フッターモジュール
 */
/* ロゴ */
.footer-logo{
  margin-bottom: 30px;
  text-align: center;
}
.footer-logo img{
  width: 160px;
}
/* コピーライト */
.copyright{
  font-size: 0.75rem;
  color: gray;
  text-align: center;
}
/* フッターのナビゲーション⓵ */
.footer-nav1{
display: flex;
flex-direction: column;
align-items: center;
margin: 0 0 30px 0;
padding: 0;
list-style: none;
}
.footer-nav1 li{
  margin: 0 0 2rem 0;
  font-size: 0.75rem;
}
.footer-nav1 li a{
  color: gray;
  text-decoration: none;
}
.footer-nav1 li a:hover{
  color: #fff;
  text-decoration: underline;
}
@media(min-width:768px){
  .footer-nav1{
    flex-direction: row;
    justify-content: center;
  }
  .footer-nav1 li{
    margin: 0 1rem;
  }
}

.footer-nav2{
  display: flex;
  justify-content: center;
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
  }
  .footer-nav2 li{
    margin: 0 .75rem 3px .75rem;
    font-size: .75rem;
  }
  .footer-nav2 li a{
    color: #d8d8d8;
    text-decoration: none;
  }
  .footer-nav2 li a:hover{
    color: #fff;
    text-decoration: underline;
  }


/**
 * ***************************************
 * メイン
 * ***************************************
*/
/**
 * ***************************************
 * ［index.html］ホームページ
 * ***************************************
 */
/* ホーム - ヒーローコンテナ */
.hero-container{
  position: relative;
}

/* ホーム - メインコンテナ */
.home .page-main{
  /* background: url(../images/home-bg.svg); */
  background-image: url(../img/309152.png);
}
.home .main-container{
  padding: 60px 4%;
  padding-bottom:20px;
}
@media (min-width: 768px) {
  .home .main-container{
    max-width: 1040px;
    margin:0 auto;
    padding: 60px 20px;
  }
}
/* ホーム - ニュースコンテナ */
.news{
  background: #efefef;
}
.news-container{
  padding: 60px 4%;
}
@media (min-width: 768px) {
  .news-container{
    max-width: 740px;
    margin:0 auto;
    padding: 60px 20px;
  }
}
/**
 * ***************************************
 * ［index.html］ホームページ - モジュール
 */
/* ヒーロー画像 */
.hero-logo{
  width: 260px;
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-130px, -48px);
background-color: rgba(255, 192, 203,.1);
}
@media (min-width: 768px) {
  .hero-logo{
    width: 400px;
    transform: translate(-200px, -74px);
  }
}
.hero-onoff{
  width: 260px;
  position: absolute;
  top: 82%;
  left: 50%;
  transform: translate(-130px, -48px);
background-color: rgba(255, 192, 203,.1);
color:#fff1f1;
}
.hero-onoff p{
  margin:0;
font-size:.875rem;
line-height: 1.5;
}

/* キャッチフレーズ */
.home-lead{
  max-width: 600px;
  /* margin: 0 auto 60px auto; */
  margin:0 auto 0 auto;
  text-align: center;
  background:white;
  padding:20px 0;
}
.home-lead p{
  margin: 0;
  /* font-size: 1.25rem; */
  line-height: 2;
}
/* テキストと背景を組み合わせる */
/* .home .main-container h2 {
  display: grid;
  place-items: center;
  margin: 0 auto 30px auto;
  width: 130px;
  height: 130px;
  background: url(../images/home-titleshape.svg) no-repeat;
  background-size: 130px 130px;
  color: #fff;
  font-family: 'Croissant One', cursive;
  font-weight: 400;
  font-size: 20px;
} */

.home .main-container h2 {
  font-family: 'Croissant One', cursive;
font-weight: 400;
font-size: 1.875rem;
margin: 0 auto 30px auto;
  /* font-size: 24px;
  font-size: 2.4rem;
  font-weight: normal;
  margin: 0 0 80px;
  text-align: center; */
}
.about-container {
  padding: 60px 4%;
}
@media (min-width: 768px){
.about-container {
  margin: 0 auto;
  padding: 60px 0px;
}
}
.about-container h3{
  font-weight: 400;
  margin-top:24px;
}
.about-container p,.space p{
  margin:0;
  line-height: 1.6;
  margin-bottom:20px;
}
.about-container dl {
  display: flex;
  margin: 0;
  padding: 10px 0;
  /* border-top: 1px solid #d8d8d8; */
}
.space {
  padding: 60px 4%;
}
@media (min-width: 768px){
  .space  {
  margin: 0 auto;
  padding: 60px 0px;
  max-width: 1280px;
}
}

/* カード型レイアウト */
.home-latest{
  margin: 0 0 60px 0;
  display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
column-gap:10px;
row-gap:30px;
}
/* @media (min-width: 768px) {
  .home-latest{
  grid-template-columns: 1fr 1fr 1fr;
  column-gap:20px;
  }
} */
/* それぞれのカードの中身 */
.latest-item{
  border: #d8d8d8 1px solid;
  background: #fff;
}

/* @media (min-width: 768px) {
  .latest-item {
    border: none;
    background: none;
  }
} */
.latest-image img {
  margin: 0 0 10px 0;
}
.latest-image img:hover {
  opacity: .5;
}
.latest-text {
  margin-bottom: 10px;
  padding: 0 10px;
}
@media (min-width: 768px) {
  .latest-text {
padding: 0;
  }
}
.latest-text h3{
  margin: 0 0 10px 0;
  font-size: 1rem;
  line-height: 1.5;
}
.latest-text h3 a{
  color: #000;
  text-decoration: none;
}
.latest-text h3 a:hover{
  opacity: .5;
}
/* ホーム共通のタグ */
.home-tag{
  margin-bottom: 1rem;
}
.home-tag span{
  margin: 0 3px 3px 0;
  padding: 2px 10px;
  border: 1px solid #73cbd6;
  border-radius: 100px;
  font-size: 0.75rem;
}
.home-tag span a{
  color: #73cbd6;
  text-decoration: none;
}
/* ホーム共通の場所情報 */
.home-info{
  display: flex;
  font-size: 0.75rem;
}
.home-info span::before{
  padding-right: 5px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color:#73cbd6;
  content:"\f3c5";
}
/* メディアオブジェクト */
.home-popular{
  margin: 0 0 60px 0;
  border-top: 1px solid #d8d8d8;
}
.home-popular a{
  display: block;
  color: #000;
  text-decoration: none;
}
.home-popular a:hover{
  opacity: .5;
}
.popular-item{
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #d8d8d8;
}
.popular-photo{
  flex: 0 0 30%;
  margin-right: 15px;
  position: relative;
}
.popular-text{
  flex:1 1 auto;
}
.popular-text h3{
  margin: 0 0 10px 0;
  font-size: 1rem;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .popular-text h3{
    font-size: 1.25rem;
  }
}
.popular-text p{
  display: none;
}
@media (min-width: 768px) {
  .popular-text p{
    display: block;
    font-size: 0.875rem;
    line-height: 1.5;
  }
}
/* テーブル形のリスト */
.news-container h2{
  margin: 0 0 30px 0;
   font-family: 'Croissant One', cursive;
   font-weight: 400;
   font-size: 1.875rem;
}
@media (min-width: 768px){
  .news-container h2{
    max-width: 700px;
    margin:0 auto 30px auto;
  }
 }
 .home-news{
   padding: 20px;
   background: #fff;
   border-radius: 20px;
 }
 @media (min-width: 768px){
  .home-news{
    max-width: 700px;
    margin:0 auto;
    padding: 40px;
  }
 }
 .home-news dl{
   display: flex;
   margin: 0;
   padding: 20px 0;
   border-top: 1px solid #d8d8d8;
 }
 .home-news dl:last-child{
  border-bottom: 1px solid #d8d8d8;
}
.home-news dt{
  margin: 0 20px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.home-news dd{
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.home-news dd a{
  color: #73cbd6;
  text-decoration: none;
}
.home-news dd a:hover{
  opacity: .5;
}

/**
 * ***************************************
 * [post.html] 記事ページ-メインコンテナ
 * ***************************************
 */
.post .main-container{
  padding: 80px 4% 0 4%;
  background: url(../images/post-bg.svg) repeat-x;
  background-position: 0 10px;
}
@media (min-width: 768px) {
  .post .main-container{
    max-width: 1040px;
    margin:0 auto;
    padding: 80px 20px 0 20px;
  }
}
/**
 * ***************************************
 * ポストヘッダー
 */
 .post-header{
   margin-bottom: 60px;
 }
 .post-header h1{
   margin: 0 0 20px 0;
   font-size: 1.875rem;
   line-height: 1.5;
 }
 /* タグ */
 .post-tag{
   margin-bottom: 5px;
   font-size: 0.75rem;
   line-height: 2;
 }
 .post-tag span{
   margin: 0 3px 0 0;
   padding: 2px 10px;
   background: #73cbd6;
   border-radius: 100px;
 }
 .post-tag span a{
   color: #fff;
   text-decoration: none;
 }
 /* テキストの先頭にアイコン */
 .post-info{
   padding-bottom: 15px;
   margin-bottom: 3px;
   font-size:0.75rem;
   text-align:right;
   background: url(../images/post-line.svg) bottom repeat-x;
 }
 .post-info span{
   margin: 0 10px 0 0;
 }
 .post-info i{
   padding-right: 5px;
   color: #73cbd6;
 }
 /**
 * ***************************************
 * ポストコンテンツ
 */
 .post-contents{
   margin:0 0 60px 0;
 }
@media (min-width: 768px) {
  .post-contents{
  max-width: 600px;
  margin:0 auto 60px auto;
  }
}
.post-contents > *:first-child{
  margin-top: 0;
}
/* h2 */
.post-contents h2{
  margin: 60px 0 30px 0;
  padding: 1rem 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  font-size: 1.25rem;
}
/* p */
.post-contents p{
  margin: 30px 0;
  line-height: 1.9;
  text-align: justify;
}
/* p mark */
.post-contents mark{
background:linear-gradient(transparent 50%, #ffff7c 50% )
}
/* リストの基本形 */
.list{
  margin: 30px 0;
}
.list li{
  margin-bottom: 1rem;
  line-height: 1.5;
}
/* キャプション付きの画像 */
.photo-caption{
  margin: 30px 0;
}
.photo-caption figcaption{
  margin-top: 5px;
  font-size: .75rem;
  color: #747474;
}
/* float */
.float-box{
display: flow-root;
margin: 30px 0;
}
.float-left{
  float:left;
  margin: 0 1rem 1rem 0;
  width: 40%;
}
.float-right{
  float:right;
  margin: 0 0 1rem 1rem;
  width: 40%;
}
.float-box p{
  margin: 0;
}
/* ボックスを囲む */
.info-box{
  margin: 30px 0;
  padding: 2rem;
  border: 4px solid #b8e5ea;
}

.info-box p{
  margin: 0;
}

/* チャット */
.chat{
  margin: 30px 0;
}
.chat-1st, .chat-2nd{
  margin: 15px 0;
  display:flex;
}
.chat-2nd{
  flex-direction: row-reverse;
}
.chat-1st .face{
  flex:0 0 70px;
  margin: 0 10px 0 0;
}
.chat-2nd .face{
  flex:0 0 70px;
  margin: 0 0 0 10px;
}
.face img{
  border-radius: 50%;
}
.talk{
  flex:1 1 auto;
  padding: 1.5rem;
  border-radius: 20px;
}
.chat-1st .talk{
  background: #b8e5ea;
}
.talk p{
  margin: 0;
}
.chat-2nd .talk{
  background: #ffff7c;
}
 /**
 * ***************************************
 * ポストフッター
 */
 .post-footer{
  margin:0 0 60px 0; 
 }
 @media (min-width: 768px){
  .post-footer{
    max-width: 600px;
    margin:0 auto 60px auto;
  }
 }
 .post-footer h2{
   display: inline-block;
   margin: 0;
   padding: 10px 30px;
   background: #000;
   border-radius: 10px 10px 0 0;
   font-family: 'Croissant One', cursive;
   font-weight: 400;
   font-size: 1.25rem;
   color: #fff;
 }
 .profile{
   display: flex;
   padding: 1rem;
   border: 1px solid #000;
 }
 .pr-photo{
   flex: 0 0 100px;
   margin-right: 1rem;
 }
 .pr-photo img{
   border-radius: 50%;
 }
 .pr-text{
   flex:1 1 auto;
 }
 .pr-text p{
   margin: 0;
   line-height: 1.9;
 }