@charset "utf-8";

.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(1){
	background-color:#386eb1;
}
.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(2){
	background-color:#5aaeb6;
}
.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(3){
	background-color:#ab8350;
}
.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(4){
	background-color:#3f8f45;
}
.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(5){
	background-color:#d65474;
}
.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(6){
	background-color:#d9692a;
}
.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(7){
	background-color:#53a5dc;
}
.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(8){
	background-color:#8e4598;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For SmartPhone
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

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

	/* ///////////////////////////////////////////////////////////// */
	/* =================================================== */
	/* ------------------------------------------ */
	.mainVisWrap .mainVisBox .mainVisTxtImg{
		width:100%;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner{
		position:relative;
		width:94%;
		/*background-color:rgba(255, 0, 0, .5);*/
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner::before{
		content:"";
		display:block;
		padding-top:100%;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner > div{
		position:absolute;
	}

	/* =================================================== */
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg01{
		/*width:78%;*/
		width:100%;
		top:2%;
		left:0;
		z-index:2;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg02{
		display:none;
		width:22%;
		top:0;
		right:-1%;
		z-index:1;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg03{
		width:100%;
		top:19%;
		left:0;
		z-index:2;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg04{
		width:98%;
		top:31%;
		left:50%;
		transform: translateX(-50%);
		z-index:2;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg05{
		width:95%;
		top:38%;
		left:50%;
		transform: translateX(-50%);
		z-index:2;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg06{
		width:95%;
		top:48%;
		left:50%;
		transform: translateX(-50%);
		z-index:2;
	}

	/* =================================================== */
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon{
		width:100%;
		display:flex;
		flex-wrap:wrap;
		top:63%;
		left:0;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p{
		/*width:22.75%;
		margin-right:3%;*/
		width:23.5%;
		margin-right:2%;
		margin-top:1.5%;
		padding-top:1%;
		padding-bottom:1%;
		text-align:center;
		font-size:2.9vw;
		font-weight:600;
		letter-spacing:-1px;
		color:#fff;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(-n+4){
		margin-top:0;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(4n){
		margin-right:0;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(1),
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(2){
		letter-spacing:-2.5px;	
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(3){
		letter-spacing:3px;
		padding-left:3px;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(4){
		letter-spacing:10px;
		padding-left:10px;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(6){
		letter-spacing:0px;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(7){
		letter-spacing:-0.5px;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(8){
		letter-spacing:0px;
	}

	/* =================================================== */
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox{
		position:absolute;
		top:78%;
		width:100%;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .appBtn,
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .mypageBtn{
		display:block;
		position:relative;
		padding:3% 0;
		text-align:center;
		color:#fff;
		font-size:6vw;
		font-weight:900;
		line-height:1;
		border-radius:10px;
		background:#F21D1D;
		background:linear-gradient(180deg,rgba(242, 29, 29, 1) 33%, rgba(208, 0, 0, 1) 60%);
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .mypageBtn{
		padding:6% 0;
		box-shadow:0px 0px 5px rgba(0, 0, 0, .3);
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .appBtn::before,
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .mypageBtn::before{
		content:"\f105";
		font-family:"FontAwesome";
		display:block;
		position:absolute;
		right:0.3em;
		top:50%;
		transform:translateY(-50%);
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .appBtn span,
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .mypageBtn span{
		display:inline-block;
		font-size:4.4vw;
		font-weight:600;
		/*transform:translateY(-10%);*/
	}

	/* ------------------------------------------ */
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .appOver{
		display:block;
		position:relative;
		padding:6% 0;
		text-align:center;
		color:#fff;
		font-size:6vw;
		font-weight:900;
		line-height:1;
		border-radius:10px;
		background:#aaa;
		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
	}

	/* =================================================== */
	.mainBlock .archives{
		width:70%;
		margin:6% auto 0;
		padding:0 0 10% 0;
	}
	.mainBlock .archives h2{
		text-align:center;
		font-size:6vw;
	}
	.mainBlock .archives ul{
		display:flex;
		flex-direction:column;
		margin:5% 0 0 0;
	}
	.mainBlock .archives ul li{
		width:100%;
		margin-top:3%;
	}
	.mainBlock .archives ul li:first-child{
		margin-top:0;
	}
	.mainBlock .archives ul li a{
		display:block;
		width:100%;
		padding:5% 0;
		text-align:center;
		font-size:5vw;
		font-weight:500;
		border-radius:150px;
		border:3px solid #333;
		color:#333;
	}
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For Desktop & Tablet
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

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

	/* ///////////////////////////////////////////////////////////// */
	.mainVisWrap{
		width:100%;
	}
	.mainVisWrap .mainVisBox{
		width:100%;
		display:flex;
	}
	.mainVisWrap .mainVisBox .mainVisImg{
		width:52%;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg{
		width:48%;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner{
		position:relative;
		width:90%;
		/*background-color:rgba(255, 0, 0, .5);*/
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner::before{
		content:"";
		display:block;
		padding-top:100%;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner > div{
		position:absolute;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg01{
		width:78%;
		width:100%;
		top:2%;
		left:0;
		z-index:2;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg02{
		display:none;
		width:22%;
		top:0;
		right:-1%;
		z-index:1;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg03{
		width:100%;
		top:19%;
		left:0;
		z-index:2;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg04{
		width:100%;
		top:31%;
		left:0;
		z-index:2;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg05{
		width:95%;
		top:38%;
		left:50%;
		transform: translateX(-50%);
		z-index:2;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mainVisTxtImg06{
		width:95%;
		top:48.0%;
		left:50%;
		transform: translateX(-50%);
		z-index:2;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon{
		width:100%;
		display:flex;
		flex-wrap:wrap;
		top:63%;
		left:0;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p{
		/*width:22.75%;
		margin-right:3%;*/
		width:23.5%;
		margin-right:2%;
		margin-top:1.5%;
		padding-top:1%;
		padding-bottom:1%;
		text-align:center;
		font-size:1.2vw;
		font-weight:600;
		letter-spacing:-1px;
		color:#fff;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(-n+4){
		margin-top:0;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(4n){
		margin-right:0;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(1),
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(2){
		letter-spacing:-2.5px;	
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(3){
		letter-spacing:3px;
		padding-left:3px;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(4){
		letter-spacing:10px;
		padding-left:10px;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(6){
		letter-spacing:0px;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(7){
		font-size:1.15vw;
		letter-spacing:-0.5px;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .categoryIcon > p:nth-child(8){
		letter-spacing:0px;
	}

	/* =================================================== */
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox,
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .mypageBtn{
		position:absolute;
		top:78%;
		width:100%;
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .appBtn,
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .mypageBtn{
		display:block;
		position:relative;
		padding:3% 0;
		text-align:center;
		color:#fff;
		font-size:2.7vw;
		font-weight:900;
		line-height:1;
		border-radius:10px;
		background:#F21D1D;
		background:linear-gradient(180deg,rgba(242, 29, 29, 1) 33%, rgba(208, 0, 0, 1) 60%);

		transition: all 0.4s ease;
		transform: scale(1.0);
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .mypageBtn{
		padding:6% 0;
		box-shadow:0px 0px 5px rgba(0, 0, 0, .3);
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .appBtn:hover,
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .mypageBtn:hover{
		transform: scale(1.05);
		background:linear-gradient(180deg,rgba(255, 70, 70, 1) 33%, rgba(255, 0, 0, 1) 100%);
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .appBtn::before,
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .mypageBtn::before{
		content:"\f105";
		font-family:"FontAwesome";
		display:block;
		position:absolute;
		right:0.3em;
		top:50%;
		transform: translateY(-50%);
	}
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .appBtn span{
		display:inline-block;
		font-size:1.8vw;
		font-weight:600;
		transform: translateY(-20%);
	}

	/* ------------------------------------------ */
	.mainVisWrap .mainVisBox .mainVisTxtImg .inner .appBtnBox .appOver{
		display:block;
		position:relative;
		padding:6% 0;
		text-align:center;
		color:#fff;
		font-size:2.7vw;
		font-weight:900;
		line-height:1;
		border-radius:10px;
		background:#aaa;
		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
	}

	/* ///////////////////////////////////////////////////////////// */
	.mainBlock .archives{
		width:70%;
		margin:2% auto 0;
		padding:0 0 6% 0;
	}
	.mainBlock .archives h2{
		text-align:center;
		font-size:clamp(1.5rem, 2.6vw, 4rem);
	}
	.mainBlock .archives ul{
		display:flex;
		margin:2% 0 0 0;
	}
	.mainBlock .archives ul li{
		width:19.2%;
		margin-right:1%;
	}
	.mainBlock .archives ul li:last-child{
		margin-right:0;
	}
	.mainBlock .archives ul li a{
		display:block;
		width:100%;
		padding:6% 0;
		text-align:center;
		font-size:clamp(1.0rem, 1.4vw, 2.8rem);
		font-weight:500;
		border-radius:150px;
		border:3px solid #333;
		color:#333;
	}

	/* ///////////////////////////////////////////////////////////// */
	/* =================================================== */
	/* ------------------------------------------ */
}