@charset "utf-8";
html {
min-width: 1200px;
height: 100%;
font-feature-settings : "palt";
}
body {
background-color: #FFFFFF;
color: #004888;
min-width: 1200px;
-webkit-text-size-adjust: 100%;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
letter-spacing: 0.07em;
}
@keyframes fadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes fadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
a:link {
color: #004888;
text-decoration: none;
transition: .3s;
}
a:visited {
color: #004888;
text-decoration: none;
}
a:hover {
color: #004888;
text-decoration: underline;
}
a:active {
color: #004888;
text-decoration: none;
}
a.btn img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-ms-filter: 'alpha(opacity=100)';
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover.btn img {
-ms-filter: 'alpha(opacity=60)';
filter: alpha(opacity=30);
-moz-opacity: 0.40;
opacity: 0.40;
}
a {
outline: none;
}
::selection {
background: #000000;
color: #FFFFFF;
}
::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::-webkit-selection {
background:#000000;
color:#FFFFFF;
}
strong {
font-weight: bold;
}
.pc {
display: inherit!important;
}
.sp {
display: none!important;
}
#wrapper {
position: relative;
overflow: hidden
}
/*--HEADER-------------*/
header {
height: 60px;
width: 100%;
position: fixed;
background-color: rgba(255,255,255,0.8);
z-index: 10
}
header a {
text-decoration: none;
}
header h1 {
float: left;
margin-top: 10px;
padding-left: 20px;
}
/*--NAVIGATION-------------*/
#gnav {
display: inline-block;
float: right;
font-size: 14px;
margin-top: 30px;
margin-right: 20px;
}
#gnav ul {
text-align: right;
}
#gnav ul li {
display: inline;
margin-left: 15px;
font-weight: 600;
}
@media screen and (min-width: 480px) {
#gnav ul li a {
color: #004888;
position: relative;
display: inline-block;
transition: .3s;
}
#gnav ul li a:hover {
text-decoration: none;
}
#gnav ul li a::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 3px;
background-color: #004888;
transition: .3s;
}
#gnav ul li a:hover::after {
width: 100%;
}
}
#gnav ul li:nth-child(9), #gnav ul li:nth-child(10) {
font-weight: 200!important;
}

/*--CONTENTS-------------*/
#contents {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 60px;
padding-bottom: 60px;
}
.cont {
min-width: 1120px;
width: 90%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
}
.cont.w-fix {
width: 1120px;
}
#pageTop {
position: fixed;
right: 20px;
bottom: 50px;
}
/*--FOOTER-------------*/
#footer {
    background-color: #004888;
    clear: both;
    color: #FFF;
    padding-top: 30px;
    padding-bottom: 30px;
    background-image: url(../../images/ft_city.svg);
    background-repeat: no-repeat;
  background-position:right -50px bottom -21px;
  background-size: auto 200px;
}
#ft_nav {
display: block;
float: right;
font-size: 12px;
font-weight: 400;
margin-right: 20px;
}
#ft_nav ul {
text-align: right;
}
#ft_nav ul li {
display: inline;
margin-left: 15px;
}
#ft_nav ul li a {
color: #FFF;
position: relative;
display: inline-block;
transition: .3s;
}
#ft_nav ul li a:hover {
text-decoration: none;
}
#ft_nav ul li a::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 3px;
background-color: #FFF;
transition: .3s;
}
#ft_nav ul li a:hover::after {
width: 100%;
}
#footer .logo {
float: left;
margin-right: 30px;
}
#footer .info {
padding-top: 30px;
}
.copyright {
width: 100%;
clear: both;
text-align: right;
}
#footer a{
color: #FFF
}
/*--MAINVIS-------------*/
#mainVis {
min-width: 1120px;
width: 90%;
height: 85vh;
margin-left: auto;
margin-right: auto;
margin-bottom: 8vh;
background-color: #004888;
position: relative;
overflow: hidden;/*border-bottom: 15px solid #004888;*/
}
#mainVis #copy {
font-size: 42px;
color: #FFF;
font-weight: 600;
line-height: 1.6;
top: 40vh;
left: 30px;
position: relative;
z-index: 3;
}
.mask {
width: 0%;
height: 85vh;
background-color: #004888;
top: 0;
left: 0;
position: absolute;
animation: mvfade 2s ease 0s 1 normal;
z-index: 2;
}
.dot {
width: 100%;
height: 85vh;
top: 0;
left: 0;
position: absolute;
z-index: 1;
background-image: url(../../images/dot.png);
}
@keyframes mvfade {
 0% {
width: 100%;
}
 50% {
width: 100%;
}
 100% {
width: 0%;
}
}
#video_bg {
position: absolute;
right: 0;
bottom: 0;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: 100%;
height: auto;
z-index: 0;
}

/*--INDEX_READ-------------*/
#index_read {
width: 1120px;
height: 350px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#index_read #logomark {
position: absolute;
left: -3px;
top: -121px;
z-index: 3;
}
#index_read #txt {
position: absolute;
width: 750px;
left: 303px;
font-weight: 600;
line-height: 2.5;
font-size: 16px;
}
/*--INDEX_NAV_PANEL-------------*/
#index_nav_panel {
width: 1120px;
margin-left: auto;
margin-right: auto;
margin-bottom: 120px;
}
#index_nav_panel li {
width: 372px;
margin-right: 2px;
float: left;
position: relative;
}
#index_nav_panel li:last-child {
margin-right: 0;
}
#index_nav_panel li .mask_img {
width: 372px;
height: 320px;
background-color: rgba(0,0,0,0.00);
transition: .3s;
position: absolute;
z-index: 1;
}
#index_nav_panel li .mask_img:hover {
width: 372px;
height: 320px;
background-color: rgba(0,0,0,0.7);
}
#index_nav_panel li .img {
width: 372px;
height: 320px;
position: relative;
margin-bottom: 15px;
}
#index_nav_panel li:first-child .img {
    background-image: url(../../images/index_nav_panel01.jpg);
    background-size: cover;
    background-position: center center;
}
#index_nav_panel li:nth-child(2) .img {
background-image: url(../../images/index_nav_panel02.jpg);
background-size: cover;
background-position: center bottom;
}
#index_nav_panel li:last-child .img {
background-image: url(../../images/index_nav_panel03.jpg);
background-size: cover;
background-position: center center;
}
#index_nav_panel li .img h2 {
font-weight: 500;
font-size: 38px;
color: #FFF;
position: absolute;
right: 20px;
bottom: 30px;
z-index: 2
}
#index_nav_panel li .read {
border-left: 6px solid #004888;
padding-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
font-weight: 600
}
/*--INDEX_CMS-------------*/
.index_cms {
width: 1120px;
margin-left: auto;
margin-right: auto;
background-color: #f2f6f9;
background-image: url(../../images/news_bg.png);
background-repeat: no-repeat;
background-position: left center;
position: relative;
margin-bottom: 50px;
}
.index_cms h3 {
padding: 30px;
display: block;
width: 140px;
float: left;
top: 0;
bottom: 0;
font-size: 18px;
font-weight: 500;
color: #FFF
}
.index_cms dl {
float: left;
margin-left: 0px;
margin-right: 10px;
padding: 0px;
margin-top: 20px;
margin-bottom: 10px;
color: #004888;
}
.index_cms dt {
float: left;
width: 80px;
clear: both;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0px;
padding-top: 0px;
}
.index_cms dd {
margin-left: 80px;
margin-bottom: 10px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 18px;
}
.index_cms .viewall {
position: absolute;
right: 10px;
bottom: 20px;
font-size: 12px;
}
.index_cms .viewall a {
border: 1px solid #004888;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 50px;
}
.index_cms .viewall a:hover {
background-color: #004888;
color: #FFF;
text-decoration: none;
}
/*--INDEX INSTAGRAM-------------*/
.index_isg {
width: 1120px;
margin-left: auto;
margin-right: auto;
}
.index_isg .thum_bx {
width: 213px;
height: 213px;
background-repeat: no-repeat;
background-size: cover;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 1vw;
transition: .3s;
}
.index_isg .thum_bx:hover {
opacity: 0.7;
}
.index_isg h3 {
display: flex;
align-items: center;
font-size: 16px;
margin-bottom: 1em;
}
.index_isg h3:before, .index_isg h3:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.index_isg h3:before {
margin-right: 1rem;
}
.index_isg h3:after {
margin-left: 1rem;
}
.index_isg .feed{
position: relative
}
.index_isg .feed a{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
}

/*--SUB PAGE-------------*/
.subheader {
width: 100%;
height: 360px;
background-color: #000;
overflow: hidden;
text-align: center;
color: #FFF;
position: relative;
font-size: 40px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin-bottom: 50px;
}
.subheader h2 {
position: absolute;
z-index: 3;
top: 160px;
width: 100%;
}
.subheader .ja {
font-size: 22px;
font-weight: 700;
line-height: 3;
}
/*--ABOUT-------------*/

#about .subheader {
background-image: url(../../about/images/mv.jpg);
}
#about .main_read {
text-align: center;
font-size: 34px;
margin-bottom: 1.5em;
font-weight: 600
}
#about .sub_read {
text-align: center;
font-size: 16px;
margin-bottom: 80px;
line-height: 2.2em;
font-weight: 600
}
#about .logo {
float: left;
margin-left: 90px;
margin-top: 60px;
}
#about table {
width: 670px;
float: right;
margin-right: 70px;
margin-bottom: 80px;
}
#about table th, #about table td {
padding: 25px;
vertical-align: top;
border-bottom: 1px solid #b2c6d7
}
#about table th {
font-weight: 600;
white-space: nowrap;
}
#about table .lbl {
font-size: 18px;
border-bottom: 2px solid #004685;
padding-bottom: 15px!important;
}
#about table .pad {
padding-top: 100px;
}
#about .img_ph {
width: 100%;
clear: both;
}
#about .img_ph li {
float: left;
margin-right: 48px;
}
#about .img_ph li:last-child {
margin-right: 0px;
}
/*--MESSAGE-------------*/
#message .subheader {
background-image: url(../../message/images/mv.jpg);
}
#message .main_read {
line-height: 2.5em;
font-size: 34px;
margin-bottom: 2.5em;
font-weight: 600
}
#message .sub_read {
width: 560px;
font-size: 16px;
margin-bottom: 80px;
line-height: 2.2em;
font-weight: 600;
line-height: 2.2
}
#message .sub_read p {
padding-bottom: 1.5em;
}
#message .sub_read p span {
font-size: 14px;
padding-right: 1.5em
}
#message .ph {
float: right;
margin-right: 70px;
}
#message .profile {
background-color: #f2f6f9;
padding: 20px;
width: 590px;
font-size: 12px;
line-height: 2.2;
float: left
}
#message .profile .ph_thum {
float: left;
margin-right: 40px;
}
#message .profile .ttl {
font-size: 14px;
font-weight: 600;
margin-bottom: 1em;
}
#message .link_btn {
font-size: 18px;
float: right;
margin-right: 70px;
}
#message .link_btn img {
vertical-align: middle;
margin-top: -4px;
margin-right: 10px;
}
#message .link_btn a {
width: 344px;
background-color: #004888;
text-align: center;
padding: 12px;
display: block;
color: #FFF;
}
#message .link_btn a:hover {
background-color: #FFF;
text-decoration: none;
background-color: #84ACD2;
}
/*--SHOP-------------*/
#shop .subheader {
background-image: url(../../shop/images/mv.jpg);
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
#shop table {
width: 980px;
margin-right: auto;
margin-left: auto;
}
#shop table th, #shop table td {
padding: 25px;
vertical-align: top;
border-bottom: 1px solid #b2c6d7
}
#shop table th {
width: 280px;
}
#shop table .lbl {
font-size: 18px;
border-bottom: 2px solid #004488;
padding-bottom: 15px!important;
}
#shop table .pad {
padding-top: 100px;
}
#shop table .name {
font-size: 16px;
margin-bottom: 0.5em
}
#shop table ul {
padding-top: 15px;
}
#shop table ul li {
float: left;
margin-right: 20px;
}
#shop .btn_hp{
padding-top: 2em;
clear: both;
width: 320px;
}

/*--VISION-------------*/
#vision .subheader {
background-image: url(../../vision/images/mv.jpg);
}
#vision .sub_ttl {
text-align: center;
font-size: 18px;
margin-bottom: 80px;
line-height: 2.2em;
font-weight: 600
}
#vision .vision_bx .ph {
float: right;
margin-bottom: 80px;
}
#vision .vision_bx .txt {
width: 560px;
float: left;
margin-bottom: 80px;
text-align: justify
}
#vision .vision_bx .txt .heading {
font-size: 26px;
margin-bottom: 1em;
font-weight: 600;
line-height: 1.4
}
#vision .vision_bx .txt p {
margin-bottom: 1.5em;
line-height: 2.2
}
#vision .vision_bx.second .ph {
float: left;
}
#vision .vision_bx.second .txt {
float: right
}
.btn_sdgs{}
.btn_sdgs a{
    display: inline-block;
    background-color: #004785;
    color: #FFF;
    line-height: 1;
    padding: 5px 20px;
    border-radius: 100px;
    border: 1px solid #004785;
}
.btn_sdgs a:hover{
    background-color: #FFF;
    color: #004785;
}


/*--RECRUI-------------*/
#recruit .subheader {
background-image: url(../../recruit/images/mv.jpg);
}
#recruit .subheader.second {
background-image: url(../../recruit/images/mv2.jpg);
}
#recruit .subheader.detail {
background-image: url(../../recruit/images/mv_detail.jpg);
}
#recruit .rec_nav {
width: 100%;
}
#recruit .rec_nav li {
width: 540px;
background-color: #004488;
float: left;
margin-bottom: 30px;
opacity: 0.5;
transition: .3s;
}
#recruit .rec_nav li.active, #recruit .rec_nav li:hover {
opacity: 1
}
#recruit .rec_nav li a {
color: #FFF;
display: block;
padding-top: 10px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 10px;
}
#recruit .rec_nav li a:hover {
text-decoration: none
}
#recruit .rec_nav li:last-child {
float: right;
display: block
}
#recruit .rec_nav li span.affi {
font-size: 12px;
}
#recruit .rec_nav li span.name {
font-size: 18px;
margin-left: 1em;
}
#recruit .rec_nav li img {
vertical-align: middle;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
float: left;
}
#recruit .yt {
width: 100%;
height: auto;
clear: both;
margin-bottom: 50px;
background-color: #000;
padding-top: 4px;
text-align: center;
}
#recruit .yt iframe {
width: 980px;
height: 618px;
margin-left: auto;
margin-right: auto;
}
#recruit .intro {
width: 100%;
font-weight: 600;
margin-bottom: 80px;
}
#recruit .intro th, #recruit .intro td {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 40px;
padding-right: 40px;
}
#recruit .intro th {
background-color: #004488;
color: #FFF;
width: 320px;
}
#recruit .intro td {
background-color: #f2f6f9;
color: #004488;
text-align: justify
}
#recruit .intro .name {
font-size: 28px;
margin-top: 0.7em
}
#recruit .recruit_bx {
padding-bottom: 50px;
}
#recruit .recruit_bx .ph {
float: right
}
#recruit .recruit_bx .txt {
width: 560px;
float: left;
margin-bottom: 80px;
text-align: justify;
font-weight: 600;
}
#recruit .recruit_bx .txt .heading {
font-size: 26px;
font-weight: 600;
line-height: 1.4;
background: linear-gradient(transparent 70%, #ffff66 0%);
display: inline;
padding-top: 0;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 0px;
}
#recruit .recruit_bx .txt p.first {
padding-top: 40px;
}
#recruit .recruit_bx .txt p {
margin-bottom: 1.5em;
line-height: 2.2
}
#recruit .recruit_bx.second .ph {
float: left;
}
#recruit .recruit_bx.second .txt {
float: right
}
#recruit .rec_nav {
width: 100%;
clear: both;
text-align: center;
}
#recruit .rec_nav .heading {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}
#recruit .link_btn {
width: 630px;
font-size: 18px;
margin-right: auto;
margin-left: auto;
}
#recruit .link_btn img {
vertical-align: middle;
margin-top: -4px;
margin-right: 10px;
}
#recruit .link_btn a {
width: 100%;
background-color: #004888;
text-align: center;
padding: 12px;
display: block;
color: #FFF;
}
#recruit .link_btn a:hover {
background-color: #FFF;
text-decoration: none;
background-color: #84ACD2;
}
#recruit .sub_ttl {
text-align: center;
font-size: 18px;
margin-bottom: 80px;
line-height: 2.2em;
font-weight: 600
}
#recruit .detail_ttl {
font-size: 18px;
font-weight: 600;
color: #FFF;
background-color: #004888;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
}
#recruit .detail_bx {
background-color: #f2f6f9;
padding: 30px;
}
#recruit .detail_bx table {
width: 100%;
}
#recruit .detail_bx table th, #recruit .detail_bx table td {
padding: 25px;
vertical-align: top;
border-bottom: 1px solid #b2c6d7
}
#recruit .detail_bx table th {
font-weight: 600;
white-space: nowrap;
}
#recruit .detail_bx .link_btn {
width: 280px;
font-size: 16px;
margin-right: auto;
margin-left: 0;
margin-top: 20px;
}
#recruit .detail_bx ul li {
border: 1px solid #004888;
border-radius: 50px;
float: left;
padding-left: 1em;
padding-right: 1em;
margin-right: 1em;
background-color: #FFFFFF;
margin-bottom: 0.5em
}
/*--CONTACT-------------*/
#contact .subheader {
background-image: url(../../contact/images/mv.jpg);
}
#contact .detail_ttl {
font-size: 18px;
font-weight: 600;
color: #FFF;
background-color: #004888;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
}
#contact .detail_bx {
background-color: #f2f6f9;
padding: 30px;
}
#contact .detail_bx table {
width: 100%;
}
#contact .detail_bx table th, #contact .detail_bx table td {
padding: 25px;
vertical-align: top;
border-bottom: 1px solid #b2c6d7
}
#contact .detail_bx table th {
font-weight: 600
}
#contact .detail_bx table th span {
color: #FB070B
}
#contact .detail_bx table .midle_head {
background-color: #C7DCEC;
}
#contact label {
width: 33%;
display: block;
float: left;
padding-bottom: 10px;
}
#contact .form_field {
padding: 15px;
border: 1px solid #7E99B3;
width: 90%!important;
}
#contact .privacy {
font-weight: normal!important;
font-size: 12px;
color: #444444;
}
#contact .form_btn {
padding-top: 20px;
text-align: center
}
#contact button.submit_btn {
width: 630px;
font-size: 18px;
margin-right: auto;
margin-left: auto;
padding: 12px;
background-color: #004888;
font-size: 18px;
cursor: pointer;
outline: none;
text-align: center;
color: #FFF;
border: none;
}
#contact button.submit_btn:hover {
background-color: #FFF;
text-decoration: none;
background-color: #84ACD2;
}
/*--NEWS-------------*/
#news .NEWS {
background-image: url(../../cms_images/mv_news.jpg);
}
#news .BLOG {
background-image: url(../../cms_images/mv_blog.jpg);
}
#news #primary {
width: 820px;
float: right;
}
#news aside {
width: 220px;
float: left;
}
#news aside section {
margin-bottom: 50px;
}
#news aside section li {
margin-bottom: 1em;
}
article {
margin-bottom: 100px;
}
.entry-title {
font-size: 20px;
border-bottom: 1px solid #004888;
margin-bottom: 10px;
padding-bottom: 5px;
font-weight: 600
}
.entry-title a:hover{
text-decoration: none;
}
.entry-meta {
margin-bottom: 15px;
}
#news h3 {
font-weight: 700;
border-bottom: 1px solid #004888;
margin-bottom: 10px;
}
#news .page-title,.post-navigation {
display: none;
}
#news video{}

































@media screen and (max-width: 479px) {
html {
min-width: 320px;
height: 100%;
font-feature-settings : "palt";
}
body {
background-color: #FFFFFF;
color: #004888;
min-width: 320px;
-webkit-text-size-adjust: 100%;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
letter-spacing: 0.07em;
}

a:link {
color: #004888;
text-decoration: none;
transition: .3s;
}
a:visited {
color: #004888;
text-decoration: none;
}
a:hover {
color: #004888;
text-decoration: underline;
}
a:active {
color: #004888;
text-decoration: none;
}
a.btn img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-ms-filter: 'alpha(opacity=100)';
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover.btn img {
-ms-filter: 'alpha(opacity=60)';
filter: alpha(opacity=30);
-moz-opacity: 0.40;
opacity: 0.40;
}
a {
outline: none;
}
::selection {
background: #000000;
color: #FFFFFF;
}
::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::-webkit-selection {
background:#000000;
color:#FFFFFF;
}
strong {
font-weight: bold;
}
.pc {
display: none!important;
}
.sp {
display: inherit!important;
}
#wrapper {
position: relative;
overflow: hidden
}
/*--HEADER-------------*/
header {
height: 60px;
width: 100%;
position: fixed;
background-color: rgba(255,255,255,0.8);
z-index: 10
}
header a {
text-decoration: none;
}
header h1 {
float: left;
margin-top: 10px;
padding-left: 5px;
}
/*--NAVIGATION-------------*/
#gnav {
display: none;
float: none;
font-size: 14px;
margin-top: 0px;
margin-right: 0px;
position: fixed;
background-color: rgba(255,255,255,0.8);
width: 100%;
height: 100vh;
margin-left: 0px;
top:0;
left:0
}
#gnav ul {
text-align: center;
padding-top: 80px;
}
#gnav ul li {
display: block;
margin-left: 0;
font-weight: 600;
margin-bottom: 2em;
}
#gnav ul li a {
color: #004888;
position: relative;
display: inline-block;
transition: .3s;
}
/*#gnav ul li a:hover {
text-decoration: none;
}
#gnav ul li a::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 3px;
background-color: #004888;
transition: .3s;
}
#gnav ul li a:hover::after {
width: 100%;
}
#gnav ul li:nth-child(9), #gnav ul li:nth-child(10) {
font-weight: 200!important;
}*/
/*--CONTENTS-------------*/
#contents {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 60px;
padding-bottom: 60px;
}
.cont {
min-width: 320px;
width: 90%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
}
.cont.w-fix {
width: 90%;
margin-left: auto;
margin-right: auto;
}
#pageTop {
position: fixed;
right: 20px;
bottom: 20px;
}
/*--FOOTER-------------*/
#footer {
background-color: #004888;
clear: both;
color: #FFF;
padding-top: 30px;
padding-bottom: 30px;
}
#ft_nav {
display: none;
float: right;
font-size: 12px;
font-weight: 400;
margin-right: 20px;
}
#ft_nav ul {
text-align: right;
}
#ft_nav ul li {
display: inline;
margin-left: 15px;
}
#ft_nav ul li a {
color: #FFF;
position: relative;
display: inline-block;
transition: .3s;
}
#ft_nav ul li a:hover {
text-decoration: none;
}
#ft_nav ul li a::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 3px;
background-color: #FFF;
transition: .3s;
}
#ft_nav ul li a:hover::after {
width: 100%;
}
#footer .logo {
float: none;
margin-right: 0px;
text-align: center
}
#footer .logo img{
width: 90px;
height: auto;
}
#footer .info {
padding-top: 30px;
padding-bottom: 30px;
}
.copyright {
width: 100%;
clear: both;
text-align: center;
}
#footer a{
color: #FFF;
}


/*--MAINVIS-------------*/
#mainVis {
min-width: 320px;
width: 100%;
height: 65vh;
margin-left: auto;
margin-right: auto;
margin-bottom: 8vh;
background-color: none;
position: relative;
overflow: hidden;/*border-bottom: 15px solid #004888;*/
}
#mainVis #copy {
font-size: 22px;
color: #FFF;
font-weight: 600;
line-height: 1.6;
top: 9vh;
left: 15px;
position: relative;
z-index: 3;
 -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
		  text-shadow: 1px 2px 0px #004888;
}
.mask {
width: 0%;
height: 65vh;
background-color: #004888;
top: 0;
left: 0;
position: absolute;
animation: mvfade 2s ease 0s 1 normal;
z-index: 2;
}
.dot {
display: none;
width: 100%;
height: 85vh;
top: 0;
left: 0;
position: absolute;
z-index: 1;
background-image: url(../../images/dot.png);
}
@keyframes mvfade {
 0% {width: 100%;}
 50% {width: 100%;}
 100% {width: 0%;}
}
#video_bg {
position: absolute;
right: 0;
bottom: auto;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: 100%;
height: auto;
z-index: 0;
}



/*--INDEX_READ-------------*/
#index_read {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
position: relative;
}
#index_read #logomark {
position: relative;
left: 0px;
top: 20px;
z-index: 3;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
}
#index_read #logomark img{
width: 180px;
height: auto;
}
#index_read #txt {
position: relative;
width: 100%;
left: 0px;
font-weight: 600;
line-height: 2.5;
font-size: 12px;
margin-bottom: 50px;
}
#index_read #txt br{
display: none;
}
/*--INDEX_NAV_PANEL-------------*/
#index_nav_panel {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
}
#index_nav_panel li {
width: 100%;
margin-right: 0px;
float: none;
position: relative;
margin-bottom: 40px;
}
#index_nav_panel li:last-child {
margin-right: 0;
}
#index_nav_panel li .mask_img {
width: 100%;
height: 180px;
background-color: rgba(0,0,0,0.00);
transition: .3s;
position: absolute;
z-index: 1;
}
#index_nav_panel li .mask_img:hover {
width: 100%;
height: 180px;
background-color: rgba(0,0,0,0.7);
}
#index_nav_panel li .img {
width: 100%;
height: 180px;
position: relative;
margin-bottom: 15px;
}
#index_nav_panel li:first-child .img {
background-image: url(../../images/index_nav_panel01.jpg);
}
#index_nav_panel li:nth-child(2) .img {
background-image: url(../../images/index_nav_panel02.jpg);
}
#index_nav_panel li:last-child .img {
background-image: url(../../images/index_nav_panel03.jpg);
}
#index_nav_panel li .img h2 {
font-weight: 500;
font-size: 22px;
color: #FFF;
position: absolute;
right: 20px;
bottom: 30px;
z-index: 2
}
#index_nav_panel li .read {
border-left: 6px solid #004888;
padding-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
font-weight: 600
}
/*--INDEX_CMS-------------*/
.index_cms {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #f2f6f9;
background-image: url(none);
background-repeat: no-repeat;
background-position: left center;
position: relative;
margin-bottom: 20px;
}
.index_cms h3 {
padding: 10px;
display: block;
width: 100%;
float: none;
top: 0;
bottom: 0;
font-size: 18px;
font-weight: 700;
color: #004888
}
.index_cms dl {
float: none;
margin-left: 0px;
margin-right: 0px;
padding: 10px;
margin-top: 0px;
margin-bottom: 10px;
color: #004888;
}
.index_cms dt {
float: none;
width: 100%;
clear: both;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0px;
padding-top: 0px;
}
.index_cms dd {
margin-left: 0px;
margin-bottom: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
.index_cms .viewall {
position: relative;
right: auto;
bottom: 20px;
font-size: 12px;
left: auto;
text-align: center;
}
.index_cms .viewall a {
border: 1px solid #004888;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 50px;
}
.index_cms .viewall a:hover {
background-color: #004888;
color: #FFF;
text-decoration: none;
}
/*--INDEX INSTAGRAM-------------*/
.index_isg {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.index_isg .thum_bx {
width: 41vw;
height: 41vw;
background-repeat: no-repeat;
background-size: cover;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 1vw;
transition: .3s;
}
.index_isg .thum_bx:hover {
opacity: 0.7;
}
.index_isg h3 {
display: flex;
align-items: center;
font-size: 16px;
margin-bottom: 1em;
}
.index_isg h3:before, .index_isg h3:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.index_isg h3:before {
margin-right: 1rem;
}
.index_isg h3:after {
margin-left: 1rem;
}
/*--SUB PAGE-------------*/
.subheader {
width: 100%;
height: 260px;
background-color: #000;
overflow: hidden;
text-align: center;
color: #FFF;
position: relative;
font-size: 40px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin-bottom: 50px;
}
.subheader h2 {
position: absolute;
z-index: 3;
top: 120px;
width: 100%;
}
.subheader .ja {
font-size: 18px;
font-weight: 700;
line-height: 3;
}
/*--ABOUT-------------*/

#about .subheader {
background-image: url(../../about/images/mv.jpg);
}
#about .main_read {
text-align: center;
font-size: 24px;
margin-bottom: 1.5em;
font-weight: 600;
line-height: 2;
}
#about .sub_read {
text-align: justify;
font-size: 14px;
margin-bottom: 80px;
line-height: 2.2em;
font-weight: 600
}
#about .sub_read br{
display: none;
}
#about .logo {
display: none;
float: left;
margin-left: 90px;
margin-top: 60px;
}
#about table {
width: 100%;
float: none;
margin-right: 0px;
margin-bottom: 40px;
}
#about table th, #about table td {
padding: 10px;
vertical-align: top;
border-bottom: 1px solid #b2c6d7;
display: block;
width: calc(100% - 20px)
}
#about table th {
font-weight: 600;
white-space: nowrap;
}
#about table .lbl {
font-size: 18px;
border-bottom: 2px solid #004685;
padding-bottom: 15px!important;
}
#about table .pad {
padding-top: 100px;
}
#about .img_ph {
width: 100%;
clear: both;
}
#about .img_ph li {
float: left;
margin-right: 3%;
margin-left: 3%;
width: 44%;
margin-bottom: 3%
}
#about .img_ph li img{
width: 100%;
height: auto;
}
#about .img_ph li:last-child {
margin-right: 3%;
}
/*--MESSAGE-------------*/
#message .subheader {
background-image: url(../../message/images/mv.jpg);
}
#message .main_read {
line-height: 2.2em;
font-size: 20px;
margin-bottom: 2.2em;
font-weight: 600
}
#message .sub_read {
width: 100%;
font-size: 14px;
margin-bottom: 40px;
line-height: 1.8;
font-weight: 600;
}
#message .sub_read br{
display: none;
}
#message .sub_read p {
padding-bottom: 1.5em;
}
#message .sub_read p span {
font-size: 14px;
padding-right: 1.5em
}
#message .ph {
float: none;
margin-right: 0px;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
#message .ph img{
width: 100%;
height: auto;
}
#message .profile {
background-color: #f2f6f9;
padding: 10px;
width: calc(100% - 20px);
font-size: 12px;
line-height: 2.2;
float: none;
margin-bottom: 30px;
}
#message .profile .ph_thum {
display: none;
float: left;
margin-right: 40px;
}
#message .profile .ttl {
font-size: 14px;
font-weight: 600;
margin-bottom: 1em;
}
#message .link_btn {
font-size: 14px;
float: none;
margin-right: auto;
margin-left: auto;
}
#message .link_btn img {
vertical-align: middle;
margin-top: -4px;
margin-right: 10px;
}
#message .link_btn a {
width: calc(100% - 24px);
background-color: #004888;
text-align: center;
padding: 12px;
display: block;
color: #FFF;
}
#message .link_btn a:hover {
background-color: #FFF;
text-decoration: none;
background-color: #84ACD2;
}
/*--SHOP-------------*/
#shop .subheader {
background-image: url(../../shop/images/mv.jpg);
}
#shop table {
width: 100%;
margin-right: auto;
margin-left: auto;
}
#shop table th, #shop table td {
padding: 15px;
vertical-align: top;
border-bottom: 1px solid #b2c6d7;
display: block;
width: calc(100% - 30px)
}
#shop table th {
width: calc(100% - 30px);
}
#shop table .lbl {
font-size: 18px;
border-bottom: 2px solid #004488;
padding-bottom: 15px!important;
}
#shop table .pad {
padding-top: 100px;
}
#shop table .name {
font-size: 16px;
margin-bottom: 0.5em
}
#shop table ul {
padding-top: 15px;
height: 40px;
}
#shop table ul li {
float: left;
margin-right: 20px;
}
#shop .btn_hp{
padding-top: 0em;
clear: both;
width: 100%;
}


/*--VISION-------------*/
#vision .subheader {
background-image: url(../../vision/images/mv.jpg);
}
#vision .sub_ttl {
text-align: center;
font-size: 18px;
margin-bottom: 80px;
line-height: 2.2em;
font-weight: 600
}
#vision .vision_bx .ph {
float: none;
width: 100%;
margin-bottom: 30px;
}
#vision .vision_bx .ph img{
width: 100%;
height: auto;
}
#vision .vision_bx .txt {
width: 100%;
float: none;
margin-bottom: 40px;
text-align: justify
}
#vision .vision_bx .txt .heading {
font-size: 18px;
margin-bottom: 1em;
font-weight: 600;
line-height: 1.4
}
#vision .vision_bx .txt p {
margin-bottom: 1.5em;
line-height: 2.2
}
#vision .vision_bx.second .ph {
float: none;
}
#vision .vision_bx.second .txt {
float: none
}
/*--RECRUI-------------*/
#recruit .subheader {
background-image: url(../../recruit/images/mv.jpg);
}
#recruit .subheader.second {
background-image: url(../../recruit/images/mv2.jpg);
}
#recruit .subheader.detail {
background-image: url(../../recruit/images/mv_detail.jpg);
}
#recruit .rec_nav {
width: 100%;
}
#recruit .rec_nav li {
width: 100%;
background-color: #004488;
float: none;
margin-bottom: 30px;
opacity: 0.5;
transition: .3s;
text-align: left;
}
#recruit .rec_nav li.active, #recruit .rec_nav li:hover {
opacity: 1
}
#recruit .rec_nav li a {
color: #FFF;
display: block;
padding-top: 10px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 10px;
}
#recruit .rec_nav li a:hover {
text-decoration: none
}
#recruit .rec_nav li:last-child {
float: right;
display: block
}
#recruit .rec_nav li span.affi {
font-size: 11px;
display: block;
}
#recruit .rec_nav li span.name {
font-size: 16px;
margin-left: 1em;
display: block;
}
#recruit .rec_nav li img {
vertical-align: middle;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
float: left;
}
#recruit .yt {
width: 100%;
height: auto;
clear: both;
margin-bottom: 50px;
background-color: #000;
padding-top: 4px;
text-align: center;
}
#recruit .yt iframe {
width: 100%;
height: 230px;
margin-left: auto;
margin-right: auto;
}
#recruit .intro {
width: 100%;
font-weight: 600;
margin-bottom: 40px;
}
#recruit .intro th, #recruit .intro td {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
display: block;
width: calc(100% - 20px)
}
#recruit .intro th {
background-color: #004488;
color: #FFF;
width: calc(100% - 20px)
}
#recruit .intro td {
background-color: #f2f6f9;
color: #004488;
text-align: justify
}
#recruit .intro .name {
font-size: 16px;
margin-top: 0.7em
}
#recruit .recruit_bx {
padding-bottom: 25px;
}
#recruit .recruit_bx .ph {
float: none;
margin-bottom: 20px
}
#recruit .recruit_bx .ph img{
width: 100%;
height: auto;
}
#recruit .recruit_bx .txt {
width: 100%;
float: none;
margin-bottom: 40px;
text-align: justify;
font-weight: 600;
}
#recruit .recruit_bx .txt .heading {
font-size: 16px;
font-weight: 600;
line-height: 1.4;
background: linear-gradient(transparent 70%, #ffff66 0%);
display: inline;
padding-top: 0;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 0px;
}
#recruit .recruit_bx .txt p.first {
padding-top: 20px;
}
#recruit .recruit_bx .txt p {
margin-bottom: 1.5em;
line-height: 2.2
}
#recruit .recruit_bx.second .ph {
float: none;
}
#recruit .recruit_bx.second .txt {
float: none
}
#recruit .rec_nav {
width: 100%;
clear: both;
text-align: center;
}
#recruit .rec_nav .heading {
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
#recruit .link_btn {
width: 100%;
font-size: 16px;
margin-right: auto;
margin-left: auto;
}
#recruit .link_btn img {
vertical-align: middle;
margin-top: -4px;
margin-right: 10px;
}
#recruit .link_btn a {
width: calc(100% - 24px);
background-color: #004888;
text-align: center;
padding: 12px;
display: block;
color: #FFF;
}
#recruit .link_btn a:hover {
background-color: #FFF;
text-decoration: none;
background-color: #84ACD2;
}
#recruit .sub_ttl {
text-align: center;
font-size: 18px;
margin-bottom: 80px;
line-height: 2.2em;
font-weight: 600
}
#recruit .detail_ttl {
font-size: 16px;
font-weight: 600;
color: #FFF;
background-color: #004888;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#recruit .detail_bx {
background-color: #f2f6f9;
padding: 10px;
margin-bottom: 30px;
}
#recruit .detail_bx table {
width: 100%;
}
#recruit .detail_bx table th, #recruit .detail_bx table td {
padding: 15px;
vertical-align: top;
border-bottom: 1px solid #b2c6d7;
display: block;
}
#recruit .detail_bx table th {
font-weight: 600;
white-space: nowrap;
}
#recruit .detail_bx .link_btn {
width: 280px;
font-size: 16px;
margin-right: auto;
margin-left: 0;
margin-top: 20px;
}
#recruit .detail_bx ul li {
border: 1px solid #004888;
border-radius: 12px;
float: left;
padding-left: 1em;
padding-right: 1em;
margin-right: 1em;
background-color: #FFFFFF;
margin-bottom: 0.8em
}
/*--CONTACT-------------*/
#contact .subheader {
background-image: url(../../contact/images/mv.jpg);
}
#contact .detail_ttl {
font-size: 16px;
font-weight: 600;
color: #FFF;
background-color: #004888;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#contact .detail_bx {
background-color: #f2f6f9;
padding: 10px;
}
#contact .detail_bx table {
width: 100%;
}
#contact .detail_bx table th, #contact .detail_bx table td {
padding: 10px;
vertical-align: top;
border-bottom: 1px solid #b2c6d7;
display: block;
}
#contact .detail_bx table th {
font-weight: 600
}
#contact .detail_bx table th span {
color: #FB070B
}
#contact .detail_bx table .midle_head {
background-color: #C7DCEC;
}
#contact label {
width: 100%;
display: block;
float: none;
padding-bottom: 10px;
}
#contact .form_field {
padding: 15px;
border: 1px solid #7E99B3;
width: 90%!important;
}
#contact .privacy {
font-weight: normal!important;
font-size: 12px;
color: #444444;
}
#contact .form_btn {
padding-top: 20px;
text-align: center
}
#contact button.submit_btn {
width: calc(100% - 24px);
font-size: 16px;
margin-right: auto;
margin-left: auto;
padding: 12px;
background-color: #004888;
font-size: 18px;
cursor: pointer;
outline: none;
text-align: center;
color: #FFF;
border: none;
}
#contact button.submit_btn:hover {
background-color: #FFF;
text-decoration: none;
background-color: #84ACD2;
}
/*--NEWS-------------*/
#news .NEWS {
background-image: url(../../cms_images/mv_news.jpg);
background-position: right 0%;
}
#news .BLOG {
background-image: url(../../cms_images/mv_blog.jpg);
background-position: right 0%;
}
#news #primary {
width: 100%;
float: none;
}
#news aside {
width: 100%;
float: none;
}
#news aside section {
margin-bottom: 50px;
}
#news aside section li {
margin-bottom: 1em;
font-size: 12px;
}
article {
margin-bottom: 100px;
}
.entry-title {
font-size: 18px;
border-bottom: 1px solid #004888;
margin-bottom: 10px;
line-height: 1.6;
}
.entry-meta {
margin-bottom: 15px;
}
#news h3 {
font-weight: 700;
border-bottom: 1px solid #004888;
margin-bottom: 10px;
}
#news .page-title,.post-navigation {
display: none;
}
article img{
width: 100%;
height: auto;
}
article video{
width: 100%;
height: auto;
}

/*SP NAV*/
#panel-btn{
  display: inline-block;
  position: fixed;
  width: 40px;
  height: 40px;
  margin: 5px 0 10px;
  border-radius: 50%;
  right: 20px;
  top: 10px;
  z-index: 9999999;
animation-duration: 2s;
}
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #004888;
  transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #004888;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -6px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}
#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
}