@charset "UTF-8";


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

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

*/

.datepicker {
	width: 200px;
}

.entryBody{
	margin-bottom: 1em;
}

.pankuzu{
	font-size: 90%;
}

.pankuzu a{
	color: #FFF;
}

.source{
	width: 100%;
	padding: 1em;
	margin: 1em 0;
	background: #111111;
	color: #4aed68;
	font-size: 95%;
}

/* テスト */

a span.en {
    display: inline;
}
a:hover span.en {
    display: none;
}
a span.jp {
    display: none;
}

a:hover span.jp {
    display: inline;
}


/*　書体インポート関連
-------------------------------------------------------------------*/

@import url(//fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@700;900&display=swap);
@import url(//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;800;900&display=swap);
@import url(//fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap);


/*絵文字アイコンフォント　fontawesome*/
@import url(//use.fontawesome.com/releases/v5.4.0/css/all.css);


/*	【HTML基本情報】
	HTMLの基本的な書き方。PCとSPは共通で使えるところは使う。
-------------------------------------------------------------------*/
html{
	background: #000;
	color: #FFF;
}

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;
	font-family: Yu Gothic, Meiryo, Verdana, Arial, Helvetica, sans-serif;
}

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

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

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

img.kadomaru{
	border-radius: 10px;
}

ul{list-style: none;}

/*
h2, h3, h4, h5, h6,
h2 > span , h3 > span{
	font-family: "Zen Maru Gothic", serif;
}*/

a{
	color: #FFFFFF;
}

a:hover{
	color: #CC0000;
	transition: 0.5s;
}

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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&family=Roboto:wght@100;400;500&display=swap');
@import url(//fonts.googleapis.com/css2?family=Roboto:wght@100;400;500&display=swap);
/*絵文字アイコンフォント　fontawesome*/
@import url(//use.fontawesome.com/releases/v6.1.1/css/all.css);

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


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


footer{
	border-top: 1px solid #DDDDDD;
	font-weight: 700;
	/*background: #efe8d4;*/
}

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

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

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

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

p:last-child{
	margin-bottom: 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;
}

.keikoupen{
	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.2em;
}

.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;}

/*	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%;}
.width75{width: 75%;}
.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;
}

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

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

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


.btn {
    background:transparent url(/images/btn.png) no-repeat 0 0;
    display: block;
    width:35px;
    height: 35px;
    position: fixed;
    top:20px;
    right:20px;
    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 0.75em;
	text-decoration: none;
	color: #FFF;

	display: flex;
}

.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 */


a.button{
	/*font-family: 'Noto Sans Japanese', sans-serif;*/
	display: block;
	background: #a1a284;
	color: #FFF;
	font-weight: bold;
	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;
}

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

#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: #CC0000;
	transition: all .1s;
}



/*	LINE風のボックス
------------------------------------------------------*/.balloon-012 {
    display: grid;
    gap: 1em 0;
    padding: 25px 15px;
    background-color: #769ece;
}

.balloon-012__section {
    display: flex;
    /*align-items: center;*/
    gap: 0 15px;
}

.balloon-012__img {
    width: 2.7em;
    height: 2.7em;
    border-radius: 50%;
}

.balloon-012__p {
    display: inline-block;
    position: relative;
    max-width: 80%;
    margin: 0;
    padding: .4em .8em;
    border-radius: 20px;
	font-weight: 700;
    color: #333;
    font-size: .9em;
}

.balloon-012__p.left {
    background-color: #fff;
}

.balloon-012__p.right {
    background-color: #4aed68;
    margin-left: auto;
	line-height: 180%;
}

.balloon-012__p::before {
    position: absolute;
    top: -15px;
    width: 20px;
    height: 30px;
    content: '';
}

.balloon-012__p.left::before {
    left: -10px;
    border-radius: 0 0 0 15px;
    box-shadow: -3px -15px 0 -7px white inset;
}

.balloon-012__p.right::before {
    right: -10px;
    border-radius: 0 0 15px 0;
    box-shadow: 3px -15px 0 -7px #4aed68 inset;
}

/* animalアイコン */

#animal01{
	background: url(../images/icon/01.png) ;
	width: 32px;
	height: 30px;
	margin-right: 0.3em;
	display: block;
}

#animal02{
	background: url(../images/icon/02.png) ;
	width: 32px;
	height: 35px;
	margin-right: 0.3em;
	display: block;
}

#animal03{
	background: url(../images/icon/03.png) ;
	width: 32px;
	height: 35px;
	margin-right: 0.3em;
	display: block;
}

#animal04{
	background: url(../images/icon/04.png) ;
	width: 32px;
	height: 34px;
	margin-right: 0.3em;
	display: block;
}

#animal05{
	background: url(../images/icon/05.png) ;
	width: 32px;
	height: 35px;
	margin-right: 0.3em;
	display: block;
}

#animal06{
	background: url(../images/icon/06.png) ;
	width: 32px;
	height: 35px;
	margin-right: 0.3em;
	display: block;
}

#animal07{
	background: url(../images/icon/07.png) ;
	width: 32px;
	height: 35px;
	margin-right: 0.3em;
	display: block;
}