@charset "UTF-8";
*{box-sizing:border-box;}

/* 横幅1200px以上 */
@media screen and (min-width: 1200px) {
	/* ３段組みの設定を記述 */ 
	
	/* 記事内 */
	ul.list {border: solid 2px skyblue; border-radius: 5px; padding: 0.5em 1em 0.5em 2.3em; position: relative;}
	ul.list li {line-height: 1.5; padding: 0.5em 0; list-style-type: none!important;}
	ul.list li:before {font-family: "FontAwesome"; content: "\f138";/*アイコンの種類*/ position: absolute; left : 1em;/*左端からのアイコンまでの距離*/ color: skyblue;/*アイコン色*/}
	
	.articlebox{width:1200px; height: auto; margin-left: auto; margin-right: auto;}
    .article{float: left; background-color:#DEDEDE; min-width: 270px; max-width: 270px; height:250px; margin: 3px 15px;}
	img{margin-top: 20px; margin-left: auto; margin-right: auto; object-fit: cover;}
	.image{margin-left:5%; margin-right:5%;}
	.title-btn{height: 35%; width:100%; padding:8px 24px; margin-bottom: 0px; margin-left: auto; margin-right: auto; color:black; display:inline-block; opacity:0.8; vertical-align:top;}
	.title-btn:hover{opacity:1; background-color: black; color:white; border-radius:4px;}
	center{width:90%; margin-left: auto; margin-right: auto;}
	.sns{margin-left: 2%;}
	.twitter-wid{width:25%; height: 550px; margin-top: -30px; background-color: #FFFFFF; float: left;}
	.update{margin-left: 28%; width:40%; }
	
	/* 更新情報 */
	ul.update {border: solid 2px #ffb03f; padding: 0.5em; position: relative; margin-top: 2em;}
	ul.update li {line-height: 1.5; padding: 0.5em 0 0.5em 3em; border-bottom: dashed 1px silver; list-style-type: none!important;}
	ul.update li:last-of-type {border-bottom: none;}
	ul.update li:before {/*リスト内のアイコン*/font-family: "FontAwesome"; content: "\f138";/*アイコン種類*/ position: absolute; left : 1.5em; /*左端からのアイコンまで*/ color: #ffb03f; /*アイコン色*/}
	ul.update li:after {/*タイトルタブ*/background: #ffb03f; color: #fff; font-weight: bold; position: absolute; left: -2px; bottom: 100%; padding: 1px 7px; content: "UPDATE";/*タブの文字*/ letter-spacing: 0.05em;/*字間*/}
	
	.insta-wid{width:25%; margin-left: 2%; float: left;}
			/* header */
			.menu-bar{background-color:#D2D2D2; height: 50px;}
			/* footer */
			.footer{width:100%; height:105px; margin-top: 10px;}
			.footerbox{float: left; height:99px; width:100%; background-color:#D2D2D2;}
			.btn-wrapper{width: 634px; padding-top: 20px; margin-left: auto; margin-right: auto;}
			.btn1{padding:8px 24px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn1:hover{opacity:1;}
			.btn2{padding:8px 34px; margin-right: 8px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn2:hover{opacity:1;}
			.btn3{padding:8px 26px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn3:hover{opacity:1;}
			.btn9{padding:8px 34px; margin:0 8px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn9:hover{opacity:1;}
			.instagram{background-color:#ED11E0;}
			.facebook{background-color:#3b5998; margin-right:10px;}
			.twitter{background-color:#55acee;}
			.youtube{background-color: #C20003;}
			.copyright{color:black; font-size: 10px; text-align: center; padding:8px;}
}

/* 横幅1199px以下〜1000px以上 */
@media screen and (max-width: 1199px) and (min-width: 1000px) {
	/* ３段組みの設定を記述 */ 
	.articlebox{width:1000px; height: auto; margin-left: auto; margin-right: auto;}
    .article{float: left; background-color:#DEDEDE; min-width: 300px; max-width: 300px; height:250px; margin: 3px 16px;}
	img{margin-top: 20px; margin-left: auto; margin-right: auto; object-fit: cover;}
	.image{margin-left:5%; margin-right:5%;}
	.title-btn{height: 35%; width:100%; padding:8px 24px; margin-bottom: 0px; margin-left: auto; margin-right: auto; color:black; display:inline-block; opacity:0.8; vertical-align:top;}
	.title-btn:hover{opacity:1; background-color: black; color:white; border-radius:4px;}
	center{width:90%; margin-left: auto; margin-right: auto;}
	.sns{margin-left: 2%;}
	.twitter-wid{width:25%; height: 550px; margin-top: -30px; background-color: #FFFFFF; float: left;}
	.update{margin-left: 28%; width:50%; }
	/* 更新情報 */
	ul {border: solid 2px #ffb03f; padding: 0.5em; position: relative; margin-top: 2em;}
	ul li {line-height: 1.5; padding: 0.5em 0 0.5em 3em; border-bottom: dashed 1px silver; list-style-type: none!important;}
	ul li:last-of-type {border-bottom: none;}
	ul li:before {/*リスト内のアイコン*/font-family: "FontAwesome"; content: "\f138";/*アイコン種類*/ position: absolute; left : 1.5em; /*左端からのアイコンまで*/ color: #ffb03f; /*アイコン色*/}
	ul li:after {/*タイトルタブ*/background: #ffb03f; color: #fff; font-weight: bold; position: absolute; left: -2px; bottom: 100%; padding: 1px 7px; content: "UPDATE";/*タブの文字*/ letter-spacing: 0.05em;/*字間*/}
	.insta-wid{width:25%; margin-left: 2%; float: left;}
		/* profile */
		.profile{width:100%; padding-left: 15%; padding-right: 15%;}
		.big-title{font-weight: bold; font-size: 30px;}
		.title{font-weight: bold; font-size: 20px; margin-bottom: -10px;}
			/* header */
			.menu-bar{background-color:#D2D2D2; height: 50px;}
			/* footer */
			.footer{width:100%; height:105px; margin-top: 10px;}
			.footerbox{float: left; height:99px; width:100%; background-color:#D2D2D2;}
			.btn-wrapper{width: 634px; padding-top: 20px; margin-left: auto; margin-right: auto;}
			.btn1{padding:8px 24px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn1:hover{opacity:1;}
			.btn2{padding:8px 34px; margin-right: 8px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn2:hover{opacity:1;}
			.btn3{padding:8px 26px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn3:hover{opacity:1;}
			.btn9{padding:8px 34px; margin:0 8px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn9:hover{opacity:1;}
			.instagram{background-color:#ED11E0;}
			.facebook{background-color:#3b5998; margin-right:10px;}
			.twitter{background-color:#55acee;}
			.youtube{background-color: #C20003;}
			.copyright{color:black; font-size: 10px; text-align: center; padding:8px;}
}

/* 横幅999px以下〜800px以上 */
@media screen and (max-width: 999px) and (min-width: 800px) {
	/* ３段組みの設定を記述 */ 
	.articlebox{width:800px; height: auto; margin-left: auto; margin-right: auto;}
    .article{float: left; background-color:#DEDEDE; min-width: 360px; max-width: 300px; height:250px; margin: 3px 20px;}
	img{margin-top: 20px; margin-left: auto; margin-right: auto; object-fit: cover;}
	.image{margin-left:5%; margin-right:5%;}
	.title-btn{height: 35%; width:100%; padding:8px 24px; margin-bottom: 0px; margin-left: auto; margin-right: auto; color:black; display:inline-block; opacity:0.8; vertical-align:top;}
	.title-btn:hover{opacity:1; background-color: black; color:white; border-radius:4px;}
	center{width:90%; margin-left: auto; margin-right: auto;}
	.sns{margin-left: 2%;}
	.twitter-wid{width:25%; height: 550px; margin-top: -30px; background-color: #FFFFFF; float: left;}
	.update{margin-left: 28%; width:65%; }
	/* 更新情報 */
	ul {border: solid 2px #ffb03f; padding: 0.5em; position: relative; margin-top: 2em;}
	ul li {line-height: 1.5; padding: 0.5em 0 0.5em 3em; border-bottom: dashed 1px silver; list-style-type: none!important;}
	ul li:last-of-type {border-bottom: none;}
	ul li:before {/*リスト内のアイコン*/font-family: "FontAwesome"; content: "\f138";/*アイコン種類*/ position: absolute; left : 1.5em; /*左端からのアイコンまで*/ color: #ffb03f; /*アイコン色*/}
	ul li:after {/*タイトルタブ*/background: #ffb03f; color: #fff; font-weight: bold; position: absolute; left: -2px; bottom: 100%; padding: 1px 7px; content: "UPDATE";/*タブの文字*/ letter-spacing: 0.05em;/*字間*/}
	.insta-wid{width:25%; margin-left: 2%; float: left;}
		/* profile */
		.profile{width:100%; padding-left: 15%; padding-right: 15%;}
		.big-title{font-weight: bold; font-size: 30px;}
		.title{font-weight: bold; font-size: 20px; margin-bottom: -10px;}
			/* header */
			.menu-bar{background-color:#D2D2D2; height: 50px;}
			/* footer */
			.footer{width:100%; height:105px; margin-top: 10px;}
			.footerbox{float: left; height:99px; width:100%; background-color:#D2D2D2;}
			.btn-wrapper{width: 634px; padding-top: 20px; margin-left: auto; margin-right: auto;}
			.btn1{padding:8px 24px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn1:hover{opacity:1;}
			.btn2{padding:8px 34px; margin-right: 8px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn2:hover{opacity:1;}
			.btn3{padding:8px 26px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn3:hover{opacity:1;}
			.btn9{padding:8px 34px; margin:0 8px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn9:hover{opacity:1;}
			.instagram{background-color:#ED11E0;}
			.facebook{background-color:#3b5998; margin-right:10px;}
			.twitter{background-color:#55acee;}
			.youtube{background-color: #C20003;}
			.copyright{color:black; font-size: 10px; text-align: center; padding:8px;}
}

/* 横幅799px以下〜650px以上 */
@media screen and (max-width: 799px) and (min-width: 650px){
	/* ３段組みの設定を記述 */ 
	.articlebox{width:600px; height: auto; margin-left: auto; margin-right: auto;}
    .article{float: left; background-color:#DEDEDE; min-width: 360px; max-width: 560px; height:200px; margin: 5px 20px;}
	img{margin-top: 20px; margin-left: auto; margin-right: auto; object-fit: cover;}
	.image{margin-left:5%; margin-right:5%;}
	.title-btn{height: 27%; width:100%; padding:8px 24px; margin-top: 10px; margin-bottom: 0px; margin-left: auto; margin-right: auto; color:black; display:inline-block; opacity:0.8; vertical-align:top;}
	.title-btn:hover{opacity:1; background-color: black; color:white; border-radius:4px;}
	center{width:100%; margin-left: auto; margin-right: auto;}
	.sns{margin-left: 2%;}
	.twitter-wid{width:25%; height: 550px; margin-top: -30px; background-color: #FFFFFF; float: left;}
	.update{margin-left: 28%; width:70%; }
	/* 更新情報 */
	ul {border: solid 2px #ffb03f; padding: 0.5em; position: relative; margin-top: 2em;}
	ul li {line-height: 1.5; padding: 0.5em 0 0.5em 3em; border-bottom: dashed 1px silver; list-style-type: none!important;}
	ul li:last-of-type {border-bottom: none;}
	ul li:before {/*リスト内のアイコン*/font-family: "FontAwesome"; content: "\f138";/*アイコン種類*/ position: absolute; left : 1.5em; /*左端からのアイコンまで*/ color: #ffb03f; /*アイコン色*/}
	ul li:after {/*タイトルタブ*/background: #ffb03f; color: #fff; font-weight: bold; position: absolute; left: -2px; bottom: 100%; padding: 1px 7px; content: "UPDATE";/*タブの文字*/ letter-spacing: 0.05em;/*字間*/}
	.insta-wid{width:25%; margin-left: 2%; float: left;}
		/* profile */
		.profile{width:100%; padding-left: 15%; padding-right: 15%;}
		.big-title{font-weight: bold; font-size: 30px;}
		.title{font-weight: bold; font-size: 20px; margin-bottom: -10px;}
			/* header */
			.menu-bar{background-color:#D2D2D2; height: 50px;}
			/* footer */
			.footer{width:100%; height:105px; margin-top: 10px;}
			.footerbox{float: left; height:99px; width:100%; background-color:#D2D2D2;}
			.btn-wrapper{width: 634px; padding-top: 20px; margin-left: auto; margin-right: auto;}
			.btn1{padding:8px 24px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn1:hover{opacity:1;}
			.btn2{padding:8px 34px; margin-right: 8px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn2:hover{opacity:1;}
			.btn3{padding:8px 26px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn3:hover{opacity:1;}
			.btn9{padding:8px 34px; margin:0 8px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn9:hover{opacity:1;}
			.instagram{background-color:#ED11E0;}
			.facebook{background-color:#3b5998; margin-right:10px;}
			.twitter{background-color:#55acee;}
			.youtube{background-color: #C20003;}
			.copyright{color:black; font-size: 10px; text-align: center; padding:8px;}
}

/* 横幅649px以下 */
@media screen and (max-width: 649px) {
	/* ３段組みの設定を記述 */ 
	.articlebox{width:350px; height: auto; margin-left: auto; margin-right: auto;}
    .article{float: left; background-color:#DEDEDE; min-width: 315px; max-width: 315px; height:200px; margin: 5px 15px;}
	img{margin-top: 20px; margin-left: auto; margin-right: auto; object-fit: cover;}
	.image{margin-left:5%; margin-right:5%;}
	.title-btn{height: 27%; width:100%; padding:8px 24px; margin-top: 10px; margin-bottom: 0px; margin-left: auto; margin-right: auto; color:black; display:inline-block; opacity:0.8; vertical-align:top;}
	.title-btn:hover{opacity:1; background-color: black; color:white; border-radius:4px;}
	center{width:100%; margin-left: auto; margin-right: auto;}
	.sns{margin-left: 2%;}
	.twitter-wid{width:100%; height: 250px; margin-top: 10px; background-color: #FFFFFF;}
	.update{width:94%; margin-left: 3%; margin-right: 3%;}
	/* 更新情報 */
	ul {border: solid 2px #ffb03f; padding: 0.5em; position: relative; margin-top: 2em;}
	ul li {line-height: 1.5; padding: 0.5em 0 0.5em 3em; border-bottom: dashed 1px silver; list-style-type: none!important;}
	ul li:last-of-type {border-bottom: none;}
	ul li:before {/*リスト内のアイコン*/font-family: "FontAwesome"; content: "\f138";/*アイコン種類*/ position: absolute; left : 1.5em; /*左端からのアイコンまで*/ color: #ffb03f; /*アイコン色*/}
	ul li:after {/*タイトルタブ*/background: #ffb03f; color: #fff; font-weight: bold; position: absolute; left: -2px; bottom: 100%; padding: 1px 7px; content: "UPDATE";/*タブの文字*/ letter-spacing: 0.05em;/*字間*/}
	.insta-wid{width:400px; margin-left: auto; margin-right: auto; }
		/* profile */
		.profile{width:100%; padding-left: 15%; padding-right: 15%;}
		.big-title{font-weight: bold; font-size: 20px;}
		.title{font-weight: bold; font-size: 20px; margin-bottom: -10px;}
			/* header */
			.menu-bar{background-color:#D2D2D2; height: 50px; width:100%;}
			/* footer */
			.footer{width:100%; height:105px; margin-top: 10px;}
			.footerbox{float: left; height:99px; width:100%; background-color:#D2D2D2;}
			.btn-wrapper{width: 312px; padding:5px; margin-left: auto; margin-right: auto}
			.btn1{width:140px; height:32px; padding:4px 23px; margin-bottom: 2px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn1:hover{opacity:1;}
			.btn2{width:140px; height:32px; padding:4px 23px; margin-bottom: 2px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn2:hover{opacity:1;}
				.break:before { content: "\A"; white-space: pre; }
			.btn3{width:140px; height:32px; padding:4px 20px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn3:hover{opacity:1;}
			.btn9{width:140px; height:32px; padding:4px 23px; margin-left:10px; color:white; display:inline-block; opacity:0.8; border-radius:4px;}
			.btn9:hover{opacity:1;}
			.instagram{background-color:#ED11E0;}
			.facebook{background-color:#3b5998; margin-right:10px;}
			.twitter{background-color:#55acee;}
			.youtube{background-color: #C20003;}
			.copyright{color:black; font-size: 10px; text-align: center; padding:3px;}
}


.contents-wrapper{width:100%; height: 500px;}