@charset "UTF-8";
/* CSS Document */
#headerCont02{position:absolute; top:23%; left:50%; z-index:100; text-align:center; width:570px; margin-left:-275px; max-width:100%;}
#headerCont02 h1{margin-bottom:60px;}
#headerCont02 h2{margin-bottom:20px;}
#headerCont02 .h2Icon{margin-bottom:20px;}
#headerCont02 .mainTit{
	font-size: 27px;
	font-weight: bold;
	line-height: 2;
	color: #FFFFFF;
}
#headerCont02 .mainTit span{display:block;}

#mainImg{background-image:url(../../tag/images/mainimg.jpg); z-index:10; display:block;}

.section{padding-top:75px; text-align:center; font-size:17px;}
.section h3{margin-bottom:15px;}
.section .tit{margin-bottom:20px; font-size:23px; font-weight:bold;}
.section .tit span.tit01{font-size:16px;}
.section .txt{margin-bottom:60px;}

.styleBox .boxChild{position:relative;}
.styleBox .boxCont{width:480px; position:absolute; top:10%; font-size:19px;}
.styleBox .boxContL{left:5%;}
.styleBox .boxContR{right:5%;}
.styleBox .cap{width:90%; position:absolute; bottom:25px; font-size:10px; right:5%; text-align:right;}

#color{margin-bottom:150px;}
.colorBox{
	width: 630px;
	max-width: 100%;
	margin: 0 auto;
}
.colorBox .boxChild{float:left; margin-right:30px; margin-bottom:30px; font-size:12px; line-height:1; width:300px;}
.colorBox .boxChild:nth-child(2n){margin-right:0;}
.colorBox .boxChild figure{margin-bottom:10px;}

/*===============================
             MEDIA
================================*/
@media only screen and (max-width:1300px){
.styleBox .boxContL{left:10px;}
.styleBox .boxContR{right:10px;}
.styleBox .cap{right:20px;}	
}

@media only screen and (max-width:736px){
#headerCont02{top:15%; left:5%; width:90%; margin:0;}

#mainImg{background-image:url(../../tag/images/mainimg_sp.jpg);}

.section{padding-top:50px;}
.section .txt{margin-bottom:40px;}
.section .txt p{display:inline;}

.styleBox .boxCont{width:50%; text-align:left; top:auto !important; bottom:60px; font-weight:bold;}
.styleBox .boxChild:nth-child(4) .boxCont{top:40px !important; bottom:auto;}
.styleBox .boxChild:nth-child(2) .boxCont p, .styleBox .boxChild:nth-child(4) .boxCont p{text-shadow:0px 0px 5px #fff;}
.styleBox .boxCont p{display:inline;}
.styleBox .boxContL{left:20px;}
.styleBox .boxContR{right:20px;}
.styleBox .cap{text-align:left; left:2%; width:96%; right:auto; bottom:10px;}

#color{margin-bottom:100px;}
.colorBox{width:510px;}
.colorBox .boxChild:nth-child(4n){margin-right:30px;}
.colorBox .boxChild:nth-child(3n){margin-right:0;}
}

@media only screen and (max-width:600px){
#headerCont02 .mainTit{font-size:22px;}
}

@media only screen and (max-width:540px){
.section .tit{font-size:18px;}
.section .tit span.tit01{font-size:14px;}

.styleBox .boxCont{font-size:16px;}

.colorBox{width:300px;}
.colorBox .boxChild:nth-child(3n){margin-right:30px;}
.colorBox .boxChild:nth-child(2n){margin-right:0;}
}

@media only screen and (max-width:480px){
.section{padding-top:30px; font-size:14px;}
.section .txt{margin-bottom:30px;}

#headerCont02 .mainTit{font-size:18px;}

.styleBox .boxChild:nth-child(2) .boxCont{bottom:30px;}
.styleBox .boxChild:nth-child(4) .boxCont{top:20px !important;}
.styleBox .boxCont{bottom:20px;}
.styleBox .boxContL{left:10px;}
.styleBox .boxContR{right:10px;}
.styleBox .cap{bottom:5px;}

#color{margin-bottom:50px;}
}

@media only screen and (max-width:414px){
#headerCont02 h1{width:150px; margin:0 auto 40px;}

.section .tit{font-size:16px;}
.section .tit span.tit01{font-size:12px;}

.styleBox .boxCont{font-size:14px;}
}

@media only screen and (max-width:375px){
#headerCont02 .mainTit{font-size:15px;}
}

@media only screen and (max-width:320px){
#headerCont02 .mainTit{font-size:15px;}

.colorBox{width:300px;}
.colorBox .boxChild{margin-right:10px;}
.colorBox .boxChild:nth-child(3n){margin-right:10px;}
.colorBox .boxChild:nth-child(2n){margin-right:0;}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: landscape){
#headerCont02{top:10%;}
#headerCont02 h1{margin-bottom:20px;}
#headerCont02 h2{margin-bottom:10px;}
#headerCont02 h2 img{width:60px;}
#headerCont02 .h2Icon img{width:70px;}
#headerCont02 .mainTit{font-size:16px;}
}