@charset "utf-8";

/*
Theme Name: CROSS-PARK
Author: THREE
Version: ver 1.00
*/


/* -------------------------------------------------
    ---     RESET     ---
   -------------------------------------------------  */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var, b, i, dl dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
img { vertical-align: top; font-size: 0; line-height: 0; }
sup { font-size: 8px; }
em { font-style: normal; }
div:before, div:after, ul:before, ul:after, ol:before, ol:after, dl:before, dl:after { content: ""; display: block; }
div:after, ul:after, ol:after, dl:after { clear: both; }
div, ul, ol, dl { zoom: 1; }

/* -------------------------------------------------
    ---     COMMON     ---
   -------------------------------------------------  */

html {
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 15px;
}


::selection {
	background: #4d4d4d;
	color: #fff;
}

ul, ul li { list-style: none; }

a img:hover { opacity: 0.8; }
a img.photo_base:hover { opacity: 1.0; }

a {
	color: #e14672;
	text-decoration:none;
}  

a:hover {
	color: #e14672;
	text-decoration: none;
}


/* -------------------------------------------------
    ---     LAYOUT     ---
   -------------------------------------------------  */



#wrap { overflow: hidden; }

#main {
	float: left;
	width: 100%;
	margin: 0 -400px 0 0;
}

#side {
	float: right;
	width: 400px;
	background: #FFF;
}

#content {
	margin: 0 400px 0 0;
	position: relative;
	background: url('images/top.jpg') no-repeat;
	background-size:cover ;
	background-position:center center ;
}

#content img.main_txt { 
	width: 500px; 
	position: absolute; 
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#content img.sub_txt { 
	width: 600px; 
	position: absolute; 
	bottom: 30px; 
	left: 30px;
}

#side ul li {
	width: 100%;
	text-align: center;
	border-left: 9px solid #CCC;
}

#side ul li a { display: block; padding: 40px 0; }
#side ul li:nth-child(2) a { padding: 20px 0; }

#side ul li:nth-child(2) { border-color: #0171bb; background: #f5f5f5; }
#side ul li:nth-child(3) { border-color: #DB081D; }
#side ul li:nth-child(4) { border-color: #0270bd; background: #f5f5f5;}
#side ul li:nth-child(5) { border-color: #da3883; }

#side ul li:first-child { padding: 70px 0; background: #4b179f; border-left: none; }
#side ul li:last-child { padding: 40px 0 0 0; border-left: none; font-family: 'Roboto', sans-serif; font-weight: 700; }



/* -------------------------------------------------
    ---     HEADER     ---
   -------------------------------------------------  */


/* ------------------------------------------------------------------
 ****
 ****   For Smart Phone
 ****
   ------------------------------------------------------------------ */

/* Larger than Desktop HD */
@media (min-width: 1600px) {

}


@media (max-width: 1500px) {


}


@media (max-width: 960px) {

#main, #side { float: none; width: 100%; margin:0 ; }
#content { width: 100%; margin:0 ; }
#side ul li:last-child { padding-bottom: 40px; }
#content img.main_txt { width: 80%; }
#content img.sub_txt { width: 95%; left: 2%; }

}

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


}


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


}

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


	
}


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

}