@charset "utf-8";
/* Reset */
html{font-size: 62.5%; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1;}
body{color: #161616; line-height: 2.3; word-spacing: 0; font-size: 1.6rem; font-family: 'Noto Sans JP', sans-serif;
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; }

*{margin: 0; padding: 0; box-sizing: border-box; border: 0; outline: none;}
h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: bold;}
ol, ul{list-style: none;}
table{border-collapse: collapse; border-spacing: 0;}
th{font-weight: normal;}
a{color: inherit; text-decoration: none;}
img{vertical-align: bottom; max-width: 100%; height: auto;}

input, 
textarea,
select,
option,
optgroup,
button{-webkit-appearance: none; border-radius: 0; outline: none; font-family: 'Noto Sans JP', sans-serif;}

[class*="container-"]{margin: 0 auto; width: calc(100% - 40px);}
.container-900{max-width: 900px;}
.container-1200{max-width: 1200px;}
.container-1500{max-width: 1500px;}

.cap,
[class*="cap-"]{font-size: 1.2rem; line-height: 1.4;}
.cap-abs_right{position: absolute; bottom: 0.8em; right: 0.8em; text-align: right;}
.cap-abs_left{position: absolute; bottom: 0.8em; left: 0.8em;}
.cap-right{padding-top: 0.8em; text-align: right;}
.cap-left{padding-top: 0.8em;}
.shadow{text-shadow: 0 0 1px rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.5), 0 0 3px rgba(255,255,255,.5), 0 0 4px rgba(255,255,255,.5), 0 0 5px rgba(255,255,255,.5), 0 0 6px rgba(255,255,255,.5), 0 0 7px rgba(255,255,255,.5), 0 0 8px rgba(255,255,255,.5), 0 0 9px rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.5), 0 0 11px rgba(255,255,255,.5), 0 0 12px rgba(255,255,255,.5), 0 0 13px rgba(255,255,255,.5), 0 0 14px rgba(255,255,255,.5);}
.shadow-black{color: #fff; text-shadow: 0 0 1px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.5), 0 0 3px rgba(0,0,0,.5), 0 0 4px rgba(0,0,0,.5), 0 0 5px rgba(0,0,0,.5), 0 0 6px rgba(0,0,0,.5), 0 0 7px rgba(0,0,0,.5), 0 0 8px rgba(0,0,0,.5), 0 0 9px rgba(0,0,0,.5), 0 0 10px rgba(0,0,0,.5), 0 0 11px rgba(0,0,0,.5), 0 0 12px rgba(0,0,0,.5), 0 0 13px rgba(0,0,0,.5), 0 0 14px rgba(0,0,0,.5);}
.white{color: #fff;}

.center{text-align: center !important;}
.left{text-align: left !important;}
.right{text-align: right !important;}
.bold{font-weight: bold;}
.txtS{font-size: 1.4rem; line-height: 2.3;}
.w-full{width: 100% !important;}
.txt-link{color: #a59466; text-decoration: underline;}
.txt-link:hover{opacity: .8;}
.txt-yellow{color: #a59466;}

@media (min-width: 768px){
    a[href^="tel:"]{pointer-events: none;}
    .only-sp{display: none !important;}
    body{padding-top: 80px;}
}

@media (max-width: 767px){
    body{font-size: 1.4rem; line-height: 2.1; padding-top: 70px; padding-bottom: 60px;}
    .only-pc{display: none !important;}
    .txtS{font-size: 1.2rem; line-height: 2.1;}
    .cap,
    [class*="cap-"]{font-size: 1rem;}
}

@media print {
    body{color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
}

/* Header */
header{position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: #fff; z-index: 1000; transition: transform .7s; display: flex; align-items: center;}
header.is-hide{transform: translateY(-100%); -webkit-transform: translateY(-100%);}
header.is-open{transform: translateY(0) !important; -webkit-transform: translateY(0) !important;}

h1{margin: 0 0 0 27px; width: 357px; line-height: 1;}

@media (max-width: 1023px){
    h1{margin: 0 0 0 15px; width: 300px;}    
}

@media (max-width: 767px){
    header{height: 70px;}
    h1{width: calc(100% - 110px);}
}

/* Btn Menu */
.btn-menu{width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; background: #161616; position: absolute; top: 0; right: 0; cursor: pointer;}
.btn-menu p{width: 30px; height: 26px; position: relative;}
.btn-menu span{position: absolute; width: 100%; height: 2px; left: 0; background: #fff; display: block; transition: .4s;}
.btn-menu span:nth-of-type(1){top: 0;}
.btn-menu span:nth-of-type(2){top: 12px;}
.btn-menu span:nth-of-type(3){top: 24px;}
.btn-menu:hover{background: #000;}

.btn-menu.is-open span:nth-of-type(1){top: 12px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.btn-menu.is-open span:nth-of-type(2){opacity: 0;}
.btn-menu.is-open span:nth-of-type(3){top: 12px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

@media (max-width: 767px){
    .btn-menu{width: 70px; height: 70px;}
}

/* Fixed Btn */
.fix-btn{position: fixed; top: 0; right: 80px; display: flex; z-index: 1001;}
.fix-btn a{width: 125px; height: 80px; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; border-left: 1px solid #d8dde3; font-size: 1.4rem; line-height: 1.2; text-align: center; transition: .4s; position: relative;}
.fix-btn a:nth-child(3) { width: 140px;}
.fix-btn a:before{content: ''; width: 100%; height: 26px; margin: 0 auto 9px;}
.fix-btn a:hover{background: #dfe4ea;}

.fix-btn .btn-elk:before{background: url("../img/common/ic_elk.png") no-repeat center center/auto 100%;}
.fix-btn .btn-search:before{background: url("../img/common/ic_search_blue.svg") no-repeat center center/auto 100%;}

.fix-btn .btn-list:before{background: url("../img/common/ic_bookmark_blue.svg") no-repeat center center/auto 100%;}
.fix-btn .btn-list span{position: absolute; top: 10px; right: calc(50% - 27px); width: 24px; height: 24px; background: #dc3333; color: #fff; border-radius: 100%; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 1.1rem; line-height: 1.3; font-family: 'Lato', sans-serif; font-weight: 400;}

.fix-btn .btn-officemag{background: #1a3558; color: #fff; border-left: none;}
.fix-btn .btn-officemag:before{background: url("../img/common/ic_officemag.png") no-repeat center center/auto 100%;}
.fix-btn .btn-officemag:hover{background: #13488e;}
.fix-btn .btn-inquiry{background: #a59466; color: #fff; border-left: none;}
.fix-btn .btn-inquiry:before{background: url("../img/common/ic_mail.svg") no-repeat center center/auto 100%; height: 24px; margin: 0 auto 10px;}
.fix-btn .btn-inquiry:hover{background: #cab47a;}

@media (min-width: 768px){
    .fix-btn{transition: transform .7s;}
    .fix-btn.is-hide{transform: translateY(-100%); -webkit-transform: translateY(-100%);}
    .fix-btn.is-open{transform: translateY(0) !important; -webkit-transform: translateY(0) !important;}
}

@media (max-width: 1110px) and (min-width: 768px){
    .fix-btn a{/*width: 110px;*/width: 10vw;}
}

@media (max-width: 767px){
    .fix-btn{bottom: 0; right: 0; top: auto; width: 100%; border-top: 1px solid #d8dde3; background: #fff;}
    .fix-btn a{width: 33.33333%; height: 60px; font-size: 1.2rem;}
    .fix-btn a:before{margin: 0 auto 5px; max-height: 22px; margin: 0 auto 5px; max-width: 50%; background-size: contain !important;}
    .fix-btn a:nth-child(3):before,
    .fix-btn a:nth-child(4):before{margin: 0 auto 2px;}
    .fix-btn .btn-list span{width: 20px; height: 20px; font-size: 1rem; top: 3px; right: calc(50% - 25px);}
    
    .fix-btn .btn-inquiry:before{height: 17px; margin: 0 auto 6px;}
}

@media (max-width: 480px){
    .fix-btn a{font-size: 3vw; line-height: 1.1em;}
}

/* Menu */
.menu{background: #161616; color: #fff; font-weight: 500; position: fixed; top: 80px; right: 0; bottom: 0; width: 560px; overflow: auto; z-index: 1002; transform: translateX(100%); -webkit-transform: translateX(100%); transition: transform .5s;}
.menu.is-open{transform: translateX(0); -webkit-transform: translateX(0);}
.menu-wrap{padding: 80px;}
.menu01{display: flex; flex-wrap: wrap; padding-bottom: 30px;}
.menu01 li{width: 49%; margin-bottom: 2%;}
.menu01 li:nth-of-type(2n+1){margin-right: 2%;}
.menu01 li.is-full{width: 100%; margin-right: 0;}
.menu01 a{border: 1px solid #fff; display: block; line-height: 1; height: 60px; display: flex; justify-content: center; align-items: center; text-align: center; transition: .3s;}
.menu01 a:hover{background: #fff; color: #161616;}

.menu02{display: flex; justify-content: space-between; max-width: 370px; margin: 0 auto 25px;}
.menu02 a{font-size: 1.3rem;}
.menu02 a:before{content: ''; border: solid #fff; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-right: 6px; position: relative; top: -1px;}
.menu02 a:hover{text-decoration: underline;}

.menu03{max-width: 370px; margin: 0 auto;}
.menu03 a{font-size: 1.3rem;}
.menu03 a:before{content: ''; width: 13px; height: 13px; background: url("../img/common/ic_open.svg") no-repeat top left/100% 100%; margin: 0 8px 0 0; position: relative; top: 1px; display: inline-block;}
.menu03 a:hover{text-decoration: underline;}

.menu-bnr{margin: 0 0 20px;}
.menu-bnr a:hover{opacity: .8;}

@media (max-width: 767px){
    .menu{top: 70px; width: 100%;}
    .menu-wrap{padding: 40px 20px; max-width: 440px; margin: 0 auto;}
    .menu01{padding-bottom: 20px;}
    .menu01 a{height: 50px;}
    .menu01 li.exlink a:before{width: 13px; height: 13px;}
    
    .menu02{max-width: 320px; margin: 0 auto 15px;}
    .menu02 a{font-size: 1.1rem;}
    
    .menu03{max-width: 320px;}
    .menu03 a{font-size: 1.1rem;}
    .menu03 a:before{width: 11px; height: 11px;}
}

/* Floating List*/
.floatList{background: #fff; position: fixed; bottom: 80px; z-index: 700; line-height: 1.5; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);}
.floatList span{font-size: 2.6rem; line-height: 0.8; color: #dc3333; font-weight: bold; font-family: 'Lato', sans-serif; position: relative; top: 1px;}
.floatList a{width: 220px; height: 46px; color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 5px; transition: .4s;}
.floatList a:before{content: ''; margin-right: 12px; position: relative; top: 1px;}

.floatList a.btn-inquiry{background: #a59466;}
.floatList a.btn-inquiry:before{width: 19px; height: 15px; background: url("../img/common/ic_mail.svg") no-repeat center center/100% auto;}
.floatList a.btn-inquiry:hover{background: #cab47a;}

.floatList a.btn-search{background: #1a3558;}
.floatList a.btn-search:before{width: 15px; height: 15px; background: url("../img/common/ic_search.svg") no-repeat center center/100% auto;}
.floatList a.btn-search:hover{background: #336bb3;}

.floatList{transition: transform 1s ease;}
.floatList.is-show{transform: translateX(0); -webkit-transform: translateX(0);}

@media (min-width: 768px){
    .floatList{width: 360px; height: 86px; padding: 0 20px; right: 0; display: flex; justify-content: space-between; align-items: center; border-radius: 5px 0 0 5px; transform: translateX(110%); -webkit-transform: translateX(110%);}
    .floatList li:nth-of-type(2){margin-top: 3px;}
}

@media (max-width: 767px){
    .floatList{font-size: 1.2rem; left: 0; width: 185px; padding: 8px 12px 12px; border-radius: 0 5px 5px 0;
    transform: translateX(-110%); -webkit-transform: translateX(-110%);}
    .floatList ul{display: flex; justify-content: space-between; margin: 0 0 5px;}
    .floatList li:nth-of-type(2){font-size: 1.4rem;}
    .floatList span{font-size: 2.2rem;}
    .floatList a{width: 100%; height: 30px; padding-bottom: 3px;}
    .floatList a:before{margin-right: 9px;}
    .floatList a.btn-inquiry:before{width: 15px; height: 11px;}
    .floatList a.btn-search:before{width: 11px; height: 11px;}
}

/* floating Real Estate */
.floatRex{background: #fff; position: fixed; z-index: 700; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3); text-align: center; line-height: 1.5;}
.floatRex p{padding: 0 0 5px;}
.floatRex a{width: 100%; height: 50px; color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 5px; transition: .4s; margin-top: 6px;}

.floatRex .btn-inquiry{background: #a59466;}
.floatRex .btn-inquiry:hover{background: #cab47a;}
.floatRex .btn-inquiry:before{content: ''; width: 18px; height: 14px; margin-right: 9px; background: url("../img/common/ic_mail.svg") no-repeat center left/100% auto;}

.floatRex .btn-add{background: #1a3558;}
.floatRex .btn-add:hover{background: #336bb3;}
.floatRex .btn-add:before{content: ''; width: 14px; height: 16px; margin-right: 11px; background: url("../img/common/ic_bookmark.svg") no-repeat center left/100% auto;}

.floatRex .btn-delete{background: #737373;}
.floatRex .btn-delete:hover{background: #555;}
.floatRex .btn-delete:before{content: ''; width: 14px; height: 16px; margin-right: 11px; background: url("../img/common/ic_bookmark.svg") no-repeat center left/100% auto;}

@media (min-width: 768px){
    .floatRex{width: 300px; bottom: 80px; padding: 17px 20px 20px; right: 0; border-radius: 5px 0 0 5px;
     transform: translateX(110%); -webkit-transform: translateX(110%); transition: transform 1s ease;}
    .floatRex.is-show{transform: translateX(0); -webkit-transform: translateX(0);}
}

@media (max-width: 767px){
    .floatRex{left: 0; bottom: 60px; width: 100%; padding: 8px 12px 12px; font-size: 1.2rem;
    transform: translateY(100%); -webkit-transform: translateY(100%); opacity: 0; transition: all 1s ease;}
    .floatRex.is-show{transform: translateY(0); -webkit-transform: translateY(0); opacity: 1;}
    
    .floatRex p{margin: 0 -12px; padding: 0;}
    .floatRex ul{display: flex; justify-content: space-between;}
    .floatRex li{width: 48%;}
    .floatRex a{height: 34px;}
    .floatRex .btn-inquiry:before{width: 16px; height: 12px; margin-right: 5px; position: relative; top: 2px;}
    .floatRex .btn-add:before{width: 13px; height: 15px; margin-right: 7px;}
    .floatRex .btn-delete:before{width: 13px; height: 15px; margin-right: 7px;}
}

/* Main */
.main{overflow: hidden;}
.m-tit{font-size: 3rem; line-height: 1.5em; letter-spacing: 0.05em;}
.m-tit.is-line{padding-left: 20px; position: relative;}
.m-tit.is-line:before{content: ''; position: absolute; top: 0.3em; bottom: 0.2em; left: 0; width: 4px; background: #1a3558;}

.m-tit2{font-size: 2.4rem; line-height: 1.8; color: #1a3558;}
.m-tit3{font-size: 1.8rem; line-height: 1.8;}

.anchorlink{position: relative;}
.anchorlink > div{position: absolute; top: -120px; left: 0;}

.flickSp{display: none;}

@media (max-width: 767px){
    .m-tit{font-size: 2.4rem; letter-spacing: 0;}
    .m-tit2{font-size: 2rem;}
    .m-tit3{font-size: 1.6rem;}
    
    .anchorlink > div{top: -90px;}
    
    .flickSp{width: 70%; margin: 20px auto 0; display: block; background: url("../img/common/icon_flick.png") no-repeat center center/100% auto;}
    .flickSp:after{content: ''; padding-bottom: 13.6%; display: block;}
}

/* Breadcrumb */
.breadcrumb{background: #f1f4f7; display: flex; flex-wrap: wrap; padding: 16px 30px; font-size: 1.2rem; letter-spacing: 0.1em;}
.breadcrumb li:before{content: ''; border: solid #1a3558; border-width: 0 1px 1px 0; display: inline-block; padding: 2px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-right: 6px; position: relative; top: -2px;}
.breadcrumb li:not(:last-of-type){margin-right: 30px;}
.breadcrumb a:hover{color: #1a3558; text-decoration: underline;}

@media (max-width: 767px){
    .breadcrumb{padding: 12px 14px;}
}

/* Page Title */
.bgPageTit{ background: #f1f4f7 url(../img/common/bg_pagetit.jpg) no-repeat 50% / cover;}
.bgPageTit .breadcrumb{ background: none;}
.page-tit{ display: flex; justify-content: center; align-items: center; height: 225px; margin-bottom: 60px;}
.page-tit h2{font-size: 3.6rem; line-height: 1.2; text-align: center; letter-spacing: 0.1em;color: #1a3558;}
.page-tit h2 span{font-size: 1.4rem; line-height: 1; letter-spacing: 0.05em; color: #1a3558; font-family: 'Lato', sans-serif; display: block; margin-top: 15px;color: #161616;}

@media (max-width: 767px){
    .bgPageTit{ background: #f1f4f7 url(../img/common/bg_pagetit_sp.jpg) no-repeat 50% / cover;}
    .page-tit{ height: 125px;margin-bottom: 50px; padding-bottom: 46px;}
    .page-tit h2{font-size: 3rem;}
}

/* Paging */
.paging{border-top: 1px solid #1a3558; border-bottom: 1px solid #1a3558; padding: 20px 0; display: flex; justify-content: center; flex-wrap: wrap; margin-top: 60px;}
.paging a{width: 43px; height: 43px; border-radius: 100%; display: flex; justify-content: center; align-items: center; color: #1a3558; margin: 0 4px; border: 1px solid #fff; font-size: 1.6rem; font-weight: bold; font-family: 'Barlow', sans-serif; transition: .4s;}
.paging a:hover,
.paging a.is-active{background: #1a3558; color: #fff; border: 1px solid #1a3558;}
.paging a.is-next{border: 1px solid #1a3558; text-indent: -9999px;}
.paging a.is-next:after{content: ''; border: solid #1a3558; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-right: 4px;}
.paging a.is-next:hover:after{border: solid #fff; border-width: 0 2px 2px 0;}
.paging a.is-prev{border: 1px solid #1a3558; text-indent: -9999px;}
.paging a.is-prev:after{content: ''; border: solid #1a3558; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(-225deg); -webkit-transform: rotate(-225deg); margin-right: 0px;}
.paging a.is-prev:hover:after{border: solid #fff; border-width: 0 2px 2px 0;}

@media (max-width: 767px){
    .paging{margin-top: 40px; padding: 15px 0;}
    .paging a{width: 37px; height: 37px;}
}

/* Btn Back */
.btn-back{max-width: 300px; margin: 60px auto 0;}
.btn-back a{width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 5px; border: 1px solid #161616; letter-spacing: 0.1em; transition: .4s;}
.btn-back a:before{content: ''; width: 18px; height: 180px; background: url("../img/common/ic_arrow_black.svg") no-repeat top left/100% 100%; transform: rotateY(-180deg); margin-right: 8px; position: relative; top: 1px;}
.btn-back a:hover{background: #dfe4ea;}

@media (max-width: 767px){
    .btn-back{margin: 40px auto 0;}
    .btn-back a{height: 50px;}
}

/* Form */
.checkbox label{position: relative; cursor: pointer; background: #e8edf2; padding: 10px 10px 10px 36px; line-height: 1; display: block; height: 100%;}
.checkbox small{font-size: 1.2rem;}
.checkbox input{position: absolute; top: 10px; left: 10px; opacity: 0;}
.checkbox span{position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; border: 1px solid #bdbdbd; background: #fff;}
.checkbox span:after{content: ''; position: absolute; top: 2px; left: 6px; width: 3px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg); -webkit-transform: rotate(45deg); display: none;}
.checkbox input:checked ~ span{background: #1a3558;}
.checkbox input:checked ~ span:after{display: block;}

.checkbox2{position: relative; cursor: pointer; line-height: 1; display: block; width: 18px; height: 18px; margin: 0 auto;}
.checkbox2 input{position: absolute; top: 0; left: 0; opacity: 0;}
.checkbox2 span{position: absolute; top: 0; left: 0; width: 18px; height: 18px; border: 1px solid #bdbdbd; background: #fff;}
.checkbox2 span:after{content: ''; position: absolute; top: 2px; left: 6px; width: 3px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg); -webkit-transform: rotate(45deg); display: none;}
.checkbox2 input:checked ~ span{background: #1a3558;}
.checkbox2 input:checked ~ span:after{display: block;}

/* Pagetop */
#pagetop{text-align: center; position: fixed; bottom: 20px; right: 20px; font-size: 1.4rem; line-height: 1; letter-spacing: 0.05em; padding-top: 18px; z-index: 800; cursor: pointer; display: none;}
#pagetop i{content: ''; border: solid #1a3558; border-width: 0 3px 3px 0; display: inline-block; padding: 6px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); position: absolute; top: 0; left: 50%; margin-left: -6px;}
#pagetop:hover{color: #1a3558;}

@media (max-width: 767px){
    #pagetop{font-size: 1.2rem; bottom: 80px;}
}

/* Footer */
.f-top{background: #e8edf2; padding: 60px 0 40px 60px; position: relative;}
.f-nav.only-pc{width: 550px; display: flex; justify-content: space-between; position: absolute; top: 60px; right: 50%; margin-right: -275px; font-weight: 500;}
.f-nav a:hover{color: #1a3558;}
.f-nav li{margin-bottom: 5px;}

.f-logo{margin: 0 0 14px; font-size: 2.4rem; line-height: 1; font-weight: bold;}
.f-link{display: flex; font-size: 1.2rem;}
.f-link li:nth-of-type(1){margin-right: 30px;}
.f-link a:before{content: ''; border: solid #161616; border-width: 0 1px 1px 0; display: inline-block; padding: 2px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-right: 5px; position: relative; top: -2px;}
.f-link a:hover{color: #1a3558;}

.f-exlink{font-size: 1.2rem; margin: 10px 0 0 0;}
.f-exlink a:before{content: ''; width: 10px; height: 10px; background: url("../img/common/ic_open_black.svg") no-repeat top left/100% 100%; margin: 0 5px 0 0; position: relative; top: 1px; display: inline-block;}
.f-exlink a:hover{color: #1a3558;}

.copyright{font-size: 1rem; line-height: 1; color: #1a3558; font-family: 'Lato', sans-serif; margin: 40px 0 0 0; letter-spacing: 0.1em;}

@media (max-width: 1500px){
    .f-top{padding: 30px 0 30px 20px;}
    .f-nav.only-pc{top: 30px; right: 20px; margin-right: 0;}
}

@media (max-width: 1199px){
    .f-nav.only-pc{width: 360px; font-size: 1.4rem;}
}

@media (max-width: 767px){
    .f-top{padding: 30px 20px;}
    .f-nav.only-pc{display: none !important;}
    .f-nav{padding: 0 0 30px; font-size: 1.4rem;}
    .f-nav ul{width: 100%; display: flex; flex-wrap: wrap;}
    .f-nav li{width: 49%; margin-bottom: 2%;}
    .f-nav li:nth-of-type(2n+1){margin-right: 2%;}    
    .f-nav li.is-full{width: 100%; margin-right: 0;}
    .f-nav a{border: 1px solid #d8dde3; display: block; text-align: center; padding: 3px 0;}    
    
    .f-link,
    .f-exlink{font-size: 1.1rem;}    
    .copyright{text-align: center; letter-spacing: 0; margin: 40px -20px 0;}
}

@media (max-width: 359px){
    .f-link li:nth-of-type(1){margin-right: 10px;}
}

/* Footer Bottom */
@media (min-width: 768px){
    .f-bottom{padding: 35px 0 50px; display: flex; align-items: flex-end; justify-content: center;}
    .f-bottom li:nth-of-type(1){margin-right: 65px;}
}

@media (max-width: 767px){
    .f-bottom{padding: 30px 20px 80px; text-align: center; line-height: 1;}
    .f-bottom li:nth-of-type(1){margin: 0 0 20px;}
    .f-bottom li:nth-of-type(1) img{width: 302px;}
    .f-bottom li:nth-of-type(2) img{width: 162px;}
}

/* Animate */
.inView{}
.fade-in{opacity: 0; transition: opacity 1s ease;}
.fade-in.is-view{opacity: 1;}

.fade-up{opacity: 0; transform: translateY(60px); -webkit-transform: translateY(60px); transition: opacity 1s ease, transform 1s ease;}
.fade-up.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}

.fade-down{opacity: 0; transform: translateY(-60px); -webkit-transform: translateY(-60px); transition: opacity 1s ease, transform 1s ease;}
.fade-down.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}

.fade-left{opacity: 0; transform: translateX(-60px); -webkit-transform: translateX(-60px); transition: opacity 1s ease, transform 1s ease;}
.fade-left.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}

.fade-right{opacity: 0; transform: translateX(60px); -webkit-transform: translateX(60px); transition: opacity 1s ease, transform 1s ease;}
.fade-right.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}

.zoom-in{opacity: 0; overflow: hidden; transform: scale(0.7,0.7); -webkit-transform: scale(0.7,0.7); transition: opacity 1s ease, transform 1s ease;}
.zoom-in.is-view{opacity: 1; transform: scale(1,1); -webkit-transform: scale(1,1);}

.zoom-out{opacity: 0; overflow: hidden; transform: scale(1.3,1.3); -webkit-transform: scale(1.3,1.3); transition: opacity 1s ease, transform 1s ease;}
.zoom-out.is-view{opacity: 1; transform: scale(1,1); -webkit-transform: scale(1,1);}

.roll-left{position: relative; overflow: hidden;}
.roll-left img{opacity: 0; transition: opacity .5s ease .7s;}
.roll-left:after{content: ''; position: absolute; top: 0; bottom: 0; background: #1a3558;}
.roll-left.is-view img{opacity: 1;}
.roll-left.is-view:after{animation: rollLeft 1s ease;}

@keyframes rollLeft{
    0%{left: 0; right: 100%;}
    50%{left: 0; right: 0;}
    100%{left: 100%; right: 0;}
}

@media (min-width: 768px){
    .delay1{transition-delay: .2s;}
    .delay2{transition-delay: .4s;}
    .delay3{transition-delay: .6s;}
    .delay4{transition-delay: .8s;}
}