@charset "utf-8";


/* reset
--------------------------------------------------------------*/
*,*::before,*::after { box-sizing: border-box; }
ul,ol { margin: 0; padding: 0; list-style: none; }
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd { margin: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; vertical-align:top;}
input,button,textarea,select { font: inherit; }
header,footer,main,aside { display: block; }
@media print {
body { width:1100px; -webkit-transform: scale(.8); transform: scale(.8); transform-origin: 0 0; }
}

/* for IE */
img[src$=".svg"] { width: 100%; }
select::-ms-expand { display: none; }
.js-ofi { object-fit: cover; font-family: 'object-fit: cover;'; width: 100%; height: 100%; object-position: center center; }


/* iOS Safari */
body {-webkit-tap-highlight-color: transparent;}
input, textarea { -webkit-appearance: none;}
input[type="submit"],input[type="button"] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer;}
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration { display: none;}
input[type="submit"]:focus,input[type="button"]:focus { outline-offset: -2px;}
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: transparent;}
button, input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none;}


/* base set
--------------------------------------------------------------*/
html { font-size:calc(100vw / 37.5);}
body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5em; -webkit-text-size-adjust:100%; color: var(--cl-font); font-size:1.4rem; font-family: sans-serif; font-weight: 300; word-break: break-word; overflow-x: hidden; font-family: 'M PLUS Rounded 1c',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
a { color: var(--cl-font); outline:none; text-decoration:none; transition: 0.5s; cursor: pointer;}
a:hover { text-decoration:none; opacity: 0.5;}
a:not([class]) { text-decoration-skip-ink: auto; }


@media screen and (min-width: 768px) {
html { font-size:62.5%; }
}

@media screen and (min-width: 1024px) {
a { transition:0.5s; }
a::after { transition:0.5s; }
}

/* root set
--------------------------------------------------------------*/

/* color */
:root {
    --cl-main: #1359A9;
    --cl-bg: #F2F7FD;
    --cl-bg-sub: #FCF8F4;
    --cl-gr: #cccccc;
    --cl-font: #333333;
}

/* font-size */
:root {
    --fs-title-sec: 2.8rem;
    --fs-title-sec-jp: 2.4rem;
    --fs-title-sub: 1.2rem;
    --fs-txt: 1.4rem;
    --fs-txt-min: 1.2rem;
}
@media screen and (min-width: 768px) {
}

/* margin */
:root {
    --base-margin: 1.5rem;
}
@media screen and (min-width: 768px) {
:root {
    --base-margin: 3rem;
    }
}
@media screen and (min-width: 1280px) {

}
@media screen and (min-width: 1600px) {

}

/* width */
:root {
    --base-width: 100%;
    --xlg-width: 100%;
    --lg-width: 100%;
    --mid-width: 100%;
    --min-width: 100%;
    --xs-width: 100%;
}
@media screen and (min-width: 768px) {
:root {
    --base-width: 100rem;
    --xlg-width: 126rem;
    --min-width: 80rem;
    }   
}
@media screen and (min-width: 1024px) {
}


/* utility + component class
--------------------------------------------------------------*/

/* utility */
.u-inner { max-width: var(--base-width); margin: 0 var(--base-margin); padding: 0 var(--harf-margin);}
.u-inner._min { max-width: var(--min-width);}
.u-inner._xlg { max-width: var(--xlg-width);}
@media screen and (min-width: 768px) {
.u-inner { margin: 0 auto; padding: 0 2rem;}
}
@media screen and (min-width: 1024px) {
.u-inner { margin: 0 auto; padding: 0 2rem;}
}

.c-sec { padding: 4rem 0; overflow: hidden;}
.c-sec._bg { background-color: var(--cl-bg);}
.c-sec._bg_sub { background-color: var(--cl-bg-sub);}
@media screen and (min-width: 768px) {
.c-sec { padding: 10rem 0; overflow: unset;}
}

.u-only-pc { display: none;}
@media screen and (min-width: 768px) {
.u-only-pc {display: block;}
.u-only-sp { display: none;}
}
@media screen and (min-width: 1024px) {
.u-only-tb { display: none;}
}

.content-line { border-bottom: 1px solid #ccc; margin: 8rem 0 7rem; width: 100%; display: block;}

/* common
-------------------------------------------------------------------------------------------------------- */
/* header */
.header { width: 90%; max-width: 120rem; margin: 6rem auto 0; align-items: center; z-index: 100; position: relative; display: none;}
.header-inner { display: flex; justify-content: space-between; border-radius: 5rem; background-color: #fff; width: 100%; box-shadow: 0 0 #ccc; box-shadow: 0 0 5px #ccc; padding: 1.5rem 7rem 1.5rem 5rem;}
.hlogo { width: 15%;}
.hnav { width: 85%; display: flex; justify-content: flex-end; align-items: center;}
.hnav .list { width: 98%; display: flex; justify-content: space-between;}
.hnav .list-item { width: calc(100% / 4);}
.hnav .list-item a { border-right: 1px solid #ccc; display: flex; align-items: center; justify-content: center;}
.hnav .list-item:first-child a { border-left: 1px solid #ccc;}
.link-online { margin-left: -5rem;}

@media screen and (min-width: 768px) {  
.header { display: flex;}
}
@media screen and (min-width: 1024px) {
.hnav .list { width: 80%; display: flex; justify-content: space-between;}
}

.spitem { background-color: #fff; height: 6rem;}
.spnav-btn { position: absolute; top: 0; right: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color: var(--cl-base-bl); cursor: pointer; width: 6rem; height: 6rem; outline: none; transition: 0.5s; z-index: 100; cursor: pointer;}
.is-open .spnav-btn { position: fixed;} 
.spnav-btn-line { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 2rem; height: 2px; background-color: #333; transition: 0.3s; overflow: hidden;}
.spnav-btn.close .spnav-btn-line { display: none;}
.spnav-header-close-line { display: none;}
.spnav-btn::before, .spnav-btn::after { content: ""; position: absolute; left: 50%; width: 2rem; height: 2px; background-color: #333; transform: translateX(-50%); transition: 0.3s;}
.spnav-btn::before { top: 2rem;}
.spnav-btn::after { bottom: 2rem;}
.spnav-btn.close::before, .spnav-btn.close::after { content: ""; position: absolute; left: 50%; width: 2rem; height: 2px; background-color: #333; transform: translateX(-50%); transition: 0.3s;}
.spnav-btn.close::before { top: 2.2rem; transform: rotate(45deg) translateX(49%); left: 21%;}
.spnav-btn.close::after { bottom: 2.2rem; transform: rotate(-45deg) translateX(49%); left: 21%;}
.spnav-btn.close .spnav-btn-line { display: none;}
.spnav { opacity: 0; visibility: hidden; transform: scale(0,0,0); background: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 50; background-color: #fff; transition: 0.3s;}
.spnav-wrap { width: 100%; height: calc(100vh - 5rem); overflow-y: scroll;}
.spnav-menu-item { position: relative; border-top: #ddd 1px solid;}
.spnav-menu-item > a, .spnav-menu-item > p { display: flex; align-items: center; height: 5rem; padding: 2rem; background-color: #fff;}
.spnav-menu-item:last-child { border-bottom: 1px solid #ccc;}
.spnav.is-open { opacity: 1; visibility: visible; transform: scale(1,1,1);}
.spnav-header { padding: 1.5rem 5rem 1.5rem 1.8rem; height: 6rem; display: flex; align-items: center; box-shadow: 0 0 8px rgb(0 0 0 / 16%);}
.spnav-wrap { width: 100%; height: calc(100vh - 5rem); overflow-y: scroll;}
@media screen and (min-width: 768px) {  
.spitem { display: none;}
}

/* footer */
.footer { padding: 5rem 0 6rem; background: url(/assets/images/common/deco_footer.png) no-repeat right 3vw bottom; background-size: 50%; background-color: #fff;}
.footer-parts { display: flex; justify-content: space-between; flex-direction: column;}
.fnav { display: flex; flex-wrap: wrap; justify-content: center; margin: 3rem auto; width: 80%;}
.fnav-item { margin: 0 1rem;}
.fcopy { text-align: center; font-size: 1.2rem;}
.flogo { margin-right: 2rem; width: 10rem;}
.finfo { display: flex; align-items: center;}

@media screen and (min-width: 768px) { 
.footer { background-size: auto; padding: 5rem 0 3rem;} 
.footer-parts { flex-direction: row;}
.fnav { flex-wrap: nowrap; justify-content: flex-end;  margin: 0; width: auto;}
.finfo { display: block;}
.flogo { margin-right: 0; margin-bottom: 2rem; width: auto;}
}
@media screen and (min-width: 768px) { 
.fnav-item { margin: 0 2rem;}
}

/* btn */
.c-btn { display: block;}
.c-btn .link { background: var(--cl-main);padding: 1rem; color: #fff; font-size: 1.4rem; display: flex; max-width: 25rem; align-items: center; justify-content: center; border-radius: 2rem; margin: 5rem auto;}
.c-btn .link .btn-icon {width: 0.5rem; height: auto; margin-left: 2rem;}
.c-btn._lg .link { font-size: 1.8rem; max-width: fit-content; max-width: max-content; padding: 1.5rem 3rem; border-radius: 3rem;}
.contact-block .c-btn .link { margin: 5rem auto 0;}
@media screen and (min-width: 768px) { 
.c-btn .link { margin: 5rem auto;}
.contact-block .c-btn .link { margin: 5rem auto;}
}


/* text */
p { line-height: 1.5em;}
.font-bold { font-weight: bold;}
.text-cen { text-align: center;}
.text-r { text-align: right;}
.font-s { font-size: 1.2rem; margin-top: 1.5rem;}
.read { font-size: 1.6rem; line-height: 1.5em;}
@media screen and (min-width: 768px) { 
.read { font-size: 1.6rem; line-height: 2em;}
}

/* title */
.sec-title._lg { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--cl-main); margin-bottom: 3rem;}
.sec-title._lg .title-main { font-size: 4.2rem; font-weight: normal; font-family: 'Walter Turncoat', cursive; line-height: 1.5em;}
.sec-title._lg .title-sub { font-size: 1.4rem; font-weight: normal; color: #333333;}

.sec-title._mid { display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 1.8rem; font-weight: normal; margin: 5rem 0 3.8rem; text-align: center; line-height: 1.5em;}
.sec-title._mid::after { content: ""; display: inline-block; width: 35rem; height: 3.5rem; background: url(/assets/images/common/deco_title_arrow.png) no-repeat center center; margin-top: 1rem; background-size: 60%;}
@media screen and (min-width: 768px) {
.sec-title._lg { margin-bottom: 6rem;}  
.sec-title._mid { font-size: 2.2rem;}
.sec-title._mid::after { background-size: 100%;}
}

.sec-title._min { display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 2.2rem; font-weight: normal; margin: 5rem 0 3.8rem; line-height: 1.5em; text-align: center;}
.sec-title._min::after { content: ""; display: inline-block; width: 11rem; height: 0.6rem; background: url(/assets/images/common/deco_title_line.svg) no-repeat center center; margin-top: 1rem;}

.sec-title._xs { font-size: 1.8rem; font-weight: 700; color: var(--cl-main); margin-top: 0; text-align: center;}
@media screen and (min-width: 768px) {  
.sec-title._xs { text-align: left;}
}

/* list */
.table { border-collapse: collapse;}
.table th, .table td { padding: 1rem 0;}
.table th { font-weight: normal; width: 25%; border-right: 1px solid #ccc; text-align: left;}
.table td { width: 75%; padding-left: 1.5em;}

/* block */
.content-desc { background-color: #fff; padding: 2rem; max-width: 62rem; margin: auto;}


/* contcat */
.sec-contcat { padding: 6rem 0;}
.contcat-txt { text-align: center;}
.contact-block { display: flex; align-items: center; flex-direction: column;}
.contact-tel { border-bottom: 1px solid #ccc;}
.contact-item { width: 100%;}
.contact-tel { text-align: center;}
.contact-tel .txt { font-size: 2rem; margin-top: 2rem;}
.contact-tel .num { font-size: 2.2rem; margin-bottom: 2rem;}

@media screen and (min-width: 768px) {  
.contact-block { flex-direction: row; max-width: 60rem; margin: 0 auto;}
.contact-tel { border-right: 1px solid #ccc; border-bottom: 0;}
.contact-tel .txt { margin-top: 0;}
.contact-tel .num { margin-bottom: 0;}
.contact-item { width: calc(100% / 2);}
}

/* iv-animation
-------------------------------------------------------------------------------------------------------- */
/* .iv- */
.iv-fade { opacity:0; -webkit-transform: translate(0, 0); transform:translate(0, 0); transition: 2s; }
.iv-fade.on { opacity:1; -webkit-transform: translate(0, 0); transform:translate(0, 0); }
.iv-up_fade { opacity:0; -webkit-transform: translate(0, 40px); transform:translate(0, 40px); transition: 1s; }
.iv-up_fade.on { opacity:1; -webkit-transform: translate(0, 0); transform:translate(0, 0); }
.iv-zoomIn_fade { opacity:0; -webkit-transform:scale(0.8, 0.8); transform:scale(0.8, 0.8); transition: 2s; }
.iv-zoomIn_fade.on { opacity:1; -webkit-transform:scale(1, 1); transform:scale(1, 1);  }


.delay-a05 { animation-delay: 0.5s; }
.delay-t1 { transition-delay: 1s; }
.delay-t05 { transition-delay: 0.5s; }

/* slidein
-------------------------------------------------------------------------------------------------------- */
.slidein { opacity: 0; transform: translate(0,0); transition: all 0.8s;}
.slidein.slidein-bottom{ transform: translate(0,100%);}
.slidein.slidein-right{ transform: translate(100%,50%);}
.slidein.scrollin{ transform: translate(0, 0)!important; opacity: 1!important;}



/* anchorgoal
-------------------------------------------------------------------------------------------------------- */
.c-anchorgoal { display: block; position: relative; font-size: 0px; line-height: 0; margin: 0; padding: 0;}
.c-anchorgoal a { display: block; position: absolute; height: 5.5rem; top: -5.5rem;}
@media screen and (min-width: 768px){
.c-anchorgoal a { height: 10rem; top: -10rem;}
}