/* 共通要素 */

*,
*:before,
*:after {
  box-sizing: inherit;
}


html {
  font-family: "游ゴシック", YuGothic , "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size:62.5%;
  color:#0000a3;
  box-sizing: border-box;
  overflow-x: hidden;
}
body { margin:0; padding:0; background-color: #fff; overflow-x: hidden; }
button:focus { outline:0; }
ul { list-style: none; padding:0; margin:0; }

div, section { margin:0; padding:0; }
p { text-align: justify; text-justify: inter-ideograph; }
a, a:hover, a:visited, a:active { color:#0000a3; text-decoration:none; cursor:pointer; }

h1 { font-size:4.6rem; font-weight:800; }
h2 { font-size:3.2rem; font-weight:800; }
h3 { font-size:2.4rem; font-weight:800; }
h4 { font-size:1.8rem; font-weight:800; }
h5 { font-size:1.4rem; font-weight:800; }
h6 { font-size:1.2rem; font-weight:800; }
p { font-size:1.4rem; font-weight:500; line-height:180%; }
.caption, .copyright { font-size:1rem !important; font-weight:500; }



.sp-on { display:block !important; }
.tab-on { display:none; }
.pc-on { display:none; }

.wf-m, .wf-sb, .wf-b { font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1px; }
.wf-m { font-weight:500 !important; }
.wf-sb { font-weight:600 !important; }
.wf-b { font-weight:700 !important; }

.h_nav_bar { position:fixed; top:0; left:0; width:100%; height:54px; background-color: #fff; box-shadow:0 2px 2px rgba(130, 130, 130, 0.2); overflow-x: hidden; z-index:99; }
.h_nav_bar_inner { position:relative; width:100%; height:100%; }
.h_nav_logo, .menu_icon { position:absolute; top:50%; width:32px; height:32px; transform:translateY(-50%); }
.h_nav_logo { left:10px; }
.h_nav_logo img { width:100%; transition:all .3s ease; }
.h_nav_logo:hover img { opacity:0.6; }
.menu_icon { right:20px; cursor:pointer; }
.menu_icon span { content:''; position:absolute; top:50%; width:100%; height:2px; background-color: #0000a3; display:block; transition:margin .3s ease, transform .3s ease; }
.menu_icon span:nth-of-type(1) { margin-top:-4px; }
.menu_icon span:nth-of-type(2) { margin-top:4px; }
.menu_icon:hover span:nth-of-type(1) { margin-top:-6px; }
.menu_icon:hover span:nth-of-type(2) { margin-top:6px; }
.menu_icon_active span { margin-top:0 !important; }
.menu_icon_active span:nth-of-type(1) { transform:rotate(405deg); }
.menu_icon_active span:nth-of-type(2) {  transform:rotate(-405deg); }
.scr_dwn { position:absolute; bottom:65px; left:50%; transform:translateX(-50%); }
.scr_dwn p { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin:0; padding-left:3px; font-size:1rem; }
.scr_dwn::before, .scr_dwn::after { content:''; position:absolute; bottom:-65px; left:50%; width:1px; height:55px; background-color: #f1f1f1; transform:translateX(-50%); }
.scr_dwn::after { background-color: #0000a3; animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite; }

.menu_bk { position:fixed; top:0; left:0; width:100vw; height:100vh; background-color: #fff5e6; display:block; visibility:hidden; z-index:98; }
.menu_bk_active { visibility:visible; }
.menu_bk_img img { position:absolute; }
.menu_bk_img img:nth-of-type(1) { top:54px; right:-5%; width:80%; height:auto; }
.menu_bk_img img:nth-of-type(2) { top:40%; left:-12%; width:40%; height:auto;  }
.menu_bk_img img:nth-of-type(3) { top:45%; right:0; width:75%; height:auto;  }
.menu_bk_img img:nth-of-type(4) { bottom:-4%; left:-2%; width:35%; height:auto;  }

.h_nav { position:absolute; top:0; left:0; width:100vw; height:100vh; display:none; opacity:0;}
.h_nav_active { display:block; animation: menu_fade 1s ease-out forwards; }
.h_nav_inner { position:absolute; top:calc(50% + 32px); left:50%; width:70%; height:auto; transform: translate(-50%, -50%); }
.h_nav_cont_inner, .h_nav_inner_logo, .h_nav_cont_sub { position:relative; width:100%; height:auto; }
.h_nav_inner_logo { margin-bottom:20px; }
.h_nav_inner_logo img { width:100%; }
.h_nav_cont, .h_nav_policy { width:100%; display:flex; flex-wrap:wrap; }
.h_nav_cont li { width:50%; font-size:2.2rem; margin-bottom:15px; transition:all .3s ease; }
.h_nav_cont li:hover { padding-left:4px; opacity:0.6; }
.h_nav_policy li { font-size:1.2rem; transition:all .3s ease; }
.h_nav_policy li:hover { opacity:0.6; }
.h_nav_policy li:nth-of-type(2) { margin:0 6px; }
.h_nav_sns { width:100%; margin-top:40px; display:flex; flex-wrap:wrap; align-items: center; justify-content: center; }
.h_nav_sns img { height:32px; transition:all .3s ease; }
.h_nav_sns img:hover { opacity:0.6; }
.h_nav_sns img:nth-of-type(1) { margin-right:15px; }
.h_nav_sns img:nth-of-type(2) { margin-left:15px; }

footer { position:relative; width:100%; height:auto; overflow-x: hidden; }
 .ft_credit { color:#fff; }

.ft_contact { position:absolute; width:90%; height:260px; top:60px; right:0;  background-color: #fff; padding:36px 36px 36px 25px; border-radius:5vw 0 0 5vw; z-index:2; }
.ft_contact_ttl { position:relative; width:100%; height:auto; }
.ft_contact_ttl img { position:relative; width:auto; height:32px; left:50%; transform:translateX(-50%); }
.ft_contact p { text-align:center; margin:15px 0; }
.ft_contact button { position:relative; width:100%; max-width:240px; height:64px; left:50%; transform:translateX(-50%); color:#0000a3; border-radius: 32px; border:1px solid #0000a3; background-color: #fff; cursor:pointer; transition:all .3s ease; }
.ft_contact button span { font-size:1.4rem; }
.ft_contact button img { position:absolute; width:32px; top:50%; right:12px; transform:translateY(-50%); transition:all .3s ease; }
.ft_contact button:hover { background-color: #ffff6f;}
.ft_contact button:hover img { right:8px; }
.ft_logo { position:relative; width:70%; left:50%; transform:translateX(-50%); }
.ft_credit { position:relative; width:100%; left:0; padding:370px 0 60px 0; background-color: #0000a3; }
.ft_credit dl { position:relative; width:80%; left:50%; transform:translateX(-50%); font-size:1rem; display:flex; flex-wrap:wrap; margin-top:8vw; }
.ft_credit dt { width:20%; margin-bottom:5px; }
.ft_credit dd { width:80%; margin:0; margin-bottom:5px; text-align: justify; text-justify: inter-ideograph; }
.ft_copyright { position:relative; width:100%; padding:5vw; display:flex; flex-wrap:nowrap; align-items: center; }
.ft_sns, .ft_copyright p { width:50%; }
.ft_sns img { width:28px; transition:all .3s ease; }
.ft_sns img:hover { opacity:0.6; }
.ft_sns img:nth-of-type(1) { margin-right:15px; }
.ft_copyright p { text-align:right; margin:0; }

#dummy { width:100%; height:100vh; background-color: #cccccc; }

.movie_btn { position:absolute; width:100px; height:100px; }
.movie_btn_bk { position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 100%; border:1px solid #0000a3; background-color: #fff; transition:all .3s ease; }
.movie_btn_arw { position:absolute; width:18%; top:50%; left:55%; transform:translate(-50%, -50%); }
.movie_btn_arw img { width:100%; }
.movie_btn_txt { position:absolute; width:60%; top:50%; left:50%; transform:translate(-50%, -50%); }
.movie_btn_txt img { width:100%; animation: movie_btn_txt 3s linear infinite; }
.movie_btn:hover .movie_btn_bk  { transform:scale(1.1); transform-origin: center,center;}
.movie_btn a { position:absolute; top:0; left:0; width:100%; height:100%; }

.modaal-video-wrap { margin:auto 0; }
.modaal-close { background-color: #ff8ead !important; }
.modaal-close:after, .modaal-close:before { left:24px; width:2px; }
.modaal-close:hover:after, .modaal-close:hover:before { background-color:#fff; }
.modaal-close:hover { background-color: #ff45a4 !important; }


@media screen and (min-width:400px) {
  .ft_contact_ttl img { height:42px; }
}


@media screen and (min-width:640px) {
  .sp-on { display:none !important; }
  .tab-on { display:block !important; }
  .pc-on { display:none; }

  .h_nav_bar { height:64px;}
  .h_nav_logo, .menu_icon { width:40px; height:40px; }
  .h_nav_inner { width:50%; }
  .h_nav_inner_logo { margin-bottom:40px; }
  .h_nav_cont li { font-size:3.6rem; margin-bottom:18px; }
  .h_nav_cont_sub { margin-top:10px; }
  .h_nav_sns img { height:42px; }
  .h_nav_sns img:nth-of-type(1) { margin:0 12px; }
  .h_nav_policy li { font-size:1.6rem; }
  footer { display:flex; flex-wrap:wrap; flex-direction: row-reverse; align-items: center; }
  .ft_contact { position:relative; width:45%; height:auto; top:0; padding:0 4vw; border-radius: 0; background-color: transparent; }
  .ft_contact p { margin:20px 0; }
  .ft_credit { width:55%; padding-top:65px; top:0; left:0; border-radius:0 8vw 0 0;  }
  .ft_logo { width:60%; left:41%; }
  .ft_credit dl { width:75%; left:48%; margin-top:3vw; }
  .ft_credit dt { width:20%; }
  .ft_credit dd { width:80%; }
  .ft_sns img { width:24px; }
  .ft_copyright { position:absolute; width:40%; bottom:0; right:0; padding:2vw 4vw; }
}

@media screen and (min-width:840px) {
  .sp-on { display:none !important; }
  .tab-on { display:none !important; }
  .pc-on { display:block  !important; }

  .h_nav_bar { top:0; left:0; min-width:60px; width:5vw; height:100vh; box-shadow:2px 0 2px rgba(130, 130, 130, 0.2); }
  .h_nav_logo { width:100%; top:1vw; left:0; padding:0 1vw; transform:none; }
  .menu_icon { right:0; width:100%; min-height:46px; height:3vw; padding:0 1vw; }
  .menu_icon span { top:0; left:50%; width:2px; height:100%; }
  .menu_icon span:nth-of-type(1) { margin-left:-4px; margin-top:0;  }
  .menu_icon span:nth-of-type(2) { margin-left:4px; margin-top:0; }
  .menu_icon:hover span:nth-of-type(1) { margin-left:-6px; margin-top:0; }
  .menu_icon:hover span:nth-of-type(2) { margin-left:6px; margin-top:0; }
  .menu_icon_active span { margin-left:0 !important; }
  .menu_bk { width:95vw; left:5vw; }
  .menu_bk_img img:nth-of-type(1) { top:0; right:15%; width:35%; height:auto; }
  .menu_bk_img img:nth-of-type(2) { top:-5%; left:10%; width:25%; height:auto;  }
  .menu_bk_img img:nth-of-type(3) { top:20%; right:0; width:55%; height:auto;  }
  .menu_bk_img img:nth-of-type(4) { bottom:-12%; left:0; width:30%; height:auto; }
  .h_nav_inner, .h_nav_cont_sub { display:flex; flex-wrap:wrap; align-items: center; }
  .h_nav_inner { width:70%; }
  .h_nav_inner_logo,.h_nav_cont_inner { width:50%; }
  .h_nav_inner_logo { padding-right:5%; }
  .h_nav_cont_inner { padding-left:5%; }
  .h_nav_cont_sub { margin-top:10px; }
  .h_nav_cont li { font-size:2.8rem; margin-bottom:15px; }
  .h_nav_sns { margin-top:0; }
  .h_nav_sns img { height:22px; }
  .h_nav_sns img:nth-of-type(1) { margin:0 8px; }
  .h_nav_policy li { font-size:1.2rem; }
  .h_nav_policy { width:70%; line-height:22px; }
  .h_nav_sns { width:30%; justify-content: flex-end; }
  footer { width:95vw; left:5vw; }
  .ft_contact { width:40%; }
  .ft_credit { width:60%; }
  .ft_logo { width:45%; left:35%; }
  .ft_credit dl { width:75%; left:50%; }
  .ft_credit dt { width:15%; }
  .ft_credit dd { width:85%; }
  .modaal-video-wrap { margin:auto 5%; }

}

@media screen and (min-width:1280px) {
  .h_nav_inner { width:60%; }
  .h_nav_inner_logo { width:45%; }
  .h_nav_cont_inner { width:55%; }
  .h_nav_cont li { font-size:3.6rem; margin-bottom:20px; }
  .h_nav_policy li { font-size:1.6rem; }
  .h_nav_sns img { height:28px; }
  .ft_contact { width:35%; }
  .ft_contact_ttl img { height:46px;  }
  .ft_credit { width:65%; display:flex; padding:8vw 0; }
  .ft_logo { width:30%; left:10%; transform:translateX(0); }
  .ft_credit dl { width:45%; left:15%; font-size:1.2rem; transform:translateX(0); margin-top:0; }
  .ft_copyright { width:35%; padding:2vw 7vw; }
}

@media screen and (min-width:1500px) {
  p { font-size:1vw; }
  .h_nav_bar { box-shadow:0.2vw 0 0.2vw rgba(130, 130, 130, 0.2); }
  .menu_icon span { width:2px; }
  .menu_icon span:nth-of-type(1) { margin-left:-0.3vw; }
  .menu_icon span:nth-of-type(2) { margin-left:0.3vw; }
  .menu_icon:hover span:nth-of-type(1) { margin-left:-0.4vw; }
  .menu_icon:hover span:nth-of-type(2) { margin-left:0.4vw; }
  .scr_dwn { bottom:4vw; }
  .scr_dwn p { font-size:0.8vw; padding-left:0.2vw; }
  .scr_dwn::before, .scr_dwn::after {  bottom:-4vw; width:1px; height:3.5vw; }
  .h_nav_cont li { font-size:2.4vw; margin-bottom:1.8vw; }
  .h_nav_cont li:hover { padding-left:0.4vw; }
  .h_nav_policy { line-height:2vw; }
  .h_nav_policy li { font-size:1.2vw; }
  .h_nav_sns img { height:2vw; margin:0 0.8vw; }
  .h_nav_sns img:nth-of-type(1) { margin-right:1vw; }
  .h_nav_sns img:nth-of-type(2) { margin-left:1vw; }
  .ft_credit dl { font-size:0.8vw; }
  .ft_credit dt { width:20%; }
  .ft_credit dd { width:80%; }
  .ft_contact_ttl img { height:3.6vw; }
  .ft_contact p { font-size:1vw; margin:1.4vw 0; }
  .ft_contact button { max-width:20vw; height:5vw; border-radius:5vw; border:0.1vw solid #0000a3; }
  .ft_contact button span { font-size:1.2vw; }
  .ft_contact button img { width:2.8vw; right:1vw; }
  .ft_contact button:hover img { right:0.8vw; }
  .ft_sns img { width:2vw; }
  .ft_sns img:nth-of-type(1) { margin-right:1vw; }
  .caption, .copyright { font-size:0.8vw !important; }
  .movie_btn_bk { border:0.1vw solid #0000a3; }
  .modaal-inner-wrapper { padding:4vw 2vw; }
  .modaal-close { width:4vw; height:4vw; right:2vw; top:2vw; }
  .modaal-close:after, .modaal-close:before { height:2vw; width:0.2vw; border-radius:0.2vw; top:1vw; left:1.9vw; }
  .modaal-video-container { max-width:80vw; height:45vw; }
}

@media screen and (min-width:2560px) {
  .menu_icon span { width:4px; }
  .scr_dwn::before, .scr_dwn::after { width:2px; }

}