@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.5rem;
        min-width: inherit;
        letter-spacing: 0.06em;
    }
    /* Responsive
	-------------------------------------------------- */
    .pc {
        display: none;
    }
    .sp {
        display: inline;
    }
	
	
    /*/////////////////////////////////////////////////////////////////////////////


              // loading //
	  

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


              // layout //
	  

    /////////////////////////////////////////////////////////////////////////////*/
    /* section
	-------------------------------------------------- */
    .section-wrap {
        padding-bottom: 80px;
    }
	.section-inner {
	    padding-right: 5.3333%;
	    padding-left: 5.3333%;
	}
    .section-low-wrap {
        width: 100%;
        padding-right: 5.9701%;
	    padding-left: 5.9701%;
        box-sizing: border-box;
    }
    .section-low-wrap._non {
        padding-right: 0;
	    padding-left: 0;
    }
    .section-low-inner {
        margin: 20px 0;
    }
    .flex-col2 {
        display: block;
    }
    .section-box {
        padding: 20px 0;
        margin-bottom: 45px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // header //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
    /* header
	-------------------------------------------------- */
	.header-logo {
	    width: 120px;
        left: 4%;
        top: 15px;
	}
	
    /* nav
	-------------------------------------------------- */
	.header-inner {
		display: none;
	}
	
    /* menu-trigger
    -------------------------------------------------- */
    .menu-trigger,
    .menu-trigger span {
        display: block;
        transition: all .3s;
        box-sizing: border-box;
    }
    .menu-trigger {
        width: 55px;
        height: 55px;
        pointer-events: auto;
        cursor: pointer;
        position: fixed;
        right: 10px;
        top: 15px;
        z-index: 999999;
        box-sizing: border-box;
    }
    .on .menu-trigger,
    .sub .menu-trigger,
    .open .menu-trigger{
        mix-blend-mode: difference;
    }
    .menu-trigger span {
        position: absolute;
        left: 10px;
        width: 35px;
        height: 1px;
        background: #ffffff;
    }
    .menu-trigger span:nth-of-type(1) {
        top: 19px;
    }
    .menu-trigger span:nth-of-type(2) {
        top: 27px;
    }
    .menu-trigger span:nth-of-type(3) {
        bottom: 19px;
    }
    .open .menu-trigger span:nth-of-type(1) {
        top: 27px;
        transform: rotate(30deg);
    }
    .open .menu-trigger span:nth-of-type(2) {
        opacity: 0;
    }
    .open .menu-trigger span:nth-of-type(3) {
        bottom: 27px;
        transform: rotate(-30deg);
    }
	
    /* fixed nav
	-------------------------------------------------- */
    .fixed-nav {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: #FFFFFF;
        transition: all .3s;
        z-index: 99998;
        opacity: 0;
        pointer-events: none;
    }
    .open .fixed-nav {
        opacity: 1;
        pointer-events: auto;
    }
	.fixed-inner {
	    width: 100%;
	    height: 100vh;
	    left: 0;
		padding: 0 6.6666%;
        box-sizing: border-box;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        position: relative;
	}
	.fixed-nav .m-nav-wrap {
		padding: 60px 0 180px;
        font-size: 1.3rem;
        line-height: 1.5;
        box-sizing: border-box;
	}
    .fixed-nav .m-nav {
	    display: block;
	    padding-bottom: 30px;
	}
	.fixed-nav .m-nav li.m-nav__item {
	    width: 100%;
	    overflow: hidden;
        border-bottom: 1px solid #cccccc;
	}
	.fixed-nav .m-nav li.m-nav__item > a {
	    display: block;
        position: relative;
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        padding: 12px 0 12px;
	}
    .fixed-nav .m-nav-inr {
	    display: block;
        padding: 0 0 8px;
	}
    .fixed-nav .m-nav-inr li {
        margin-bottom: 10px;
    }
	.fixed-nav .m-nav-inr li a {
	    padding: 0 0 0 18px;
	    font-size: 1.4rem;   
        position: relative;
	}
	.fixed-nav .m-nav-inr li a::after {
	    content: "";
	    width: 8px;
		height: 1px;
        position: absolute;
		left: 0;
	    top: 50%;
		background: #cccccc;
	}
    .fixed-nav .m-nav-inr li:last-child::after {
        display: block;
    }
    .m-nav-cv {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }
    .m-nav-cv li {
        width: 49.2%;
        text-align: center;
        border-radius: 4px;
    }
    .m-nav-cv li a {
        display: block;
        text-align: center;
        border-radius: 4px;
        font-size: 1.4rem;
        color: #ffffff;
        line-height: 48px;
        padding-bottom: 2px;
    }
    .m-nav-cv li:nth-child(1) a {
        background: #e40d0d;
    }
    .m-nav-cv li:nth-child(2) a {
        background: #1a1a1a;
    }
    .m-subnav {
        margin-top: 30px;
    }
    .m-subnav li {
        margin-top: 8px;
    }
    /*/////////////////////////////////////////////////////////////////////////////


              // footer //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .footer {
        padding: 40px 0 40px;
        position: relative;
    }
    .footer-top {
        display: block;
        padding-bottom: 60px;
    }
	
	/* ft-info
    -------------------------------------------------- */
    .ft-info {
        width: 100%;
        margin-bottom: 30px;
    }
    .ft-logo {
        width: 160px;
        margin-bottom: 15px;
    }
    .ft-info dl {
        margin-bottom: 25px;
    }
    .ft-info dt {
        font-size: 1.4rem;
    }
    .ft-info dd {
        font-size: 1.4rem;
        margin-top: 0px;
    }
    .sns-list li {
        width: 24px;
        margin-right: 20px;
    }
    
    
    /* ft-nav
    -------------------------------------------------- */
    .ft-nav {
        width: 100%;
        display: block;
        border-top: 1px solid #4d4d4d;
    }
    .ft-nav ul.ft-nav-wrap {
        margin-left: 0;
    }
    .ft-nav ul.ft-nav-wrap > li {
        font-size: 1.5rem;
        margin-bottom: 0;
        padding: 10px 0;
        border-bottom: 1px solid #4d4d4d;
    }
    .ft-nav .ft-nav-inner {
        margin: 6px 0 8px;
    }
    .ft-nav .ft-nav-inner li {
        margin-bottom: 4px;
    }
    .ft-nav .ft-nav-inner li > a {
        font-size: 1.3rem;
    }
    
    /* footer-btm
    -------------------------------------------------- */
    .footer-btm p {
        font-size: 1.2rem;
    }
    .footer-btm ul {
        display: block;
    }
    .footer-btm ul li {
        font-size: 1.2rem;
        margin: 0 0 8px;
    }
   .footer-btm .copyright {
       font-size: 1.0rem;
       margin-top: 20px;
    }
    .footer .pagetop {
        right: 5.3333%;
        bottom: 80px;
    }
    .footer .pagetop a {
        width: 60px;
        height: 60px;
    }

	/*/////////////////////////////////////////////////////////////////////////////


              // ctaArea //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	.ctaArea {
	    padding: 60px 0 15px;
	    background: #ffffff;
	    position: relative;
	}
	.ctaArea-flex {
	    display: block;
	}
	.ctaArea-flex li {
	    width: 100%;
	}
	.ctaArea-flex li a {
	    display: block;
	    border-top: 2px solid #e40d0d;
	    padding: 35px 60px 40px 0;
	}
	.ctaArea-ttl {
	    margin-bottom: 10px;
	}
	.ctaArea-ttl .enttl {
	    font-size: 1.2rem;
	}
	.ctaArea-ttl .ttl {
	    font-size: 2.2rem;
        line-height: 1.6;
	    font-weight: 700;
	}
	.ctaArea-flex li a .arrow {
	    right: 0;
	    bottom: inherit;
        top: 50% ;
        transform: translateY(-50%);
	}
	.arrow {
	    display: block;
	    width: 40px;
	    height: 40px;
        background-size: 8px auto;
	}
	.arrow._wht {
        background-size: 8px auto;
	}
    /*/////////////////////////////////////////////////////////////////////////////


              // common parts //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
	/* ===============================================
        title
	=============================================== */
	
	/* page-ttl
	-------------------------------------------------- */
    .page-ttl {
        width: 100%;
        height: auto;
        padding: 160px 0 40px;
        margin-bottom: 60px;
        box-sizing: border-box;
        position: relative;
    }
    .sub .page-ttl {
        height: auto;
        padding: 140px 0 40px;
        margin-bottom: 45px;
    }
    .page-ttl-inner {
        padding: 0 5.3333%;
    }
    .page-ttl-inner._flex {
        display: block;
    }
    .page-ttl-cont .enttl {
        font-size: 1.3rem;
    }
    .page-ttl-cont .ttl {
        font-size: 3.2rem;
        letter-spacing: 0.08em;
        padding: 12px 0 25px;
    }
    .sub .page-ttl-cont .ttl {
        font-size: 3.4rem;
        padding: 7px 0 20px;
    }
    .sub .page-ttl-cont .ttl._detail {
        font-size: 2.8rem;
        padding: 10px 0 22px;
    }
    .sub .page-ttl-cont .enttl .date {
        font-size: 1.3rem;
        margin-left: 14px;
    }
    
	/* breadcrumb
	-------------------------------------------------- */
    .breadcrumb {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }
    .breadcrumb li {
        padding-right: 14px;
        margin-right: 6px;
        font-size: 1.1rem;
    }
    .breadcrumb li::after {
        background-size: 5px auto;
    }
    .sub .breadcrumb li::after {
        background-size: 5px auto;
    }
    
    /* page-subnav
	-------------------------------------------------- */
    .page-subnav {
        width: 100%;
        padding: 0 0 10px 30px;
        margin-top: 65px;
    }
    .page-subnav-ttl {
        font-size: 1.7rem;
        padding-bottom: 8px;
        margin-bottom: 22px;
    }
    .page-subnav li {
        margin: 14px 0 0;
    }
    .page-subnav li a {
        padding-left: 40px;
    }
    .page-subnav li a::before,
    .page-subnav li a::after {
        width: 26px;
        height: 26px;
    }
    .page-subnav li a::after {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="12" height="15" viewBox="0 0 12 15"><path fill-rule="evenodd" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M2.891,2.035 L8.119,7.003 L2.891,11.971 "/></svg>') no-repeat right 9px center;
        background-size: 7px auto;
    }
    
    /* detail-page-top
    -------------------------------------------------- */
    .detail-page-top {
        padding: 85px 0 0;
        margin-bottom: 10px;
    }
    
	/* page-lead
	-------------------------------------------------- */
    .page-lead {
        font-size: 1.5rem;
        margin-bottom: 50px;
         text-align: left;
    }
    .page-lead .ttl {
        font-size: 2.3rem;
        margin-bottom: 16px;
         text-align: center;
    }
    
	/* sec-ttl
	-------------------------------------------------- */
    .sec-ttl-wrap {
        display: block;
    }
    .sec-ttl .enttl {
        font-size: 1.3rem;
    }
    .sec-ttl .ttl {
        font-size: 2.6rem;
        padding-top: 3px;
    }
    .sec-ttl + .txt {
        margin-top: 14px;
    }
    .sec-ttl-wrap .lead {
        font-size: 1.5rem;
        margin-top: 14px;
    }
    
    /* sec-subttl
    -------------------------------------------------- */
    .sec-subttl {
    }
    .sec-subttl .ttl {
        font-size: 2.4rem;
        margin-right: 15px;
    }
    .sec-subttl .enttl {
        font-size: 1.2rem;
    }
    
    /* article-ttl
    -------------------------------------------------- */
    .article-ttl {
        font-size: 2.2rem;
        margin-bottom: 10px;
    }
    .article-lead {
        font-size: 1.5rem;
    }
    .article-lead + .btn {
        margin-top: 25px;
    }
    
	/* txt-slider 
    -------------------------------------------------- */
    .txt-slider li {
        font-size: 8.8rem;
    }

    /* ===============================================
	    btn
	=============================================== */
    /* btn
	-------------------------------------------------- */
    .btn a,
    .btn .inner {
        width: 240px;
        padding: 13px 45px 13px 22px;
    }
    .btn a::after {
        top: 13px;
    }
    
	/* btn-txt
	-------------------------------------------------- */
	
    /* ===============================================
        content-col2
	=============================================== */
    .content-col2 {
        display: block;
        margin-bottom: 60px;
    }
    .content-col2-side {
        width: 100%;
        position: static;
    }
    .content-col2-main {
        width: 100%;
    }
    .content-col2-main._w100 {
        width: 100vw;
        margin-left: -5.3333vw;
    }
    .content-block {
        padding: 32px 0 0;
        margin-top: 50px;
    }
    .content-block::before {
        width: 40px;
    }
    .content-block::after {
        width: calc(100% - 45px);
    }
    .cont-ttl {
        margin-bottom: 26px;
    }
    .cont-ttl._flex {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .cont-ttl .ttl {
        font-size: 2.3rem;
    }
    .cont-ttl .lead {
        font-size: 1.5rem;
        margin-top: 12px;
    }
    
    /* ===============================================
        anchor-link
	=============================================== */
    .anchor-link {
        display: none;
    }
    .archive-nav .anchor-link-ttl {
        margin-bottom: 0;
        padding: 0;
        border-top: none;
    }
    
    /* ===============================================
        page-nav
	=============================================== */
    .page-nav {
        padding: 32px 25px 30px;
        margin-bottom: 50px;
    }
    .page-nav-ttl {
        margin-bottom: 18px;
    }
    .page-nav-ttl .ttl {
        font-size: 1.4rem;
    }
    .page-nav-ttl .enttl {
        font-size: 2.6rem;
        letter-spacing: 0;
    }
    .page-nav ul {
        display: block;
        border-top: 1px solid #cccccc;
    }
    .page-nav ul li {
        width: 100%;
    }
    .page-nav ul li a {
        font-size: 1.6rem;
        padding: 20px 0 20px 23px;
        border-top: none;
    }
    .page-nav ul li.ac a {
        border-top: none;
    }
    
    /* ===============================================
        parallax
	=============================================== */
	
	/* ===============================================
        pagelink
	=============================================== */

    
    /* ===============================================
        table
	=============================================== */
    dl.table {
    }
    dl.table dt {
        width: 23%;
        font-size: 1.4rem;
        padding: 22px 12px 22px 0;
    }
    dl.table dt::after {
        height: 40px;
    }
    dl.table dd {
        width: 77%;
        font-size: 1.4rem;
        border-top: 1px solid #cccccc;
        padding: 22px 0 14px 20px;
        box-sizing: border-box;
    }
    dl.table dd p {
        padding-bottom: 10px;
    }
    
    table.type01 th,
    table.type01 td {
        padding: 8px 6px;
    }
    table.type01 th {
        font-size: 1.2rem;
    }
    table.type01 td {
        font-size: 1.2rem;
    }
    table.type01 .w17 {
        width: 19%;
    }
    table.type01 .w32 {
        width: 24%;
    }
	/* ===============================================
        list-disc 
	=============================================== */
    
	
    /*/////////////////////////////////////////////////////////////////////////////


              // Slider //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	/* Arrows */
    .slick-prev,
    .slick-next {
        width: 45px;
        height: 45px;
        bottom: inherit;
        top: 21%; 
    }
    .slick-prev {
        left: -3.7333vw;
    }
    .slick-next {
        left: inherit;
        right: -3.7333vw;
    }
    .flow-slider .slick-prev,
    .flow-slider .slick-next {
        top: 30%;
    }
    .flow-slider .slick-prev {
        left: 2px;
    }
    .flow-slider .slick-next {
        left: inherit;
        right: 2px;
    }
    
    /* Dots */
    .slick-dots {
        right: 3.2%;
        width: 8px;
    }
    .slick-dots li {
        width: 8px;
        height: 8px;
        margin: 16px 0 !important;
    }
    .slick-dots li button {
        width: 8px;
        height: 8px;
    }
}