@charset "utf-8";

@import url(_plugin/fontawesome/css/all.min.css);

@media (max-width: 500px){
	html, body { width: 100% !important; max-width: 100% !important; }
}

/*　基本設定ここから　*/
body { width: 100%; height: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #555555; font-family: "Helvetica", Arial, YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
img { border: 0; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; }
a:link { color: #555555; text-decoration: none; }
a:visited { color: #555555; text-decoration: none; }
a:hover { color: #0081CC; text-decoration: none; }
a:active { color: #555555; text-decoration: none; }
a:focus { color: #555555; text-decoration: none; }
/*　基本設定ここまで　*/

/*　yuo reset css　ここから　*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
/* 画像の下にできる隙間をなくす */
img { vertical-align: bottom; }
/*　yuo reset css　ここまで　*/

/* pagetop ----------*/
#pagetop { float: right; margin-top: -18px; margin-right: 0px; margin-bottom: 30px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: url(images/top/yajirushi.png); background-repeat: no-repeat; background-position: center; font-size: 12px; }
#pagetop a { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 70px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }
.icon { float: left; margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }
#pagetop_copyright { max-width: 960px; margin-left: auto; margin-right: auto; margin-top: -40px; margin-bottom: 20px; font-size: 12px; clear: both; }

/*----- smooth scroll -----*/
#pageTop { position: fixed; bottom: 20px; right: 20px; padding: 13px 11px 11px 15px; border-radius: 3px; color: #ffffff; background: #bfbfbf; font-size: 12px; }
#pageTop:hover { background: #EEE; }
@media screen and (-webkit-min-device-pixel-ratio : 0) {
	/*---Safari,Chrome---*/
	#pageTop { position: fixed; bottom: 20px; right: 20px; padding: 15px 13px 13px 15px; border-radius: 5px; color: #ffffff; background: #bfbfbf; }
	#pageTop:hover { background: #EEE; }
}


/* inauguration_wrap ----------*/
#inauguration_wrap { width: 100%; overflow: hidden;  pointer-events: none; }
#inauguration_wrap .inner { max-width: 1240px; margin: auto; padding: 0 20px; }
#inauguration_wrap img { max-width: 100%; }
#inauguration_wrap a img { transition: all 0.2s ease-out; }
#inauguration_wrap a:hover img { opacity: 0.6; }
#inauguration_wrap br.sp { display: none; }
@media (max-width: 500px){
	#inauguration_wrap br.sp { display: block; }
}

/* mv ----------*/
#inauguration_mv { width: 100%; height: 300px; background-image: url(images/new_top/mv_bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }
#inauguration_mv .inner { position: relative; height: inherit; }
#inauguration_mv h1 { position: relative; z-index: 10; margin-left: -50px; padding-top: 35px; }
#inauguration_mv .name { position: absolute; z-index: 10; bottom: 20px; right: 20px; }
@media screen and (max-width:1024px) { /* iPad 横 l */
	#inauguration_mv { height: 35vw; }
	#inauguration_mv h1 { margin-left: 0; padding-top: 20px; width: 80%; }
}
@media screen and (max-width:896px) { /* iPhone 横 m */
	#inauguration_mv .name { width: 40%; }
}
@media (max-width: 500px){
	#inauguration_mv { height: 38vw; }
	#inauguration_mv .name { bottom: 10px; width: 45%; }
}

/* inauguration_contents ----------*/
#inauguration_contents {}
#inauguration_contents .inner { position: relative; padding: 40px 20px 60px; }
#inauguration_contents .inner::before { position: absolute; z-index: 5; top: -305px; left: 743px; content: ""; width: 645px; height: 873px; background-image: url(images/new_top/haruka.png); background-repeat: no-repeat; background-position: left top; background-size: contain; backface-visibility: hidden; image-rendering: -webkit-optimize-contrast; }
#inauguration_contents .w { position: relative; z-index: 10; }
@media screen and (max-width:1024px) { /* iPad 横 l */
	#inauguration_contents .inner::before { top: -35vw; left: auto; right: -25%; width: 50%; }
}
@media screen and (max-width:896px) { /* iPhone 横 m */
	#inauguration_contents .inner { position: relative; padding: 10px 20px 30px; }
}
@media (max-width: 500px){
	#inauguration_contents .inner::before { top: -38vw; width: 60%; right: -34%; }
}

#inauguration_contents .column { display: flex; flex-direction: row-reverse; }
#inauguration_contents .column .cp { pointer-events: all; width: 338px; margin-left: 40px; }
#inauguration_contents .column .cp .box {}
#inauguration_contents .column .cp .box a { display: block; padding: 20px 25px; border-radius: 10px; background-color: rgba(255, 241, 0, 0.9); transition: all 0.2s ease-out; }
#inauguration_contents .column .cp .box a:hover { background-color: rgba(255, 241, 0, 1); }
#inauguration_contents .column .cp .box h3 { margin-bottom: 15px; color: #FF0000; text-align: center; font-weight: bold; font-size: 18px; }
#inauguration_contents .column .cp .box p { color: #000; text-align: center; font-weight: bold; }
#inauguration_contents .column .cp .box .pr { display: flex; margin-bottom: 10px; line-height: 65px; justify-content: center; }
#inauguration_contents .column .cp .box .pr span { display: inline-block; width: 65px; height: 65px; margin-right: 10px; border-radius: 65px; color: #FFF100; background-color: #000; text-align: center; line-height: 65px; font-size: 16px; }
#inauguration_contents .column .cp .box .pr span strong { font-size: 24px; }
#inauguration_contents .column .cp .box .pr > strong { display: inline-block; margin-right: 5px; font-size: 80px; }
#inauguration_contents .column .cp .box .pr small { font-size: 18px; }
#inauguration_contents .column .cp .box .tx { font-size: 30px; }
#inauguration_contents .column .cp .box .tx small { font-size: 24px; }
#inauguration_contents .column .tw { width: calc(100% - 338px - 40px); }
#inauguration_contents .column .tw h2 { margin-bottom: 30px; padding: 8px 10px; color: #FFF; background-color: rgba(0, 127, 199, 0.9); text-align: center; font-size: 24px; font-weight: bold; }
#inauguration_contents .column .tw h2 small { font-size: 18px; }
#inauguration_contents .column .tw p { color: #000; line-height: 2.2; font-size: 18px; font-weight: bold; }
#inauguration_contents .column .tw p mark { background: linear-gradient(transparent 60%, #FFF100 60%); }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#inauguration_contents .column { flex-flow: wrap; }
	#inauguration_contents .column .cp { width: 100%; margin-left: 0; margin-bottom: 10px; }
	#inauguration_contents .column .cp .box { max-width: 400px; display: block; margin: auto; }
	#inauguration_contents .column .tw { width: 100%; }
	#inauguration_contents .column .tw p { line-height: 1.6; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#inauguration_contents .column .cp .box { padding: 0;}
	#inauguration_contents .column .cp .box a { padding: 10px; display: flex; flex-flow: wrap; align-items: center;  }
	#inauguration_contents .column .cp .box h3 { width: 100%; margin-bottom: 5px; line-height: 1.2; }
	#inauguration_contents .column .cp .box .pr { width: 50%; margin-bottom: 5px; line-height: 45px; }
	#inauguration_contents .column .cp .box .pr span { width: 45px; height: 45px; line-height: 45px; font-size: 12px; }
	#inauguration_contents .column .cp .box .pr span strong { font-size: 18px; }
	#inauguration_contents .column .cp .box .pr > strong { font-size: 50px; }
	#inauguration_contents .column .cp .box .pr small { font-size: 16px; }
	#inauguration_contents .column .cp .box .tx { width: 50%; font-size: 20px; text-align: left;}
	#inauguration_contents .column .cp .box .tx small { font-size: 18px; }
	#inauguration_contents .column .tw h2 { margin-bottom: 10px; line-height: 1.4; }
	#inauguration_contents .column .tw p { line-height: 1.5; font-size: 16px; letter-spacing: -0.05em; }
}

#inauguration_contents .contents_wrap { pointer-events: all; display: flex; margin-top: 40px; }
#inauguration_contents .contents_wrap .cont { width: 33.33%; margin-right: 20px; padding: 20px; border: solid 1px #000; background-color: #FFF; }
#inauguration_contents .contents_wrap .cont-last { margin-right: 0; background-color: rgba(255, 251, 188, 0.9); }
#inauguration_contents .contents_wrap .cont h3 { color: #000; text-align: center; font-weight: bold; }
#inauguration_contents .contents_wrap .cont h3 span { display: inline-block; margin-bottom: 20px; padding-bottom: 5px; border-bottom: dashed 1px #000; font-size: 22px; }
#inauguration_contents .contents_wrap .cont h3 span small { font-size: 18px; }
#inauguration_contents .contents_wrap .cont .pickups {}
#inauguration_contents .contents_wrap .cont .pickups li { margin-top: 10px; transition: all 0.2s ease-out; }
#inauguration_contents .contents_wrap .cont .pickups li:hover { opacity: 0.6; }
#inauguration_contents .contents_wrap .cont .pickups li:first-child { margin-top: 0; }
#inauguration_contents .contents_wrap .cont .pickups li a { height: 100%; position: relative; display: flex; border: solid 1px #000; }
#inauguration_contents .contents_wrap .cont .pickups li a .new { position: absolute; z-index: 5; top: -8px; left: -10px; padding: 4px; border-radius: 4px; color: #FFF; background-color: #FF0000; line-height: 1; font-size: 12px; }
#inauguration_contents .contents_wrap .cont .pickups li a span { display: block; }
#inauguration_contents .contents_wrap .cont .pickups li a .i { position: relative; width: 60px; color: #FFF; background-color: #00C1FE; background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; font-size: 30px; }
#inauguration_contents .contents_wrap .cont .pickups li a .i i { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#inauguration_contents .contents_wrap .cont .pickups li a .tw { width: calc(100% - 60px); padding: 15px 12px; }
#inauguration_contents .contents_wrap .cont .pickups li a .tw .st { font-weight: bold; margin-bottom: 5px; line-height: 1.2; font-size: 13px; }
#inauguration_contents .contents_wrap .cont .pickups li a .tw h4 { color: #000; line-height: 1.2; font-weight: bold; font-size: 20px; }
#inauguration_contents .contents_wrap .cont .pickups li a .tw h4 small { font-size: 16px; }
#inauguration_contents .contents_wrap .cont .pickups li.special a { background-color: #000; }
#inauguration_contents .contents_wrap .cont .pickups li.special a .tw .st { color: #FFF; }
#inauguration_contents .contents_wrap .cont .pickups li.special a .tw h4 { color: #FFF100; }
#inauguration_contents .contents_wrap .cont .banners li { margin-top: 10px; text-align: center; }
#inauguration_contents .contents_wrap .cont .banners li:first-child { margin-top: 0; }
#inauguration_contents .links { pointer-events: all; margin-top: 40px; }
#inauguration_contents .links ul { display: flex; justify-content: center; }
#inauguration_contents .links ul li { margin: 0 20px; }
#inauguration_contents .links ul li a { display: block; width: 400px; padding: 20px; color: #FFF; text-align: center; font-size: 24px; font-weight: bold; transition: all 0.2s ease-out; }
#inauguration_contents .links ul li a:hover { opacity: 0.6; }
#inauguration_contents .links ul li a small { font-size: 18px; }
#inauguration_contents .links ul li.bt1 a { background-color: #00C1FE; }
#inauguration_contents .links ul li.bt2 a { background-color: #FF0000; }
@media screen and (max-width:1024px) { /* iPad 横 l */
	#inauguration_contents .links ul { flex-flow: wrap; }
	#inauguration_contents .links ul li { width: 100%; margin: 0;  }
	#inauguration_contents .links ul li a { width: 100%; padding: 20px 0;  }
	#inauguration_contents .links ul li.bt2 a { margin-top: 20px; }
}
@media screen and (max-width:896px) { /* iPhone 横 m */
	#inauguration_contents .contents_wrap {  margin-top: 20px; flex-flow: wrap; }
	#inauguration_contents .contents_wrap .cont { width: 100%; margin-right: 0; margin-top: 20px; padding: 20px; }
	#inauguration_contents .contents_wrap .cont:first-child { margin-top: 0; }
	#inauguration_contents .contents_wrap .cont .pickups { display: flex; flex-flow: wrap; }
	#inauguration_contents .contents_wrap .cont .pickups li { margin-top: 0; }
	#inauguration_contents .contents_wrap .cont .pickups li:nth-child(1) { width: calc(50% - 5px); margin-right: 10px; }
	#inauguration_contents .contents_wrap .cont .pickups li:nth-child(2) { width: calc(50% - 5px); }
	#inauguration_contents .contents_wrap .cont .pickups li:nth-child(3) { width: 100%;margin-top: 10px; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#inauguration_contents .contents_wrap .cont .pickups li { width: 100% !important; margin-right: 0 !important; margin-top: 10px; }
	#inauguration_contents .contents_wrap .cont .pickups li a .i { width: 80px; }
}