@charset "UTF-8";
/*--------------------------------------------------------------------------
reset
---------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: bottom; background: transparent; font-family: "メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; }

body { line-height: 1; -webkit-text-size-adjust: none; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

:focus { outline: 0; }

a { text-decoration: none; }

* { -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

/*--------------------------------------------------------------------------
common
---------------------------------------------------------------------------*/
/* float解除 */
.cf:after { content: ''; display: block; clear: both; }

.sp { display: block; }

.pc { display: none; }

.ff_mincho { font-family: "游明朝","YuMincho","Yu Mincho","ＭＳ Ｐ明朝","MS PMincho",serif !important; }

#old_ie { position: fixed; top: 0; width: 100% !important; height: 100px; text-align: center; z-index: 9999; font-size: 12px; padding-top: 150px; line-height: 22px; }

#old_ie p { width: 100%; text-align: center !important; }

#old_ie p span { font-size: 18px; color: #032954; margin-bottom: 8px; display: block; width: 100%; }

/********* S P *********/
/* ページトップへ戻る */
#pagetop { position: fixed; right: 12px; bottom: 45px; z-index: 10; -webkit-transition: 0.6s; transition: 0.6s; }

#pagetop a { display: block; }

.mv_tablet { height: 360px !important; width: 100% !important; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; top: 106px; left: 0; }

.movie_width { position: relative; width: 100%; padding-top: 56.25% !important; }

.movie_width iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

h2#movie-ttl { margin: 0 auto !important; padding-top: 18.75%; width: 40% !important; padding-bottom: 7.42857% !important; }

#wrap_movie { margin: 0 auto; width: 92.96875%; }

#wrap_movie .wrap_movie_inner { position: relative; width: 100%; padding: 56.25% 0 0; }

#wrap_movie iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }

/********* P C *********/
@media screen and (min-width: 640px) and (max-width: 1024px) { .mv_tablet { height: 620px !important; width: 100% !important; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; top: 106px; left: 0; } }

@media screen and (min-width: 1025px) { .mv_tablet { height: 768px !important; width: 736px !important; } }

/*--------------------------------------------------------------------------
page
---------------------------------------------------------------------------*/
#menu_slide { position: static; top: 0; left: 0; -webkit-transition: 0.6s; transition: 0.6s; background: #ffffff; }

#header_menu { width: 272px; position: fixed; top: 0; right: -272px; -webkit-transition: 0.6s; transition: 0.6s; z-index: 500; }

#header_menu.slide_in { right: 0; background: #f2f5f8; height: 100%; }

#header_menu #header_menu_inner { padding: 10.29412% 7.35294% 0%; /*56 40 0/544*/ }

#header_menu #header_menu_inner h2 { padding-bottom: 12px; border-bottom: 1px solid #000000; }

#header_menu #header_menu_inner h2 img { width: 100%; }

#header_menu #header_menu_inner ul { margin-bottom: 13.23529%; /*72/544*/ }

#header_menu #header_menu_inner ul li a { display: block; padding: 12px 0; border-bottom: 1px solid #dddddd; }

#header_menu #header_menu_inner ul li a.movie-ttl img { width: 20%; }

#header_menu #header_menu_inner ul li a img { width: 100%; }

#header_inner { width: 100%; height: 48px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#header_inner h1 { width: 230px; margin-right: 7.44186%; padding: 0 0 0 14px; }

#header_inner .icon-insta { width: 8.37209%; display: inline-block; }

#header_inner .icon-insta img { width: auto; max-height: 48px; }

#header { position: fixed; top: 0; left: 0; margin: 0; width: 100%; height: 48px; padding: 0; z-index: 20; border-bottom: 1px solid #dddddd; background: #ffffff; -webkit-transition: 0.6s; transition: 0.6s; }

#header img { max-width: 100%; }

#menu_btn { text-indent: -100%; top: 0; right: 0; width: 48px; height: 48px; background: url(../images/btn_menu.png) no-repeat; background-size: 52px 52px; -webkit-transition: 0.6s; transition: 0.6s; }

#menu_btn > span { width: 20px; height: 2px; display: block; position: fixed; background: #566073; -webkit-transition: 0.6s; transition: 0.6s; }

#menu_btn .line1 { top: 12px; right: 13px; }

#menu_btn .line2 { top: 18px; right: 13px; }

#menu_btn .line3 { top: 25px; right: 13px; }

#menu_btn.open { background: url(../images/btn_menu_close.png) no-repeat; background-size: 52px 52px; right: 272px; }

#menu_btn.open .line1 { top: 18px; right: 285px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }

#menu_btn.open .line2 { top: -50px; right: 13px; opacity: 0; }

#menu_btn.open .line3 { top: 18px; right: 285px; transform: rotate(135deg); -webkit-transform: rotate(135deg); }

#main { position: static; width: 100%; padding: 66px 20px 0; height: 320px; box-sizing: border-box; -webkit-box-sizing: border-box; }

#main_inner { width: 100%; height: 100%; background: url(../images/2019summer/mv.jpg) no-repeat; background-size: cover; background-position: top 0 center; position: relative; }

#main_inner #ttl_pinore { position: absolute; top: 10%; left: 7%; }

#main_inner #ttl_pinore img { width: 112px; }

/*#main_inner:before { content: ""; width: 120px; height: 1px; background: #566073; position: absolute; top: 30px; left: -30px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#main_inner:after { content: ""; width: 120px; height: 1px; background: #566073; position: absolute; bottom: 30px; right: -30px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }*/
/********* P C *********/
@media screen and (min-width: 640px) and (max-width: 1024px) { #main_inner #ttl_pinore { position: absolute; top: get_percent(78, 721); bottom: get_percent(246, 721); left: get_percent(444, 768); right: get_percent(67, 768); }
		#main_inner #ttl_pinore img { width: 202px; } }

#side { width: 100%; z-index: 5000; }

#side h2 { text-align: center; }

#side h3 { text-align: center; margin: 6.875% 0 0; /*44 0 32/640*/ }

#side img { max-width: 100%; }

#concept { text-align: center; padding-top: 15.625%; /*100/640*/ }

#concept h2 { width: 31.25%; /*200/640*/ margin: 0 auto; }

#concept h3 { width: 61.5%; /*153/640*/ margin-left: auto; margin-right: auto; margin-top: 0; }

#concept p { font-size: 13px; line-height: 21px; }

#collection { padding-top: 18.75%; /*120/640*/ }

#collection h2 { width: 41.09375%; /*263/640*/ margin: 0 auto; }

#collection ul { margin-top: 6.25%; /*40/640*/ }

#collection ul li { float: left; width: 50%; }

#collection ul li a { display: block; position: relative; }

#collection ul li a span { opacity: 0.8; position: absolute; bottom: 5px; right: 5px; }

#collection ul li a img { width: 100%; }

#catalog { padding-top: 18.75%; /*120/640*/ }

#catalog h2 { width: 30.46875%; /*195/640*/ margin: 0 auto; }

#catalog #wrap_catalog { text-align: center; margin-top: 6.25%; /*40/640*/ padding: 0 3.75%; /*0 24/640*/ }

#catalog #wrap_catalog #btn_catalog { margin: 6.75676% auto 0; /*40 auto 0/592*/ text-align: center; }

#catalog #wrap_catalog #btn_catalog a { display: block; background: #717478; width: 47.97297%; /*284/592*/ padding: 5px 0; margin: 0 auto; }

#catalog #archive { text-align: center; margin-top: 6.25%; /*40/640*/ padding: 0 3.75%; /*0 24/640*/ }

#catalog #archive .tit { margin: 2.75676% auto 0; /*40 auto 0/592*/ text-align: center; float: none; }

#catalog #archive .tit p { font-size: 13px; line-height: 30px; color: #aaaaaa; }

#catalog #archive .btn_archive { width: 47.97297%; margin: 2.75676% auto 0; /*40 auto 0/592*/ text-align: center; float: none; }

#catalog #archive .btn_archive a { margin: 0 auto; }

#catalog #archive .btn_archive a img { display: block; width: 100%; }

#method { padding-top: 18.75%; /*120/640*/ }

#method h2 { width: 59.6875%; /*195/640*/ margin: 0 auto; }

#method #wrap_catalog { text-align: center; margin-top: 6.25%; /*40/640*/ padding: 0 3.75%; /*0 24/640*/ }

#interview { padding-top: 18.75%; /*120/640*/ text-align: center; }

#interview h2 { width: 36.25%; /*232/640*/ margin: 0 auto; }

#interview h3 { width: 69.6875%; /*446/640*/ margin-left: auto; margin-right: auto; }

#interview #bnr_movie { margin: 6.25% 0 8.75%; /*40 0 56/640*/ padding: 0 3.75%; /*0 24/640*/ }

#interview #wrap_mh { padding: 0 10%; margin-top: 6.25%; /*0 64/640*/ }

#interview #wrap_mh > div:nth-of-type(1) { text-align: left; width: 50.390625%; /*258/512*/ }

#interview #wrap_mh > div:nth-of-type(2) { padding: 9.375% 22.46094%; /*48 115/512*/ }

#interview #wrap_mh > div:nth-of-type(2) p { text-align: center; margin-top: 3.125%; position: static; }

#interview #wrap_mh > div:nth-of-type(3) { text-align: left; font-size: 13px; line-height: 20px; }

#interview #wrap_mh .link_honjomanami { margin-top: 6.25%; text-align: center; }

#interview #wrap_bnr { text-align: center; margin-top: 6.25%; /*40/640*/ padding: 0 3.75% 3.75% 3.75%; /*0 24/640*/ }

#interview hr { padding-top: 1.25%; border-width: 1px 0px 0px 0px; border-style: solid; border-color: #dddddd; height: 1px; margin: 3.8% 3.8% 6% 3.8%; }

#coordinate { padding-top: 18.75%; /*120/640*/ text-align: center; }

#coordinate h2 { width: 100%; /*232/640*/ margin: 0 auto; }

#coordinate h3 { width: 69.6875%; /*446/640*/ margin-left: auto; margin-right: auto; }

#coordinate #bnr_movie { margin: 6.25% 0 8.75%; /*40 0 56/640*/ padding: 0 3.75%; /*0 24/640*/ }

#coordinate #wrap_mh { padding: 0 6.25%; margin-top: 6.25%; /*0 64/640*/ }

#coordinate #wrap_mh > div:nth-of-type(1) { text-align: left; width: 50.390625%; /*258/512*/ }

#coordinate #wrap_mh > div:nth-of-type(2) { padding: 9.375% 22.46094%; /*48 115/512*/ }

#coordinate #wrap_mh > div:nth-of-type(2) p { text-align: center; margin-top: 3.125%; position: static; }

#coordinate #wrap_mh > div:nth-of-type(3) { text-align: left; font-size: 13px; line-height: 20px; }

#coordinate #wrap_mh .link_honjomanami { margin-top: 6.25%; text-align: center; }

#coordinate #wrap_bnr { text-align: center; margin-top: 6.25%; /*40/640*/ padding: 0 3.75%; /*0 24/640*/ }

#coordinate hr { padding-top: 1.25%; border-width: 1px 0px 0px 0px; border-style: solid; border-color: #dddddd; height: 1px; margin: 3.8% 0 6% 0; }

#footer { text-align: center; padding: 12px 0 12px; /*12 0 12/640*/ border-top: 1px solid #dddddd; margin: 31.25% 3.75% 0; /*200 24 0/640*/ }

#footer ul { display: none; }

#footer #copyright { margin-top: 0; }

/********* P C *********/
@media screen and (min-width: 1025px) { /*-------------------------------------------------------------------------- common ---------------------------------------------------------------------------*/
		.sp { display: none; }
		.pc { display: block; }
		/* ページトップへ戻る */
		#pagetop { position: fixed; right: 40px; bottom: 40px; z-index: 10; }
		.movie_width { padding-top: 0 !important; }
		#wrap_movie { width: 100%; }
		.wrap_movie_inner { padding: 56.25% 0 0; }
		/*-------------------------------------------------------------------------- page ---------------------------------------------------------------------------*/
		#header { position: fixed; top: 0; left: 0; margin: 0; width: 100%; height: 86px; padding: 0; z-index: 20; border-bottom: 1px solid #dddddd; background: #ffffff; }
		#header_inner { width: 914px; height: 33px; margin: 29px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
		#header_inner .icon-insta { width: 18px; height: 18px; }
		#header_inner .icon-insta img { width: 100%; }
		#header_inner h1 { width: 420px; padding: 0; margin-right: 88px; }
		#header_inner ul { width: 360px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-right: 35px; }
		#header_inner ul li:hover a { border-bottom: 1px solid #566073; padding-bottom: 4px; }
		#header_inner ul li:last-child { margin-right: 0; }
		#contents { padding: 126px 40px 0; }
		#contents:after { content: ''; display: block; clear: both; }
		#contents_inner { position: relative; }
		#main { position: fixed; top: 126px; left: 40px; width: 500px; height: 500px; padding: 0; }
		#main_inner #ttl_pinore { position: absolute; top: get_percent(78, 721); bottom: get_percent(246, 721); left: get_percent(444, 768); right: get_percent(67, 768); }
		#main_inner #ttl_pinore img { width: 193px; }
		#side { width: 510px; float: right; }
		#side h2 { text-align: center; }
		#side h3 { text-align: center; margin: 30px 0 22px; }
		#concept { text-align: center; padding-top: 65px; }
		#concept h2 { width: 128px; margin: 0 auto; }
		#concept h3 { margin-left: auto; margin-right: auto; margin-top: 0; }
		#concept p { font-size: 13px; line-height: 21px; }
		#collection { padding-top: 100px; }
		#collection h2 { width: 169px; margin: 0 auto; }
		#collection ul { margin-top: 40px; }
		#collection ul li { float: left; width: 170px; }
		#collection ul li a { display: block; position: relative; }
		#collection ul li a span { opacity: 0.8; position: absolute; bottom: 5px; right: 5px; }
		#collection ul li:hover a span { opacity: 1.0; }
		h2#movie-ttl { margin: 0 auto !important; padding-top: 104px !important; }
		#catalog { padding-top: 104px; }
		#catalog h2 { width: 126px; margin: 0 auto; }
		#catalog #wrap_catalog { margin-top: 40px; position: relative; padding: 0; }
		#catalog #wrap_catalog #btn_catalog { position: absolute; bottom: 26px; right: 17px; background: #717478; padding: 0; margin: 0; width: auto; }
		#catalog #wrap_catalog #btn_catalog:hover { background: #566073; }
		#catalog #wrap_catalog #btn_catalog a { display: block; background: none; width: auto; padding: 0; margin: 0; }
		#catalog #archive { width: 510px; margin: 10px 0 0; padding: 0; }
		#catalog #archive .tit { width: 250px; height: 30px; text-align: right; float: left; }
		#catalog #archive .tit p { font-size: 11px; line-height: 30px; color: #aaaaaa; padding-right: 15px; }
		#catalog #archive .btn_archive { width: 260px; float: right; }
		#catalog #archive .btn_archive a img { width: 120px; margin: 0 0 0 10px; float: left; }
		#method { padding-top: 104px; }
		#method h2 { width: 246px; margin: 0 auto; }
		#method #wrap_catalog { margin-top: 40px; position: relative; padding: 0; }
		#coordinate #wrap_bnr { margin-top: 40px; position: relative; padding: 0; }
		#interview { padding-top: 104px; }
		#interview h2 { width: 150px; margin: 0 auto; }
		#interview h3 { width: 276px; margin-left: auto; margin-right: auto; }
		#interview #wrap_mh { position: relative; height: 360px; margin-top: 40px; }
		#interview #wrap_mh > div { position: absolute; }
		#interview #wrap_mh > div:nth-of-type(1) { top: 0; left: 0; width: 170px; }
		#interview #wrap_mh > div:nth-of-type(2) { top: 0; right: 0; padding: 84px 0 0 0; width: 204px; }
		#interview #wrap_mh > div:nth-of-type(2) p { text-align: center; position: absolute; bottom: 0; right: 0; }
		#interview #wrap_mh > div:nth-of-type(3) { top: 80px; left: 0; width: 270px; font-size: 13px; line-height: 20px; }
		#interview #wrap_mh .link_honjomanami { margin-top: 35px; text-align: left; }
		#interview #wrap_mh .link_honjomanami a:hover { text-decoration: underline; }
		#interview #wrap_bnr { margin-top: 40px; position: relative; padding: 0; }
		#interview hr { padding-top: 0px; border-width: 1px 0px 0px 0px; border-style: solid; border-color: #dddddd; height: 1px; margin: 36px auto 35px auto; }
		#footer { text-align: center; padding-top: 32px; border-top: 1px solid #dddddd; margin-top: 120px; padding-bottom: 40px; }
		#footer ul { font-size: 0; display: block; }
		#footer ul li { display: inline-block; margin-right: 39px; }
		#footer ul li:last-child { margin-right: 0; }
		#footer #copyright { margin-top: 33px; } }