@charset "UTF-8";

/* ------------------------------------------------------------
   common - style.css
------------------------------------------------------------ */
/*
* header
* footer
* common
* layer
*/
/* common
------------------------------------------------------------ */ 
body{ overflow-x: hidden; }
/* tit__block */
.en{ font-family: "Avenir", 'Josefin Sans'; }
.tit__block{ text-align: center; margin-bottom: 60px; }
.tit__block .en {
    font-size: 60px;
    line-height: 60px;
    color: #023894;
}
.tit__block .jp {
    font-size: 16px;
    line-height: 16px;
    margin-top: 20px;
}

/* more__btn */
.more__btn {
    font-family: "Avenir", 'Josefin Sans';
    font-size: 1.6rem;
    border: solid 1px #000;
    max-width: 400px;
    margin: auto;
}
.more__btn a {
    display: block;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s;
    padding: 20px 40px;
    color: #000;
    position: relative;
}
.more__btn a::after {
    content: "";
    position: absolute;
    transition: all 0.4s;
    background: url(../img/arrow_black_right.png) no-repeat 0 0  / 50px auto;
    width: 50px;
    height: 12px;
    right: -25px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.more__btn a:hover::after { background-image: url(../img/arrow_white_right.png); right: 25px; }
.more__btn a:hover { background: #000; color: #fff; }
.color_w.more__btn { border: solid 1px #fff; }
.color_w.more__btn a { color: #fff; }
.color_w.more__btn a::after { background-image: url(../img/arrow_white_right.png); }
.color_w.more__btn a:hover::after { background-image: url(../img/arrow_black_right.png); }
.color_w.more__btn a:hover { background: #fff; color: #000; }

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}


    /* blockscroll */
    .motion-txt {
      display: inline-block;
      position: relative;
      overflow: hidden;
      padding: 5px 10px;
    }
    .motion-txt:after {
      content: '';
      position: absolute;
      opacity: 1;
      left: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      background-color: #0f4299;
      transform: translate3d(-101%, 0, 0);
    }
    .js-scroll.show .motion-txt:after {
      transition-property: transform, opacity;
      transition-duration: 0.7s;
      transition-delay: 0s;
      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
      transform: translate3d(0, 0, 0);
    }
    .js-scroll.done .motion-txt:after {
      transition-property: transform;
      transition-duration: 0.7s;
      transition-delay: 0s;
      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
      transform: translate3d(103%, 0, 0);
    }
    .motion-txt .motion-inner {
      display: inline-block;
      opacity: 0;
    }
    .js-scroll.done .motion-txt .motion-inner {
      opacity: 1;
    }

/* header
------------------------------------------------------------ */
header{
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
}
header .innar{
    width: 90%;
    margin: auto;
    max-width: 1600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
}
header .logo { width: 20%; }
header .logo img{ width: 100%; }
header .pc_nav {
    display: flex;
    justify-content: flex-end;
    width: 73%;    
}
header .nav_list { display: flex; margin-right: 5%; }
header .pc_nav li { font-size: 1.5rem; }
header .pc_nav li a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
    transition: all 0.4s;
    color: #000;
}
header .pc_nav li a:hover{ color: #0f4299; font-weight: bold; }
header .lang { display: flex; }
header .lang div { font-size: 16px; }
header .lang div.jp{
    background: url(../img/line.png)  no-repeat right center / 7px auto;
    padding-right: 7px;
}
header .lang a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 0 10px;
}
header .lang a:hover{ color: #0f4299; }
header .lang .selected a { color: #023894; font-weight: bold; }

header .menu__btn{ display: none; }
header .menu__btn {
    width: 90px;
    background: #333;
    transition: 0.4s ease-in-out;
    cursor: pointer;
/*
    position: fixed;
    right: 0;
    top: 0;
*/
}
header .menu__btn:hover { background: #0f4299; }
header #nav_toggle {
    display: block;
    width: 90px;
    height: 90px;
    padding: 15%;
    position: relative;
    z-index: 9999;
}
header #nav_toggle div {
    position: relative;
    height: 50%;
    margin-top: 19%;
}
header #nav_toggle span {
    display: block;
    height: 1px;
    background: #fff;
    position: absolute;
    width: 60%;
    left: 0;
    right: 0;
    margin: auto;
    transition: 0.4s ease-in-out;
}
header #nav_toggle span:nth-child(1) { top: 0px; }
header #nav_toggle span:nth-child(2) { top: 0; bottom: 0; }
header #nav_toggle span:nth-child(3) { bottom: 0; }
header .menu__btn nav {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: #333;
    z-index: 9998;
}
header .menu__btn nav .innar{
    width: 90%;
    max-width: 900px;
    display: block;
    margin-top: 40px;
}
header .menu__btn nav .logo{ max-width: 322px; margin-bottom: 30px; }
header .menu__btn nav .sitemap li{
    font-size: 1.4rem;
    margin-bottom: 10px;
    transition: all 0.4s ease-in-out;
}
header .menu__btn nav .sitemap li.more__btn { max-width: inherit; }
header .menu__btn nav .sitemap li.more__btn a{ text-align: left; }
header .menu__btn nav .sitemap li:hover { background-color: #134197; }
header .menu__btn nav .sitemap li a {
    padding: 15px;
    color: #fff;
    display: block;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
}
header .menu__btn nav .sitemap li.contact__btnsp {
    background-color: #efef52;
    background-image: url(../img/arrow_black_r.png);
}
header .menu__btn nav .sitemap li.contact__btnsp a { color: #4d4d4d; }
header .menu__btn nav .sitemap li.contact__btnsp a:hover { color: #fff; }
header .menu__btn nav .sitemap li.contact__btnsp:hover {
    background-color: #134197;
    background-image: url(../img/arrow_wh_r.png);
}
header .menu__btn nav .sitemap li.entry__btnsp { background-color: #ad674e; }
header .menu__btn nav .sitemap li.entry__btnsp:hover { background-color: #134197; }
header .menu__btn nav .lang{ margin-top: 30px; }
header .menu__btn nav .lang a{ color: #fff; }
header .menu__btn nav .banner {
    max-width: 900px;
    margin: 30px auto;
    width: 90%;
}
header .menu__btn nav .banner ul { display: flex; justify-content: space-between; }
header .menu__btn nav .banner li { width: 31%; margin: 1%; }
header .menu__btn nav .banner a { display: block; transition: all 0.4s ease-in-out; }
header .menu__btn nav .banner a:hover { opacity: 0.7; }
header.open  .menu__btn #nav_toggle span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
}
header.open .menu__btn #nav_toggle span:nth-child(2) {
    width: 0;
    left: 50%;
}
header.open .menu__btn #nav_toggle span:nth-child(3) {
    top: 6px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
}


/* footer
------------------------------------------------------------ */
/* contact */
.contact {
    background: #222 url(../img/contact__bg.png) no-repeat 50% 50% / cover;
    padding: 5% 0;
    -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
.contact .tit__block { margin-bottom: 30px; }
.contact .en { color: #fff; }
.contact p {
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    margin: 40px;
}
/* group */
.group {
    background: url(../img/group__bg.gif) repeat;
    padding: 3% 0;
    text-align: center;
}
.group .subtit {
    font-size: 3.0rem;
    line-height: 3.0rem;
    margin: auto;
    margin-bottom: 2%;
    position: relative;
    display: inline-block;
    padding: 0 20px;
}
.group .subtit::before,
.group .subtit::after{
    content: "";
    position: absolute;
    width: 15px;
    height: 2px;
    background: #1c1c1c;
    margin: auto;
}
.group .subtit::before{
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.group .subtit::after{
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.group a { display: block; padding: 0 4%; }
.group a:hover{ opacity: 0.8; }
.group img { width: 100%; height: auto; }
.group p{ margin-bottom: 30px; font-size: 1.4rem; }


footer { background: #1c1c1c; padding: 5% 0; }
footer .innar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 90%;
    margin: auto;
    color: #fff;
    font-size: 1.4rem;
}
footer .logo { max-width: 322px; margin: 0 0 60px; }
footer img { width: 100%; }
footer h4 { font-weight: bold; margin-bottom: 30px; }
footer ul { display: flex; flex-direction: row-reverse; }
footer a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 10px;
}
footer a:hover{ text-decoration: underline; }
footer address {
    font-style: normal;
    margin-top: 30px;
    text-align: right;
}



/* layer
------------------------------------------------------------ */
.layer header { position: inherit; }
.subhead {
    padding: 10% 0;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: #000;
}
.subhead::before{
    content: "";
    background: no-repeat 50% 50% / cover;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    position: absolute;
    top: -12px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    z-index: -1;
/*    opacity: 0.8;*/
}
.subhead h1 {
    font-size: 60px;
    font-weight: normal;
    line-height: 60px;
}
.subhead p{ margin-top: 20px; font-size: 1.8rem; }
.layer__contents {
    margin: auto;
    padding: 0% 5% 5%;
    background: url(../img/layer__logo.png) no-repeat right top / 18% auto;
}
.breadcrumb {
    margin: 0% auto 4%;
    padding-top: 2%;
/*    width: 95%;*/
}
.breadcrumb ul { display: flex; position: relative; }
.breadcrumb li {
    font-size: 1.6rem;
    font-family: Avenir Next;
    margin-right: 30px;
    white-space: nowrap;
}
.breadcrumb a {
    color: #0f4299;
    text-decoration: none;
    position: relative;
}
.breadcrumb a::after {
    position: absolute;
    content: "";
    background: url(../img/breadcrumb.gif) no-repeat left center / 4px auto;
    right: -16px;
    top: -1px;
    bottom: 0;
    margin: auto;
    width: 4px;
    height: 7px;
}
.breadcrumb a:hover { text-decoration: underline; }
.layer__contents p,
.layer__contents div,
.layer__contents li,
.layer__contents th,
.layer__contents td { font-size: 1.6rem; line-height: 190%; }
.layer__contents .subtitle01{
    color: #023894;
    padding-bottom: 40px;
    position: relative;
    font-weight: normal;
    margin-bottom: 60px;
}
.layer__contents .subtitle01::after{
    position: absolute;
    content: "";
    width: 40px;
    height: 2px;
    background: #023894;
    bottom: 0;
    left: 0;
    
}
.layer__contents .subtitle01 .en{ color: #bfbfbf; font-size: 1.6rem; }
.layer__contents .subtitle01 .tit{ font-size: 4.0rem; }
.layer__contents .subtitle02{
    font-size: 2.4rem;
    font-weight: normal;  
    background: #333333;
    color: #fff;
    padding: 30px;
    margin: 60px 0 40px;
}
.layer__contents .subtitle03{
    font-size: 2.0rem;
    font-weight: normal;  
    padding: 15px 0;
    border-bottom: solid 1px #d6d6d6;
    margin: 40px 0 20px;
}
.layer__contents .blue_bg { background: #c8edfa; }

/* list_line */
.layer__contents .list_line li{
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
}
.layer__contents .list_line li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    margin: auto;
    width: 8px;
    height: 2px;
    background: #023894;
}

/* anker__box */
.layer__contents .anker__box ul {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 4% auto;
}
.layer__contents .anker__box li { margin: 2%; }
.layer__contents .anker__box.colum_two li { width: 48%; }
.layer__contents .anker__box.colum_there li { width: 30%; }
.layer__contents .anker__box a {
    display: block;
    padding: 5% 3%;
    text-decoration: none;
    text-align: center;
    transition: all 0.4s;
    color: #333333;
    border: solid 1px #333333;
}
.layer__contents .anker__box a:hover{ background: #333; color: #fff; }
.sp { display: none; }

.en_lang{ font-family: "Avenir", 'Josefin Sans';  }

@media screen and (min-width: 1090px) and (max-width: 1300px) {
    /* ▼PC用================================================================== */
    
    /* header
	------------------------------------------------------------ */
    header .menu__btn{ display: none; }
    
    
    /* ▲PC用================================================================== */
}

@media screen and (min-width: 768px) and (max-width: 1089px) {

    /* ▼Tab用================================================================= */
    
    /* tit__block */
    .tit__block{ margin-bottom: 40px; }
    .tit__block .en { font-size: 40px; line-height: 40px; }
    

    /* header
	------------------------------------------------------------ */
    header .pc_nav{ display: none!important; }
    header .logo{ width: 30%;}
    header .menu__btn{ display: block; }

    /* footer
	------------------------------------------------------------ */
     /* contact */
    .contact { padding: 10% 0; }
    .contact .tit__block { margin-bottom: 20px; }
    .contact p { font-size: 1.6rem; margin: 20px; }

    footer { padding: 10% 0 5%; }
    footer .innar {
        display: block;
        width: 90%;
        margin: auto;
        color: #fff;
        font-size: 1.3rem;
    }
    footer .logo {width: 70%; margin: 0 auto 40px; }
    footer h4 { margin-bottom: 20px; }
    footer ul { display: block; margin: 20px 0; border-top: solid 1px #333; }
    footer ul li { border-bottom: solid 1px #333; }
    footer a { text-decoration: underline; }
    footer address { text-align: left; }

    /* ▲Tab用================================================================= */
}

@media screen and (min-width: 0px) and (max-width: 767px) {

    /* ▼SP用================================================================ */
    .pc { display: none; }
    .sp { display: block; }
    
    /* tit__block */
    .tit__block{ margin-bottom: 30px; }
    .tit__block .en { font-size: 30px; line-height: 30px; }
    .tit__block .jp {
        font-size: 14px;
        line-height: 14px;
        margin-top: 10px;
    }

    /* more__btn */
    .more__btn { font-size: 1.4rem; width: 60%; }
    .more__btn a { padding: 15px 25px; }
    .more__btn a::after {
        background-size: 40px auto;
        width: 40px;
        height: 10px;
        right: -20px;
    }
    .more__btn a:hover::after { right: 20px; }
    
    
    
    /* header
    ------------------------------------------------------------ */

    header .innar{ padding: 20px 0; }
    header .logo { width: 70%; }
    header .pc_nav{ display: none!important; }
    header .menu__btn{ display: block; }
    header .menu__btn { width: 60px; }
    header #nav_toggle { width: 60px; height: 60px; }
    header.open .menu__btn #nav_toggle span:nth-child(1){ top: 14px; }
    header.open .menu__btn #nav_toggle span:nth-child(3){ top: 6px; }
    header .menu__btn nav .lang{ justify-content: center; }

    header .menu__btn .more__btn{ width: 90%; font-size: 1.3rem; }
    header .menu__btn .more__btn a{ padding: 10px 15px; }

    /* footer
	------------------------------------------------------------ */
   /* contact */
    .contact { padding: 10% 0; }
    .contact .tit__block { margin-bottom: 20px; }
    .contact p { font-size: 1.6rem; margin: 20px; }
    /* group */
    .group { padding: 6% 0; }
    .group .subtit {
        font-size: 2.2rem;
        line-height: 2.2rem;
        margin-bottom: 4%;
    }
    
    footer { padding: 10% 0 5%; }
    footer .innar {
        display: block;
        width: 90%;
        margin: auto;
        color: #fff;
        font-size: 1.3rem;
    }
    footer .logo {width: 70%; margin: 0 auto 40px; }
    footer h4 { margin-bottom: 20px; }
    footer ul { display: block; margin: 20px 0; border-top: solid 1px #333; }
    footer ul li { border-bottom: solid 1px #333; }
    footer a { text-decoration: underline; }
    footer address { text-align: left; }

    /* layer
	------------------------------------------------------------ */
    .layer header { margin: 4% auto; }
    .subhead { padding: 8% 0; }
    .layer__contents p,
    .layer__contents div,
    .layer__contents li,
    .layer__contents th,
    .layer__contents td { font-size: 1.4rem; }
    
    .layer__contents .subtitle01{ padding-bottom: 20px; margin-bottom: 40px; }
    .layer__contents .subtitle01 .en{ font-size: 1.4rem; }
    .layer__contents .subtitle01 .tit{ font-size: 2.4rem; }
    .layer__contents .subtitle02{
        font-size: 1.6rem;
        padding: 20px;
        margin: 40px 0 30px;
    }
    .layer__contents .subtitle03{
        font-size: 1.6rem;
        padding: 10px 0;
        margin: 30px 0 20px;
    }

    /* anker__box */
    .layer__contents .anker__box ul { display: block; width: auto; }
    .layer__contents .anker__box li { margin: 3% 0; }
    .layer__contents .anker__box.colum_two li { width: auto; }
    .layer__contents .anker__box.colum_there li { width: auto; }
    
    /* subhead */
    .subhead { padding: 15% 0; }
    .subhead h1 { font-size: 40px; line-height: 40px; }
    .subhead p{ margin-top: 10px; font-size: 1.6rem; }


    /* ▲SP用================================================================ */
}