@charset "UTF-8";

/* ウェブフォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

/* 全体に適用する */
* {
    font-weight: normal;
}

body {
background-image : url("bg.jpg");
background-attachment: fixed;
background-position:100% 0%;
background-repeat: no-repeat;
font-family: "Zen Maru Gothic", serif;
}


/*スマホ用ここから
================================================= */

@media screen and (max-width:736px){

	img {
		max-width: 95%;
		height: auto;
		width: auto;
	}

} /* ←削除禁止！ */


/* タブレット用ここから
================================================= */

@media screen and (max-width:1024px){

	/* ここにタブレット用のスタイルシート */

} /* ←削除禁止 */


/*パソコン用ここから
================================================= */

@media screen and (min-width:1025px){

	/* ここにパソコン用のスタイルシート */

} /* ←削除禁止 */


.css-selector {
    background: linear-gradient(270deg, #6fe4c6, #ca6be6);
    background-size: 400% 400%;

    -webkit-animation: healchan 30s ease infinite;
    -moz-animation: healchan 30s ease infinite;
    animation: healchan 30s ease infinite;
}

@-webkit-keyframes healchan {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes healchan {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes healchan {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


/* ホバー時虹色リンク */
.niji-link {
background-size: 200%; /* 背景領域の設定 */
}
.niji-link:hover {
background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 136, 0) 14.28%, rgb(221, 221, 0) 28.56%, rgb(0, 221, 0) 42.85%, rgb(0, 221, 221) 57.14%, rgb(0, 0, 255) 71.42%, rgb(238, 0, 238) 85.71%, rgb(255, 0, 0) 100%); /* 虹色配色 */
-webkit-background-clip: text; /* 背景色をテキストの形にマスキングする */
-webkit-text-fill-color: rgba(0, 0, 0, 0); /* テキスト色を透過する */
animation: niji-link 0.5s linear infinite; /* アニメーションさせる */
}

@keyframes niji-link {
to { background-position: 200%; }
}