@charset "UTF-8";

/* =========================
スマホだけ改行
========================= */
.sp-only {
display: none;
}
@media screen and (max-width: 980px) {
.sp-only {
display: block;
}
}

@media (max-width: 980px) {
/* =========================
お知らせ　全体
========================= */
#hd,
#menu,
#menu_box,
#navi,
#fm,
#news_list,
#ft1,
#ft2{
width: 100%;
padding: 0 3%;
box-sizing: border-box;
margin: 0;
}

/* 各カラー */
.btn-pink { background-color: #ff4d79; }
.btn-orange { background-color: #ffaa00; }
.btn-green { background-color: #73cb00; }
.btn-blue { background-color: #33b5e5; }
.btn-purple { background-color: #7a86e6; }
.btn-porange { background-color: #ff8c00; }
.btn-dantai { background-color: #3ba800; }
}

/* =========================
 ヘッダー
========================= */
.sp_menu{
display:none;
}
@media (max-width:980px){
#hd_waku{
display:none;
}
header{
display:flex;
align-items:center;
padding:1.4em;
background:url(../img_s/hd_bak.jpg) repeat-x center;
margin:0;
}
.sp_menu{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
}
.logotype{
line-height:1;
}
.logotype img{
display:block;
max-width:250px;
height:auto;
}
/* checkbox非表示 */
#menu__toggle{
opacity:0;
position:absolute;
}
/* ボタン */
.menu__btn{
display:flex;
align-items:center;
justify-content:center;
position:relative;
width:40px;
height:40px;
cursor:pointer;
z-index:1001;
}
/* 真ん中の線 */
.menu__btn span{
position:absolute;
width:30px;
height:3px;
background:#fff;
transition:.25s;
}
/* 上線 */
.menu__btn span::before{
content:"";
position:absolute;
width:30px;
height:3px;
background:#fff;
top:-8px;
left:0;
transition:.25s;
}
/* 下線 */
.menu__btn span::after{
content:"";
position:absolute;
width:30px;
height:3px;
background:#fff;
top:8px;
left:0;
transition:.25s;
}
/* 開いた時 */
#menu__toggle:checked ~ .menu__btn span{
transform:rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn span::before{
top:0;
transform:rotate(0);
}
#menu__toggle:checked ~ .menu__btn span::after{
top:0;
transform:rotate(90deg);
}
/* メニュー */
.menu__box{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
padding:80px 0 30px;
margin:0;
list-style:none;
background:#F90;
text-align:center;
visibility:hidden;
transform:translateY(-100%);
transition:.4s;
z-index:1000;
}
/* 開いた時 */
#menu__toggle:checked ~ .menu__box{
visibility:visible;
transform:translateY(0);
}
.menu__item{
display:block;
padding:15px 20px;
color:#fff;
font-size:17px;
line-height:1.5;
text-decoration:none;
}
a.menu__item{
color:#fff;
}
.menu__item:hover{
background:rgba(255,255,255,.15);
color:#fff;
}
}

@media (max-width: 980px) {
/* =========================
 フッター
========================= */
#go_top,
#ft_waku1{
display: none
}
#ft_waku2{
background:#F90;
margin-top: 40px;
padding: 30px 0
}
#ft2{
background:#F90;
text-align:center;
font-size:14px;
}
#ft2 .ttl strong {
margin:5px 0;
font-weight:bold;
font-size:16px;
}
#ft2 p{
margin:0;
}
#ft2 .copy{
margin:20px 0 0 0 ;
font-size:10px;
}

/* =========================
パンくず
========================= */
 #navi {
height: auto;
padding: 0 3% 10px;
}
#navi ul {
margin: 0 10px;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
#navi li {
float: none;
margin: 0;
padding: 0 15px 0 0;
line-height: 1.2;
background-size: 8px auto;
text-align: left
}
#navi a {
font-size: 12px;
word-break: break-all;
}

/* =========================
お知らせ
========================= */
#news_list .loop1,
#news_list .loop3{
padding: 10px 0;
width: 100%;
box-sizing: border-box;
}
#news_list .loop2 {
display: flex;
flex-direction: column;
gap: 0;
box-sizing: border-box;
}
#news_list .loop2 .date {
width: 100%;
text-align: left;
}
#news_list .loop2 .txt {
width: 100%;
}
.cb {
display: none;
}
}


/* =========================
page_navi 
========================= */
.page_navi {
height: auto !important;
overflow: hidden;
}
@media (max-width: 980px) {
.page_navi {
text-align: center;
}
.page_navi ul {
margin: 20px 0;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
height: auto;
}
.page_navi li {
float: none;
line-height: normal;
}
.page_navi a {
display: inline-block;
margin: 0;
}
.page_navi .hit {
background: #ffc;
}
}

/* =========================
タイトル見出し
========================= */
h2#news_title {
display: none; /* PCでは非表示 */
}

@media (max-width: 980px) {
#news_list h2 {
display: none; /* スマホでは非表示 */
}
h2#news_title {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
padding: 15px;
border-radius: 10px;
font-size: 17px;
font-weight: 600;
line-height: 1.5;
margin: 0 3%;
box-sizing: border-box;
clear: both;
}
h2#news_title span{
font-size: 60%;
}

h2#news_title .news_tag {
font-size: 11px;
padding: 7px;
border-radius: 6px;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s;
}

h2#news_title .news_tag.center {
color: #64a534;
background: #e8f8a8;
}
h2#news_title .news_tag.dantai {
color: #ff8c00;
background: #fff4a7;
}
h2#news_title .news_tag:hover {
opacity: 0.5;
}
}


/* =========================
カテゴリ別
========================= */
.button-category-sp {
display: none; /* PCでは非表示 */
}

@media (max-width: 980px) {
.tbl_none {
display: none;/* スマホでは非表示 */
}
/* ボタン全体のレイアウト */
.button-category-sp {
display: flex;
gap: 5px;
background-color: #fff;
padding: 10px 0;
}
.button-category-sp .btn {
flex: 1;
display: flex;
align-items: center;  /* 縦中央 */
justify-content: center;  /* 横中央 */
text-align: center;
padding: 5px;
box-sizing: border-box;
font-size: 10px;
font-weight: normal;
line-height: 1.3;
color: #fff;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
}
/* hover（半透明） */
.button-category-sp .btn:hover {
opacity: 0.5;
}
.button-category-sp .btn:active {
transform: translateY(2px);
opacity: 0.6;
}
}


/* =========================
お知らせ詳細
========================= */
@media (max-width: 980px) {
#news_date,
#news_list .box1,
#news_list .box2{
width: 100%;
padding: 0 3%;
box-sizing: border-box;
}
}


/* =========================
お申込みフォーム
========================= */
.wrap{
max-width:100%;
margin:auto;
padding:20px;
box-sizing:border-box;
}
.mousikomi {
width: 750px;
margin: 0 auto;
}
/* タイトル */
.wrap h1.title{
color:#ff6600;
padding:20px 0;
font-size:20px;
font-weight: 600;
line-height: 1.5;
}
.wrap .af{
width:100%;
padding:15px;
background:#ffe5bf;
border-radius:5px;
box-sizing:border-box;
font-size: 14px;
line-height: 1.5;
}
.form-note {
margin-top: 20px;
padding: 15px 0;
font-size: 12px;
line-height: 1.4;
}
/*ボタン
---------------------------*/
.form-btn,
.search-btn{
text-align:center;
margin-top:30px;
}
.form-btn button{
background:#ff8c00;
color:#fff;
border:none;
padding:15px 0;
border-radius:30px;
font-size:20px;
cursor:pointer;
width: 250px
}
.search-btn button{
position:relative;
background:#ff8c00;
color:#fff;
border:none;
padding:15px 0;
border-radius:30px;
font-size:20px;
cursor:pointer;
width: 250px
}
/* アイコン */
.search-btn button::before{
content:"";
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);

width:20px;
height:20px;
background:url("icon_search.png") no-repeat center;
background-size:contain;
}
@media (max-width:980px){
.mousikomi {
width: 100%;
}
.wrap h1.title{
font-size:16px;
}
}

/* =========================
お知らせのtable
========================= */
@media (max-width: 980px) {
.tbl,
.tbl tbody,
.tbl tr,
.tbl th,
.tbl td{
display:block;
width:100%;
box-sizing:border-box;
}
.tbl {
border-top:none;
}
.tbl tr{
margin-bottom:15px;
border-bottom:none;
}
.tbl th{
background:#fff3d3;
padding:8px;
border-bottom:none;
white-space:normal;
}
.tbl td{
padding:8px;
border-bottom:none;
}
}

/* =========================
お知らせの画像
========================= */
@media (max-width: 980px) {
#news_list .photo{
margin:20px 0;
display:flex;
flex-wrap:wrap;
gap:10px;
}
#news_list .photo img{
display:block;
height:auto;
margin:0 !important;
}
}
@media (max-width: 600px) {
/* 2枚のときは全部50% */
#news_list .photo img{
width:calc(50% - 5px);
}
/* 1枚のとき */
#news_list .photo img:only-child{
width:100%;
}
}