@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.4em;
        line-height: 2;
        letter-spacing: 0.08em;
        min-width: inherit;
    }
    
    
    /* Responsive
	-------------------------------------------------- */
    .pc {
        display: none;
    }
    .sp {
        display: inline;
    }
	
	
    /*/////////////////////////////////////////////////////////////////////////////


              // loading //
	  

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


              // layout //
	  

    /////////////////////////////////////////////////////////////////////////////*/
    
    /* container
	-------------------------------------------------- */
    
    /* section
	-------------------------------------------------- */
	.section-wrap {
        padding-right: 5.3333%;
        padding-left: 5.3333%;
    }
    .contents-inner {
        margin-bottom: 30px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // header //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
    /* header  ---------------------------------------- */
    .header {
        height: 70px;
    }
    .header-logo {
        width: 150px;
        position: absolute;
        left: 20px;
        top: 20px;
    }
    body.on .header-logo {
        width: 150px;
        top: 20px;
    }
    
    /* header-inner  ---------------------------------------- */
    .header-inner {
        display: none;
    }
    
    /* header-fix-nav  ---------------------------------------- */
    .header-fix-nav {
        position: fixed;
        right: 0;
        top: inherit;
        bottom: 0;
        z-index: 99998;
        opacity: 0;
        transition: .2s;
    }
    .motion .header-fix-nav {
        opacity: 1;
    }
    body.on .header-fix-nav {
        top: inherit;
        bottom: 0;
    }
    .header-fix-nav a {
        display: block;
        width: 220px;
        font-size: 1.2rem;
        background: #773086 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="20" viewBox="0 0 30 20"><path fill="rgb(255, 255, 255)" d="M-0.006,20.004 L-0.006,-0.000 L30.008,-0.000 L30.008,20.004 L-0.006,20.004 ZM30.004,3.112 C26.954,3.112 24.251,3.889 22.416,4.864 C20.581,3.889 18.046,3.112 14.997,3.112 C11.947,3.112 9.413,3.889 7.577,4.864 C5.742,3.889 3.044,3.112 -0.005,3.112 L-0.005,4.864 C1.797,4.864 3.985,5.208 5.702,5.970 C3.847,7.236 2.013,9.156 2.013,11.579 C2.013,14.780 4.682,17.225 7.577,17.225 C10.472,17.225 13.012,14.780 13.012,11.579 C13.012,9.156 11.308,7.236 9.453,5.970 C11.169,5.208 13.194,4.864 14.997,4.864 C16.800,4.864 18.824,5.208 20.540,5.970 C18.686,7.236 16.981,9.156 16.981,11.579 C16.981,14.780 19.522,17.225 22.416,17.225 C25.311,17.225 27.940,14.780 27.940,11.579 C27.940,9.156 26.147,7.236 24.292,5.970 C26.009,5.208 28.201,4.864 30.004,4.864 L30.004,3.112 ZM22.533,15.471 C20.887,15.471 18.844,14.185 18.844,11.535 C18.844,9.477 20.839,7.832 22.533,6.850 C24.228,7.832 26.222,9.477 26.222,11.535 C26.222,14.185 24.180,15.471 22.533,15.471 ZM7.536,15.516 C5.890,15.516 3.845,14.232 3.845,11.579 C3.845,9.522 5.841,7.878 7.536,6.895 C9.230,7.878 11.225,9.522 11.225,11.579 C11.225,14.232 9.182,15.516 7.536,15.516 Z"/></svg>') left 24px center no-repeat;
        background-size: 24px auto;
        border-radius: 4px 0 0 0;
        padding: 10px 0 8px 64px;
        box-sizing: border-box;
    }
    .header-fix-nav a .tel {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    /* menu-trigger  ---------------------------------------- */
    .menu-trigger,
    .menu-trigger .bar {
        display: block;
        transition: all .3s;
        box-sizing: border-box;
    }
    .menu-trigger {
        width: 54px;
        height: 54px;
        pointer-events: auto;
        cursor: pointer;
        position: fixed;
        right: 10px;
        top: 8px;
        box-sizing: border-box;
        z-index: 99999;
        background: #773086;
        border-radius: 50%;
    }
    .menu-trigger ._min {
        width: 100%;
        text-align: center;
        color: #ffffff;
        font-size: 0.8rem;
        letter-spacing: 0;
        position: absolute;
        top: 30px;
        left: 0;
    }
    .menu-trigger ._min .close {
        display: none;
    }
    .menu-trigger .bar {
        position: absolute;
        height: 1px;
        background: #f2f2f2;
    }
    .menu-trigger .bar:nth-of-type(1) {
        width: 30px;
        top: 20px;
        left: 12px;
    }
    .menu-trigger .bar:nth-of-type(2) {
        width: 24px;
        top: 27px;
        left: 12px;
    }
    .open .menu-trigger ._min .close {
        display: inline;
    }
    .open .menu-trigger ._min .menu {
        display: none;
    }
    .open .menu-trigger .bar:nth-of-type(1) {
        top: 22px;
        transform: rotate(30deg);
    }
    .open .menu-trigger .bar:nth-of-type(2) {
        width: 30px;
        top: 22px;
        transform: rotate(-30deg);
    }
    
    /* fixed nav
	-------------------------------------------------- */
    .fixed-nav {
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.60);
        transition: all .3s;
        z-index: 99998;
        line-height: 2;
    }
    .open .fixed-nav {
        opacity: 1;
        pointer-events: auto;
    }
    .fixed-nav a {
        color: #ffffff;
    }
    .fixed-inner {
        width: 90%;
        height: 100vh;
        margin-left: 10%;
        box-sizing: border-box;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        position: relative;
        transition: .3s;
    }
    .fixed-inner::before {
        content: "";
        width: 90%;
        height: 100%;
        background: #773086;
        position: fixed;
        right: 0;
        top: 0;
    }
    .fixed-nav nav {
        width: 100%;
        box-sizing: border-box;
        padding: 60px 8% 160px;
        position: relative;
    }
    .fixed-nav .m-nav-wrap {
        display: block;
    }
    .fixed-nav .m-nav {
        width: 100%;
    }
    .fixed-nav .m-nav > li {
        margin: 0 0 16px;
    }
    .fixed-nav .m-nav > li a {
        display: block;
        font-size: 1.8rem;
        line-height: 1.6;
    }
    .fixed-nav .m-nav .m-nav-sub {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin: 4px 0 20px;
    }
    .fixed-nav .m-nav .m-nav-sub li {
        width: 48.5%;
        margin-top: 8px;
    }
    .fixed-nav .m-nav .m-nav-sub li a {
        font-size: 1.3rem;
        letter-spacing: 0.02em;
    }
    .m-nav-btm {
        border-top: 1px solid rgba(255, 255, 255, 0.20);
        padding-top: 30px;
        margin-top: 35px;
    }
    .m-cv-nav {
        padding-bottom: 10px;
    }
    .m-cv-nav li {
        margin-bottom: 10px;
    }
    .m-cv-nav li a {
        display: block;
        width: 100%;
        font-size: 1.6rem;
        line-height: 1.6;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.60);
        padding: 10px 0 12px;
    }
    .m-cv-nav li a p span {
        font-size: 1.3rem;
    }
    .m-subnav {
        font-size: 1.3rem;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // footer //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .footer {
        padding: 60px 0 80px;
        position: relative;
    }
    .footer-col2 {
        display: block;
        margin-bottom: 20px;
    }
    .ft-cont {
        width: 100%;
    }
    .ft-cont-info dt {
        width: 180px;
        margin-bottom: 12px;
    }
    .ft-cont-info dd {
        font-size: 1.4rem;
    }
    .ft-cont-nav ul {
        justify-content: space-between;
        margin-top: 24px;
    }
    .ft-cont-nav ul li {
        width: 48%;
        font-size: 1.3rem;
        margin: 0 0 18px 0;
    }
    .ft-cont-nav ul._sub {
        margin-top: 16px;
    }
    .ft-side {
        width: 100%;
        padding: 26px 0 0;
    }
    .ft-area {
        font-size: 1.3rem;
        padding: 24px 20px 18px;
    }
    .ft-area .ttl {
        font-size: 1.8rem;
        display: block;
        position: relative;
        top: 0;
        left: 0;
        padding: 0 0 10px;
    }
    .copyright {
        font-size: 1.1rem;
    }
    
    
    /*/////////////////////////////////////////////////////////////////////////////


              // ctaArea //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .ctaArea {
        padding: 60px 0 50px;
    }
    .ctaArea-list {
        display: block;
        padding: 0;
        margin-top: 10px;
    }
    .ctaArea-list li {
        width: 100%;
        padding: 30px 0;
    }
    .ctaArea-list li:first-child {
        border-right: none;
        border-bottom: 1px solid #babdbe;
    }
    .ctaArea-list li .ttl {
        font-size: 1.8rem;
        padding-bottom: 16px;
    }
    .ctaArea-list li .tel a {
        display: inline-block;
        font-size: 3.2rem;
        padding: 0 0 4px 42px;
        background-size: 30px auto;
    }
    .ctaArea-list li .mail a {
        display: block;
        width: 84%;
        margin: 4px auto 0;
    }
    .ctaArea-list li .mail a span {
        display: inline-block;
        line-height: 60px;
        padding-left: 36px;
        background-size: 22px auto;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // common parts //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
    /* ===============================================
        breadcrumb
	=============================================== */
    .breadcrumb {
        padding: 60px 0 20px;
    }
    .breadcrumb li {
        font-size: 1.2rem;
        padding-right: 14px;
        margin-right: 8px;
    }
    
	/* ===============================================
        title
	=============================================== */
	
	/* page-ttl  ---------------------------------------- */
    .page-ttl {
        padding: 0;
    }
    .page-ttl .wave {
        top: 30px;
    }
    .page-ttl-inner {
        padding: 30px 4% 0;
    }
    .page-ttl-inner > .ttl {
        font-size: 2.8rem;
        padding: 36px 0 0;
        position: relative;
        text-shadow:  0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
    }
    .page-ttl-inner > .ttl .sub {
        font-size: 1.4rem;
    }
    .page-ttl .lead {
        font-size: 1.4rem;
        margin: 10px 0 0;
    }
    .page-ttl-fig {
        padding: 40px 10px 0;
    }
    .page-ttl-fig .thumb::after {
        padding-top: 56.25%;
    }
    
    /* page-ttl-col2  ---------------------------------------- */
    .page-ttl-col2 {
        display: block;
    }
    .page-ttl-col2._plan {
        align-items: stretch;
    }
    .page-ttl-col2-fig {
        width: 100%;
        display: none;
    }
    .page-ttl-col2-fig .thumb {
        height: 240px;
        border-radius: 0;
    }
    .page-ttl-col2-fig._plan {
        display: block;
    }
    .page-ttl-col2-fig._plan .thumb {
        height: auto;
    }
    .page-ttl-col2-fig._plan .thumb::after {
        padding-top: 60%;
    }
    .page-ttl-col2 .page-ttl-inner {
        width: 100%;
        padding: 30px 4% 0;
        box-sizing: border-box;
    }
    .page-ttl-col2-fig-sp {
        display: block;
        padding: 36px 0 0;
    }
    .page-ttl-col2-fig-sp .thumb {
        border-radius: 4px;
    }
    .page-ttl-col2-fig-sp .thumb::after {
        padding-top: 66.6666%;
    }
    .page-ttl-col2 .vertical-ttl {
        padding: 50px 0 0;
    }
    .page-ttl-col2 .vertical-ttl p {
        font-size: 2.0rem;
        line-height: 1.9;
    }
    .page-ttl-col2-inner-fig {
        padding-top: 26px;
    }
    .page-ttl-col2-inner-fig .thumb {
        width: 36%;
        border-radius: 4px;
    }
    .page-ttl-inner-cont {
        position: relative;
    }
    .page-ttl-col3-inner-fig {
        display: block;
        position: absolute;
        left: 0;
        top: 40px;
        width: 22%;
    }
    .page-ttl-col3-inner-fig .thumb {
        border-radius: 4px;
    }
    .page-ttl-col3-inner-fig .thumb::after {
        padding-top: 80%;
    }
    
    /* anchor-link  ---------------------------------------- */
    .anchor-link {
        margin-top: 20px;
    }
    .anchor-link li {
        width: 30%;
        margin: 0 1.5%;
    }
    .anchor-link li a {
        font-size: 1.4rem;
        padding: 12px 0;
    }
    
    /* sec-ttl  ---------------------------------------- */
    .sec-ttl {
        position: relative;
        text-align: center;
    }
    .sec-ttl._left {
        text-align: left;
    }
    .sec-ttl .ttl {
        font-size: 2.5rem;
        padding: 32px 0 0;
    }
    .sec-ttl._left .ttl {
        padding: 0 0 0 40px;
        background-position: top 8px left;
    }
    .sec-ttl .lead {
        font-size: 1.4rem;
        margin-top: 12px;
    }
    
    /* bd-ttl  ---------------------------------------- */
    .bd-ttl {
        font-size: 1.6rem;
    }
    .bd-ttl span {
        padding-right: 80px;
    }
    .bd-ttl span::after {
        content: "";
        width: 60px;
        height: 1px;
        background: #cccccc;
        position: absolute;
        right: 0;
        top: 50%;
    }
    
    /* cont-ttl  ---------------------------------------- */
    .cont-ttl {
        text-align: center;
    }
    .cont-ttl .ttl {
        display: inline-block;
        position: relative;
        font-size: 2.4rem;
        letter-spacing: 0.12em;
        padding: 0 50px;
    }
    .cont-ttl .ttl span._small {
        font-size: 1.8rem;
    }
    .cont-ttl .ttl::before,
    .cont-ttl .ttl::after {
        width: 32px;
        height: 4px;
        transform: translateY(-40%);
        opacity: 0.6;
    }
    .cont-ttl .lead {
        font-size: 1.4rem;
        margin: 8px 0 0;
    }
    .cont-ttl._left .ttl {
        padding: 0 0 20px;
    }
    
    /* g-ttl  ---------------------------------------- */
    .g-ttl {
        font-size: 2.0rem;
        margin-top: 24px;
    }
    
    /* sub-ttl  ---------------------------------------- */
    .sub-ttl {
        font-size: 1.8rem;
        margin-bottom: 8px;
    }
    
    /* ===============================================
	    btn
	=============================================== */
    
    /* btn  ---------------------------------------- */
    .btn {
        margin-top: 26px;
    }
    .btn a {
        width: 82%;
        padding: 12px 20px;
    }
    .btn a::before,
    .btn a::after {
        width: 30px;
        height: 30px;
        right: 12px;
    }
    
	/* btn-txt  ---------------------------------------- */
    .btn-txt a,
    .btn-txt span {
        padding-left: 32px;
    }
    
    /* ===============================================
        parallax
	=============================================== */
    
    /* ===============================================
        table
	=============================================== */
    
	/* ===============================================
        list-disc 
	=============================================== */
    
    
    /*/////////////////////////////////////////////////////////////////////////////


              // Slider //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    /* Arrows */
    .slick-prev,
    .slick-next {
        width: 34px;
        height: 34px;
        margin-top: -17px;
    }
    .slick-prev {
        left: 6px;
    }
    .slick-next {
        right: 6px;
    }
    
}