@charset "UTF-8";
/*--------------------------------------------------------------------------
reset
---------------------------------------------------------------------------*/
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var { 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; }

* { -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; 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; 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: 1025px) { .mv_tablet { height: 768px !important; width: 736px !important; }
  #main_inner #ttl_pinore { box-sizing: content-box; display: inline-block; margin-right: 5%; }
  #main_inner #ttl_pinore img { width: 100%; }
  #wrap_mh::after { content: ""; display: block; clear: both; }
  #wrap_mh > div:nth-of-type(1) { float: left; width: 170px; margin-bottom: calc(37 / 510 * 100%); }
  #wrap_mh > div:nth-of-type(2) { float: right; width: calc(242 / 510 * 100%); padding: 0 0 0 calc(38 / 510 * 100%); }
  #wrap_mh > div:nth-of-type(2) p { text-align: center; }
  #wrap_mh > div:nth-of-type(3) { float: left; top: 80px; left: 0; width: calc(268 / 510 * 100%); font-size: 13px; line-height: 20px; } }
/*--------------------------------------------------------------------------
page
---------------------------------------------------------------------------*/
#menu_slide { position: static; top: 0; left: 0; transition: 0.6s; background: #ffffff; }

#header_menu { width: 272px; position: fixed; top: 0; right: -272px; 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: flex; justify-content: space-between; 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_inner li { display: flex; align-items: center; }

#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; 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; transition: 0.6s; }
#menu_btn > span { width: 20px; height: 2px; display: block; position: fixed; background: #566073; 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 { display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 100%; background: url("../images/202004/mv.jpg") no-repeat; background-size: cover; background-position: top 0 center; position: relative; }
#main_inner #ttl_pinore { position: absolute; bottom: 93px; left: 22px; }
#main_inner #ttl_pinore img { max-width: 100%; }

/*#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 { top: get_percent(78, 721); bottom: get_percent(246, 721); left: get_percent(444, 768); right: get_percent(67, 768); } }
#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 { /*153/640*/ margin-left: auto; margin-right: auto; margin-top: 0; padding: 0 126px; }
#concept p { font-size: 13px; line-height: 21px; }
#concept .concept_inner { margin-top: 60px; background: #fef1d8; }
#concept .concept_inner > div { position: relative; }
#concept .concept_inner > div span { position: absolute; }
#concept .concept_inner > div p { font-size: 11px; line-height: 17px; text-align: center; }
@media screen and (min-width: 769px) { #concept .concept_inner > div p { font-size: 13px; line-height: 21px; } }
#concept .concept_inner-upper > div { padding: 13px 0 36px 0; }
@media screen and (min-width: 769px) { #concept .concept_inner-upper > div { padding: 28px 0 36px 0; } }
#concept .concept_inner-upper > div span { width: 39px; bottom: 0; left: 12px; }
@media screen and (min-width: 769px) { #concept .concept_inner-upper > div span { width: 56px; bottom: 0; left: 16px; } }
#concept .concept_inner-lower > div { padding: 15px 0 32px 0; }
@media screen and (min-width: 769px) { #concept .concept_inner-lower > div { padding: 28px 0 44px 0; } }
#concept .concept_inner-lower > div span { width: 50px; right: 14px; bottom: 16px; }
@media screen and (min-width: 769px) { #concept .concept_inner-lower > div span { width: 76px; right: 16px; bottom: 8px; } }

#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%; }
#collection .collection_coordination h2 { width: 83.27703%; }
@media screen and (min-width: 769px) { #collection .collection_coordination h2 { width: 303px; } }
#collection .collection_coordination:nth-child(n+2) { margin-top: 62px; }
@media screen and (min-width: 769px) { #collection .collection_coordination:nth-child(n+2) { margin-top: 104px; } }

#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) { display: inline-block; /*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) { display: inline-block; 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%; /*0 24/640*/ }
#interview hr { padding-top: 1.25%; border-width: 1px 0 0 0; border-style: solid; border-color: #dddddd; height: 1px; margin: 3.8% 3.8% 6%; }

#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 { 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) { /*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 0 0 0; border-style: solid; border-color: #dddddd; height: 1px; margin: 3.8% 0 6%; }

#footer { text-align: center; padding: 12px 0; /*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: flex; justify-content: space-between; 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: flex; 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: 100px 40px 0; }
  #contents:after { content: ''; display: block; clear: both; }
  #contents_inner { position: relative; }
  #main { position: fixed; top: 40px; left: 40px; width: 500px; height: 500px; padding: 0; }
  #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: 0; }
  #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: 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:hover a span { opacity: 1.0; }
  h2#movie-ttl { margin: 0 auto !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) { float: left; top: 0; left: 0; width: 170px; }
  #interview #wrap_mh > div:nth-of-type(2) { float: right; top: 0; right: 0; padding: 84px 0 0; width: calc(242 / 510 * 100%); padding: 0 0 0 calc(38 / 510 * 100%); }
  #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) { float: left; top: 80px; left: 0; width: calc(268 / 510 * 100%); 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: 0; border-width: 1px 0 0 0; border-style: solid; border-color: #dddddd; height: 1px; margin: 36px auto 35px; }
  #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; } }
@media screen and (max-width: 1024px) { #main { height: auto !important; padding: 0; }
  .mv_tablet { width: 100% !important; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; top: 106px; left: 0; }
  #wrap_mh { padding: 0 6.25%; }
  #wrap_mh::after { content: ""; display: block; clear: both; }
  #wrap_mh > div:nth-of-type(2) { padding: 9.375% 22.46094%; }
  #main_inner #ttl_pinore { width: 46vw; margin-right: 5%; padding: 33% 0 32% 0; }
  #main_inner #ttl_pinore img { width: 100%; max-width: 100%; } }
@media screen and (max-width: 639px) { #main_inner { padding: 78.125% 0 0; background: url(../images/202004/mv_sp.jpg) no-repeat; background-size: cover; }
  #main_inner #ttl_pinore { display: none; }
  #concept h3 { box-sizing: border-box; padding: 0 58px; } }
@media screen and (max-width: 768px) { .mfp-content { width: 68.75%; } }

.mfp-title { text-align: left; color: #000; padding-right: 0; }
.mfp-title ul { width: 100%; margin: 20px auto 0; padding-bottom: 20px; }
@media screen and (min-width: 769px) { .mfp-title ul { width: 210px; } }
.mfp-title ul li { display: flex; justify-content: space-between; }
.mfp-title ul li span { font-size: 12px; line-height: 21px; }
.mfp-title ul li span:nth-of-type(1) { width: 84px; }
.mfp-title ul li span:nth-of-type(3) { width: 60px; }
.mfp-title ul li span:nth-of-type(3) { font-size: 9px; text-align: right; }

#bnr { margin-top: 62px; padding: 0 3.75%; }
@media screen and (min-width: 769px) { #bnr { margin-top: 104px; padding: 0; } }
#bnr a img { margin: 0 auto; }

.txt_sup { font-size: 10px; vertical-align: top; position: relative !important; top: -0.5em; width: auto !important; left: auto !important; bottom: initial !important; }