@charset "utf-8";




/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Qwitcher+Grypen&display=swap');





/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;padding: 0;
	height: 100vh;
	font-size: 14px;	/*基準となるフォントサイズ。下の方にある「画面幅900px以上」で基準を大きなサイズに再設定しています。*/
}

body {
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	color: #fff;		/*全体の文字色*/
	line-height: 2;		/*行間*/
}

/*リセット*/
figure {margin: 0;}
nav {margin: 0;padding: 0;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}



/*iframeタグ*/
iframe {width: 100%;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #fff;	/*文字色*/
	transition: 0.3s;
}

a:hover {
	opacity: 0.8;	/*マウスオン時に60%の透明度にする*/
}




/*ヘッダー
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	margin-top: -25px;
}

/*ロゴ画像*/
header #logo img {
	width: 120px;		/*幅*/
	position: fixed;	/*画面に対して固定表示*/
	left: -10px;		/*ウィンドウに対して左からの配置場所*/
	top: -5px;			/*ウィンドウに対して上からの配置場所*/
	
}

/* ボタンのスタイル */
.bg-change {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 300px;
    height: 5px;
    line-height: 50px;
    margin: auto;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.bg-change.no1 {
    right: 66%;
}
.bg-change.no2 {
    left: 0;
    right: 0;
}
.bg-change.no3 {
    left: 66%;
}

/* コンテンツのスタイル */
.wrapper {
    width: 100%;
    height: 100%;
	text-align: center;
}
.contents {
  height: 100vh;
  background-image: url(../images/all/bg.jpg), url(../images/all/bg1.jpg),url(../images/all/bg2.jpg),url(../images/all/bg3.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover, 0 0, 0 0, 0 0;
}

/* ボタンホバー時のスタイル */
.bg-change.no1:hover ~ .wrapper .contents{
    background-image: url(../images/all/bg1.jpg);
	background-size: cover;
}
.bg-change.no2:hover ~ .wrapper .contents {
    background-image: url(../images/all/bg2.jpg);
	background-size: cover;
}
.bg-change.no3:hover ~ .wrapper .contents {
    background-image: url(../images/all/bg3.jpg);
	background-size: cover;
}


 
/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}

footer {
	font-size: 0.6em;		/*文字サイズ*/
	text-align: center;		/*内容をセンタリング*/
	padding: 20px;			/*ボックス内の余白*/
	background: #ffa3c1;
}

/*リンクテキスト*/
footer a {text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}



/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #ffcc00 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #666; color: #fff; border-radius: 3px;margin: 5px 0;}
.look .color-check {color: #ffcc00 !important;}
.small {font-size: 0.6em;}




/*---------------------------------------------------------------------------
ここから下は画面幅900px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:900px) {
.bg-change.no1 {
   right: 0;
   margin: 150px auto;
}
.bg-change.no2 {
  right: 0;
  margin: 100px auto;
}
.bg-change.no3 {
    right: 0;
	margin: 150px auto;
}
.bg-change {
  position: inherit;
  top: 0;
  bottom: 0;
  width: 85%;
  height: 5px;
  line-height: 50px;
  margin: auto;
  text-align: center;
  color: #fff;
  cursor: inherit;
}
.contents {
  margin-top: -650px;
}
}

/*---------------------------------------------------------------------------
ここから下は画面幅480px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px) {
.bg-change.no1 {
   right: 0;
   margin: 120px auto 150px auto;
}
.bg-change.no2 {
  right: 0;
  margin: 0 auto;
}
.bg-change.no3 {
    right: 0;
	 margin: 150px auto 250px auto;
}
.bg-change {
  position: inherit;
  top: 0;
  bottom: 0;
  width: 85%;
  height: 5px;
  line-height: 50px;
  margin: auto;
  text-align: center;
  color: #fff;
  cursor: inherit;
}
.contents {
  margin-top: -680px;
}
}

/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {


/*全体の設定
---------------------------------------------------------------------------*/
html, body {
	font-size: 16px;	/*基準となるフォントサイズの上書き*/
}


/*ヘッダー
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo img {
	width: 280px;	/*幅*/
	left: 5%;		/*ウィンドウに対して左からの配置場所*/
}


}