@charset "UTF-8";

/*　書体インポート関連
-------------------------------------------------------------------*/
/* 必ず先頭で宣言する */
/*絵文字アイコンフォント　fontawesome*/
@import url(//use.fontawesome.com/releases/v5.7.2/css/all.css);
@import url(/item.css);



/*　基本仕様
-------------------------------------------------------------------*/
/*

・PCとスマホと共通となる部品は基本的にstyle.cssでまとめる
・あとはデバイス毎に切り分けておく。

*/

.gothic{
	font-family: 'Noto Sans JP', sans-serif;
}

.off{
	display: none;
}

.datepicker {
	width: 200px;
}

.entryBody{
	margin-bottom: 1em;
}

/*	【HTML基本情報】
	HTMLの基本的な書き方。PCとSPは共通で使えるところは使う。
-------------------------------------------------------------------*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: auto;
	font: inherit;
	vertical-align: baseline;
}

/*
#secondPage li{
	margin-bottom: 1em;
}

#secondPage li:last-child{
	margin-bottom: 0em;
}
*/

img{
	/*画像下の空白を埋める為のおまじない*/
	vertical-align: bottom;
}

ul{list-style: none;}

body{
	/*font-family: Yu Gothic, Meiryo, Verdana, Arial, Helvetica, sans-serif;*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	position: relative;
}

h1, h2, h3, h4, h5, h6, dt{
	font-family: 'Noto Sans JP', sans-serif;
}

/*　インポート属性
-------------------------------------------------------------------*/


/* 959px以下に適用されるCSS（タブレット用） */
/*@import url("./pc.css")only screen and (min-width:800px);*/
/* 959px以下に適用されるCSS（スマホ） */
/*@import url("./sp.css")only screen and (max-width:799px);*/


/* トップページ交互のバックグラウンド */
#topBackground{
	width: 100%;
}

#topBackground > div:nth-child(odd) {
	background-color: #EEEEEE;
}

#topBackground > div:nth-child(even) {
	background-color: #FFFFFF;
}

/*	【ヘッダー+フッダー情報】
	ヘッダーとフッターの基本の色情報
	補足や入れ子は各CSSで補填
-------------------------------------------------------------------*/
div#wrap{
	width: 100%;
	border-top: 3px solid #CC0000;
}

footer{
	background: #efe8d4;
}

/*	リスト関連
------------------------------------------------------*/
.list{
	list-style-type: none;
}

.list li{
	margin-bottom: 0.5em;
}

ul.yokonarabi{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.list05{

}

.list05 li{
	margin-bottom: 0.5em;
}

/*　テキスト情報（段落、文字寄せ、蛍光ペン、サイズ）
------------------------------------------------------*/
p{
	font-size: 98%;
	margin-bottom: 1em;
	line-height: 180%;
}

p:last-child{
	margin-bottom: 0;
}

.zero{
	margin: 0;
	padding: 0;
}

.textL{
	text-align: left;
}

.textC{
	text-align: center;
}

.textR{
	text-align: right;
}

.bold{
	font-weight: bold;
}

.keikoupenn{
	font-style: normal;
	letter-spacing: -1px;
	color: #CC0000;
	font-size: 120%;
	background:linear-gradient(transparent 60%, #ffd800 60%);
	padding: 0 0.2em;
	margin: 0 0.2em;
}

.keikou{
	font-style: normal;
	font-weight: bold;
	background:linear-gradient(transparent 60%, #ffd800 60%);
}

.keikoupen0{
	font-style: normal;
	font-weight: bold;
	letter-spacing: -1px;
	color: #CC0000;
	font-size: 120%;
	background:linear-gradient(transparent 60%, #ffd800 60%);
	padding: 0 0.2em;
	margin: 0 0;
}

.font80,.mini{font-size: 80%;}
.font90{font-size: 90%;}
.font120{font-size: 120%;}
.font130{font-size: 130%;}
.font140{font-size: 140%;}
.font150{font-size: 150%;}
.font160{font-size: 160%;}
.font180{font-size: 180%;}
.font200{font-size: 200%;}
.font240{font-size: 240%;}

.line {
	margin: 1em 0;
	border: none;
	border-top: dashed 1px #CCCCCC;
	height: 1px;
	color: #FFFFFF;
}

strong {font-weight: 700;}

.red{color: #FF0000;}
.yellow{color: #fff100; }

/*	line-height
------------------------------------------------------*/
.lh150{
	line-height: 150%;
}

.lh180{
	line-height: 180%;
}

/*　padding / margin / br / width
-----------------------------------------------------*/
.p05{padding: 0.5em;}
.p10{padding: 1em;}
.p15{padding: 1.5em;}
.p20{padding: 2em;}
.p0500{padding: 0.5em 0;}
.p1000{padding: 1em 0;}
.p1500{padding: 1.5em 0;}
.p2000{padding: 2em 0;}
.p3000{padding: 3em 0;}
.p5000{padding: 5em 0;}
.p10000{padding: 10em 0;}
.p0020{margin: 0 2em}
.p0005{padding: 0 0.5em;}
.p0010{padding: 0 1em;}
.p0015{padding: 0 1.5em;}

.m05{margin: 0.5em;}
.m10{margin: 1em;}
.m15{margin: 1.5em;}
.m20{margin: 2em;}
.m0500{margin: 0.5em 0;}
.m1000{margin: 1em 0;}
.m1500{margin: 1.5em 0;}
.m2000{margin: 2em 0;}
.m0005{margin: 0 0.5em;}
.m0010{margin: 0 1em;}
.m0015{margin: 0 1.5em;}
.m0020{margin: 0 2em;}

.br{margin-bottom: 0.5em;}
.br2{margin-bottom: 1em;}
.br3{margin-bottom: 1.5em;}
.br4{margin-bottom: 2em;}
.br5{margin-bottom: 2.5em;}

.width10{width: 10%;}
.width20{width: 20%;}
.width25{width: 25%;}
.width30{width: 30%;}
.width40{width: 40%;}
.width50{width: 50%;}
.width60{width: 60%;}
.width70{width: 70%;}
.width80{width: 80%;}
.width90{width: 90%;}
.width100{width: 100%;}

.width10auto{width: 10%; margin: auto;}
.width20auto{width: 20%; margin: auto;}
.width25auto{width: 25%; margin: auto;}
.width30auto{width: 30%; margin: auto;}
.width40auto{width: 40%; margin: auto;}
.width50auto{width: 50%; margin: auto;}
.width60auto{width: 60%; margin: auto;}
.width70auto{width: 70%; margin: auto;}
.width80auto{width: 80%; margin: auto;}
.width90auto{width: 90%; margin: auto;}

/*	重要告知枠
------------------------------------------------------*/
/*詳細の部分は各デバイスで設定*/
#importantArea{
	background-color: #ffecec;
	padding: 0.5em;
}


/*　注意事項ボックス関連
-------------------------------------------------------------------*/
.importantBox{
	font-weight: bold;
	margin: 1.5em 0;
}

.importantBox dl{
	margin: 0;
	padding: 0;
}

.importantBox dt{
	color: #da0000;
	padding: 1em 0;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 1em;
}

.importantBox dd{
	font-size: 90%;
}

.importantBox dd > ul{
	margin: 1.5em 1em;
}



/* 補足説明 */

.hosoku{
	clear: both;
	text-align: center;
	background-repeat: repeat-y;
	font-size: 90%;
	line-height: 150%;
	background: #EEEEEE;
	border: 1px solid #CCCCCC; 
	margin:	0.5em 0;
	padding: 0.5em;
}

.hosokudl{
	text-align: left;
	background-repeat: repeat-y;
	font-size: 100%;
	line-height: 180%;
	border: 10px solid #CCCCCC;
	margin: 10px 0;
	padding: 1em;
	background: #FFFFFFE;
}
.hosokudl dt{
	font-weight: 700;
	margin-bottom: 1em;
}

.hosokudl dd{
	font-size: 90%;
}

/* 備考欄 */
.bikou{
	text-align: center;
	background-repeat: repeat-y;
	font-size: 90%;
	line-height: 150%;
	background: #EEEEEE;
	border: 1px solid #CCCCCC; 
	margin:	0 0 10px 0;
	padding: 10px;
}

/*	スマホ共通部分
------------------------------------------------------*/
.slider img{
	margin-bottom: 1em;
}
.slider span {
    margin: 1em 0;
    text-align: center;
    display: block;
}

.slider span.caption {
	padding: 0 1em;
	font-size: 80%;
}

/*　pagetop（一番上に戻るボタンの表記）
------------------------------------------------------*/
#page-top {
	position: fixed;
	font-size: 70%;
}

#page-top a {
	background: #222222;
	text-decoration: none;
	color: #fff;
	width: 80px;
	padding: 8px;
	text-align: center;
	display: block;
	border-radius: 0px;
	line-height: 150%;
}
#page-top a:hover {
	text-decoration: none;
	background: #1f2a34;
	transition: all .1s;
}


/*	ドロワーメニュー
------------------------------------------------------*/


.btn {
    background:transparent url(/images/btn.png) no-repeat 0 0;
    display: block;
    width:35px;
    height: 35px;
    position: fixed;
    top:20px;
    right:10px;
    cursor: pointer;
    z-index: 200;
}
.peke {
    background-position: -35px 0;
}

.drawer {
    display: none;
    background: #333;
	color: #FFF;
	position: fixed;
    top: 0px;
    right:0;
    width:260px;
	height: 100%;
	padding: 0; 
    z-index: 100;
}

.drawer ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

.drawer h1{
	font-size: 120%;
	margin: 1em;
	font-weight: bold;
}

.drawer a{
	padding: 0.75em 1.75em;
	text-decoration: none;
	color: #FFF;
	display: block;
}


.drawer li{
	display: block;
	border-top: solid 1px #666666;
	border-bottom: solid 1px #111111;
}


/*　clear属性
------------------------------------------------------*/

.cr{
	clear: both;
}

.clear{
	text-align: right;
	clear: both;
}

.clearfix:after {
	 content: ".";
	 display: block;
	 clear: both;
	 height: 0;
	 visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */


.clearfixsp:after {
	 content: ".";
	 display: block;
	 clear: both;
	 height: 0;
	 visibility: hidden;
}
.clearfixsp { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfixsp { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */

/*titleはそれぞれに退避*/

/*　よくある質問
-------------------------------------------------------------------*/
#Faq dl{
	font-size: 100%;
}

#Faq dt{
	font-size: 110%;
	text-align: left;
	padding: 0.5em;
	margin-bottom: 1em;
	color: #003f97;
	background: #bae5ff;
	font-weight: 700;
}

#Faq dd{
	text-align: left;
	font-size: 100%;
	line-height: 180%;
	padding: 0.5em 1em;
	margin-bottom: 1.5em;
}


#Faq dt::before {
    content: "【質問】" ;
    margin-right: 0.5em;
}

#Faq dd::before {
    content: "【回答】" ;
    color: #41210D;
    margin-right: 0.5em;
}

a.button{
	/*font-family: 'Noto Sans Japanese', sans-serif;*/
	display: block;
	background: #CC0000;
	color: #FFF;
	width: 95%;
	text-align: center;
	text-decoration: none;
	padding: 0.5em ;
	margin: auto;
	border-radius: 0.5em;
}

a.button:hover{
	opacity: 0.7;
	transition: 0.5s;
}

/* 臨時用 */
.outline li{
	margin-bottom: 1em;
}

.outline li:last-child{
	margin-bottom: 0em;
}



/*	アコーディオン（開閉ヌルっと）2024.05.24
-------------------------------------------------------------------*/
/*

/* アコーディオンメニュー全体のスタイル */
.accordionMenu {
    width: 100%;
	padding: 1em 0;
    margin: 0 auto;
}

/* アコーディオンメニューの各アイテムのスタイル */
.accordionMenu-item {
    /*border: 1px solid #ddd;*/
    margin-bottom: 1em;
}

/* アコーディオンメニューの見出しのスタイル */
.accordionMenu-header {
    background-color: #1d8825; /* デフォルトの背景色 */
	color: #FFF;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: background-color 0.4s ease; /* 背景色変更のトランジション */
    display: flex; /* アイコンを見出しの右側に配置するためにフレックスボックスを使用 */
    justify-content: space-between; /* 見出しとアイコンを左右に配置 */
    align-items: center; /* アイコンと見出しを縦方向の中央に配置 */
	border-radius: 5px;
}

/* "+"の時の見出しの背景色 */
.accordionMenu-header.plus {
    background-color: #1d8825;
}

/* "-"の時の見出しの背景色 */
.accordionMenu-header.minus {
    background-color: #CC0000;
}

/* 見出しをホバーした時の背景色変更 */
.accordionMenu-header:hover {
	opacity: 0.7;
	transition: 0.5s;
}

/* アコーディオンメニューの内容のスタイル */
.accordionMenu-content {
    padding: 0;
    max-height: 0; /* 初期状態でmax-heightを0に設定 */
    overflow: hidden;
    background-color: white;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out; /* max-heightとopacityのトランジションを設定 */
    opacity: 0; /* 初期状態で不透明度を0に設定 */
}

/* アコーディオンメニューの内容が表示されるときのスタイル */
.accordionMenu-content.show {
    opacity: 1; /* 表示時に不透明度を1に設定 */
}

/* アイコンのスタイル */
.icon {
    font-size: 18px;
    margin-left: 10px;
}



/* 管理画面テーブル */
.adminTable{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: spacecente-around;
	align-items: flex-end;
}

.adminTable li{
	width: 25%;
	padding: 0.25em;
}

.adminTable a{
	display: block;
	background: #ea3d4c;
	border-radius: 5px;
	color: #FFF;
	padding: 1.5em 0.5em;
	text-align: center;
	font-weight: 700;
	text-decoration: none;
	align-items:center;
	height: 65px;
	font-size: 90%;
	font-family: Yu Gothic, Meiryo, Verdana, Arial, Helvetica, sans-serif;	
}

.adminTable a:hover{
	opacity: 0.7;
	transition: 0.5s;
}

/* youtube */
#youtubeBox{
	max-width: 800px;
	margin: auto;
	text-align: center;
	padding-bottom: 1em;
}

#youtubeBox iframe{
	aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}