@charset "UTF-8";
@import url("grid.css?20231226");
@import url("menu.css?20231226");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #000;
    --link-color: #666;
    --linkhover-color: #3366FF; ;
    --main-color: #61a7c7;
    --pink-color: #fff4d8;
    --back-color: #936a39;
    --border-color: #936a39;
    --white-color: #fff;
    --dpink-color: #f4b2cd;
    --ddpink-color: rgba(233,102,156,1);
    --dgray-color: rgb(88 173 170);
    --gray-color: rgb(144 194 191);
    --cloud-color: rgb(151 171 69);
    --cloudd-color: rgb(111 135 0);
    --yell-color: rgb(237 214 74);
    --yelld-color: rgb(237 214 74);
    --camel-color: rgba(228,169,69,1);
    --tachi-color: rgba(154,206,198,1);
    --navlinkhover-color: #081f64;
}
.graysc2 {
/*	filter: grayscale(100%);*/
/*	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);*/
/*	background: #efefef;*/
	background-color: var(--white-color);
    mix-blend-mode: difference;
}
.graysc2 header,.graysc2 footer {
    background: #fff;
}
.graysc2 main {
    background: #fff;
}
.graysc2 footer a {
    color: #000;
}
.graysc2 .text-image {
    color: #000;
}
.graysc2 .openbtn{
    background: #000;
}
.graysc2 img {
    mix-blend-mode: difference;
}
.graysc2 .maru img {
	mix-blend-mode: darken;
}
.graysc2 figure.gray img.people,.graysc2 figure .maru.maina35 img.people {
	mix-blend-mode: difference;
}
.graysc2 .dgray,.graysc2 .pink ,.graysc2 .blue ,.graysc2 font.cloudd,.graysc2 font.yelld,.graysc2 font.camel,
.graysc2 .camel2,.graysc2  p.camel,.graysc2 font.ddpink,.graysc2 .ddpink,.graysc2 font.cloud,
.graysc2 font.yell,.graysc2 .font.wood,.graysc2 .wood,.graysc2 .blue,.graysc2 .pink,.graysc2 .lgray,.graysc2 .dgray,
.graysc2 .tachi {
    color: #000;
}
.graysc2 .c-balloon__icon {
    background: #000;
}
.graysc2 .c-balloon__icon p {
    color: #fff;
}
.graysc2 .quiz03 li,.graysc2 .quiz01 li {
    border-color: #000;
    color: #000;
}
.graysc2 .c-balloon__body {
    border-color: #000;
}
/**/
.graysc2 .text-image.eng a {
border: 1px solid var(--base-color);
color: #000;
}
/**/

.graysc3 {
	filter: none;
}

.blue {
    color: var(--main-color);
}
.pink {
    color: var(--dpink-color);
}
.lgray {
    color: var(--gray-color);
}
.dgray {
    color: var(--dgray-color);
}
font.cloud {
    color: var(--cloud-color);
}
font.yell {
    color: var(--yell-color);
}
font.cloudd {
    color: var(--cloudd-color);
}
font.yelld {
    color: var(--yelld-color);
}

font.camel, .camel2, p.camel {
    color: var(--camel-color);
}
font.ddpink, .ddpink {
    color: var(--ddpink-color);
}
font.wood, .wood {
    color: var(--border-color);
}
.tachi {
    color: var(--tachi-color);
}
.bold {
    font-weight: 600;
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:inline-block;
    color: var(--base-color);
    text-decoration-line: none;
}
a.usu {
	    display: block;
	}

a:hover { 
    color: var(--base-color);
}
a img {
    margin-bottom: 0;
}
a.usu:hover {
    opacity: 0.3;
}
/*
.white.topwhite a.usu:hover {
    background: var(--main-color);
}
.knowtop a.usu:hover {
    background: var(--dpink-color);
}
.eventtop a.usu:hover {
    background: var(--dgray-color);
}
.soundtop a.usu:hover {
    background: var(--cloud-color);
}
.signtop a.usu:hover {
    background: var(--yelld-color);
}
.divertop a.usu:hover {
    background: var(--camel-color);
}
*/

.blueback {
	background-color: var(--back-color);
	color: var(--white-color);
	padding: 1rem;
}
.underline {
	border-bottom: 3px solid var(--back-color);
	padding-bottom: 0.5rem;
}
.center {
	text-align: center;
}

/*ヘッダー
-------------------------------------*/
header {
    background: var(--main-color);
	padding: 0;
}
header .container {
}
.head {
	display: flex;
    flex-direction: row;
    padding: 1rem 0 0 0;
}

.head h1 {
    padding: 0;
    font-size: 1.8rem;
    color: #fff;
    margin-top: 10px;
}
.head h1 a img {
   margin-bottom: 0;
}
.telbox {
	margin-left: auto;
	font-size: 3.0rem;
	padding: 0 0 0 0;
}
.menu {
	background-color: var(--back-color);
}

/*add toyama start*/

.fo-size-change {
    float: right;
    margin: 0px 0px 0 0;
    width: auto;
    position: initial;
    font-weight: 600;
    font-size: 0.8em;
}
.fo-size-change .text-image {
    float: left;
    margin-right: 4px;
}
.fo-size-change .btn {
    cursor: pointer;
    float: left;
    margin-left: 1px;
    padding: 0px 7px;
    background-color: #efefee;
    font-weight: 600;
    border-radius: 5px;
    margin-top: 10px;
}
.fo-size-change .btn.active {
    cursor: pointer;
    float: left;
    margin-left: 1px;
    background-color: #843c0b;
    color:#fff;
}

/*add toyama end*/

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.head {
	flex-direction: column;
    text-align: left;
    margin-bottom: 20px;
}
.telbox {
	margin-left: 0;
	text-align: center;
}
.head #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
    }
nav ul {
	flex-direction: column;
}

nav li {
	padding-top: 0;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 0;
}
/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}

/*メイン画像
-------------------------------------*/
.mainimg img.pita {
    margin-bottom: -24px;
}
.mainimg img +img {
    width: 16vw;
    position: absolute;
    bottom: -76px;

}
/*メインコンテンツ
-------------------------------------*/
main {
    margin: 0rem 0 0rem 0;
}
/*各コンテンツ
-------------------------------------*/
article.white {
    margin: 0 0;
    background: var(--white-color);
    padding-top: 3em;
}
article.topwhite {
    margin: 0 0;
    background: var(--white-color);
    padding-top: 5em;
}

/*新着情報
-------------------------------------*/
.news h2 {
    background-color: var(--back-color);
	color: var(--white-color);
	padding: 1rem;
}
.news li {
    list-style-type: none;
	border-bottom: 1px solid var(--border-color);
	padding: 0.5rem 0;
}

/*フッター
-------------------------------------*/
footer {
    background-color: var(--back-color);
    padding: 2.5rem 0;
	color: var(--white-color);
	font-weight: 600;
}
footer h5,footer h5 + p {
    /* border-bottom: 2px solid var(--white-color); */
    text-align: center;
    margin-bottom: 0;
}
footer a {
    color: var(--white-color);
    text-decoration-line: underline;
    font-size: .9em;
}
footer a:hover {
    color: var(--white-color);
    text-decoration-line: underline;
}


/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 0;
    background-color: var(--white-color);
    font-size: .8em;
    color: #898989;
	font-weight: 600;
}
.copyright a {
    color: var(--base-color);
    text-decoration: none;
	display: inline-block;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
/*    width: 65px;
    height: 65px;*/
}
/*パンくずリスト
-----------------------------------*/
.breadcrumb {
    margin: 0 0 1em 0;
    padding: 0;	
}
.breadcrumb li {
    list-style-type: none;
}
.breadcrumb li a {
    display: inline-block;
    color: var(--link-color);
}

@media (max-width: 550px){
	.mainimg img +img {
	    width: 22%;
	    position: inherit;
	    margin-right: -20px;
	}
	.zz {
	    font-size: 2.2rem;
	}

}