@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.3em;
        min-width: inherit;
    }
    
    
    /* Responsive
	-------------------------------------------------- */
    .pc {
        display: none;
    }
    .sp {
        display: inline;
    }
    
	.txt-wrap p {
        text-align: justify;
    }
	.txt-wrap._min p {
        font-size: 1.3rem;
        margin-top: 1.2em;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // loading //
	  

    /////////////////////////////////////////////////////////////////////////////*/
    .loader-logo {
        width: 58%;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // layout //
	  

    /////////////////////////////////////////////////////////////////////////////*/
    
    /* container
	-------------------------------------------------- */
    #container {
        padding-left: 0;
    }
    ._viewfull {
        margin-left: 0;
    }
    
    /* section
	-------------------------------------------------- */
	.section-wrap {
        padding-right: 5.3333%;
        padding-left: 5.3333%;
    }
    ._viewfull .section-wrap {
        padding-right: 5.3333%;
        padding-left: 5.3333%;
    }
    ._viewfull .section-wrap._60 {
        padding-right: 5.3333%;
        padding-left: 5.3333%;
    }
    .section-inner {
        padding-left: 0;
    }
    
    /* contents
    -------------------------------------------------- */
    .contents-wrap {
        padding-bottom: 80px;
    }
    .contents-inner {
        padding-top: 30px;
        margin-top: 30px;
    }
    .contents-inner-txt p {
        margin-top: 0.65em;
    }
    
    /* contents-col2 */
    .contents-col2 {
        display: block;
    }
    .contents-col2-side {
        width: 100%;
    }
    .contents-col2-main {
        width: 100%;
    }
    /*/////////////////////////////////////////////////////////////////////////////


              // header //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
    /* header
	-------------------------------------------------- */
    .header {
        width: 100%;
    }
    .header::after {
        display: none;
    }
    .header-logo {
        width: 150px;
        position: absolute;
        left: 4%;
        top: 20px;
    }
    
    /* menu-trigger
    -------------------------------------------------- */
    .menu-trigger {
        left: inherit;
        right: 0;
        top: 10px;
    }
    
    /* g-nav
    -------------------------------------------------- */
    .g-nav {
        display: none;
    }
    
    /* fixed nav
    -------------------------------------------------- */
    .fixed-inner {
        width: 88%;
        margin-left: 12vw;
    }
    .fixed-col2 {
        padding: 80px 12% 120px;
        display: block;
        position: relative;
        left: 0;
        top: 0;
        transform: none;
    }
    .fixed-nav nav {
        width: 100%;
        border-right: none;
    }
    .fixed-nav .m-nav-wrap {
        display: block;
    }
    .fixed-nav .m-nav {
        margin-right: 0;
    }
    .fixed-nav .m-nav > li {
        margin: 0 0 16px;
    }
    .fixed-nav .m-nav > li a {
        font-size: 1.6rem;
    }
    .fixed-nav .m-nav > li a ._en {
        font-size: 1.0rem;
        padding-bottom: 0;
    }
    .fixed-nav .m-nav-sub {
        padding: 0 0 4px 22px;
        margin: 10px 0 20px;
    }
    .fixed-nav .m-nav-sub > li {
        padding: 6px 0 0;
    }
    .fixed-nav .m-nav-sub > li a {
        font-size: 1.1rem;
    }
    .fixed-nav .m-btm-wrap {
        margin-top: 40px;
    }
    .fixed-nav .sns-link {
        margin: 0 20px 0 0;
    }
    .fixed-nav .m-btm-nav a {
        font-size: 1.2rem;
    }
    .fixed-info {
        width: 100%;
        font-size: 1.1rem;
        display: block;
        margin-top: 40px;
    }
    .fixed-info ._en {
        text-align: left;
        margin-top: 16px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // footer //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .footer {
        padding: 50px 0 40px;
    }
    .footer .bg-logo {
        width: 280px;
        right: -30px;
        bottom: -30px;
    }
    .footer-inner {
        padding-right: 5.3333%;
        padding-left: 5.3333%;
    }
    .footer-col2 {
        display: block;
        margin-bottom: 10px;
    }
    .ft-cont {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 40px;
    }
    .ft-nav {
        margin-left: 0;
        display: contents;
    }
    .ft-nav li {
        margin: 0 0 10px 0;
        font-size: 1.3rem;
    }
    .sns-link {
        padding-top: 16px;
        margin-left: 0;
    }
    .sns-link li {
        width: 22px;
        margin: 0;
    }
    .ft-info {
        width: 100%;
    }
    .ft-info .ft-logo {
        width: 220px;
        margin: 0 0 20px;
    }
    .ft-info .txt {
        font-size: 1.2rem;
    }
    .ft-info dl dt {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }
    .ft-info dl dt span {
        font-size: 1.2rem;
    }
    .ft-info dl dd {
        font-size: 1.2rem;
    }
    .ft-btm-nav {
        margin-bottom: 16px;
    }
    .ft-btm-nav li {
        font-size: 1.2rem;
    }
    .copyright {
        font-size: 1.2rem;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // ctaArea //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .ctaArea-col2 {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        padding: 100px 0 80px;
    }
    .ctaArea-ttl {
        width: 66px;
        padding-left: 0;
    }
    .ctaArea-list {
        width: calc(100% - 110px);
        padding-top: 48px;
        position: relative;
    }
    .ctaArea-list::before {
        width: 60px;
        opacity: 0.4;
    }
    .ctaArea-list ul {
        display: block;
        padding-top: 48px;
        margin-left: -110px;
    }
    .ctaArea-list ul li {
        width: 100%;
        padding-bottom: 26px;
        text-align: center;
    }
    .ctaArea-list ul li .en-ttl {
        font-size: 1.5rem;
        padding: 16px 0 0;
    }
    .ctaArea-list .tel .numb {
        font-size: 2.8rem;
        margin-top: 6px;
    }
    .ctaArea-list .tel .txt {
        font-size: 1.3rem;
    }
    .ctaArea-list .contact a {
        display: inline-block;
        font-size: 1.5rem;
        padding: 22px 30px;
        margin-top: 18px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // common parts //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
    /* ===============================================
        decoration
	=============================================== */
    .deco-line::before {
        width: 60px;
    }
    
    /* ===============================================
        breadcrumb
	=============================================== */
    .breadcrumb {
        right: 20px;
        top: 80px;
    }
    .breadcrumb li {
        font-size: 0.8rem;
        padding-right: 24px;
        margin-right: 8px;
    }
    .breadcrumb li::after {
        width: 16px;
    }
    
	/* ===============================================
        title
	=============================================== */
	
    /* page-ttl  ----------------------------- */
    .page-ttl {
        margin-left: 0;
    }
    .page-ttl-fig {
        position: sticky;
        left: 0;
        top: 0;
    }
    .page-ttl-fig::after {
        background: rgba(22, 24, 26, 0.80);
    }
    .page-ttl-fig .thumb {
        min-height: inherit;
    }
    .page-ttl-col2 {
        padding: 170px 5.3333% 100px;
        position: relative;
        right: 0;
        top: 0;
        transform: none;
        margin-top: -100vh;
    }
    .page-ttl-cont .en-ttl {
        font-size: 1.2rem;
        padding-left: 6px;
    }
    .page-ttl-cont .ttl {
        font-size: 2.4rem;
    }
    .page-ttl .page-ttl-txt {
        width: calc(100% - 78px);
        padding: 88px 12.5% 0 0;
        box-sizing: border-box;
    }
    .page-ttl-txt p {
        text-align: justify;
    }
    
    /* subpage-ttl  ----------------------------- */
    .subpage-ttl {
        padding: 130px 0 0;
    }
    .subpage-ttl-col2 {
        align-items: flex-start;
    }
    .subpage-ttl .page-ttl-cont {
        padding: 0 0 0 2%;
    }
    .subpage-ttl .page-ttl-txt {
        width: calc(100% - 78px);
        padding: 32px 0 0 18%;
        font-size: 1.2rem;
    }
    .subpage-ttl .page-ttl-cont._h220 {
        max-height: none;
    }
    
    .subpage-ttl-col2._detail {
        justify-content: flex-end;
    }
    .subpage-ttl-col2._detail .page-ttl-cont .en-ttl {
        font-size: 1.0rem;
    }
    .subpage-ttl-col2._detail .page-ttl-cont .ttl {
        font-size: 1.8rem;
    }
       
	/* sec-ttl  ----------------------------- */
    .sec-ttl {
        position: relative;
        line-height: 1.45;
        margin-bottom: 24px;
    }
    .sec-ttl .en-ttl {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    .sec-ttl .ttl {
        font-size: 2.0rem;
    }
    .sec-ttl .ttl._small {
        font-size: 2.0rem;
    }
    .sec-ttl._vertical .en-ttl {
        margin: 0 0 0 10px;
    }
    .sec-ttl._vertical .ttl .inner {
        display: block;
        margin-right: 6px;
        opacity: 0;
        transform: translateY(60px);
    }
    .sec-ttl._vertical .ttl .inner:nth-child(2) {
        margin-top: 46px;
    }
    
    /* sec-ttl-col2  ----------------------------- */
    .sec-ttl-col2 {
        display: block;
    }
    .sec-ttl-col2 .lead {
        width: 100%;
        padding-top: 0;
    }
    
    /* cont-ttl  ----------------------------- */
    .cont-ttl {
        font-size: 1.8rem;
    }
    
    /* ===============================================
	    btn
	=============================================== */
    
    /* btn  ----------------------------- */
    .btn {
        margin-top: 24px;
    }
    .btn a {
        width: 240px;
        font-size: 1.4rem;
        padding: 18px 22px;
    }
    .btn a::before {
        right: 20px;
    }
    .btn-wrap-bd::before {
        width: calc(100% - 260px);
        height: 1px;
    }
    
    /* btn-wrap  ----------------------------- */
    
    /* btn-txt  ----------------------------- */
    .btn-txt a,
    .btn-txt .btn-txt-inner {
        font-size: 1.4rem;
        padding-right: 52px;
    }
    
    /* btn-txt  ----------------------------- */
    .btn-tel a {
        width: 90%;
        font-size: 1.9rem;
        padding: 12px 0 12px 52px;
    }
    
	/* arrow  ----------------------------- */
	.arrow {
	    width: 39px;
	    height: 27px;
	}
    
    /* plus  ----------------------------- */
    
    /* btn-more  ----------------------------- */
    
    /* btn-anchor  ----------------------------- */
    
    /* ===============================================
	    sec-pagelink
	=============================================== */
    .sec-pagelink {
        padding-bottom: 30px;
    }
    .pagelink-list {
        flex-wrap: wrap;
    }
    .pagelink-item {
        width: 78%;
        margin: 0 0 32px;
    }
    .pagelink-item a {
        padding: 26px 0 0;
    }
    .pagelink-item a .sec-ttl .en-ttl {
        font-size: 1.1rem;
    }
    .pagelink-item a .sec-ttl .ttl {
        font-size: 1.6rem;
    }
    .pagelink-item a .arrow {
        right: 0;
    }
    
    /* ===============================================
	    anchor-link
	=============================================== */
    .anchor-link-wrap {
        padding: 6px;
    }
    .anchor-link {
        display: flex;
        justify-content: flex-end;
    }
    .anchor-link ul {
        display: block;
        padding-top: 24px;
    }
    .anchor-link li {
        margin: 0 5px 0 0;
    }
    .anchor-link li a {
        padding: 0 0 0 15px;
    }
    .anchor-link li a::before {
        width: 5px;
        height: 5px;
    }
    
    /* ===============================================
        fixed-anchor
	=============================================== */
    
    /* ===============================================
        parallax
	=============================================== */
    .parallax-img.thumb img {
        width: 100%;
        height: 120%;
    }
    
    /* ===============================================
        table
	=============================================== */
    dl.table {
        width: 100%;
        display: block;
        border-bottom: 1px solid #d9d9d9;
    }
    dl.table dt {
        width: 100%;
        padding: 18px 0 10px;
        color: #808080;
    }
    dl.table dd {
        width: 100%;
        border-top: none;
        padding: 0 0 10px 0;
    }
    dl.table dd p {
        padding-bottom: 8px;
    }
    
	/* ===============================================
        list-disc 
	=============================================== */
    .list-disc > li::before {
        width: 6px;
        height: 6px;
        top: 0.9em;
    }
    .list-disc._border > li {
        padding: 12px 0 12px 14px;
        font-size: 1.2rem;
    }
    .list-disc._border > li::before {
        top: 1.6em;
    }
    /*/////////////////////////////////////////////////////////////////////////////


              // Slider //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    /* Arrows */
    .slick-prev,
    .slick-next {
        width: 39px;
        height: 27px;
    }
    .slick-prev {
        left: inherit;
        right: calc(4% + 45px);
    }
    .slick-next {
        left: inherit;
        right: 4%;
    }
    .notes-slider .slick-prev,
    .notes-slider .slick-next {
        top: 34px;
    }
    
}