@charset "UTF-8";
/**====================================
 * CSS information
 * file name	: sp.css
 * author		: libretto works
====================================**/
@media screen and (max-width: 767px) {
    /* body
	-------------------------------------------------- */
    html {
        font-size: 62.5%;
    }
    body {
        font-size: 1.5em;
        line-height: 1.75;
        letter-spacing: 0.06em;
        min-width: inherit;
    }
    
    
    /* Responsive
	-------------------------------------------------- */
    .pc {
        display: none;
    }
    .sp {
        display: inline;
    }
	
	
    /*/////////////////////////////////////////////////////////////////////////////


              // loading //
	  

    /////////////////////////////////////////////////////////////////////////////*/
    .loader-logo {
        width: 160px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // layout //
	  

    /////////////////////////////////////////////////////////////////////////////*/
    
    /* container
	-------------------------------------------------- */
    
    /* section
	-------------------------------------------------- */
	.section-wrap {
        padding-right: 5.3333%;
        padding-left: 5.3333%;
    }
    .section-low-wrap {
        width: 100%;
        box-sizing: border-box;
    }
    .section-low-inner {
        margin-top: 24px;
    }
    .contents-inner {
        padding-bottom: 80px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // header //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
    /* header
	-------------------------------------------------- */
    .header-logo {
        width: 106px;
        height: 110px;
        padding: 16px 16px 0;
    }
    
    /* header-inner
	-------------------------------------------------- */
    .header-inner {
        display: none;
    }
    
    /* menu-trigger
    -------------------------------------------------- */
    .menu-trigger {
        width: 46px;
        height: 46px;
        right: 3.2%;
        top: 15px;
    }
    .menu-trigger span {
        top: 21px;
    }
    .menu-trigger span:nth-of-type(1) {
        left: 12px;
    }
    .menu-trigger span:nth-of-type(2) {
        left: 21px;
    }
    .menu-trigger span:nth-of-type(3) {
        right: 12px;
    }
    .open .menu-trigger span {
        width: 22px;
        top: 22px;
    }
    .open .menu-trigger span:nth-of-type(1) {
        left: 12px;
    }
    .open .menu-trigger span:nth-of-type(3) {
        right: 12px;
    }
    
    /* fixed nav
	-------------------------------------------------- */
    .fixed-inner {
        width: 80%;
        margin-left: 20%;
    }
    .fixed-nav nav {
        width: 100%;
        box-sizing: border-box;
        padding: 90px 10% 160px;
        position: static;
        transform: none;
    }
    .fixed-nav .m-nav {
        display: block;
    }
    .fixed-nav .m-nav > li {
        width: 100%;
        font-size: 1.2rem;
        margin: 0 0 14px;
    }
    .fixed-nav .m-nav > li a {
        line-height: 1.35;
    }
    .fixed-nav .m-nav > li a ._en {
        font-size: 3.2rem;
    }
    .fixed-nav .m-nav-sub {
        display: block;
        padding: 2px 0 6px;
    }
    .fixed-nav .m-nav-sub > li {
        margin-right: 0;
        padding: 2px 0 4px;
    }
    .fixed-nav .m-nav-sub > li a {
        font-size: 1.4rem;
    }
    .m-nav-btm {
        padding-top: 20px;
        margin-top: 35px;
        font-size: 1.3rem;
    }
    
    .m-nav-sns li a {
        width: 36px;
        height: 36px;
        padding: 8px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // footer //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .footer {
        padding: 60px 0 40px;
    }
    .footer .section-wrap {
        padding-left: 5.3333%;
        padding-right: 5.3333%;
    }
    
    /* ft-contact
    -------------------------------------------------- */
    .ft-contact {
        display: block;
    }
    .ft-contact-ttl {
        width: 100%;
        margin-bottom: 20px;
    }
    .ft-contact-ttl .txt {
        font-size: 1.4rem;
        margin-top: 10px;
    }
    .ft-contact-list {
        width: 100%;
    }
    .ft-contact-list li {
        width: 49%;
    }
    .ft-contact-list li a {
        height: 160px;
        padding: 0 10px;
    }
    .ft-contact-list li a .icon {
        width: 26px;
        padding: 32px 0 15px;
    }
    .ft-contact-list li a .tel {
        font-size: 1.7rem;
    }
    .ft-contact-list li a .txt {
        font-size: 1.1rem;
        line-height: 1.5;
    }
    .ft-contact-list li a .ttl {
        padding-top: 6px;
    }
    
    /* ft-nav
    -------------------------------------------------- */
    .ft-nav {
        margin-top: 40px;
        padding: 22px 0;
    }
    .ft-nav ul {
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .ft-nav li {
        width: 48%;
        margin: 6px 0;
    }
    .ft-nav li a {
        display: block;
        padding: 0 0 0 8px;
    }
    
    /* footer-inner
    -------------------------------------------------- */
    .footer-inner {
        display: block;
        margin-top: 40px;
        position: relative;
    }
    /* ---- ft-sns ---- */
    .ft-sns {
        position: static;
        width: 24px;
        margin: 0 auto 24px;
    }
    
    /* ---- ft-info ---- */
    .ft-info {
        width: 100%;
        display: block;
        margin-bottom: 30px;
    }
    .ft-info-logo {
        width: 140px;
        padding-bottom: 24px;
        margin: 0 auto;
    }
    .ft-info dl {
        font-size: 1.3rem;
        text-align: center;
    }
    .ft-info dl dd p {
        margin-top: 6px;
    }
    .ft-info dl dd p:last-child {
        margin-top: 6px;
    }
    
    /* ---- ft-btm ---- */
    .ft-btm {
        text-align: center;
        font-size: 1.3rem;
    }
    .ft-btm .copyright {
        font-size: 1.0rem;
        margin-top: 20px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // common parts //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
    /* ===============================================
        breadcrumb
	=============================================== */
    .breadcrumb {
        padding: 0 2.8% 15px;
    }
    .breadcrumb li {
        font-size: 1.0rem;
        background-size: 4px auto;
        padding: 0 12px 1px;
        margin-right: 8px;
    }
    .breadcrumb li:last-child {
        padding: 0 8px 1px;
    }
    
	/* ===============================================
        title
	=============================================== */
	
	/* page-ttl
	-------------------------------------------------- */
    .page-ttl {
        padding: 90px 0 40px;
    }
    .page-ttl-inner {
        padding: 0 5.3333%;
    }
    .page-ttl-inner._flex {
        display: block;
        padding: 0 0 0 5.3333%;
    }
    .page-ttl-cont {
        padding: 28px 0 20px;
        box-sizing: border-box;
    }
    .page-ttl-cont._half {
        width: 100%;
        padding-top: 30px;
    }
    .page-ttl._top .page-ttl-cont {
        padding-top: 36px;
    }
    .page-ttl-cont .ttl {
        font-size: 1.6rem;
        padding-left: 23px;
        position: relative;
        margin: 0 0 8px 2px;
    }
    .page-ttl-cont .ttl::before {
        width: 14px;
        height: 14px;
        top: 51%;
    }
    .page-ttl-cont .enttl {
        font-size: 4.5rem;
    }
    .page-ttl-cont .jattl {
        font-size: 3.4rem;
    }
    .page-ttl-cont .newsttl {
        font-size: 3.0rem;
        margin: 10px 0 0;
    }
    .page-ttl-cont-inner {
        margin: 36px 0 28px;
    }
    .page-ttl-cont-inner .heading {
        font-size: 2.3rem;
        margin: -10px 0 12px;
    }
    .page-ttl-inner .thumb {
        width: 100%;
        margin-top: 8px;
    }
    .page-ttl-inner .thumb::after {
        padding-top: 75%;
    }
    
    /* page-ttl-fig
    -------------------------------------------------- */
    .page-ttl._fig {
        padding: 130px 0 50px;
    }
    .page-ttl._top {
        padding-bottom: 60px;
    }
    .page-ttl._sub {
        padding-bottom: 60px;
    }
    .page-ttl._pb-10 {
        padding-bottom: 10px;
    }
    .page-ttl._article {
        padding-bottom: 30px;
    }
    .page-ttl-cont-fig {
        margin: 80px 0 0;
    }
    .page-ttl-cont-fig .heading {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }
    .page-ttl-cont-fig .txt {
        line-height: 2;
    }
    
    /* page-ttl-col2
    -------------------------------------------------- */
    .page-ttl-col2 {
        display: block;
        padding: 16px 5.3333% 0 0;
        overflow: hidden;
    }
    .page-ttl-col2::before {
        content: "";
        width: 100%;
        height: 75%;
        background: #f5f5f5;
        position: absolute;
        left: 0;
        bottom: -1px;
    }
    .page-ttl-col2 .txt-slider {
        position: absolute;
        left: 0;
        bottom: 0px;
    }
    .page-ttl-col2-fig {
        width: 100%;
        min-height: inherit;
    }
    .page-ttl-col2-fig::after {
        padding-top: 75%;
    }
    .page-ttl-col2-block {
        width: 100%;
        padding: 28px 0 0 18%;
        box-sizing: border-box;
    }
    .page-ttl-col2-block .vertical-ttl {
        right: inherit;
        left: 4%;
        top: 35px;
    }
    .page-ttl-col2-block .thumb {
        margin: 35px -5.3333vw 0 48%;
    }
    .page-ttl-col2-block .thumb::after {
        padding-top: 78%;
    }
    
    /* page-ttl-anchor
    -------------------------------------------------- */
    .page-ttl-anchor {
        padding: 40px 0 30px;
    }
    .page-ttl-anchor .anchor-link {
        justify-content: space-between;
    }
    .page-ttl-anchor .anchor-link li {
        width: 46.5%;
        margin-right: 0;
    }
    
    /* anchor-link
    -------------------------------------------------- */
    .anchor-link {
        width: 100%;
        min-width: inherit;
    }
    .anchor-link li {
        width: 47%;
    }
    .anchor-link li a {
        font-size: 1.4rem;
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="11" height="8" viewBox="0 0 11 8"><path fill-rule="evenodd"  stroke="rgb(235, 96, 26)" stroke-width="1.5px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M10.4.5l-4.9,6.3L.6.5"/></svg>') right 4px center no-repeat;
        background-size: 9px auto;
        padding: 20px 20px 20px 0;
        margin-bottom: 10px;
        letter-spacing: 0.02em;
    }
    .anchor-link li a::after {
        width: 16px;
    }
    
    /* page-subnav
    -------------------------------------------------- */
    .page-subnav {
        padding: 0 4%;
    }
    .page-subnav-inner {
        padding: 20px 0 0;
        border-bottom: none;
        flex-wrap: wrap;
    }
    .page-subnav-list {
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .page-subnav-list li {
        width: 48.5%;
        margin-right: 0;
        border-bottom: 1px solid rgba(83, 89, 93, 0.40);
    }
    .page-subnav-list li a {
        display: block;
        padding: 16px 0 16px 34px;
        font-size: 1.5rem;
    }
    .page-subnav-list li a::before,
    .page-subnav-list li a::after {
        width: 24px;
        height: 24px;
    }
    .page-subnav-list li a::after {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="36" height="36" viewBox="0 0 36 36"><path fill="rgb(235, 96, 26)" d="M15.4,23.3c-.2,0-.4,0-.6-.3-.3-.3-.2-.8.1-1.1l4.9-3.9-4.9-3.9c-.3-.3-.4-.7-.1-1.1.3-.3.7-.4,1.1-.1l5.6,4.5c.2.1.3.4.3.6s-.1.4-.3.6l-5.6,4.5c-.1.1-.3.2-.5.2Z"/></svg>') center center no-repeat;
        background-size: 24px auto;
    }
    .page-subnav-list li.ac a::after {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="36" height="36" viewBox="0 0 36 36"><path fill="rgb(255, 255, 255)" d="M15.4,23.3c-.2,0-.4,0-.6-.3-.3-.3-.2-.8.1-1.1l4.9-3.9-4.9-3.9c-.3-.3-.4-.7-.1-1.1.3-.3.7-.4,1.1-.1l5.6,4.5c.2.1.3.4.3.6s-.1.4-.3.6l-5.6,4.5c-.1.1-.3.2-.5.2Z"/></svg>') center center no-repeat;
        background-size: 24px auto;
    }
    .page-subnav .btn {
        margin-left: auto;
    }
    
    
    /* subpage-ttl
	-------------------------------------------------- */
    
    /* detail-ttl 
    -------------------------------------------------- */
    
    /* t-sec-ttl
	-------------------------------------------------- */
    
    /* sec-ttl
	-------------------------------------------------- */
    .sec-ttl {
        font-size: 1.5rem;
        padding-left: 20px;
        padding-right: 6px;
    }
    .sec-ttl::before {
        width: 10px;
        height: 10px;
        top: 51%;
    }
    .sec-ttl-wrap {
        padding-top: 12px;
    }
    .sec-en-ttl {
        font-size: 3.8rem;
        margin-top: 20px;
    }
    .sec-en-ttl._mt-0 {
        margin-top: 0px;
    }
    .sec-en-ttl._mt-15 {
        margin-top: 15px;
    }
    .sec-en-ttl._large {
        font-size: 3.8rem;
        margin: 6px 0 10px;
    }
    .footer .sec-en-ttl {
        font-size: 3.6rem;
        margin-top: 6px;
    }
    .sec-ttl-col2 {
        display: block;
    }
    .sec-ttl-col2 .sec-en-ttl {
        width: 100%;
    }
    .sec-ttl-col2 .txt-wrap {
        width: 100%;
        margin-top: 12px;
    }
    .sec-ttl-wrap .sec-ttl-col2 .sec-en-ttl {
        width: 100%;
    }
    .sec-ttl-wrap .sec-ttl-col2 .txt-wrap {
        width: 100%;
        margin-top: 12px;
    }
    .t-sec-service .sec-ttl-col2 {
        margin-top: 30px;
    }
    .t-sec-service .sec-ttl-col2 .txt-wrap {
        margin-top: 12px;
    }
    
    /* numb-ttl
    -------------------------------------------------- */
    .numb-ttl {
        font-size: 1.4rem;
    }
    .numbbox {
        width: 50px;
        font-size: 1.4rem;
        margin-right: 16px;
    }
    .numb-ttl .numbbox + span {
        display: block;
        font-size: 1.2rem;
        line-height: 1.4;
        margin-top: 4px;
    }
    /* bd-ttl
    -------------------------------------------------- */
    .bd-ttl {
        font-size: 1.3rem;
        padding: 12px 0 0;
    }
    
    /* article-ttl
    -------------------------------------------------- */
    .article-ttl {
        font-size: 2.6rem;
    }
    
    /* cont-ttl
    -------------------------------------------------- */
    .cont-ttl {
        font-size: 1.8rem;
        margin-bottom: 4px;
    }
    
    /* ===============================================
	    btn
	=============================================== */
    
    /* btn
	-------------------------------------------------- */
    .btn {
        margin-top: 30px;
    }
    .btn._plus {
        margin-top: 24px;
    }
    .btn a,
    .btn .inner {
        width: 250px;
        font-size: 1.5rem;
        line-height: 54px;
        padding: 0 20px;
    }
    .btn a::before,
    .btn a::after {
        width: 32px;
        height: 32px;
        right: 10px;
    }
    .btn._reverse {
        margin-top: 0;
    }
    .btn._reverse a {
        width: 190px;
        font-size: 1.4rem;
        line-height: 44px;
        text-align: right;
    }
    .btn._reverse a::before,
    .btn._reverse a::after {
        width: 28px;
        height: 28px;
        right: inherit;
        left: 10px;
        transform: translateY(-50%) rotate(180deg);
    }
    .btn._plus ._arrow {
        width: 32px;
        height: 32px;
        right: 10px;
    }
    .btn._plus ._arrow::before,
    .btn._plus ._arrow::after {
        width: 12px;
        left: 10px;
        top: 15px;
    }
    
	/* btn-txt
	-------------------------------------------------- */
    .btn-txt a,
    .btn-txt span {
        padding: 0 72spx 0 0;
        margin-top: 32px;
        font-size: 1.4rem;
    }
    .btn-txt a::before, .btn-txt a::after,
    .btn-txt span::before, .btn-txt span::after {
        width: 55px;
        height: 55px;
    }
    .btn-txt a::after,
    .btn-txt span::after {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="36" height="36" viewBox="0 0 36 36"><path fill="rgb(255, 255, 255)" d="M15.4,23.3c-.2,0-.4,0-.6-.3-.3-.3-.2-.8.1-1.1l4.9-3.9-4.9-3.9c-.3-.3-.4-.7-.1-1.1.3-.3.7-.4,1.1-.1l5.6,4.5c.2.1.3.4.3.6s-.1.4-.3.6l-5.6,4.5c-.1.1-.3.2-.5.2Z"/></svg>') center center no-repeat;
        background-size: 32px auto;
    }

    
	/* arrow
	-------------------------------------------------- */
	.arrow,
    .arrow::before,
    .arrow::after {
	    width: 55px;
	    height: 55px;
	}
    .arrow {
        position: relative;
        transform: none;
        margin-top: 25px;
    }
	.arrow::after {
	    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="36" height="36" viewBox="0 0 36 36"><path fill="rgb(255, 255, 255)" d="M15.4,23.3c-.2,0-.4,0-.6-.3-.3-.3-.2-.8.1-1.1l4.9-3.9-4.9-3.9c-.3-.3-.4-.7-.1-1.1.3-.3.7-.4,1.1-.1l5.6,4.5c.2.1.3.4.3.6s-.1.4-.3.6l-5.6,4.5c-.1.1-.3.2-.5.2Z"/></svg>') center center no-repeat;
	    background-size: 32px auto;
	}
	
	
    /* ===============================================
        contents-col2
	=============================================== */
    .content-col2 {
        display: block;
    }
    .content-col2-side {
        width: 100%;
    }
    .content-col2-side-ttl {
        font-size: 2.4rem;
        line-height: 1.5;
    }
    .content-col2-side .sec-lead {
        padding: 12px 0 0 0;
    }
    .content-col2-side .sec-lead._pt-0 {
        padding-top: 0;
    }
    .content-col2-main {
        width: 100%;
    }
    
    /* ===============================================
	    pagelink
	=============================================== */
    .pagelink {
        margin-top: 60px;
    }
    .pagelink a {
        padding: 50px 0 65px;
    }
    .pagelink-inner {
        padding-top: 35px;
    }
    .pagelink-inner .sec-en-ttl {
        font-size: 4.4rem;
        margin: 12px 0;
    }
    
    /* ===============================================
        parallax
	=============================================== */
    .parallax-img.thumb img {
        width: 100%;
        height: 125%;
    }
    
    /* ===============================================
        table
	=============================================== */
    dl.table {
        font-size: 1.4rem;
    }
    dl.table dt {
        padding: 26px 0;
    }
    dl.table dd {
        width: 73%;
        padding: 26px 0 6px 7%;
    }
    
	/* ===============================================
        list-disc 
	=============================================== */
	.list-note li {
	    font-size: 1.3rem;
	}
    
    /*/////////////////////////////////////////////////////////////////////////////


              // Slider //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    
    /* Arrows */
    .slick-prev,
    .slick-next {
        position: absolute;
        top: -70px;
        width: 45px;
        height: 45px;
        background-size: 32px auto;
    }
    .slick-prev {
        margin-right: 55px;
        transform: rotate(180deg);
    }
    .interview-slider .slick-prev,
    .interview-slider .slick-next { 
        bottom: inherit;
        top: 50%;
        left: -15px;
        transform: translateY(-50%);
    }
    .interview-slider .slick-next {
        margin-left: 0;
        left: inherit;
        right: 5px;
    }
    
}