@charset "utf-8";

body{
    background-color:#fdf5e6;
    font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif; 
}

.uehe {
    width: 15%;
    position:fixed;
    bottom:10px;
    right:10px;
    z-index: 100;
}
.uehe img {
    width: 100%;
    transition-duration: 0.4s;
}

.uehe :hover img{
    transform: scale(1.1);
}
.uehe a :active{
    transform: scale(0.9);
}

.uehe .fukidashibox {
    margin: 0 1em;
	position:absolute;
	width: 8em; /* 吹き出しの幅 */
	height: 3em; /* 吹き出しの高さ */
	top: -4em; /* 吹き出しと三角形の高さをプラスした値 */
    font-size: 1.5vw;
    font-weight: 600;
	border-radius: 20px;
	background-color:#614C3F;
    color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}
.uehe .fukidashibox:after { /* 三角形を作成 */
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	top: 3em; /* 吹き出しの高さと同じ値 */
	left: 45%;
	border: 0.5em solid transparent;
	border-top: 1em solid #614C3F;
}

.sankaku{
    width: 100%;
}
.sankaku img{
    width: 100%;
}

.sen{
    width: 100%;
    margin-bottom: 50px;
}
.sen img{
    width: 100%;
}

.logo{
    text-align: center;
}

.logo img{
    margin: 5% auto 0 auto;
    width: 25%;
    transition-duration: 0.5s;
}

.logo :hover {
    transform: scale(1.1);
}

.ring{
    height: 0;
    margin: -2% auto;
    text-align: center;
}
.ring img{
    width: 80%;
}

.memo{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    margin:  14% auto 5% auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 30px;
}

.chara{
    width: 40%;
    margin: 8% auto 2% auto;
    text-align: center;
}

.chara img{
    width: 100%;
}

.cate{
    width: 100%;
    padding: 0 10%;
    margin: 3% auto 8% auto;
    display: flex;
    font-weight: 600;
    font-size: 2vw;
    /*
    text-shadow    :
    1px  1px 3px #9d887b,
    -1px  1px 3px #9d887b,
    1px -1px 3px #9d887b,
    -1px -1px 3px #9d887b,
    1px  0px 3px #9d887b,
    0px  1px 3px #9d887b,
    -1px  0px 3px #9d887b,
    0px -1px 3px #9d887b;
    */
}

.cate a{
    color: #614C3F;
    width: 20%;
    margin: 0 auto;
    padding: 1.5% 0;
    display: flex;
    justify-content: center;
    align-items: center;
	text-decoration: none;
    border-radius: 28px;
    top: -5px;
    box-shadow: 0px 0.4em 0px 0px #614C3F;
    transition-duration: 0.3s;
}

.btn1on{
    color: #fff;
    background: #5cbfC2;
    border: 4px solid #5cbfC2;
}
.btn1off{
    color:#5cbfC2;
    background: #fff;
    border: 4px solid #5cbfC2;
}

.btn2on{
    color: #fff;
    background: #F3A7A7;
    border: 4px solid #F3A7A7;
}
.btn2off{
    color:#F3A7A7;
    background: #fff;
    border: 4px solid #F3A7A7;
}

.btn3on{
    color: #fff;
    background: #ABDCF7;
    border: 4px solid #ABDCF7;
}
.btn3off{
    color:#ABDCF7;
    background: #fff;
    border: 4px solid #ABDCF7;
}

.btn4on{
    color: #fff;
    background: #FFF68C;
    border: 4px solid  #FFF68C;
}
.btn4off{
    color:#FFF68C;
    background: #fff;
    border: 4px solid  #FFF68C;
}

.cate a:hover{
  transform: scale(1.1);
}

.cate a:active{
    box-shadow: none;
    transform: translateY(0.5em);
}

.image{
    width: 100%;
    margin-bottom: 5%;
}

.image img{
    width: calc(88%/3);
    margin: 2%;
    box-sizing:border-box;
    float: left;
    border: 4px solid  #614C3F;
    border-radius: 24px;
	transition-duration: 0.5s;
}

/* .image :hover {
    transform: scale(97%);
} */

/*modal*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}