@charset "UTF-8";

img { vertical-align:middle; }

#ly-Title { position:relative; overflow:hidden; background-position:center top; background-repeat:no-repeat; background-size:cover; transition:filter ease 1s; animation:titleslide 30s linear infinite; }
#ly-Title div.frame { padding-left:20px; padding-right:20px; }
#ly-Title.title-about { background-image:url('../../img/common/img-title-about.jpg'); }
#ly-Title.title-business-website { background-image:url('../../img/common/img-title-business-website.jpg'); }
#ly-Title.title-business-photo { background-image:url('../../img/common/img-title-business-photo.jpg'); }
#ly-Title.title-portfolio { background-image:url('../../img/common/img-title-portfolio.jpg'); }
#ly-Title.title-template { background-image:url('../../img/common/img-title-template.jpg'); }
#ly-Title.title-request { background-image:url('../../img/common/img-title-request.jpg'); }
#ly-Title:hover { -webkit-filter:grayscale(100%); filter:grayscale(100%); }
#ly-Title div.mask { width:100%; height:100%; position:absolute; top:0; left:0; background-image:url('../../img/common/img-title-pattern.png'); }
#ly-Title dl { position:relative; z-index:2; }
#ly-Title dt { font-weight:900; color:#aef; line-height:1; }
#ly-Title dd { color:#fafafa; }
#ly-Title dd span { line-height:1.6; }

#ly-Tab { background-color:#333; }
#ly-Tab ul { display:-ms-flexbox; display:flex; }
#ly-Tab li { flex:1; font-weight:700; text-align:center; }
#ly-Tab li a { text-decoration:none; transition:color ease .5s; }
#ly-Tab li a.active { background-color:#fff; color:#0078e5 !important; }

article.content div.frame { padding-left:20px; padding-right:20px; }

/* Mobile */
@media screen and (min-width:1px) and (max-width:799.99px) {
	#ly-Title div.frame { padding-top:30px; padding-bottom:30px; }
	#ly-Title dt { font-size:2em; }
	#ly-Title dd { display:none; }

	#ly-Tab li { text-align:center; }
	#ly-Tab li a { padding-top:15px; padding-bottom:15px; display:block; color:#fff; }
	#ly-Tab li span { display:none; }
	#ly-Tab li a:focus,
	#ly-Tab li a:hover { background-color:#aaa; }

	article.content div.frame { padding-top:40px; padding-bottom:40px; }
}

/* Mobile & Tablet */
@media screen and (min-width:1px) and (max-width:1019.99px) {
	#ly-Title { padding-top:77px; }
	#ly-Title dl { text-align:center; }
}

/* Tablet */
@media screen and (min-width:800px) and (max-width:1019.99px) {
	#ly-Title div.frame { padding-top:50px; padding-bottom:50px; }
	#ly-Title dt { font-size:2.6em; }
	#ly-Title dd { margin-top:20px; }


	article.content div.frame { padding-top:60px; padding-bottom:60px; }
}

/* Tablet & Desktop */
@media screen and (min-width:800px) {
	#ly-Tab ul { -ms-flex-pack:center; justify-content:center; }
	#ly-Tab li { font-size:1.2em; }
	#ly-Tab li a { padding:22px 35px; display:block; color:#ccc; }
	#ly-Tab li a:focus,
	#ly-Tab li a:hover { color:#fff; }
}

/* Desktop */
@media screen and (min-width:1020px) {
	#ly-Title { padding-top:85px; }
	#ly-Title div.frame { padding-top:80px; padding-bottom:100px; }
	#ly-Title dl { display:-ms-flexbox; display:flex; -ms-flex-pack:justify; justify-content:space-between; }
	#ly-Title dt { font-size:3.2em; }
	#ly-Title dd { text-align:right; }
	#ly-Title dd span { display:block; }

	#ly-Tab ul { padding-left:20px; padding-right:20px; }

	article.content div.frame { padding-top:100px; padding-bottom:100px; }
}

/* Desktop : 1020 */
@media screen and (min-width:1020px) and (max-width:1219.99px) {
}

/* Desktop : 1220 */
@media screen and (min-width:1220px) {
	#ly-Title div.frame { width:1200px; margin-left:auto; margin-right:auto; }

	#ly-Tab ul { width:1200px; margin-left:auto; margin-right:auto; }

	article.content div.frame { width:1200px; margin-left:auto; margin-right:auto; }
}

@keyframes titleslide {
    0% { 
        background-position:center top;
    }
    50% { 
        background-position:center bottom;
    }
    100% { 
        background-position:center top;
    }
}