@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}

body {
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.75;
    color: #282828;
    letter-spacing: 0.025em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
body.limitedContents{
    display: none;
}
body.limitedContents.logined{
    display: block;
}
@media screen and (max-width: 768px) {
    body {
        font-size: 1.4rem;
      }
}
body[data-menu=open] {
  overflow: hidden;
}
main,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
ul,
ol{
    list-style: none;
}
img{
    width: 100%;
    height: auto;
    vertical-align: top;
}
em{
    font-style: normal;
}
iframe{
    width: 100%;
    max-width: 720px;
    height: calc(100vw * 0.506);
    max-height: 405px;
    margin: 0 auto;
    outline: none;
    border: none;
    display: flex;
    justify-content: center;
}
a,a:visited{text-decoration: none;outline: none;color: #fff;}
a{
    box-sizing: border-box;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.btn-c{
    display: block;
    width: 100%;
    color: #fff;
    background: #282828;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
@media screen and (min-width: 769px) {
    .btn-c:hover{
        background: rgba(40, 40, 40,.8)!important;
    }
}
.btn-dl{
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.45;
    font-weight: 400;
    height: 60px;
    padding-right: 5%;
}
.btn-dl::before{
    content: '';
    position: absolute;
    top: 50%; right: 12%;
    transform: translateY(-50%);
    width: 28px;
    height: 26px;
    background: url(../img/common/icon_DL.svg) no-repeat center / contain;
    
}

.arr-link{
    position: relative;
}
.arr-link::before,
.arr-link::after{
    content: '';
    background-color: rgba(255,255,255,1);
    display: block;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    right: 4%;
    width: 35px;
    height: 1.3px;
}
.arr-link::after{
    width: 10px;
    transform-origin: right 0;
    transform: rotate(45deg);
}
@media screen and (max-width: 520px) {
    .arr-link::before{
        width: 30px;
    }
    .arr-link::after{
        width: 8px;
    }
}
@media screen and (min-width: 769px) {
    .sp{ display: none;}
}
@media screen and (max-width: 768px) {
    .pc{ display: none;}
}
@media screen and (min-width: 520px) {
    .smp{ display: none;}
}
@media screen and (max-width: 521px) {
    .pctb{ display: none;}
}

body input [type=submit],
body button {
  cursor: pointer;
}
.js-fade {
  opacity: 0;
  -webkit-filter: blur(7px);
          filter: blur(7px);
  transition-duration: 0.9s;
  transition-delay: 0.15s;
}
.js-fade[data-view=true] {
  opacity: 1;
  -webkit-filter: blur(0);
          filter: blur(0);
}
.mb10{margin-bottom: 10px}
.mb20{margin-bottom: 20px}
.mb30{margin-bottom: 30px}
.mb40{margin-bottom: 40px}
.mb60{margin-bottom: 60px}
.mb90{margin-bottom: 90px}
.mt10{margin-top: 10px}
.mt20{margin-top: 20px}
.mt30{margin-top: 30px}
.mt40{margin-top: 40px}
.mt60{margin-top: 60px}
.mt90{margin-top: 90px}
@media screen and (max-width: 768px) {
    .mb10{margin-bottom: 5px}
    .mb20{margin-bottom: 10px}
    .mb30{margin-bottom: 15px}
    .mb40{margin-bottom: 20px}
    .mb60{margin-bottom: 40px}
    .mb90{margin-bottom: 45px}
    .mt10{margin-top: 5px}
    .mt20{margin-top: 10px}
    .mt30{margin-top: 15px}
    .mt40{margin-top: 20px}
    .mt60{margin-top: 40px}
    .mt90{margin-top: 45px}
}
.pt0{padding-top: 0!important;}
.pb0{padding-bottom: 0!important;}

.f_gothic{
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif, sans-serif;
}
.f_mincho{
    font-family: "Noto Serif JP", -apple-system, BlinkMacSystemFont,"游明朝体","Yu Mincho", serif;
    font-weight: 200;
}
.cap{
    font-size: 10px;
}
.f_s30{font-size: 3rem;line-height: 1.65;}
.f_s28{font-size: 2.8rem;line-height: 1.65;}
.f_s24{font-size: 2.4rem;}
.f_s22{font-size: 2.2rem;}
.f_s20{font-size: 2rem;}
.f_s18{font-size: 1.8rem;}
.f_s15{font-size: 1.5rem;}
.f_s14{font-size: 1.4rem;}
.f-cap{
    font-size: 1rem;
}
@media screen and (max-width: 768px) {
    .f_s30{font-size: 2.1rem;}
    .f_s28{font-size: 2rem;}
    .f_s24{font-size: 1.9rem;}
    .f_s22{font-size: 1.7rem;}
    .f_s20{font-size: 1.5rem;}
    .f_s18{font-size: 1.4rem;}
    .f_s15{font-size: 1.3rem;}
    .f_s14{font-size: 1.2rem;}
    .sp_f_s14{font-size: 1.4rem;}
}
.f_line{
    background: linear-gradient(transparent 68%, rgba(245, 224, 130, 0.5) 0%);
    padding-bottom: 1.5px;
}
.f_color{
    color: #698296;
}
.f_color2{
    color: #0b5380;
}
.f_w7{
    font-weight: 700;
}
.f_w5{
    font-weight: 500;
}
.f_w4{
    font-weight: 400;
}
.t_center{text-align: center;}
.t_left{text-align: left;}
.t_right{text-align: right;}
@media screen and (max-width: 768px) {
    .sp-t_center{text-align: center;}
    .sp-t_left{text-align: left;}
    .sp-t_right{text-align: right;}
}
.t_height2{
    line-height: 2
}
.t_spc6{
    letter-spacing: 0.6em;
}
.sBr{
    display: inline-block;
}
.deco_em{
    position: relative;
    width: 100%;
    padding: 5px 0;
    text-align: center;
}
.deco_em.-size{
    max-width: 457px;
    margin-left: auto;
    margin-right: auto;
}
.deco_em::after,
.deco_em::before{
    content: '';
    position: absolute;
    top: 0;
    width: 20px;
    height: 100%;
}
.deco_em::before{
    left: 0;
    border-top: solid 1px rgba(51, 51, 51,.2);
    border-left: solid 1px rgba(51, 51, 51,.2);
}
.deco_em::after{
    right: 0;
    border-bottom: solid 1px rgba(51, 51, 51,.2);
    border-right: solid 1px rgba(51, 51, 51,.2);
}
.bgColor{
    background: #f7f7f7!important;
}
/* --------------------------
 header
 -------------------------- */
body.active,
html.active{
    overflow: hidden;
}
#gHeader {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0px 2%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    top: 0;
    left: 0;
    z-index: 9000;
}
@media screen and (max-width: 768px) {
    #gHeader {
        padding: 0px 15px;
    }
}
#gHeader .menu-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: rgba(51, 51, 51,0);
    visibility: hidden;
}
#gHeader .menu-bg.active{
    z-index: 50;
    background-color: rgba(51, 51, 51,.3);
    visibility: visible;
}
#gHeader .h-logo a{
    display: flex;
}
/* btn-menu*/
#gHeader .btn-menu {
    position: absolute;
    display: block;
    width: 42px;
    height: 42px;
    top: 10px;
    right: 2%;
    transition-delay: .1s;
    transition-duration: .3s;
    cursor: pointer;
    z-index: 101;
}
#gHeader .btn-hum,
#gHeader .btn-hum span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
#gHeader .btn-hum {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    transition-delay: .1s;
    transition-duration: .3s;
    transform: translate(0, 0);
    z-index: 3;
}
#gHeader .btn-hum span {
    position: absolute;
    left: 10px;
    width: 60%;
    height: 1.5px;
    background-color: #282828;
    border-radius: 4px;
    transition: .3s;
}
#gHeader .btn-hum span:nth-of-type(1){top: 12px;}
#gHeader .btn-hum span:nth-of-type(2){top: 19px;}
#gHeader .btn-hum span:nth-of-type(3){ bottom: 12px;}

/* is active */
#gHeader .btn-menu.active {
    transform: translate(9px, 0);
    z-index: 9999;
}
@media screen and (max-width: 768px) {
    #gHeader .btn-menu.active {
        transform: translate(2%, 0);
    }
}
#gHeader .btn-menu.active .btn-hum span:nth-of-type(1){
    -webkit-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#gHeader .btn-menu.active .btn-hum span:nth-of-type(2){
    opacity: 0;
}

#gHeader .btn-menu.active .btn-hum span:nth-of-type(3){
    -webkit-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}

/* menu*/
#gHeader #menu {
    position: fixed;
    width: 375px;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    top: 0;
    right: -375px;
    z-index: 103;
    transition: right .3s .1s;
}

/*#menu.active*/
#gHeader #menu.active {
    right: 0;
}
@media screen and (max-width: 520px) {
    #gHeader #menu{
        width: 100%;
        right: -100%;
    } 
}
#gHeader .menu-btn{
    position: absolute;
    bottom: 5%; left: 50%;
    transform: translateX(-50%);
    width: 90%;
    font-size: 1.3rem;
}
#gHeader .menu-btn a{
    display: flex;
    margin-top: 16px;
}
#gHeader .btn-sns{
    color: #282828;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 1px rgba(51, 51, 51,.2);
    height: 60px
}
#gHeader .btn-sns span{
    font-weight: 500;
/*    font-size: 1.4rem;*/
    margin-bottom: 2px
}
#gHeader .btn-sns img{
    max-width: 120px;
}
@media screen and (min-width: 769px) {
    #gHeader .btn-sns:hover{
        background: rgba(124, 124, 124,.1);!important;
    }
}

/*.menu-in*/
#gHeader .menu-in {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 40px;
    width: 100%;
}
#gHeader .menu-in .site-ttl {
    color: #7c7c7c;
    font-weight: 400;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 0.6em;
    line-height: 2;
}
#gHeader .menu-in .hr-line {
    display: block;
    width: 90%;
    height: 2px;
    border: 0;
    height: 1px;
    margin: 30px auto 24px;
    background: rgba(124, 124, 124,.3);
}
@media screen and (max-width: 768px) {
    #gHeader .menu-in {
        padding-top: 32px;
    }
    #gHeader .menu-in .site-ttl {
        font-size: 1rem;
    }
    #gHeader .menu-in .hr-line {
        margin: 24px auto 18px;
    }
}
#gHeader .menu-in_nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
}
#gHeader .menu-in_nav li {
    display: block;
    position: relative;
    transition: .2s;
    cursor: pointer;
/*    font-family: "Noto Serif JP", -apple-system, BlinkMacSystemFont,"游明朝体","Yu Mincho", serif;*/
    font-weight: 400;
    
}
#gHeader .menu-in_nav li a,
#gHeader .menu-in_nav li a:active {
    width: 100%;
    display: block;
    position: relative;
}
#gHeader .menu-in_nav li a:hover {
    background: rgba(124, 124, 124,.08);
}
#gHeader .menu-in_nav ul li a {
    border-bottom: 1px solid rgba(124, 124, 124,.15);
}
#gHeader .menu-in_nav ul li a {
    color: #3c3c3c;
/*    font-weight: 500;*/
    padding: 10px 0 10px 10px;
    text-decoration: none;
    transition: .2s;
}
#gHeader .menu-in_nav ul li a .subTtl{
    display: block;
    font-size: 1.1rem;
    color: #7c7c7c;
}

/* --------------------------
 footer
 -------------------------- */
/*
#gFooter .gFooter__copyright{
    position: relative;
    width: 100%;
    background: #282828;
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    padding: 12px;
    line-height: 1.2;
    letter-spacing: 0.05em
}
@media screen and (max-width: 768px) {
    #gFooter .gFooter__copyright{
        font-size: 1rem;
    }
}
*/
#gFooter{
    position: relative;
    background: #fff;
    padding-bottom: 85px;
}
.gFooter__lg{
    background: #f8f8f8;
    padding: 30px 0;
}
.gFooter__lg a{
    display: block;
    width: 258px;
    margin: 0 auto;
}

.gFooter__og {
    width: 96%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    padding: 12px 0;
    margin: 0 auto;
}
.gFooter__og p,
.gFooter__og a{
    color: #282828;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 400;
}
.gFooter__og p{
    font-size: 1rem;
}
.gFooter__og__ls{
    display: flex;
    gap: 20px
}

@media screen and (max-width: 768px) {
    .gFooter__og {
        display: block;
        text-align: center;
        padding: 0
    }
    .gFooter__og p{
        font-size: 1rem
    }
    .gFooter__og a{
        font-size: 1.3rem
    }
    .gFooter__og__ls{
        flex-direction: column;
        justify-content: center;
        padding: 20px 0;
        gap: 8px
    }
    .gFooter__og__cp{
        padding: 12px 0;
    }
}

.gPageTop{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 90px;
    right: 15px;
    width: 44px;
    height: 44px;
    transition: .2s;
    z-index: 200;
     background: rgba(40, 40, 40,.85);
    border-radius: 25px;
}
.gPageTop::after{
    content: '';
    position: absolute;
    transform: translate(-50%,-20%) rotate(45deg);
    height: 40%;
    width: 40%;
    top: 50%;
    left: 50%;
    background: none;
    border-left: solid 1.5px #fff;
    border-top: solid 1.5px #fff;
}
@media screen and (max-width: 768px) {
    .gPageTop{
        right: 10px;
        bottom: 65px;
    }
}

/* --------------------------
 contents
 -------------------------- */
#contents{
    margin-top: 60px;
}
.container{
    position: relative;
    width: 90%;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
.container.-size{
    width: 100%;
    max-width: 920px;
}
.container.-sizeS{
    max-width: 720px;
}
.container.-sizeL{
    max-width: 960px;
}
.modPageMV{
    position: fixed;
    top: 60px; left: 0;
    width: 100%;
    height: 730px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.modPageMV + section{
    margin-top: 730px;
}
@media screen and (max-width: 768px) {
    .modPageMV{
        height: 430px;
    }
    .modPageMV + section{
        margin-top: 430px;
    }
}
.modPageMV__ttlBox{
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,.85);
    padding: 65px 20px 50px;
    width: 435px;
}
.modPageMV__ttl{
    color: #7c7c7c;
    font-weight: 300;
    font-size: 2.2rem;
    text-align: center;
    letter-spacing: 0.6em;
    line-height: 2;
    padding: 5px 30px;
}
.modPageMV__txt{
    font-size: 1.8rem;
    line-height: 1.5;
/*    letter-spacing: -0.1em;*/
    margin-top: 40px;
}
.modPageMV__ttl.-page{
    font-size: 1.6rem;
    padding: 8px 30px;
    margin: 30px auto 10px;
}
.modPageMV__txt.-page{
    font-size: 2.9rem;
}
.modPageMV__txt > span{
/*    display: block;*/
/*
    font-size: 70%;
    letter-spacing: 0.1em
*/
}
@media screen and (max-width: 768px) {
    .modPageMV__ttlBox{
        padding: 40px 15px 30px;
    }
    .modPageMV__ttlBox{
        width:300px;
    }
    .modPageMV__ttl{
        font-size: 1.6rem;
    }
    .modPageMV__txt{
        font-size: 1.3rem;
        margin-top: 25px;
    }
    .modPageMV__ttl.-page{
        font-size: 1.2rem;
        padding: 5px 30px;
        margin: 15px auto 10px;
    }
    .modPageMV__txt.-page{
        font-size: 2.1rem;
    }
}

.myBlock{
    position: relative;
    padding: 70px 0;
    background: #fff;
    overflow-x: hidden;
}
.cap{
    font-size: 1.3rem;
    line-height: 1.4;
}
@media screen and (max-width: 768px) {
    .myBlock{
        padding: 45px 0;
    }
    .cap{
        font-size: 1.15rem;
    }
}
/* slider */
.slider{
    position: relative;
    overflow-x: hidden;
}
.slider__item{
    display: inline-block;
    vertical-align: top;
    outline: none;
}

/* slider arr */
.slide-arrow { 
    width: 42px; 
    height: 42px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    cursor: pointer;
    border-radius: 20px; 
    transition: all .3s;
}
.slide-next{
    right: 5px;
    background: rgba(11, 83, 129,.7) url("../img/common/arr_r.svg") no-repeat;
    background-size: 100%;
    z-index: 100;
}
.slide-prev{ 
    left: 5px;
    background: rgba(11, 83, 129,.7) url("../img/common/arr_l.svg") no-repeat;
    background-size: 100%;
    z-index: 100;
}
@media screen and (min-width: 769px) {
    .slide-arrow:hover{
        background-color: rgba(11, 83, 129,1) 
    }
}
.slider.-dot{
    padding-bottom: 50px!important;
}
.slick-dots{
    bottom: 0;
    width: 90%
}
.slick-dots li button:before{
    font-size: 10px;
    line-height: 10px;
    text-shadow: none;
}
.slick-dots li.slick-active button:before{
    font-size: 15px;
    color: rgba(11, 83, 129,1); 
}